@tenphi/tasty 3.6.0 → 3.8.0

package/dist/{config-B3gPdCqd.js → config-yXpe2jAV.js}

@@ -1599,8 +1599,8 @@ function resetStyleWarnings() {
 * Callers must guard on the count themselves so the valid path costs one integer
 * comparison; everything expensive happens here, on the misuse path only.
 */
-function warnExtraGroupValues(property, input, maxValues) {
-	const message = maxValues === 2 ? `${property}="${input}": with a span modifier a group takes at most two values — one for the named edge and one for the spanned sides. The extra values are ignored.` : `${property}="${input}": a group that names directions takes a single value, applied to every direction it names. The extra values are ignored — use comma-separated groups instead, e.g. ${property}="2x top, 4x right".`;
+function warnExtraGroupValues(property, input, maxValues, directionExamples = ["top", "right"]) {
+	const message = maxValues === 2 ? `${property}="${input}": with a span modifier a group takes at most two values — one for the named edge and one for the spanned sides. The extra values are ignored.` : `${property}="${input}": a group that names directions takes a single value, applied to every direction it names. The extra values are ignored — use comma-separated groups instead, e.g. ${property}="2x ${directionExamples[0]}, 4x ${directionExamples[1]}".`;
 	warnOnceDev(`extra-values:${property}:${input}`, message);
 }
 //#endregion
@@ -2311,12 +2311,35 @@ function resetFunctionPolyfills() {
 	registeredFunctionDefs.clear();
 }
 //#endregion
+//#region src/styles/logical-list.ts
+/** Data-only logical style families shared by handlers, public lists, and chunks. */
+const BLOCK_SIZE_STYLES = [
+	"blockSize",
+	"minBlockSize",
+	"maxBlockSize"
+];
+const INLINE_SIZE_STYLES = [
+	"inlineSize",
+	"minInlineSize",
+	"maxInlineSize"
+];
+/** Enhanced logical size categories exposed by Tasty's public style lists. */
+const LOGICAL_SIZE_STYLES = ["blockSize", "inlineSize"];
+/** Every input consumed by the two logical size handlers. */
+const LOGICAL_SIZE_HANDLER_STYLES = [...BLOCK_SIZE_STYLES, ...INLINE_SIZE_STYLES];
+const LOGICAL_PADDING_STYLES = ["blockPadding", "inlinePadding"];
+const LOGICAL_MARGIN_STYLES = ["blockMargin", "inlineMargin"];
+const LOGICAL_INSET_STYLES = ["blockInset", "inlineInset"];
+const LOGICAL_SCROLL_MARGIN_STYLES = ["blockScrollMargin", "inlineScrollMargin"];
+const LOGICAL_SCROLL_PADDING_STYLES = ["blockScrollPadding", "inlineScrollPadding"];
+const LOGICAL_BORDER_STYLES = ["blockBorder", "inlineBorder"];
+//#endregion
 //#region src/chunks/style-chunk-map.ts
 /**
 * Chunk names, the built-in chunk style lists, and the style→chunk lookup.
 *
-* This is a **leaf module with no imports**. It exists separately from
-* `definitions.ts` for two reasons:
+* This module only imports data-only style-name lists. It exists separately
+* from `definitions.ts` for two reasons:
 *
 * 1. The style handler registry (`styles/predefined.ts`) needs to assign chunk
 *    membership for custom handlers. Reaching for `definitions.ts` would create an
@@ -2350,6 +2373,7 @@ const APPEARANCE_CHUNK_STYLES = [
 	"color",
 	"opacity",
 	"border",
+	...LOGICAL_BORDER_STYLES,
 	"radius",
 	"outline",
 	"outlineOffset",
@@ -2384,10 +2408,12 @@ const FONT_CHUNK_STYLES = [
 * Dimension chunk - sizing and spacing
 *
 * Handler dependencies (all styles in each handler MUST stay in this chunk):
-* ⚠️ paddingStyle: padding, paddingTop/Right/Bottom/Left, paddingBlock/Inline
-* ⚠️ marginStyle: margin, marginTop/Right/Bottom/Left, marginBlock/Inline
+* ⚠️ paddingStyle: padding, paddingTop/Right/Bottom/Left
+* ⚠️ marginStyle: margin, marginTop/Right/Bottom/Left
 * ⚠️ widthStyle: width, minWidth, maxWidth
 * ⚠️ heightStyle: height, minHeight, maxHeight
+* ⚠️ blockSizeStyle: blockSize, minBlockSize, maxBlockSize
+* ⚠️ inlineSizeStyle: inlineSize, minInlineSize, maxInlineSize
 */
 /** @public */
 const DIMENSION_CHUNK_STYLES = [
@@ -2396,21 +2422,20 @@ const DIMENSION_CHUNK_STYLES = [
 	"paddingRight",
 	"paddingBottom",
 	"paddingLeft",
-	"paddingBlock",
-	"paddingInline",
+	...LOGICAL_PADDING_STYLES,
 	"margin",
 	"marginTop",
 	"marginRight",
 	"marginBottom",
 	"marginLeft",
-	"marginBlock",
-	"marginInline",
+	...LOGICAL_MARGIN_STYLES,
 	"width",
 	"minWidth",
 	"maxWidth",
 	"height",
 	"minHeight",
 	"maxHeight",
+	...LOGICAL_SIZE_HANDLER_STYLES,
 	"flexBasis",
 	"flexGrow",
 	"flexShrink",
@@ -2467,18 +2492,19 @@ const LAYOUT_CHUNK_STYLES = [
 * Position chunk - element positioning
 *
 * Handler dependencies (all styles in each handler MUST stay in this chunk):
-* ⚠️ insetStyle: inset, insetBlock, insetInline, top, right, bottom, left
+* ⚠️ insetStyle: inset, top, right, bottom, left
 */
 /** @public */
 const POSITION_CHUNK_STYLES = [
 	"position",
 	"inset",
-	"insetBlock",
-	"insetInline",
+	...LOGICAL_INSET_STYLES,
 	"top",
 	"right",
 	"bottom",
 	"left",
+	...LOGICAL_SCROLL_MARGIN_STYLES,
+	...LOGICAL_SCROLL_PADDING_STYLES,
 	"zIndex",
 	"gridArea",
 	"gridColumn",
@@ -3310,6 +3336,23 @@ function processGroup$1(group) {
 function formatBorderValue(value) {
 	return `${value.width} ${value.style} ${value.color}`;
 }
+/** Parse one native border declaration without Tasty's physical-side modifiers. */
+function parseBorderValue(value) {
+	if (value === false) return null;
+	if (value === true) value = "1bw";
+	const stringValue = typeof value === "number" ? `${value}px` : String(value).trim();
+	if (!stringValue) return null;
+	if (CSS_WIDE_KEYWORDS.has(stringValue)) return stringValue;
+	const group = parseStyle(stringValue).groups[0];
+	if (!group) return null;
+	const keyword = extractCSSWideKeyword(group);
+	if (keyword) return keyword;
+	return formatBorderValue(processGroup$1({
+		values: group.values ?? [],
+		mods: group.mods ?? [],
+		colors: group.colors ?? []
+	}).borderValue);
+}
 /**
 * Border style handler with multi-group support.
 *
@@ -3399,6 +3442,120 @@ function borderStyle({ border }) {
 }
 borderStyle.__lookupStyles = ["border"];
 //#endregion
+//#region src/styles/dimension.ts
+const DEFAULT_MIN_SIZE = "var(--gap)";
+const DEFAULT_MAX_SIZE = "100%";
+/**
+* Parse a dimension value (string, number, or boolean) into a CSS value
+*/
+function parseDimensionValue(val) {
+	if (val == null) return null;
+	if (typeof val === "number") return `${val}px`;
+	if (val === true) return "initial";
+	return parseStyle(String(val)).groups[0]?.values[0] || null;
+}
+/**
+* Creates a dimension style handler for a physical or logical size.
+*
+* Supports:
+* - Main dimension prop (width/height) with syntax for min/max
+* - Separate min/max props (minWidth/maxWidth or minHeight/maxHeight)
+*
+* Priority: Individual min/max props override values from main prop syntax
+*/
+function dimensionStyle(name) {
+	const minStyle = `min-${name}`;
+	const maxStyle = `max-${name}`;
+	return ({ value, min, max }) => {
+		if (value == null && min == null && max == null) return null;
+		if (value != null && typeof value === "string" && CSS_WIDE_KEYWORDS.has(value)) {
+			const styles = {
+				[name]: value,
+				[minStyle]: value,
+				[maxStyle]: value
+			};
+			const minVal = parseDimensionValue(min);
+			const maxVal = parseDimensionValue(max);
+			if (minVal) styles[minStyle] = minVal;
+			if (maxVal) styles[maxStyle] = maxVal;
+			return styles;
+		}
+		if (value === true) {
+			const styles = {
+				[name]: "auto",
+				[minStyle]: "initial",
+				[maxStyle]: "initial"
+			};
+			const minVal = parseDimensionValue(min);
+			const maxVal = parseDimensionValue(max);
+			if (minVal) styles[minStyle] = minVal;
+			if (maxVal) styles[maxStyle] = maxVal;
+			return styles;
+		}
+		const styles = {
+			[name]: "auto",
+			[minStyle]: "initial",
+			[maxStyle]: "initial"
+		};
+		if (value != null) {
+			let val = value;
+			if (typeof val === "number") val = `${val}px`;
+			val = String(val);
+			const { mods, values } = parseStyle(val).groups[0] ?? makeEmptyDetails();
+			let flag = false;
+			for (const mod of mods) switch (mod) {
+				case "min":
+					styles[minStyle] = values[0] || DEFAULT_MIN_SIZE;
+					flag = true;
+					break;
+				case "max":
+					styles[maxStyle] = values[0] || DEFAULT_MAX_SIZE;
+					flag = true;
+					break;
+				case "fixed": {
+					const fixedValue = values[0] || "max-content";
+					styles[minStyle] = fixedValue;
+					styles[name] = fixedValue;
+					styles[maxStyle] = fixedValue;
+					flag = true;
+					break;
+				}
+				default: break;
+			}
+			if (!flag || !mods.length) if (values.length === 2) {
+				styles[minStyle] = values[0];
+				styles[maxStyle] = values[1];
+			} else if (values.length === 3) {
+				styles[minStyle] = values[0];
+				styles[name] = values[1];
+				styles[maxStyle] = values[2];
+			} else styles[name] = values[0] || "auto";
+			if (styles[name] === "stretch") if (name === "width") styles[name] = [
+				"stretch",
+				"-webkit-fill-available",
+				"-moz-available"
+			];
+			else styles[name] = "auto";
+		}
+		const minVal = parseDimensionValue(min);
+		const maxVal = parseDimensionValue(max);
+		if (minVal) styles[minStyle] = minVal;
+		if (maxVal) styles[maxStyle] = maxVal;
+		return styles;
+	};
+}
+//#endregion
+//#region src/styles/blockSize.ts
+const dimension$3 = dimensionStyle("block-size");
+function blockSizeStyle({ blockSize, minBlockSize, maxBlockSize }) {
+	return dimension$3({
+		value: blockSize,
+		min: minBlockSize,
+		max: maxBlockSize
+	});
+}
+blockSizeStyle.__lookupStyles = [...BLOCK_SIZE_STYLES];
+//#endregion
 //#region src/styles/color.ts
 /**
 * A color that already resolves against the color the element inherits, and so
@@ -3671,113 +3828,10 @@ gapStyle.__lookupStyles = [
 	"gap"
 ];
 //#endregion
-//#region src/styles/dimension.ts
-const DEFAULT_MIN_SIZE = "var(--gap)";
-const DEFAULT_MAX_SIZE = "100%";
-/**
-* Parse a dimension value (string, number, or boolean) into a CSS value
-*/
-function parseDimensionValue(val) {
-	if (val == null) return null;
-	if (typeof val === "number") return `${val}px`;
-	if (val === true) return "initial";
-	return parseStyle(String(val)).groups[0]?.values[0] || null;
-}
-/**
-* Creates a dimension style handler for width or height.
-*
-* Supports:
-* - Main dimension prop (width/height) with syntax for min/max
-* - Separate min/max props (minWidth/maxWidth or minHeight/maxHeight)
-*
-* Priority: Individual min/max props override values from main prop syntax
-*/
-function dimensionStyle(name) {
-	const minStyle = `min-${name}`;
-	const maxStyle = `max-${name}`;
-	return ({ value, min, max }) => {
-		if (value == null && min == null && max == null) return null;
-		if (value != null && typeof value === "string" && CSS_WIDE_KEYWORDS.has(value)) {
-			const styles = {
-				[name]: value,
-				[minStyle]: value,
-				[maxStyle]: value
-			};
-			const minVal = parseDimensionValue(min);
-			const maxVal = parseDimensionValue(max);
-			if (minVal) styles[minStyle] = minVal;
-			if (maxVal) styles[maxStyle] = maxVal;
-			return styles;
-		}
-		if (value === true) {
-			const styles = {
-				[name]: "auto",
-				[minStyle]: "initial",
-				[maxStyle]: "initial"
-			};
-			const minVal = parseDimensionValue(min);
-			const maxVal = parseDimensionValue(max);
-			if (minVal) styles[minStyle] = minVal;
-			if (maxVal) styles[maxStyle] = maxVal;
-			return styles;
-		}
-		const styles = {
-			[name]: "auto",
-			[minStyle]: "initial",
-			[maxStyle]: "initial"
-		};
-		if (value != null) {
-			let val = value;
-			if (typeof val === "number") val = `${val}px`;
-			val = String(val);
-			const { mods, values } = parseStyle(val).groups[0] ?? makeEmptyDetails();
-			let flag = false;
-			for (const mod of mods) switch (mod) {
-				case "min":
-					styles[minStyle] = values[0] || DEFAULT_MIN_SIZE;
-					flag = true;
-					break;
-				case "max":
-					styles[maxStyle] = values[0] || DEFAULT_MAX_SIZE;
-					flag = true;
-					break;
-				case "fixed": {
-					const fixedValue = values[0] || "max-content";
-					styles[minStyle] = fixedValue;
-					styles[name] = fixedValue;
-					styles[maxStyle] = fixedValue;
-					flag = true;
-					break;
-				}
-				default: break;
-			}
-			if (!flag || !mods.length) if (values.length === 2) {
-				styles[minStyle] = values[0];
-				styles[maxStyle] = values[1];
-			} else if (values.length === 3) {
-				styles[minStyle] = values[0];
-				styles[name] = values[1];
-				styles[maxStyle] = values[2];
-			} else styles[name] = values[0] || "auto";
-			if (styles[name] === "stretch") if (name === "width") styles[name] = [
-				"stretch",
-				"-webkit-fill-available",
-				"-moz-available"
-			];
-			else styles[name] = "auto";
-		}
-		const minVal = parseDimensionValue(min);
-		const maxVal = parseDimensionValue(max);
-		if (minVal) styles[minStyle] = minVal;
-		if (maxVal) styles[maxStyle] = maxVal;
-		return styles;
-	};
-}
-//#endregion
 //#region src/styles/height.ts
-const dimension$1 = dimensionStyle("height");
+const dimension$2 = dimensionStyle("height");
 function heightStyle({ height, minHeight, maxHeight }) {
-	return dimension$1({
+	return dimension$2({
 		value: height,
 		min: minHeight,
 		max: maxHeight
@@ -3840,12 +3894,12 @@ function optimizeShorthand(property, dirs) {
 * Core directional style logic shared by padding, margin, inset, scrollMargin.
 */
 function processDirectionalStyle(config, props) {
-	const { main, block, inline, top, right, bottom, left } = props;
-	if (main == null && block == null && inline == null && top == null && right == null && bottom == null && left == null) return null;
+	const { main, top, right, bottom, left } = props;
+	if (main == null && top == null && right == null && bottom == null && left == null) return null;
 	const { property, defaultValue, trueValue, defaultInit, individualOnly, directionProperty, spanModifiers } = config;
 	const dirProp = directionProperty ?? ((dir) => `${property}-${dir}`);
 	if (individualOnly) {
-		if (main == null && block == null && inline == null) {
+		if (main == null) {
 			const result = {};
 			if (top != null) {
 				const val = parseSingleValue(top, defaultValue, trueValue);
@@ -3896,14 +3950,6 @@ function processDirectionalStyle(config, props) {
 			}
 		}
 	}
-	if (block != null) {
-		const val = parseSingleValue(block, defaultValue, trueValue);
-		if (val) dirs.top = dirs.bottom = val;
-	}
-	if (inline != null) {
-		const val = parseSingleValue(inline, defaultValue, trueValue);
-		if (val) dirs.left = dirs.right = val;
-	}
 	if (top != null) {
 		const val = parseSingleValue(top, defaultValue, trueValue);
 		if (val) dirs.top = val;
@@ -3939,11 +3985,9 @@ const INSET_CONFIG = {
 	spanModifiers: ["dock"],
 	directionProperty: (dir) => dir
 };
-function insetStyle({ inset, insetBlock, insetInline, top, right, bottom, left }) {
+function insetStyle({ inset, top, right, bottom, left }) {
 	return processDirectionalStyle(INSET_CONFIG, {
 		main: inset,
-		block: insetBlock,
-		inline: insetInline,
 		top,
 		right,
 		bottom,
@@ -3952,14 +3996,187 @@ function insetStyle({ inset, insetBlock, insetInline, top, right, bottom, left }
 }
 insetStyle.__lookupStyles = [
 	"inset",
-	"insetBlock",
-	"insetInline",
 	"top",
 	"right",
 	"bottom",
 	"left"
 ];
 //#endregion
+//#region src/styles/inlineSize.ts
+const dimension$1 = dimensionStyle("inline-size");
+function inlineSizeStyle({ inlineSize, minInlineSize, maxInlineSize }) {
+	return dimension$1({
+		value: inlineSize,
+		min: minInlineSize,
+		max: maxInlineSize
+	});
+}
+inlineSizeStyle.__lookupStyles = [...INLINE_SIZE_STYLES];
+//#endregion
+//#region src/styles/logical.ts
+const LOGICAL_DIRECTIONS = ["start", "end"];
+/**
+* Create one enhanced handler for one logical axis/category pair.
+*
+* The handler owns the native axis shorthand and its start/end declarations,
+* but never reads or converts a physical property. The browser remains
+* responsible for resolving logical edges from writing mode and direction.
+*/
+function logicalAxisStyle({ styleName, cssProperty, defaultValue, trueValue, defaultInit }) {
+	const handler = ((styles) => {
+		let value = styles[styleName];
+		if (value == null || value === false || value === "") return null;
+		if (value === true) value = trueValue;
+		if (typeof value === "number") value = `${value}px`;
+		const strValue = String(value);
+		if (CSS_WIDE_KEYWORDS.has(strValue)) return { [cssProperty]: strValue };
+		const groups = parseStyle(strValue).groups ?? [];
+		if (!groups.length) return null;
+		const edges = {
+			start: defaultInit,
+			end: defaultInit
+		};
+		let useLonghand = false;
+		for (const group of groups) {
+			const directions = filterMods(group.mods, LOGICAL_DIRECTIONS);
+			const keyword = extractCSSWideKeyword(group);
+			const values = keyword ? [keyword] : group.values.length ? group.values : [defaultValue];
+			if (directions.length && values.length > 1) warnExtraGroupValues(styleName, group.input, 1, LOGICAL_DIRECTIONS);
+			else if (!directions.length && values.length > 2) warnOnceDev(`extra-logical-axis-values:${styleName}:${group.input}`, `${styleName}="${group.input}": a logical axis takes at most two values in start/end order. The extra values are ignored.`);
+			if (group.mods.includes("longhand")) useLonghand = true;
+			if (!directions.length) {
+				edges.start = values[0];
+				edges.end = values[1] ?? values[0];
+			} else for (const direction of directions) edges[direction] = values[0];
+		}
+		if (useLonghand) return {
+			[`${cssProperty}-start`]: edges.start,
+			[`${cssProperty}-end`]: edges.end
+		};
+		return { [cssProperty]: edges.start === edges.end ? edges.start : `${edges.start} ${edges.end}` };
+	});
+	handler.__lookupStyles = [styleName];
+	return handler;
+}
+function zeroBorderValue(value) {
+	const firstSpace = value.indexOf(" ");
+	return firstSpace === -1 ? "0 solid var(--border-color, currentColor)" : `0${value.slice(firstSpace)}`;
+}
+/** Create one enhanced border handler for one logical axis. */
+function logicalBorderStyle(styleName, cssProperty) {
+	const handler = ((styles) => {
+		let value = styles[styleName];
+		if (value == null || value === false || value === "") return null;
+		if (value === true) value = "1bw";
+		if (typeof value === "number") value = `${value}px`;
+		const groups = parseStyle(String(value)).groups ?? [];
+		if (!groups.length) return null;
+		const edges = {
+			start: null,
+			end: null
+		};
+		let fallback = "0 solid var(--border-color, currentColor)";
+		let useLonghand = false;
+		for (const group of groups) {
+			const borderValue = parseBorderValue(group.input);
+			if (borderValue == null) continue;
+			const directions = filterMods(group.mods, LOGICAL_DIRECTIONS);
+			if (group.mods.includes("longhand")) useLonghand = true;
+			if (!directions.length) {
+				edges.start = borderValue;
+				edges.end = borderValue;
+			} else {
+				fallback = zeroBorderValue(borderValue);
+				for (const direction of directions) edges[direction] = borderValue;
+			}
+		}
+		const start = edges.start ?? fallback;
+		const end = edges.end ?? fallback;
+		if (!useLonghand && start === end) return { [cssProperty]: start };
+		return {
+			[`${cssProperty}-start`]: start,
+			[`${cssProperty}-end`]: end
+		};
+	});
+	handler.__lookupStyles = [styleName];
+	return handler;
+}
+/** One handler per logical axis/category; native CSS longhands stay ordinary. */
+const logicalStyleHandlers = {
+	blockPadding: logicalAxisStyle({
+		styleName: "blockPadding",
+		cssProperty: "padding-block",
+		defaultValue: "var(--gap)",
+		trueValue: "1x",
+		defaultInit: "0"
+	}),
+	inlinePadding: logicalAxisStyle({
+		styleName: "inlinePadding",
+		cssProperty: "padding-inline",
+		defaultValue: "var(--gap)",
+		trueValue: "1x",
+		defaultInit: "0"
+	}),
+	blockMargin: logicalAxisStyle({
+		styleName: "blockMargin",
+		cssProperty: "margin-block",
+		defaultValue: "var(--gap)",
+		trueValue: "1x",
+		defaultInit: "0"
+	}),
+	inlineMargin: logicalAxisStyle({
+		styleName: "inlineMargin",
+		cssProperty: "margin-inline",
+		defaultValue: "var(--gap)",
+		trueValue: "1x",
+		defaultInit: "0"
+	}),
+	blockInset: logicalAxisStyle({
+		styleName: "blockInset",
+		cssProperty: "inset-block",
+		defaultValue: "0",
+		trueValue: "0",
+		defaultInit: "auto"
+	}),
+	inlineInset: logicalAxisStyle({
+		styleName: "inlineInset",
+		cssProperty: "inset-inline",
+		defaultValue: "0",
+		trueValue: "0",
+		defaultInit: "auto"
+	}),
+	blockScrollMargin: logicalAxisStyle({
+		styleName: "blockScrollMargin",
+		cssProperty: "scroll-margin-block",
+		defaultValue: "0",
+		trueValue: "1x",
+		defaultInit: "0"
+	}),
+	inlineScrollMargin: logicalAxisStyle({
+		styleName: "inlineScrollMargin",
+		cssProperty: "scroll-margin-inline",
+		defaultValue: "0",
+		trueValue: "1x",
+		defaultInit: "0"
+	}),
+	blockScrollPadding: logicalAxisStyle({
+		styleName: "blockScrollPadding",
+		cssProperty: "scroll-padding-block",
+		defaultValue: "0",
+		trueValue: "1x",
+		defaultInit: "0"
+	}),
+	inlineScrollPadding: logicalAxisStyle({
+		styleName: "inlineScrollPadding",
+		cssProperty: "scroll-padding-inline",
+		defaultValue: "0",
+		trueValue: "1x",
+		defaultInit: "0"
+	}),
+	blockBorder: logicalBorderStyle("blockBorder", "border-block"),
+	inlineBorder: logicalBorderStyle("inlineBorder", "border-inline")
+};
+//#endregion
 //#region src/styles/margin.ts
 const MARGIN_CONFIG = {
 	property: "margin",
@@ -3967,11 +4184,9 @@ const MARGIN_CONFIG = {
 	trueValue: "1x",
 	defaultInit: "0"
 };
-function marginStyle({ margin, marginBlock, marginInline, marginTop, marginRight, marginBottom, marginLeft }) {
+function marginStyle({ margin, marginTop, marginRight, marginBottom, marginLeft }) {
 	return processDirectionalStyle(MARGIN_CONFIG, {
 		main: margin,
-		block: marginBlock,
-		inline: marginInline,
 		top: marginTop,
 		right: marginRight,
 		bottom: marginBottom,
@@ -3983,9 +4198,7 @@ marginStyle.__lookupStyles = [
 	"marginTop",
 	"marginRight",
 	"marginBottom",
-	"marginLeft",
-	"marginBlock",
-	"marginInline"
+	"marginLeft"
 ];
 //#endregion
 //#region src/styles/outline.ts
@@ -4045,11 +4258,9 @@ const PADDING_CONFIG = {
 	trueValue: "1x",
 	defaultInit: "0"
 };
-function paddingStyle({ padding, paddingBlock, paddingInline, paddingTop, paddingRight, paddingBottom, paddingLeft }) {
+function paddingStyle({ padding, paddingTop, paddingRight, paddingBottom, paddingLeft }) {
 	return processDirectionalStyle(PADDING_CONFIG, {
 		main: padding,
-		block: paddingBlock,
-		inline: paddingInline,
 		top: paddingTop,
 		right: paddingRight,
 		bottom: paddingBottom,
@@ -4061,9 +4272,7 @@ paddingStyle.__lookupStyles = [
 	"paddingTop",
 	"paddingRight",
 	"paddingBottom",
-	"paddingLeft",
-	"paddingBlock",
-	"paddingInline"
+	"paddingLeft"
 ];
 //#endregion
 //#region src/styles/placement.ts
@@ -4370,11 +4579,9 @@ const SCROLL_MARGIN_CONFIG = {
 	trueValue: "1x",
 	defaultInit: "0"
 };
-function scrollMarginStyle({ scrollMargin, scrollMarginBlock, scrollMarginInline, scrollMarginTop, scrollMarginRight, scrollMarginBottom, scrollMarginLeft }) {
+function scrollMarginStyle({ scrollMargin, scrollMarginTop, scrollMarginRight, scrollMarginBottom, scrollMarginLeft }) {
 	return processDirectionalStyle(SCROLL_MARGIN_CONFIG, {
 		main: scrollMargin,
-		block: scrollMarginBlock,
-		inline: scrollMarginInline,
 		top: scrollMarginTop,
 		right: scrollMarginRight,
 		bottom: scrollMarginBottom,
@@ -4386,9 +4593,31 @@ scrollMarginStyle.__lookupStyles = [
 	"scrollMarginTop",
 	"scrollMarginRight",
 	"scrollMarginBottom",
-	"scrollMarginLeft",
-	"scrollMarginBlock",
-	"scrollMarginInline"
+	"scrollMarginLeft"
+];
+//#endregion
+//#region src/styles/scrollPadding.ts
+const SCROLL_PADDING_CONFIG = {
+	property: "scroll-padding",
+	defaultValue: "0",
+	trueValue: "1x",
+	defaultInit: "0"
+};
+function scrollPaddingStyle({ scrollPadding, scrollPaddingTop, scrollPaddingRight, scrollPaddingBottom, scrollPaddingLeft }) {
+	return processDirectionalStyle(SCROLL_PADDING_CONFIG, {
+		main: scrollPadding,
+		top: scrollPaddingTop,
+		right: scrollPaddingRight,
+		bottom: scrollPaddingBottom,
+		left: scrollPaddingLeft
+	});
+}
+scrollPaddingStyle.__lookupStyles = [
+	"scrollPadding",
+	"scrollPaddingTop",
+	"scrollPaddingRight",
+	"scrollPaddingBottom",
+	"scrollPaddingLeft"
 ];
 //#endregion
 //#region src/styles/scrollbar.ts
@@ -4729,7 +4958,11 @@ function predefine() {
 		outlineStyle,
 		scrollbarStyle,
 		fadeStyle,
-		insetStyle
+		insetStyle,
+		blockSizeStyle,
+		inlineSizeStyle,
+		scrollPaddingStyle,
+		...Object.values(logicalStyleHandlers)
 	].forEach((handler) => defineCustomStyle(handler));
 	captureInitialHandlerState();
 	return {
@@ -4881,6 +5114,10 @@ function wrapHandler(handler) {
 	wrapped.__lookupStyles = handler.__lookupStyles;
 	return wrapped;
 }
+function wrapHandlerRecord(handlers) {
+	return Object.fromEntries(Object.entries(handlers).map(([name, handler]) => [name, wrapHandler(handler)]));
+}
+const wrappedLogicalStyleHandlers = wrapHandlerRecord(logicalStyleHandlers);
 /**
 * Exported object containing wrapped predefined style handlers.
 * Users can import and call these to extend or delegate to built-in behavior.
@@ -4905,6 +5142,7 @@ function wrapHandler(handler) {
 * ```
 */
 const styleHandlers = {
+	blockSize: wrapHandler(blockSizeStyle),
 	border: wrapHandler(borderStyle),
 	color: wrapHandler(colorStyle),
 	display: wrapHandler(displayStyle),
@@ -4915,6 +5153,8 @@ const styleHandlers = {
 	gap: wrapHandler(gapStyle),
 	height: wrapHandler(heightStyle),
 	inset: wrapHandler(insetStyle),
+	inlineSize: wrapHandler(inlineSizeStyle),
+	...wrappedLogicalStyleHandlers,
 	margin: wrapHandler(marginStyle),
 	outline: wrapHandler(outlineStyle),
 	padding: wrapHandler(paddingStyle),
@@ -4922,6 +5162,7 @@ const styleHandlers = {
 	preset: wrapHandler(presetStyle),
 	radius: wrapHandler(radiusStyle),
 	scrollMargin: wrapHandler(scrollMarginStyle),
+	scrollPadding: wrapHandler(scrollPaddingStyle),
 	scrollbar: wrapHandler(scrollbarStyle),
 	shadow: wrapHandler(shadowStyle),
 	transition: wrapHandler(transitionStyle),
@@ -11478,20 +11719,25 @@ const POSITION_STYLES = [
 	"justifySelf",
 	"zIndex",
 	"margin",
+	...LOGICAL_MARGIN_STYLES,
 	"inset",
+	...LOGICAL_INSET_STYLES,
 	"position",
-	"scrollMargin"
+	"scrollMargin",
+	...LOGICAL_SCROLL_MARGIN_STYLES,
+	"scrollPadding",
+	...LOGICAL_SCROLL_PADDING_STYLES
 ];
 const BLOCK_INNER_STYLES = [
 	"padding",
-	"paddingInline",
-	"paddingBlock",
+	...LOGICAL_PADDING_STYLES,
 	"overflow",
 	"scrollbar",
 	"textAlign"
 ];
 const BLOCK_OUTER_STYLES = [
 	"border",
+	...LOGICAL_BORDER_STYLES,
 	"radius",
 	"shadow",
 	"outline"
@@ -11511,6 +11757,7 @@ const TEXT_STYLES = [
 const DIMENSION_STYLES = [
 	"width",
 	"height",
+	...LOGICAL_SIZE_STYLES,
 	"flexBasis",
 	"flexGrow",
 	"flexShrink",
@@ -12418,4 +12665,4 @@ function resetConfig() {
 //#endregion
 export { SheetManager as $, StyleParser as $t, FLOW_STYLES as A, STYLE_TO_CHUNK as At, createStateParserContext as B, getGlobalParseFunctions as Bt, BASE_STYLES as C, APPEARANCE_CHUNK_STYLES as Ct, COLOR_STYLES as D, FONT_CHUNK_STYLES as Dt, BLOCK_STYLES as E, DISPLAY_CHUNK_STYLES as Et, hasPipelineCacheEntry as F, registerFunctionPolyfill as Ft, StyleInjector as G, parseStyle as Gt, extractPredefinedStateRefs as H, getGlobalPredefinedTokens as Ht, isSelector as I, registerLocalFunctionPolyfills as It, hasLocalCounterStyle as J, okhstPlugin as Jt, extractLocalCounterStyle as K, stringifyStyles as Kt, renderStyles as L, CUSTOM_UNITS as Lt, OUTER_STYLES as M, formatFunctionRule as Mt, POSITION_STYLES as N, hasLocalFunctions as Nt, CONTAINER_STYLES as O, LAYOUT_CHUNK_STYLES as Ot, TEXT_STYLES as P, parseFunctionName as Pt, hasLocalFontFace as Q, isDevEnv as Qt, parseStateKey as R, DIRECTIONS as Rt, baseStylePropsRegistry as S, propHandlerRegistry as St, BLOCK_OUTER_STYLES as T, DIMENSION_CHUNK_STYLES as Tt, getGlobalPredefinedStates as U, normalizeColorTokenValue as Ut, extractLocalPredefinedStates as V, getGlobalParser as Vt, setGlobalPredefinedStates as W, parseColor as Wt, fontFaceContentHash as X, okhslPlugin as Xt, extractLocalFontFace as Y, okhslFunction as Yt, formatFontFaceRule as Z, createColorFunc as Zt, isFunctionsPolyfillEnabled as _, hashString as _t, getGlobalCounterStyles as a, hslToRgbValues as an, closeBatchWindow as at, resetConfig as b, hasLocalProperties as bt, getGlobalInjector as c, openBatchWindow as ct, getGlobalStyles as d, DEFAULT_ZERO_NAME_PREFIX as dt, Lru as en, STYLE_HANDLER_MAP as et, getNamePrefix as f, makeClassName as ft, isConfigLocked as g, validateNamePrefix as gt, hasStylesGenerated as h, tastyClassRegex as ht, getGlobalConfigTokens as i, hexToRgb as in, PropertyTypeResolver as it, INNER_STYLES as j, extractLocalFunctions as jt, DIMENSION_STYLES as k, POSITION_CHUNK_STYLES as kt, getGlobalKeyframes as l, resetStyleBatch as lt, hasGlobalRecipes as m, makeKeyframeName as mt, getConfig as n, getNamedColorHex as nn, styleHandlers as nt, getGlobalFontFaces as o, strToRgb as on, flushStyles as ot, hasGlobalKeyframes as p, makeCounterStyleName as pt, formatCounterStyleRule as q, okhstFunction as qt, getEffectiveProperties as r, getRgbValuesFromRgbaString as rn, createStyle as rt, getGlobalFunctions as s, normalizeDslName as sn, hasPendingStyleWrites as st, configure as t, overrideColorAlpha as tn, defineHandler as tt, getGlobalRecipes as u, DEFAULT_NAME_PREFIX as ut, isTestEnvironment as v, extractLocalProperties as vt, BLOCK_INNER_STYLES as w, CHUNK_NAMES as wt, generateTypographyTokens as x, parsePropertyToken as xt, markStylesGenerated as y, getEffectiveDefinition as yt, camelToKebab as z, filterMods as zt };
 
-//# sourceMappingURL=config-B3gPdCqd.js.map
+//# sourceMappingURL=config-yXpe2jAV.js.map