@tenphi/tasty 0.5.1 → 0.5.2

package/README.md

@@ -462,7 +462,8 @@ Open-source React UI kit built on Tasty + React Aria. 100+ production components
 
 ## Documentation
 
-- **[Runtime API (tasty)](docs/tasty.md)** — Full runtime styling documentation: component creation, state mappings, sub-elements, variants, hooks, configuration, and style property reference
+- **[Runtime API (tasty)](docs/tasty.md)** — Full runtime styling documentation: component creation, state mappings, sub-elements, variants, hooks, and configuration
+- **[Style Properties](docs/styles.md)** — Complete reference for all enhanced style properties: syntax, values, modifiers, and recommendations
 - **[Zero Runtime (tastyStatic)](docs/tasty-static.md)** — Build-time static styling: Babel plugin setup, Next.js integration, and static style patterns
 - **[Style Injector](docs/injector.md)** — Internal CSS injection engine: `inject()`, `injectGlobal()`, `injectRawCSS()`, `keyframes()`, deduplication, reference counting, cleanup, SSR support, and Shadow DOM
 - **[Debug Utilities](docs/debug.md)** — Runtime CSS inspection via `tastyDebug`: CSS extraction, element inspection, cache metrics, chunk breakdown, and performance monitoring

package/dist/styles/inset.d.ts

@@ -41,7 +41,9 @@ declare function insetStyle({
   right?: string | number | boolean;
   bottom?: string | number | boolean;
   left?: string | number | boolean;
-}): Record<string, string>;
+}): Record<string, string> | {
+  inset: string;
+};
 declare namespace insetStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/inset.js

@@ -12,25 +12,39 @@ function parseInsetValue(value) {
 	return values[0] || "0";
 }
 /**
-* Parse inset value with optional directions (like "1x top" or "2x left right")
+* Extract values and directions from a single parsed group.
 */
-function parseDirectionalInset(value) {
-	if (typeof value === "number") return {
-		values: [`${value}px`],
-		directions: []
-	};
-	if (!value) return {
-		values: [],
-		directions: []
-	};
-	if (value === true) value = "0";
-	const { values = [], mods = [] } = parseStyle(value).groups[0] ?? {};
+function extractGroupData(group) {
+	const { values = [], mods = [] } = group;
 	return {
 		values: values.length ? values : ["0"],
 		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 inset output shorthand.
+*/
+function optimizeInset(dirs) {
+	const { top, right, bottom, left } = dirs;
+	if (top === right && right === bottom && bottom === left) return { inset: top };
+	if (top === bottom && left === right) return { inset: `${top} ${left}` };
+	return { inset: `${top} ${right} ${bottom} ${left}` };
+}
+/**
 * Inset style handler.
 *
 * IMPORTANT: This handler uses individual CSS properties (top, right, bottom, left)
@@ -78,54 +92,48 @@ function insetStyle({ inset, insetBlock, insetInline, top, right, bottom, left }
 		}
 		return result;
 	}
-	let [topVal, rightVal, bottomVal, leftVal] = [
-		"auto",
-		"auto",
-		"auto",
-		"auto"
-	];
+	const dirs = {
+		top: "auto",
+		right: "auto",
+		bottom: "auto",
+		left: "auto"
+	};
 	if (inset != null) {
-		const { values, directions } = parseDirectionalInset(inset);
-		if (values.length) if (directions.length === 0) {
-			topVal = values[0];
-			rightVal = values[1] || values[0];
-			bottomVal = values[2] || values[0];
-			leftVal = values[3] || values[1] || values[0];
-		} else directions.forEach((dir, i) => {
-			const val = values[i] ?? values[0];
-			if (dir === "top") topVal = val;
-			else if (dir === "right") rightVal = val;
-			else if (dir === "bottom") bottomVal = val;
-			else if (dir === "left") leftVal = val;
-		});
+		if (typeof inset === "number") dirs.top = dirs.right = dirs.bottom = dirs.left = `${inset}px`;
+		else if (inset === true) inset = "0";
+		if (typeof inset === "string" && inset) {
+			const groups = parseStyle(inset).groups ?? [];
+			for (const group of groups) {
+				const { values, directions } = extractGroupData(group);
+				applyGroup(dirs, values, directions);
+			}
+		}
 	}
 	if (insetBlock != null) {
 		const val = parseInsetValue(insetBlock);
-		if (val) topVal = bottomVal = val;
+		if (val) dirs.top = dirs.bottom = val;
 	}
 	if (insetInline != null) {
 		const val = parseInsetValue(insetInline);
-		if (val) leftVal = rightVal = val;
+		if (val) dirs.left = dirs.right = val;
 	}
 	if (top != null) {
 		const val = parseInsetValue(top);
-		if (val) topVal = val;
+		if (val) dirs.top = val;
 	}
 	if (right != null) {
 		const val = parseInsetValue(right);
-		if (val) rightVal = val;
+		if (val) dirs.right = val;
 	}
 	if (bottom != null) {
 		const val = parseInsetValue(bottom);
-		if (val) bottomVal = val;
+		if (val) dirs.bottom = val;
 	}
 	if (left != null) {
 		const val = parseInsetValue(left);
-		if (val) leftVal = val;
+		if (val) dirs.left = val;
 	}
-	if (topVal === rightVal && rightVal === bottomVal && bottomVal === leftVal) return { inset: topVal };
-	if (topVal === bottomVal && leftVal === rightVal) return { inset: `${topVal} ${leftVal}` };
-	return { inset: `${topVal} ${rightVal} ${bottomVal} ${leftVal}` };
+	return optimizeInset(dirs);
 }
 insetStyle.__lookupStyles = [
 	"inset",

package/dist/styles/inset.js.map

@@ -1 +1 @@
-{"version":3,"file":"inset.js","names":[],"sources":["../../src/styles/inset.ts"],"sourcesContent":["import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\n\n/**\n * Parse an inset value and return the first processed value\n */\nfunction parseInsetValue(value: string | number | boolean): string | null {\n  if (typeof value === 'number') return `${value}px`;\n  if (!value) return null;\n  if (value === true) value = '0';\n\n  const { values } = parseStyle(value).groups[0] ?? { values: [] };\n\n  return values[0] || '0';\n}\n\n/**\n * Parse inset value with optional directions (like \"1x top\" or \"2x left right\")\n */\nfunction parseDirectionalInset(value: string | number | boolean): {\n  values: string[];\n  directions: string[];\n} {\n  if (typeof value === 'number') {\n    return { values: [`${value}px`], directions: [] };\n  }\n  if (!value) return { values: [], directions: [] };\n  if (value === true) value = '0';\n\n  const { values = [], mods = [] } = parseStyle(value).groups[0] ?? {};\n\n  return {\n    values: values.length ? values : ['0'],\n    directions: filterMods(mods, DIRECTIONS),\n  };\n}\n\n/**\n * Inset style handler.\n *\n * IMPORTANT: This handler uses individual CSS properties (top, right, bottom, left)\n * when only individual direction props are specified. This allows CSS cascade to work\n * correctly when modifiers override only some directions.\n *\n * Example problem with using `inset` shorthand everywhere:\n *   styles: {\n *     top: { '': 0, 'side=bottom': 'initial' },\n *     right: { '': 0, 'side=left': 'initial' },\n *     bottom: { '': 0, 'side=top': 'initial' },\n *     left: { '': 0, 'side=right': 'initial' },\n *   }\n *\n * If we output `inset` for both cases:\n *   - Default: inset: 0 0 0 0\n *   - side=bottom: inset: initial auto auto auto  ← WRONG! Overrides all 4 directions\n *\n * With individual properties:\n *   - Default: top: 0; right: 0; bottom: 0; left: 0\n *   - side=bottom: top: initial  ← CORRECT! Only overrides top\n *\n * The `inset` shorthand is only used when the base `inset` prop is specified\n * OR when `insetBlock`/`insetInline` are used (which imply setting pairs).\n */\nexport function insetStyle({\n  inset,\n  insetBlock,\n  insetInline,\n  top,\n  right,\n  bottom,\n  left,\n}: {\n  inset?: string | number | boolean;\n  insetBlock?: string | number | boolean;\n  insetInline?: string | number | boolean;\n  top?: string | number | boolean;\n  right?: string | number | boolean;\n  bottom?: string | number | boolean;\n  left?: string | number | boolean;\n}) {\n  // If no props are defined, return empty object\n  if (\n    inset == null &&\n    insetBlock == null &&\n    insetInline == null &&\n    top == null &&\n    right == null &&\n    bottom == null &&\n    left == null\n  ) {\n    return {};\n  }\n\n  // When only individual direction props are used (no inset, insetBlock, insetInline),\n  // output individual CSS properties to allow proper CSS cascade with modifiers\n  const onlyIndividualProps =\n    inset == null && insetBlock == null && insetInline == null;\n\n  if (onlyIndividualProps) {\n    const result: Record<string, string> = {};\n\n    if (top != null) {\n      const val = parseInsetValue(top);\n      if (val) result['top'] = val;\n    }\n    if (right != null) {\n      const val = parseInsetValue(right);\n      if (val) result['right'] = val;\n    }\n    if (bottom != null) {\n      const val = parseInsetValue(bottom);\n      if (val) result['bottom'] = val;\n    }\n    if (left != null) {\n      const val = parseInsetValue(left);\n      if (val) result['left'] = val;\n    }\n\n    return result;\n  }\n\n  // When inset, insetBlock, or insetInline is used, use the shorthand approach\n  // Initialize all directions to auto\n  let [topVal, rightVal, bottomVal, leftVal] = ['auto', 'auto', 'auto', 'auto'];\n\n  // Priority 1 (lowest): inset\n  if (inset != null) {\n    const { values, directions } = parseDirectionalInset(inset);\n\n    if (values.length) {\n      if (directions.length === 0) {\n        topVal = values[0];\n        rightVal = values[1] || values[0];\n        bottomVal = values[2] || values[0];\n        leftVal = values[3] || values[1] || values[0];\n      } else {\n        // Assign values to directions in the order they appear\n        // e.g., 'right 1x top 0' → right: 1x, top: 0\n        directions.forEach((dir, i) => {\n          const val = values[i] ?? values[0];\n          if (dir === 'top') topVal = val;\n          else if (dir === 'right') rightVal = val;\n          else if (dir === 'bottom') bottomVal = val;\n          else if (dir === 'left') leftVal = val;\n        });\n      }\n    }\n  }\n\n  // Priority 2 (medium): insetBlock/insetInline\n  if (insetBlock != null) {\n    const val = parseInsetValue(insetBlock);\n    if (val) topVal = bottomVal = val;\n  }\n  if (insetInline != null) {\n    const val = parseInsetValue(insetInline);\n    if (val) leftVal = rightVal = val;\n  }\n\n  // Priority 3 (highest): individual directions\n  if (top != null) {\n    const val = parseInsetValue(top);\n    if (val) topVal = val;\n  }\n  if (right != null) {\n    const val = parseInsetValue(right);\n    if (val) rightVal = val;\n  }\n  if (bottom != null) {\n    const val = parseInsetValue(bottom);\n    if (val) bottomVal = val;\n  }\n  if (left != null) {\n    const val = parseInsetValue(left);\n    if (val) leftVal = val;\n  }\n\n  // Optimize output: 1 value if all same, 2 values if top==bottom && left==right\n  if (topVal === rightVal && rightVal === bottomVal && bottomVal === leftVal) {\n    return { inset: topVal };\n  }\n  if (topVal === bottomVal && leftVal === rightVal) {\n    return { inset: `${topVal} ${leftVal}` };\n  }\n\n  return { inset: `${topVal} ${rightVal} ${bottomVal} ${leftVal}` };\n}\n\ninsetStyle.__lookupStyles = [\n  'inset',\n  'insetBlock',\n  'insetInline',\n  'top',\n  'right',\n  'bottom',\n  'left',\n];\n"],"mappings":"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"}
+{"version":3,"file":"inset.js","names":[],"sources":["../../src/styles/inset.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 an inset value and return the first processed value\n */\nfunction parseInsetValue(value: string | number | boolean): string | null {\n  if (typeof value === 'number') return `${value}px`;\n  if (!value) return null;\n  if (value === true) value = '0';\n\n  const { values } = parseStyle(value).groups[0] ?? { values: [] };\n\n  return values[0] || '0';\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 : ['0'],\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 inset output shorthand.\n */\nfunction optimizeInset(dirs: Record<Direction, string>): { inset: string } {\n  const { top, right, bottom, left } = dirs;\n  if (top === right && right === bottom && bottom === left) {\n    return { inset: top };\n  }\n  if (top === bottom && left === right) {\n    return { inset: `${top} ${left}` };\n  }\n  return { inset: `${top} ${right} ${bottom} ${left}` };\n}\n\n/**\n * Inset style handler.\n *\n * IMPORTANT: This handler uses individual CSS properties (top, right, bottom, left)\n * when only individual direction props are specified. This allows CSS cascade to work\n * correctly when modifiers override only some directions.\n *\n * Example problem with using `inset` shorthand everywhere:\n *   styles: {\n *     top: { '': 0, 'side=bottom': 'initial' },\n *     right: { '': 0, 'side=left': 'initial' },\n *     bottom: { '': 0, 'side=top': 'initial' },\n *     left: { '': 0, 'side=right': 'initial' },\n *   }\n *\n * If we output `inset` for both cases:\n *   - Default: inset: 0 0 0 0\n *   - side=bottom: inset: initial auto auto auto  ← WRONG! Overrides all 4 directions\n *\n * With individual properties:\n *   - Default: top: 0; right: 0; bottom: 0; left: 0\n *   - side=bottom: top: initial  ← CORRECT! Only overrides top\n *\n * The `inset` shorthand is only used when the base `inset` prop is specified\n * OR when `insetBlock`/`insetInline` are used (which imply setting pairs).\n */\nexport function insetStyle({\n  inset,\n  insetBlock,\n  insetInline,\n  top,\n  right,\n  bottom,\n  left,\n}: {\n  inset?: string | number | boolean;\n  insetBlock?: string | number | boolean;\n  insetInline?: string | number | boolean;\n  top?: string | number | boolean;\n  right?: string | number | boolean;\n  bottom?: string | number | boolean;\n  left?: string | number | boolean;\n}) {\n  if (\n    inset == null &&\n    insetBlock == null &&\n    insetInline == null &&\n    top == null &&\n    right == null &&\n    bottom == null &&\n    left == null\n  ) {\n    return {};\n  }\n\n  // When only individual direction props are used (no inset, insetBlock, insetInline),\n  // output individual CSS properties to allow proper CSS cascade with modifiers\n  const onlyIndividualProps =\n    inset == null && insetBlock == null && insetInline == null;\n\n  if (onlyIndividualProps) {\n    const result: Record<string, string> = {};\n\n    if (top != null) {\n      const val = parseInsetValue(top);\n      if (val) result['top'] = val;\n    }\n    if (right != null) {\n      const val = parseInsetValue(right);\n      if (val) result['right'] = val;\n    }\n    if (bottom != null) {\n      const val = parseInsetValue(bottom);\n      if (val) result['bottom'] = val;\n    }\n    if (left != null) {\n      const val = parseInsetValue(left);\n      if (val) result['left'] = val;\n    }\n\n    return result;\n  }\n\n  const dirs: Record<Direction, string> = {\n    top: 'auto',\n    right: 'auto',\n    bottom: 'auto',\n    left: 'auto',\n  };\n\n  // Priority 1 (lowest): inset\n  if (inset != null) {\n    if (typeof inset === 'number') {\n      const v = `${inset}px`;\n      dirs.top = dirs.right = dirs.bottom = dirs.left = v;\n    } else if (inset === true) {\n      inset = '0';\n    }\n\n    if (typeof inset === 'string' && inset) {\n      const processed = parseStyle(inset);\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): insetBlock/insetInline\n  if (insetBlock != null) {\n    const val = parseInsetValue(insetBlock);\n    if (val) dirs.top = dirs.bottom = val;\n  }\n  if (insetInline != null) {\n    const val = parseInsetValue(insetInline);\n    if (val) dirs.left = dirs.right = val;\n  }\n\n  // Priority 3 (highest): individual directions\n  if (top != null) {\n    const val = parseInsetValue(top);\n    if (val) dirs.top = val;\n  }\n  if (right != null) {\n    const val = parseInsetValue(right);\n    if (val) dirs.right = val;\n  }\n  if (bottom != null) {\n    const val = parseInsetValue(bottom);\n    if (val) dirs.bottom = val;\n  }\n  if (left != null) {\n    const val = parseInsetValue(left);\n    if (val) dirs.left = val;\n  }\n\n  return optimizeInset(dirs);\n}\n\ninsetStyle.__lookupStyles = [\n  'inset',\n  'insetBlock',\n  'insetInline',\n  'top',\n  'right',\n  'bottom',\n  'left',\n];\n"],"mappings":"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"}

package/dist/styles/margin.d.ts

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

package/dist/styles/margin.js

@@ -12,74 +12,82 @@ function parseMarginValue(value) {
 	return values[0] || "var(--gap)";
 }
 /**
-* Parse margin value with optional directions (like "1x top" or "2x left right")
+* Extract values and directions from a single parsed group.
 */
-function parseDirectionalMargin(value) {
-	if (typeof value === "number") return {
-		values: [`${value}px`],
-		directions: []
-	};
-	if (!value) return {
-		values: [],
-		directions: []
-	};
-	if (value === true) value = "1x";
-	const { values = [], mods = [] } = parseStyle(value).groups[0] ?? {};
+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}` };
+}
 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 {};
-	let [top, right, bottom, left] = [
-		"0",
-		"0",
-		"0",
-		"0"
-	];
+	const dirs = {
+		top: "0",
+		right: "0",
+		bottom: "0",
+		left: "0"
+	};
 	if (margin != null) {
-		const { values, directions } = parseDirectionalMargin(margin);
-		if (values.length) if (directions.length === 0) {
-			top = values[0];
-			right = values[1] || values[0];
-			bottom = values[2] || values[0];
-			left = values[3] || values[1] || values[0];
-		} else directions.forEach((dir, i) => {
-			const val = values[i] ?? values[0];
-			if (dir === "top") top = val;
-			else if (dir === "right") right = val;
-			else if (dir === "bottom") bottom = val;
-			else if (dir === "left") left = val;
-		});
+		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) top = bottom = val;
+		if (val) dirs.top = dirs.bottom = val;
 	}
 	if (marginInline != null) {
 		const val = parseMarginValue(marginInline);
-		if (val) left = right = val;
+		if (val) dirs.left = dirs.right = val;
 	}
 	if (marginTop != null) {
 		const val = parseMarginValue(marginTop);
-		if (val) top = val;
+		if (val) dirs.top = val;
 	}
 	if (marginRight != null) {
 		const val = parseMarginValue(marginRight);
-		if (val) right = val;
+		if (val) dirs.right = val;
 	}
 	if (marginBottom != null) {
 		const val = parseMarginValue(marginBottom);
-		if (val) bottom = val;
+		if (val) dirs.bottom = val;
 	}
 	if (marginLeft != null) {
 		const val = parseMarginValue(marginLeft);
-		if (val) left = val;
+		if (val) dirs.left = val;
 	}
-	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}` };
+	return optimizeMargin(dirs);
 }
 marginStyle.__lookupStyles = [
 	"margin",

package/dist/styles/margin.js.map

@@ -1 +1 @@
-{"version":3,"file":"margin.js","names":[],"sources":["../../src/styles/margin.ts"],"sourcesContent":["import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\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 * Parse margin value with optional directions (like \"1x top\" or \"2x left right\")\n */\nfunction parseDirectionalMargin(value: string | number | boolean): {\n  values: string[];\n  directions: string[];\n} {\n  if (typeof value === 'number') {\n    return { values: [`${value}px`], directions: [] };\n  }\n  if (!value) return { values: [], directions: [] };\n  if (value === true) value = '1x';\n\n  const { values = [], mods = [] } = parseStyle(value).groups[0] ?? {};\n\n  return {\n    values: values.length ? values : ['var(--gap)'],\n    directions: filterMods(mods, DIRECTIONS),\n  };\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 no margin is defined, return empty object\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  // Initialize all directions to 0\n  let [top, right, bottom, left] = ['0', '0', '0', '0'];\n\n  // Priority 1 (lowest): margin\n  if (margin != null) {\n    const { values, directions } = parseDirectionalMargin(margin);\n\n    if (values.length) {\n      if (directions.length === 0) {\n        top = values[0];\n        right = values[1] || values[0];\n        bottom = values[2] || values[0];\n        left = values[3] || values[1] || values[0];\n      } else {\n        // Assign values to directions in the order they appear\n        // e.g., 'right 1x top 2x' → right: 1x, top: 2x\n        directions.forEach((dir, i) => {\n          const val = values[i] ?? values[0];\n          if (dir === 'top') top = val;\n          else if (dir === 'right') right = val;\n          else if (dir === 'bottom') bottom = val;\n          else if (dir === 'left') left = val;\n        });\n      }\n    }\n  }\n\n  // Priority 2 (medium): marginBlock/marginInline\n  if (marginBlock != null) {\n    const val = parseMarginValue(marginBlock);\n    if (val) top = bottom = val;\n  }\n  if (marginInline != null) {\n    const val = parseMarginValue(marginInline);\n    if (val) left = right = val;\n  }\n\n  // Priority 3 (highest): individual directions\n  if (marginTop != null) {\n    const val = parseMarginValue(marginTop);\n    if (val) top = val;\n  }\n  if (marginRight != null) {\n    const val = parseMarginValue(marginRight);\n    if (val) right = val;\n  }\n  if (marginBottom != null) {\n    const val = parseMarginValue(marginBottom);\n    if (val) bottom = val;\n  }\n  if (marginLeft != null) {\n    const val = parseMarginValue(marginLeft);\n    if (val) left = val;\n  }\n\n  // Optimize output: 1 value if all same, 2 values if top==bottom && left==right\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\n  return { margin: `${top} ${right} ${bottom} ${left}` };\n}\n\nmarginStyle.__lookupStyles = [\n  'margin',\n  'marginTop',\n  'marginRight',\n  'marginBottom',\n  'marginLeft',\n  'marginBlock',\n  'marginInline',\n];\n"],"mappings":";;;;;;AAKA,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,uBAAuB,OAG9B;AACA,KAAI,OAAO,UAAU,SACnB,QAAO;EAAE,QAAQ,CAAC,GAAG,MAAM,IAAI;EAAE,YAAY,EAAE;EAAE;AAEnD,KAAI,CAAC,MAAO,QAAO;EAAE,QAAQ,EAAE;EAAE,YAAY,EAAE;EAAE;AACjD,KAAI,UAAU,KAAM,SAAQ;CAE5B,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,WAAW,MAAM,CAAC,OAAO,MAAM,EAAE;AAEpE,QAAO;EACL,QAAQ,OAAO,SAAS,SAAS,CAAC,aAAa;EAC/C,YAAY,WAAW,MAAM,WAAW;EACzC;;AAGH,SAAgB,YAAY,EAC1B,QACA,aACA,cACA,WACA,aACA,cACA,cASC;AAED,KACE,UAAU,QACV,eAAe,QACf,gBAAgB,QAChB,aAAa,QACb,eAAe,QACf,gBAAgB,QAChB,cAAc,KAEd,QAAO,EAAE;CAIX,IAAI,CAAC,KAAK,OAAO,QAAQ,QAAQ;EAAC;EAAK;EAAK;EAAK;EAAI;AAGrD,KAAI,UAAU,MAAM;EAClB,MAAM,EAAE,QAAQ,eAAe,uBAAuB,OAAO;AAE7D,MAAI,OAAO,OACT,KAAI,WAAW,WAAW,GAAG;AAC3B,SAAM,OAAO;AACb,WAAQ,OAAO,MAAM,OAAO;AAC5B,YAAS,OAAO,MAAM,OAAO;AAC7B,UAAO,OAAO,MAAM,OAAO,MAAM,OAAO;QAIxC,YAAW,SAAS,KAAK,MAAM;GAC7B,MAAM,MAAM,OAAO,MAAM,OAAO;AAChC,OAAI,QAAQ,MAAO,OAAM;YAChB,QAAQ,QAAS,SAAQ;YACzB,QAAQ,SAAU,UAAS;YAC3B,QAAQ,OAAQ,QAAO;IAChC;;AAMR,KAAI,eAAe,MAAM;EACvB,MAAM,MAAM,iBAAiB,YAAY;AACzC,MAAI,IAAK,OAAM,SAAS;;AAE1B,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,iBAAiB,aAAa;AAC1C,MAAI,IAAK,QAAO,QAAQ;;AAI1B,KAAI,aAAa,MAAM;EACrB,MAAM,MAAM,iBAAiB,UAAU;AACvC,MAAI,IAAK,OAAM;;AAEjB,KAAI,eAAe,MAAM;EACvB,MAAM,MAAM,iBAAiB,YAAY;AACzC,MAAI,IAAK,SAAQ;;AAEnB,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,iBAAiB,aAAa;AAC1C,MAAI,IAAK,UAAS;;AAEpB,KAAI,cAAc,MAAM;EACtB,MAAM,MAAM,iBAAiB,WAAW;AACxC,MAAI,IAAK,QAAO;;AAIlB,KAAI,QAAQ,SAAS,UAAU,UAAU,WAAW,KAClD,QAAO,EAAE,QAAQ,KAAK;AAExB,KAAI,QAAQ,UAAU,SAAS,MAC7B,QAAO,EAAE,QAAQ,GAAG,IAAI,GAAG,QAAQ;AAGrC,QAAO,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ;;AAGxD,YAAY,iBAAiB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}
+{"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"}

package/dist/styles/padding.d.ts

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

package/dist/styles/padding.js

@@ -12,74 +12,82 @@ function parsePaddingValue(value) {
 	return values[0] || "var(--gap)";
 }
 /**
-* Parse padding value with optional directions (like "1x top" or "2x left right")
+* Extract values and directions from a single parsed group.
 */
-function parseDirectionalPadding(value) {
-	if (typeof value === "number") return {
-		values: [`${value}px`],
-		directions: []
-	};
-	if (!value) return {
-		values: [],
-		directions: []
-	};
-	if (value === true) value = "1x";
-	const { values = [], mods = [] } = parseStyle(value).groups[0] ?? {};
+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}` };
+}
 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 {};
-	let [top, right, bottom, left] = [
-		"0",
-		"0",
-		"0",
-		"0"
-	];
+	const dirs = {
+		top: "0",
+		right: "0",
+		bottom: "0",
+		left: "0"
+	};
 	if (padding != null) {
-		const { values, directions } = parseDirectionalPadding(padding);
-		if (values.length) if (directions.length === 0) {
-			top = values[0];
-			right = values[1] || values[0];
-			bottom = values[2] || values[0];
-			left = values[3] || values[1] || values[0];
-		} else directions.forEach((dir, i) => {
-			const val = values[i] ?? values[0];
-			if (dir === "top") top = val;
-			else if (dir === "right") right = val;
-			else if (dir === "bottom") bottom = val;
-			else if (dir === "left") left = val;
-		});
+		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) top = bottom = val;
+		if (val) dirs.top = dirs.bottom = val;
 	}
 	if (paddingInline != null) {
 		const val = parsePaddingValue(paddingInline);
-		if (val) left = right = val;
+		if (val) dirs.left = dirs.right = val;
 	}
 	if (paddingTop != null) {
 		const val = parsePaddingValue(paddingTop);
-		if (val) top = val;
+		if (val) dirs.top = val;
 	}
 	if (paddingRight != null) {
 		const val = parsePaddingValue(paddingRight);
-		if (val) right = val;
+		if (val) dirs.right = val;
 	}
 	if (paddingBottom != null) {
 		const val = parsePaddingValue(paddingBottom);
-		if (val) bottom = val;
+		if (val) dirs.bottom = val;
 	}
 	if (paddingLeft != null) {
 		const val = parsePaddingValue(paddingLeft);
-		if (val) left = val;
+		if (val) dirs.left = val;
 	}
-	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}` };
+	return optimizePadding(dirs);
 }
 paddingStyle.__lookupStyles = [
 	"padding",

package/dist/styles/padding.js.map

@@ -1 +1 @@
-{"version":3,"file":"padding.js","names":[],"sources":["../../src/styles/padding.ts"],"sourcesContent":["import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\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 * Parse padding value with optional directions (like \"1x top\" or \"2x left right\")\n */\nfunction parseDirectionalPadding(value: string | number | boolean): {\n  values: string[];\n  directions: string[];\n} {\n  if (typeof value === 'number') {\n    return { values: [`${value}px`], directions: [] };\n  }\n  if (!value) return { values: [], directions: [] };\n  if (value === true) value = '1x';\n\n  const { values = [], mods = [] } = parseStyle(value).groups[0] ?? {};\n\n  return {\n    values: values.length ? values : ['var(--gap)'],\n    directions: filterMods(mods, DIRECTIONS),\n  };\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 no padding is defined, return empty object\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  // Initialize all directions to 0\n  let [top, right, bottom, left] = ['0', '0', '0', '0'];\n\n  // Priority 1 (lowest): padding\n  if (padding != null) {\n    const { values, directions } = parseDirectionalPadding(padding);\n\n    if (values.length) {\n      if (directions.length === 0) {\n        top = values[0];\n        right = values[1] || values[0];\n        bottom = values[2] || values[0];\n        left = values[3] || values[1] || values[0];\n      } else {\n        // Assign values to directions in the order they appear\n        // e.g., 'right 1x top 2x' → right: 1x, top: 2x\n        directions.forEach((dir, i) => {\n          const val = values[i] ?? values[0];\n          if (dir === 'top') top = val;\n          else if (dir === 'right') right = val;\n          else if (dir === 'bottom') bottom = val;\n          else if (dir === 'left') left = val;\n        });\n      }\n    }\n  }\n\n  // Priority 2 (medium): paddingBlock/paddingInline\n  if (paddingBlock != null) {\n    const val = parsePaddingValue(paddingBlock);\n    if (val) top = bottom = val;\n  }\n  if (paddingInline != null) {\n    const val = parsePaddingValue(paddingInline);\n    if (val) left = right = val;\n  }\n\n  // Priority 3 (highest): individual directions\n  if (paddingTop != null) {\n    const val = parsePaddingValue(paddingTop);\n    if (val) top = val;\n  }\n  if (paddingRight != null) {\n    const val = parsePaddingValue(paddingRight);\n    if (val) right = val;\n  }\n  if (paddingBottom != null) {\n    const val = parsePaddingValue(paddingBottom);\n    if (val) bottom = val;\n  }\n  if (paddingLeft != null) {\n    const val = parsePaddingValue(paddingLeft);\n    if (val) left = val;\n  }\n\n  // Optimize output: 1 value if all same, 2 values if top==bottom && left==right\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\n  return { padding: `${top} ${right} ${bottom} ${left}` };\n}\n\npaddingStyle.__lookupStyles = [\n  'padding',\n  'paddingTop',\n  'paddingRight',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingBlock',\n  'paddingInline',\n];\n"],"mappings":";;;;;;AAKA,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,wBAAwB,OAG/B;AACA,KAAI,OAAO,UAAU,SACnB,QAAO;EAAE,QAAQ,CAAC,GAAG,MAAM,IAAI;EAAE,YAAY,EAAE;EAAE;AAEnD,KAAI,CAAC,MAAO,QAAO;EAAE,QAAQ,EAAE;EAAE,YAAY,EAAE;EAAE;AACjD,KAAI,UAAU,KAAM,SAAQ;CAE5B,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,WAAW,MAAM,CAAC,OAAO,MAAM,EAAE;AAEpE,QAAO;EACL,QAAQ,OAAO,SAAS,SAAS,CAAC,aAAa;EAC/C,YAAY,WAAW,MAAM,WAAW;EACzC;;AAGH,SAAgB,aAAa,EAC3B,SACA,cACA,eACA,YACA,cACA,eACA,eASC;AAED,KACE,WAAW,QACX,gBAAgB,QAChB,iBAAiB,QACjB,cAAc,QACd,gBAAgB,QAChB,iBAAiB,QACjB,eAAe,KAEf,QAAO,EAAE;CAIX,IAAI,CAAC,KAAK,OAAO,QAAQ,QAAQ;EAAC;EAAK;EAAK;EAAK;EAAI;AAGrD,KAAI,WAAW,MAAM;EACnB,MAAM,EAAE,QAAQ,eAAe,wBAAwB,QAAQ;AAE/D,MAAI,OAAO,OACT,KAAI,WAAW,WAAW,GAAG;AAC3B,SAAM,OAAO;AACb,WAAQ,OAAO,MAAM,OAAO;AAC5B,YAAS,OAAO,MAAM,OAAO;AAC7B,UAAO,OAAO,MAAM,OAAO,MAAM,OAAO;QAIxC,YAAW,SAAS,KAAK,MAAM;GAC7B,MAAM,MAAM,OAAO,MAAM,OAAO;AAChC,OAAI,QAAQ,MAAO,OAAM;YAChB,QAAQ,QAAS,SAAQ;YACzB,QAAQ,SAAU,UAAS;YAC3B,QAAQ,OAAQ,QAAO;IAChC;;AAMR,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,IAAK,OAAM,SAAS;;AAE1B,KAAI,iBAAiB,MAAM;EACzB,MAAM,MAAM,kBAAkB,cAAc;AAC5C,MAAI,IAAK,QAAO,QAAQ;;AAI1B,KAAI,cAAc,MAAM;EACtB,MAAM,MAAM,kBAAkB,WAAW;AACzC,MAAI,IAAK,OAAM;;AAEjB,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,IAAK,SAAQ;;AAEnB,KAAI,iBAAiB,MAAM;EACzB,MAAM,MAAM,kBAAkB,cAAc;AAC5C,MAAI,IAAK,UAAS;;AAEpB,KAAI,eAAe,MAAM;EACvB,MAAM,MAAM,kBAAkB,YAAY;AAC1C,MAAI,IAAK,QAAO;;AAIlB,KAAI,QAAQ,SAAS,UAAU,UAAU,WAAW,KAClD,QAAO,EAAE,SAAS,KAAK;AAEzB,KAAI,QAAQ,UAAU,SAAS,MAC7B,QAAO,EAAE,SAAS,GAAG,IAAI,GAAG,QAAQ;AAGtC,QAAO,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ;;AAGzD,aAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}
+{"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"}

package/dist/styles/transition.js

@@ -86,6 +86,18 @@ const MAP = {
 	]
 };
 const DEFAULT_EASING = "linear";
+const EASING_KEYWORDS = new Set([
+	"ease",
+	"ease-in",
+	"ease-out",
+	"ease-in-out",
+	"linear",
+	"step-start",
+	"step-end"
+]);
+function isEasing(token) {
+	return EASING_KEYWORDS.has(token) || token.startsWith("cubic-bezier(") || token.startsWith("steps(") || token.startsWith("linear(");
+}
 function getTiming(name) {
 	return `var(--${name}-transition, var(--transition))`;
 }
@@ -97,24 +109,32 @@ function transitionStyle({ transition }) {
 		tokens.push(...g.all);
 		if (idx < processed.groups.length - 1) tokens.push(",");
 	});
-	if (!tokens) return;
+	if (tokens.length === 0) return;
 	let tempTransition = [];
 	const transitions = [];
 	tokens.forEach((token) => {
 		if (token === ",") {
-			if (tempTransition) {
+			if (tempTransition.length) {
 				transitions.push(tempTransition);
 				tempTransition = [];
 			}
 		} else tempTransition.push(token);
 	});
-	if (tempTransition) transitions.push(tempTransition);
+	if (tempTransition.length) transitions.push(tempTransition);
 	const map = {};
 	transitions.forEach((transition) => {
 		const name = transition[0];
-		const timing = transition[1];
-		const easing = transition[2];
-		const delay = transition[3];
+		let timing;
+		let easing;
+		let delay;
+		if (transition[1] && isEasing(transition[1])) {
+			easing = transition[1];
+			delay = transition[2];
+		} else {
+			timing = transition[1];
+			easing = transition[2];
+			delay = transition[3];
+		}
 		(MAP[name] || [name]).forEach((style) => {
 			map[style] = [
 				name,

package/dist/styles/transition.js.map

@@ -1 +1 @@
-{"version":3,"file":"transition.js","names":[],"sources":["../../src/styles/transition.ts"],"sourcesContent":["import { parseStyle } from '../utils/styles';\n\nconst SECOND_FILL_COLOR_PROPERTY = '--tasty-second-fill-color';\n\nconst MAP = {\n  fade: ['mask', 'mask-composite'],\n  translate: ['transform', 'translate'],\n  rotate: ['transform', 'rotate'],\n  scale: ['transform', 'scale'],\n  fill: ['background-color', 'background-image', SECOND_FILL_COLOR_PROPERTY],\n  image: [\n    'background-image',\n    'background-position',\n    'background-size',\n    'background-repeat',\n    'background-attachment',\n    'background-origin',\n    'background-clip',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  background: [\n    'background-color',\n    'background-image',\n    'background-position',\n    'background-size',\n    'background-repeat',\n    'background-attachment',\n    'background-origin',\n    'background-clip',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  border: [\n    'border',\n    'border-top',\n    'border-right',\n    'border-bottom',\n    'border-left',\n  ],\n  filter: ['filter', 'backdrop-filter'],\n  radius: ['border-radius'],\n  shadow: ['box-shadow'],\n  outline: ['outline', 'outline-offset'],\n  preset: [\n    'font-size',\n    'line-height',\n    'letter-spacing',\n    'font-weight',\n    'font-style',\n  ],\n  text: ['font-weight', 'text-decoration-color'],\n  color: ['color'],\n  opacity: ['opacity'],\n  theme: [\n    'color',\n    'background-color',\n    'background-image',\n    'box-shadow',\n    'border',\n    'border-radius',\n    'outline',\n    'opacity',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  width: ['max-width', 'min-width', 'width'],\n  height: ['max-height', 'min-height', 'height'],\n  gap: ['gap', 'margin'],\n  zIndex: ['z-index'],\n  inset: ['inset', 'top', 'right', 'bottom', 'left'],\n};\n\nexport const DEFAULT_TIMING = 'var(--transition)';\nconst DEFAULT_EASING = 'linear';\n\nfunction getTiming(name) {\n  return `var(--${name}-transition, var(--transition))`;\n}\n\nexport function transitionStyle({ transition }) {\n  if (!transition) return;\n\n  const processed = parseStyle(transition);\n  const tokens: string[] = [];\n  processed.groups.forEach((g, idx) => {\n    tokens.push(...g.all);\n    if (idx < processed.groups.length - 1) tokens.push(',');\n  });\n\n  if (!tokens) return;\n\n  let tempTransition: string[] = [];\n  const transitions: string[][] = [];\n\n  tokens.forEach((token) => {\n    if (token === ',') {\n      if (tempTransition) {\n        transitions.push(tempTransition);\n        tempTransition = [];\n      }\n    } else {\n      tempTransition.push(token);\n    }\n  });\n\n  if (tempTransition) {\n    transitions.push(tempTransition);\n  }\n\n  const map: {\n    name?: string;\n    easing?: string;\n    timing?: string;\n    delay?: string;\n  } = {};\n\n  transitions.forEach((transition) => {\n    const name = transition[0];\n    const timing = transition[1];\n    const easing = transition[2];\n    const delay = transition[3];\n\n    const styles = MAP[name] || [name];\n\n    styles.forEach((style) => {\n      map[style] = [name, easing, timing, delay];\n    });\n  });\n\n  const result = Object.entries(map)\n    .map(([style, [name, easing, timing, delay]]) => {\n      let value = `${style} ${timing || getTiming(name)}`;\n      if (easing || delay) {\n        value += ` ${easing || DEFAULT_EASING}`;\n      }\n      if (delay) {\n        value += ` ${delay}`;\n      }\n      return value;\n    })\n    .join(', ');\n\n  return { transition: result };\n}\n\ntransitionStyle.__lookupStyles = ['transition'];\n"],"mappings":";;;AAEA,MAAM,6BAA6B;AAEnC,MAAM,MAAM;CACV,MAAM,CAAC,QAAQ,iBAAiB;CAChC,WAAW,CAAC,aAAa,YAAY;CACrC,QAAQ,CAAC,aAAa,SAAS;CAC/B,OAAO,CAAC,aAAa,QAAQ;CAC7B,MAAM;EAAC;EAAoB;EAAoB;EAA2B;CAC1E,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,YAAY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,QAAQ;EACN;EACA;EACA;EACA;EACA;EACD;CACD,QAAQ,CAAC,UAAU,kBAAkB;CACrC,QAAQ,CAAC,gBAAgB;CACzB,QAAQ,CAAC,aAAa;CACtB,SAAS,CAAC,WAAW,iBAAiB;CACtC,QAAQ;EACN;EACA;EACA;EACA;EACA;EACD;CACD,MAAM,CAAC,eAAe,wBAAwB;CAC9C,OAAO,CAAC,QAAQ;CAChB,SAAS,CAAC,UAAU;CACpB,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,OAAO;EAAC;EAAa;EAAa;EAAQ;CAC1C,QAAQ;EAAC;EAAc;EAAc;EAAS;CAC9C,KAAK,CAAC,OAAO,SAAS;CACtB,QAAQ,CAAC,UAAU;CACnB,OAAO;EAAC;EAAS;EAAO;EAAS;EAAU;EAAO;CACnD;AAGD,MAAM,iBAAiB;AAEvB,SAAS,UAAU,MAAM;AACvB,QAAO,SAAS,KAAK;;AAGvB,SAAgB,gBAAgB,EAAE,cAAc;AAC9C,KAAI,CAAC,WAAY;CAEjB,MAAM,YAAY,WAAW,WAAW;CACxC,MAAM,SAAmB,EAAE;AAC3B,WAAU,OAAO,SAAS,GAAG,QAAQ;AACnC,SAAO,KAAK,GAAG,EAAE,IAAI;AACrB,MAAI,MAAM,UAAU,OAAO,SAAS,EAAG,QAAO,KAAK,IAAI;GACvD;AAEF,KAAI,CAAC,OAAQ;CAEb,IAAI,iBAA2B,EAAE;CACjC,MAAM,cAA0B,EAAE;AAElC,QAAO,SAAS,UAAU;AACxB,MAAI,UAAU,KACZ;OAAI,gBAAgB;AAClB,gBAAY,KAAK,eAAe;AAChC,qBAAiB,EAAE;;QAGrB,gBAAe,KAAK,MAAM;GAE5B;AAEF,KAAI,eACF,aAAY,KAAK,eAAe;CAGlC,MAAM,MAKF,EAAE;AAEN,aAAY,SAAS,eAAe;EAClC,MAAM,OAAO,WAAW;EACxB,MAAM,SAAS,WAAW;EAC1B,MAAM,SAAS,WAAW;EAC1B,MAAM,QAAQ,WAAW;AAIzB,GAFe,IAAI,SAAS,CAAC,KAAK,EAE3B,SAAS,UAAU;AACxB,OAAI,SAAS;IAAC;IAAM;IAAQ;IAAQ;IAAM;IAC1C;GACF;AAeF,QAAO,EAAE,YAbM,OAAO,QAAQ,IAAI,CAC/B,KAAK,CAAC,OAAO,CAAC,MAAM,QAAQ,QAAQ,YAAY;EAC/C,IAAI,QAAQ,GAAG,MAAM,GAAG,UAAU,UAAU,KAAK;AACjD,MAAI,UAAU,MACZ,UAAS,IAAI,UAAU;AAEzB,MAAI,MACF,UAAS,IAAI;AAEf,SAAO;GACP,CACD,KAAK,KAAK,EAEgB;;AAG/B,gBAAgB,iBAAiB,CAAC,aAAa"}
+{"version":3,"file":"transition.js","names":[],"sources":["../../src/styles/transition.ts"],"sourcesContent":["import { parseStyle } from '../utils/styles';\n\nconst SECOND_FILL_COLOR_PROPERTY = '--tasty-second-fill-color';\n\nconst MAP: Record<string, string[]> = {\n  fade: ['mask', 'mask-composite'],\n  translate: ['transform', 'translate'],\n  rotate: ['transform', 'rotate'],\n  scale: ['transform', 'scale'],\n  fill: ['background-color', 'background-image', SECOND_FILL_COLOR_PROPERTY],\n  image: [\n    'background-image',\n    'background-position',\n    'background-size',\n    'background-repeat',\n    'background-attachment',\n    'background-origin',\n    'background-clip',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  background: [\n    'background-color',\n    'background-image',\n    'background-position',\n    'background-size',\n    'background-repeat',\n    'background-attachment',\n    'background-origin',\n    'background-clip',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  border: [\n    'border',\n    'border-top',\n    'border-right',\n    'border-bottom',\n    'border-left',\n  ],\n  filter: ['filter', 'backdrop-filter'],\n  radius: ['border-radius'],\n  shadow: ['box-shadow'],\n  outline: ['outline', 'outline-offset'],\n  preset: [\n    'font-size',\n    'line-height',\n    'letter-spacing',\n    'font-weight',\n    'font-style',\n  ],\n  text: ['font-weight', 'text-decoration-color'],\n  color: ['color'],\n  opacity: ['opacity'],\n  theme: [\n    'color',\n    'background-color',\n    'background-image',\n    'box-shadow',\n    'border',\n    'border-radius',\n    'outline',\n    'opacity',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  width: ['max-width', 'min-width', 'width'],\n  height: ['max-height', 'min-height', 'height'],\n  gap: ['gap', 'margin'],\n  zIndex: ['z-index'],\n  inset: ['inset', 'top', 'right', 'bottom', 'left'],\n};\n\nexport const DEFAULT_TIMING = 'var(--transition)';\nconst DEFAULT_EASING = 'linear';\n\nconst EASING_KEYWORDS = new Set([\n  'ease',\n  'ease-in',\n  'ease-out',\n  'ease-in-out',\n  'linear',\n  'step-start',\n  'step-end',\n]);\n\nfunction isEasing(token: string): boolean {\n  return (\n    EASING_KEYWORDS.has(token) ||\n    token.startsWith('cubic-bezier(') ||\n    token.startsWith('steps(') ||\n    token.startsWith('linear(')\n  );\n}\n\nfunction getTiming(name: string): string {\n  return `var(--${name}-transition, var(--transition))`;\n}\n\ntype TransitionEntry = [\n  name: string,\n  easing: string | undefined,\n  timing: string | undefined,\n  delay: string | undefined,\n];\n\nexport function transitionStyle({ transition }) {\n  if (!transition) return;\n\n  const processed = parseStyle(transition);\n  const tokens: string[] = [];\n  processed.groups.forEach((g, idx) => {\n    tokens.push(...g.all);\n    if (idx < processed.groups.length - 1) tokens.push(',');\n  });\n\n  if (tokens.length === 0) return;\n\n  let tempTransition: string[] = [];\n  const transitions: string[][] = [];\n\n  tokens.forEach((token) => {\n    if (token === ',') {\n      if (tempTransition.length) {\n        transitions.push(tempTransition);\n        tempTransition = [];\n      }\n    } else {\n      tempTransition.push(token);\n    }\n  });\n\n  if (tempTransition.length) {\n    transitions.push(tempTransition);\n  }\n\n  const map: Record<string, TransitionEntry> = {};\n\n  transitions.forEach((transition) => {\n    const name = transition[0];\n\n    let timing: string | undefined;\n    let easing: string | undefined;\n    let delay: string | undefined;\n\n    if (transition[1] && isEasing(transition[1])) {\n      easing = transition[1];\n      delay = transition[2];\n    } else {\n      timing = transition[1];\n      easing = transition[2];\n      delay = transition[3];\n    }\n\n    const styles = MAP[name] || [name];\n\n    styles.forEach((style) => {\n      map[style] = [name, easing, timing, delay];\n    });\n  });\n\n  const result = Object.entries(map)\n    .map(([style, [name, easing, timing, delay]]) => {\n      let value = `${style} ${timing || getTiming(name)}`;\n      if (easing || delay) {\n        value += ` ${easing || DEFAULT_EASING}`;\n      }\n      if (delay) {\n        value += ` ${delay}`;\n      }\n      return value;\n    })\n    .join(', ');\n\n  return { transition: result };\n}\n\ntransitionStyle.__lookupStyles = ['transition'];\n"],"mappings":"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"}

package/dist/tasty.d.ts

@@ -99,8 +99,12 @@ type TastyComponentPropsWithDefaults<Props extends PropsWithStyles, DefaultProps
 declare function tasty<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, Tag extends keyof JSX.IntrinsicElements = 'div'>(options: TastyElementOptions<K, V, E, Tag>, secondArg?: never): ForwardRefExoticComponent<PropsWithoutRef<TastyElementProps<K, V, Tag>> & RefAttributes<unknown>> & SubElementComponents<E>;
 declare function tasty<Props extends PropsWithStyles, DefaultProps extends Partial<Props> = Partial<Props>>(Component: ComponentType<Props>, options?: TastyProps<never, never, Record<string, never>, Props>): ComponentType<TastyComponentPropsWithDefaults<Props, DefaultProps>>;
 declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementTagNameMap> & {
+  top?: StyleValue<csstype.Property.Top<string | number> | undefined> | StyleValueStateMap<csstype.Property.Top<string | number> | undefined>;
+  right?: StyleValue<csstype.Property.Right<string | number> | undefined> | StyleValueStateMap<csstype.Property.Right<string | number> | undefined>;
+  bottom?: StyleValue<csstype.Property.Bottom<string | number> | undefined> | StyleValueStateMap<csstype.Property.Bottom<string | number> | undefined>;
+  left?: StyleValue<csstype.Property.Left<string | number> | undefined> | StyleValueStateMap<csstype.Property.Left<string | number> | undefined>;
   color?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
-  fill?: StyleValue<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.7` | `#${string}.1` | `#${string}.2` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.07` | `#${string}.01` | `#${string}.02` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.70` | `#${string}.77` | `#${string}.71` | `#${string}.72` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.10` | `#${string}.17` | `#${string}.11` | `#${string}.12` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.27` | `#${string}.21` | `#${string}.22` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.30` | `#${string}.37` | `#${string}.31` | `#${string}.32` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.47` | `#${string}.41` | `#${string}.42` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.57` | `#${string}.51` | `#${string}.52` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.67` | `#${string}.61` | `#${string}.62` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.87` | `#${string}.81` | `#${string}.82` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.97` | `#${string}.91` | `#${string}.92` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined> | StyleValueStateMap<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.7` | `#${string}.1` | `#${string}.2` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.07` | `#${string}.01` | `#${string}.02` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.70` | `#${string}.77` | `#${string}.71` | `#${string}.72` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.10` | `#${string}.17` | `#${string}.11` | `#${string}.12` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.27` | `#${string}.21` | `#${string}.22` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.30` | `#${string}.37` | `#${string}.31` | `#${string}.32` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.47` | `#${string}.41` | `#${string}.42` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.57` | `#${string}.51` | `#${string}.52` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.67` | `#${string}.61` | `#${string}.62` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.87` | `#${string}.81` | `#${string}.82` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.97` | `#${string}.91` | `#${string}.92` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined>;
+  fill?: StyleValue<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.3` | `#${string}.2` | `#${string}.7` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.03` | `#${string}.02` | `#${string}.07` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.13` | `#${string}.12` | `#${string}.17` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.30` | `#${string}.31` | `#${string}.33` | `#${string}.32` | `#${string}.37` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.20` | `#${string}.21` | `#${string}.23` | `#${string}.22` | `#${string}.27` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.73` | `#${string}.72` | `#${string}.77` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.40` | `#${string}.41` | `#${string}.43` | `#${string}.42` | `#${string}.47` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.53` | `#${string}.52` | `#${string}.57` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.63` | `#${string}.62` | `#${string}.67` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.83` | `#${string}.82` | `#${string}.87` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.93` | `#${string}.92` | `#${string}.97` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined> | StyleValueStateMap<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.3` | `#${string}.2` | `#${string}.7` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.03` | `#${string}.02` | `#${string}.07` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.13` | `#${string}.12` | `#${string}.17` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.30` | `#${string}.31` | `#${string}.33` | `#${string}.32` | `#${string}.37` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.20` | `#${string}.21` | `#${string}.23` | `#${string}.22` | `#${string}.27` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.73` | `#${string}.72` | `#${string}.77` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.40` | `#${string}.41` | `#${string}.43` | `#${string}.42` | `#${string}.47` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.53` | `#${string}.52` | `#${string}.57` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.63` | `#${string}.62` | `#${string}.67` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.83` | `#${string}.82` | `#${string}.87` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.93` | `#${string}.92` | `#${string}.97` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined>;
   font?: StyleValue<boolean | csstype.Property.FontFamily | undefined> | StyleValueStateMap<boolean | csstype.Property.FontFamily | undefined>;
   outline?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
   gap?: StyleValue<boolean | csstype.Property.Gap<string | number> | undefined> | StyleValueStateMap<boolean | csstype.Property.Gap<string | number> | undefined>;
@@ -187,7 +191,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   borderTopRightRadius?: StyleValue<csstype.Property.BorderTopRightRadius<string | number> | undefined> | StyleValueStateMap<csstype.Property.BorderTopRightRadius<string | number> | undefined>;
   borderTopStyle?: StyleValue<csstype.Property.BorderTopStyle | undefined> | StyleValueStateMap<csstype.Property.BorderTopStyle | undefined>;
   borderTopWidth?: StyleValue<csstype.Property.BorderTopWidth<string | number> | undefined> | StyleValueStateMap<csstype.Property.BorderTopWidth<string | number> | undefined>;
-  bottom?: StyleValue<csstype.Property.Bottom<string | number> | undefined> | StyleValueStateMap<csstype.Property.Bottom<string | number> | undefined>;
   boxDecorationBreak?: StyleValue<csstype.Property.BoxDecorationBreak | undefined> | StyleValueStateMap<csstype.Property.BoxDecorationBreak | undefined>;
   boxShadow?: StyleValue<csstype.Property.BoxShadow | undefined> | StyleValueStateMap<csstype.Property.BoxShadow | undefined>;
   boxSizing?: StyleValue<csstype.Property.BoxSizing | undefined> | StyleValueStateMap<csstype.Property.BoxSizing | undefined>;
@@ -300,7 +303,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   justifyItems?: StyleValue<csstype.Property.JustifyItems | undefined> | StyleValueStateMap<csstype.Property.JustifyItems | undefined>;
   justifySelf?: StyleValue<csstype.Property.JustifySelf | undefined> | StyleValueStateMap<csstype.Property.JustifySelf | undefined>;
   justifyTracks?: StyleValue<csstype.Property.JustifyTracks | undefined> | StyleValueStateMap<csstype.Property.JustifyTracks | undefined>;
-  left?: StyleValue<csstype.Property.Left<string | number> | undefined> | StyleValueStateMap<csstype.Property.Left<string | number> | undefined>;
   letterSpacing?: StyleValue<csstype.Property.LetterSpacing<string | number> | undefined> | StyleValueStateMap<csstype.Property.LetterSpacing<string | number> | undefined>;
   lightingColor?: StyleValue<csstype.Property.LightingColor | undefined> | StyleValueStateMap<csstype.Property.LightingColor | undefined>;
   lineBreak?: StyleValue<csstype.Property.LineBreak | undefined> | StyleValueStateMap<csstype.Property.LineBreak | undefined>;
@@ -406,7 +408,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   quotes?: StyleValue<csstype.Property.Quotes | undefined> | StyleValueStateMap<csstype.Property.Quotes | undefined>;
   r?: StyleValue<csstype.Property.R<string | number> | undefined> | StyleValueStateMap<csstype.Property.R<string | number> | undefined>;
   resize?: StyleValue<csstype.Property.Resize | undefined> | StyleValueStateMap<csstype.Property.Resize | undefined>;
-  right?: StyleValue<csstype.Property.Right<string | number> | undefined> | StyleValueStateMap<csstype.Property.Right<string | number> | undefined>;
   rotate?: StyleValue<csstype.Property.Rotate | undefined> | StyleValueStateMap<csstype.Property.Rotate | undefined>;
   rowGap?: StyleValue<csstype.Property.RowGap<string | number> | undefined> | StyleValueStateMap<csstype.Property.RowGap<string | number> | undefined>;
   rubyAlign?: StyleValue<csstype.Property.RubyAlign | undefined> | StyleValueStateMap<csstype.Property.RubyAlign | undefined>;
@@ -495,7 +496,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   textWrapMode?: StyleValue<csstype.Property.TextWrapMode | undefined> | StyleValueStateMap<csstype.Property.TextWrapMode | undefined>;
   textWrapStyle?: StyleValue<csstype.Property.TextWrapStyle | undefined> | StyleValueStateMap<csstype.Property.TextWrapStyle | undefined>;
   timelineScope?: StyleValue<csstype.Property.TimelineScope | undefined> | StyleValueStateMap<csstype.Property.TimelineScope | undefined>;
-  top?: StyleValue<csstype.Property.Top<string | number> | undefined> | StyleValueStateMap<csstype.Property.Top<string | number> | undefined>;
   touchAction?: StyleValue<csstype.Property.TouchAction | undefined> | StyleValueStateMap<csstype.Property.TouchAction | undefined>;
   transform?: StyleValue<csstype.Property.Transform | undefined> | StyleValueStateMap<csstype.Property.Transform | undefined>;
   transformBox?: StyleValue<csstype.Property.TransformBox | undefined> | StyleValueStateMap<csstype.Property.TransformBox | undefined>;
@@ -957,7 +957,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   colorRendering?: StyleValue<csstype.Property.ColorRendering | undefined> | StyleValueStateMap<csstype.Property.ColorRendering | undefined>;
   glyphOrientationVertical?: StyleValue<csstype.Property.GlyphOrientationVertical | undefined> | StyleValueStateMap<csstype.Property.GlyphOrientationVertical | undefined>;
   image?: StyleValue<csstype.Property.BackgroundImage | undefined> | StyleValueStateMap<csstype.Property.BackgroundImage | undefined>;
-  svgFill?: StyleValue<(string & {}) | `#${string}` | `#${string}.0` | `#${string}.7` | `#${string}.1` | `#${string}.2` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.07` | `#${string}.01` | `#${string}.02` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.70` | `#${string}.77` | `#${string}.71` | `#${string}.72` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.10` | `#${string}.17` | `#${string}.11` | `#${string}.12` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.27` | `#${string}.21` | `#${string}.22` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.30` | `#${string}.37` | `#${string}.31` | `#${string}.32` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.47` | `#${string}.41` | `#${string}.42` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.57` | `#${string}.51` | `#${string}.52` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.67` | `#${string}.61` | `#${string}.62` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.87` | `#${string}.81` | `#${string}.82` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.97` | `#${string}.91` | `#${string}.92` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined> | StyleValueStateMap<(string & {}) | `#${string}` | `#${string}.0` | `#${string}.7` | `#${string}.1` | `#${string}.2` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.07` | `#${string}.01` | `#${string}.02` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.70` | `#${string}.77` | `#${string}.71` | `#${string}.72` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.10` | `#${string}.17` | `#${string}.11` | `#${string}.12` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.27` | `#${string}.21` | `#${string}.22` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.30` | `#${string}.37` | `#${string}.31` | `#${string}.32` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.47` | `#${string}.41` | `#${string}.42` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.57` | `#${string}.51` | `#${string}.52` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.67` | `#${string}.61` | `#${string}.62` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.87` | `#${string}.81` | `#${string}.82` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.97` | `#${string}.91` | `#${string}.92` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined>;
+  svgFill?: StyleValue<(string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.3` | `#${string}.2` | `#${string}.7` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.03` | `#${string}.02` | `#${string}.07` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.13` | `#${string}.12` | `#${string}.17` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.30` | `#${string}.31` | `#${string}.33` | `#${string}.32` | `#${string}.37` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.20` | `#${string}.21` | `#${string}.23` | `#${string}.22` | `#${string}.27` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.73` | `#${string}.72` | `#${string}.77` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.40` | `#${string}.41` | `#${string}.43` | `#${string}.42` | `#${string}.47` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.53` | `#${string}.52` | `#${string}.57` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.63` | `#${string}.62` | `#${string}.67` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.83` | `#${string}.82` | `#${string}.87` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.93` | `#${string}.92` | `#${string}.97` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined> | StyleValueStateMap<(string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.3` | `#${string}.2` | `#${string}.7` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.03` | `#${string}.02` | `#${string}.07` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.13` | `#${string}.12` | `#${string}.17` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.30` | `#${string}.31` | `#${string}.33` | `#${string}.32` | `#${string}.37` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.20` | `#${string}.21` | `#${string}.23` | `#${string}.22` | `#${string}.27` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.73` | `#${string}.72` | `#${string}.77` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.40` | `#${string}.41` | `#${string}.43` | `#${string}.42` | `#${string}.47` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.53` | `#${string}.52` | `#${string}.57` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.63` | `#${string}.62` | `#${string}.67` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.83` | `#${string}.82` | `#${string}.87` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.93` | `#${string}.92` | `#${string}.97` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined>;
   fade?: StyleValue<string | undefined> | StyleValueStateMap<string | undefined>;
   styledScrollbar?: StyleValue<boolean | undefined> | StyleValueStateMap<boolean | undefined>;
   scrollbar?: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined>;
@@ -971,12 +971,12 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   gridRows?: StyleValue<csstype.Property.GridTemplateRows<string | number> | undefined> | StyleValueStateMap<csstype.Property.GridTemplateRows<string | number> | undefined>;
   preset?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
   align?: StyleValue<(string & {}) | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | undefined> | StyleValueStateMap<(string & {}) | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | undefined>;
-  justify?: StyleValue<(string & {}) | "left" | "right" | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "legacy" | undefined> | StyleValueStateMap<(string & {}) | "left" | "right" | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "legacy" | undefined>;
+  justify?: StyleValue<"right" | "left" | (string & {}) | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "legacy" | undefined> | StyleValueStateMap<"right" | "left" | (string & {}) | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "legacy" | undefined>;
   place?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
   "@keyframes"?: StyleValue<Record<string, KeyframesSteps> | undefined> | StyleValueStateMap<Record<string, KeyframesSteps> | undefined>;
   "@properties"?: StyleValue<Record<string, PropertyDefinition> | undefined> | StyleValueStateMap<Record<string, PropertyDefinition> | undefined>;
   recipe?: StyleValue<string | undefined> | StyleValueStateMap<string | undefined>;
-} & BaseStyleProps & WithVariant<VariantMap> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof react.ClassAttributes<HTMLDivElement> | keyof react.HTMLAttributes<HTMLDivElement>> & react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement>, "qa" | "qaVal" | "color" | "fill" | "font" | "outline" | "gap" | "padding" | "margin" | "width" | "height" | "border" | "transition" | "placeContent" | "placeItems" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "alignmentBaseline" | "anchorName" | "anchorScope" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationRangeEnd" | "animationRangeStart" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "blockSize" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "clipRule" | "colorAdjust" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "cx" | "cy" | "d" | "direction" | "display" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fillOpacity" | "fillRule" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStyle" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "fontWidth" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "objectViewBox" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "positionAnchor" | "positionArea" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "right" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyOverhang" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollInitialTarget" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "speakAs" | "stopColor" | "stopOpacity" | "stroke" | "strokeColor" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textAnchor" | "textAutospace" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionClass" | "viewTransitionName" | "visibility" | "whiteSpace" | "whiteSpaceCollapse" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zIndex" | "zoom" | "all" | "animation" | "animationRange" | "background" | "backgroundPosition" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockStart" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineStart" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flex" | "flexFlow" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "overflow" | "overscrollBehavior" | "paddingBlock" | "paddingInline" | "placeSelf" | "positionTry" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "textWrap" | "viewTimeline" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBinding" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransform" | "MozTransformOrigin" | "MozTransformStyle" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msScrollbarTrackColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphenateCharacter" | "WebkitHyphens" | "WebkitInitialLetter" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitLogicalHeight" | "WebkitLogicalWidth" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskBoxImageOutset" | "WebkitMaskBoxImageRepeat" | "WebkitMaskBoxImageSlice" | "WebkitMaskBoxImageSource" | "WebkitMaskBoxImageWidth" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozOutlineRadius" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontStretch" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "insetArea" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "positionTryOptions" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozColumnCount" | "MozColumnFill" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserInput" | "msImeMode" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransform" | "OTransformOrigin" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "image" | "svgFill" | "fade" | "styledScrollbar" | "scrollbar" | "boldFontWeight" | "hide" | "shadow" | "radius" | "flow" | "gridAreas" | "gridColumns" | "gridRows" | "preset" | "align" | "justify" | "place" | "@keyframes" | "@properties" | "recipe" | "style" | "as" | "element" | "styles" | "breakpoints" | "block" | "inline" | "mods" | "isHidden" | "isDisabled" | "css" | "theme" | "tokens" | "ref"> & RefAttributes<unknown>> & SubElementComponents<Record<string, never>>;
+} & BaseStyleProps & WithVariant<VariantMap> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof react.ClassAttributes<HTMLDivElement> | keyof react.HTMLAttributes<HTMLDivElement>> & react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement>, "top" | "right" | "bottom" | "left" | "qa" | "qaVal" | "color" | "fill" | "font" | "outline" | "gap" | "padding" | "margin" | "width" | "height" | "border" | "transition" | "placeContent" | "placeItems" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "alignmentBaseline" | "anchorName" | "anchorScope" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationRangeEnd" | "animationRangeStart" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "blockSize" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "clipRule" | "colorAdjust" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "cx" | "cy" | "d" | "direction" | "display" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fillOpacity" | "fillRule" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStyle" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "fontWidth" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "objectViewBox" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "positionAnchor" | "positionArea" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyOverhang" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollInitialTarget" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "speakAs" | "stopColor" | "stopOpacity" | "stroke" | "strokeColor" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textAnchor" | "textAutospace" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionClass" | "viewTransitionName" | "visibility" | "whiteSpace" | "whiteSpaceCollapse" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zIndex" | "zoom" | "all" | "animation" | "animationRange" | "background" | "backgroundPosition" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockStart" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineStart" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flex" | "flexFlow" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "overflow" | "overscrollBehavior" | "paddingBlock" | "paddingInline" | "placeSelf" | "positionTry" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "textWrap" | "viewTimeline" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBinding" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransform" | "MozTransformOrigin" | "MozTransformStyle" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msScrollbarTrackColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphenateCharacter" | "WebkitHyphens" | "WebkitInitialLetter" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitLogicalHeight" | "WebkitLogicalWidth" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskBoxImageOutset" | "WebkitMaskBoxImageRepeat" | "WebkitMaskBoxImageSlice" | "WebkitMaskBoxImageSource" | "WebkitMaskBoxImageWidth" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozOutlineRadius" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontStretch" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "insetArea" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "positionTryOptions" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozColumnCount" | "MozColumnFill" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserInput" | "msImeMode" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransform" | "OTransformOrigin" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "image" | "svgFill" | "fade" | "styledScrollbar" | "scrollbar" | "boldFontWeight" | "hide" | "shadow" | "radius" | "flow" | "gridAreas" | "gridColumns" | "gridRows" | "preset" | "align" | "justify" | "place" | "@keyframes" | "@properties" | "recipe" | "style" | "as" | "element" | "styles" | "breakpoints" | "block" | "inline" | "mods" | "isHidden" | "isDisabled" | "css" | "theme" | "tokens" | "ref"> & RefAttributes<unknown>> & SubElementComponents<Record<string, never>>;
 //#endregion
 export { AllBasePropsWithMods, Element, ElementsDefinition, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, VariantMap, WithVariant, tasty };
 //# sourceMappingURL=tasty.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/tasty",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "A design-system-integrated styling system and DSL for concise, state-aware UI styling",
   "type": "module",
   "exports": {