@yahoo/uds-v5-wip 1.60.0 → 1.62.0

package/dist/config/dist/token-override-rows.d.ts

@@ -0,0 +1,67 @@
+import { TokenModifierKey } from "./types.js";
+
+//#region ../config/dist/token-override-rows.d.ts
+//#region src/token-override-rows.d.ts
+type OverrideModeRef = `${string}.${string}`;
+type ModifierTreeValue<TValue> = TValue | {
+  value?: TValue;
+  [modifier: TokenModifierKey]: ModifierTreeValue<TValue> | undefined;
+};
+type ModifierTree<TValue> = Partial<Record<TokenModifierKey, ModifierTreeValue<TValue>>>;
+type ModifierUpdateValue<TValue> = TValue | null | ModifierUpdateObject<TValue>;
+interface ModifierUpdateObject<TValue> {
+  value?: TValue | null;
+  [key: string]: ModifierUpdateValue<TValue> | undefined;
+  [modifier: TokenModifierKey]: ModifierUpdateValue<TValue> | undefined;
+}
+type ModifierUpdate<TValue> = Record<string, ModifierUpdateValue<TValue> | undefined>;
+interface ModeBackedModifierInput {
+  modifier: TokenModifierKey;
+  mode: string;
+  option: string;
+  label?: string;
+  modeOrder: number;
+  optionOrder: number;
+}
+interface ModeBackedModifierDefinition extends ModeBackedModifierInput {
+  modeRef: OverrideModeRef;
+}
+interface ModeBackedModifierLookup {
+  byModifier: ReadonlyMap<TokenModifierKey, ModeBackedModifierDefinition>;
+  byModeRef: ReadonlyMap<OverrideModeRef, ModeBackedModifierDefinition>;
+}
+interface OverrideRow<TValue = string> {
+  modes: OverrideModeRef[];
+  value: TValue;
+  sourceModifierPath: TokenModifierKey[];
+  sourceOrder: number;
+}
+interface ModeBackedModeMetadata {
+  name: string;
+  options: readonly {
+    name: string;
+    label?: string;
+  }[];
+}
+interface ModeBackedModifierMetadata {
+  modifier: TokenModifierKey;
+  selector?: unknown;
+}
+declare function createModeBackedModifierLookup(inputs: readonly ModeBackedModifierInput[]): ModeBackedModifierLookup;
+declare function buildModeBackedModifierLookup(modes: readonly ModeBackedModeMetadata[], modifiers: readonly ModeBackedModifierMetadata[]): ModeBackedModifierLookup;
+declare function modifierTreeToOverrideRows<TValue>(modifiers: ModifierTree<TValue> | undefined, lookup: ModeBackedModifierLookup): OverrideRow<TValue>[];
+declare function overrideRowsToModifierTree<TValue>(rows: readonly OverrideRow<TValue>[], lookup: ModeBackedModifierLookup): ModifierTree<TValue>;
+declare function resolveOverrideRowValue<TValue>(baseValue: TValue, rows: readonly Pick<OverrideRow<TValue>, 'modes' | 'value'>[], activeModes: Iterable<OverrideModeRef>): TValue;
+declare function modifierPathToId(path: readonly TokenModifierKey[]): string;
+declare function modifierIdToPath(id: string): TokenModifierKey[];
+declare function buildNestedModifierUpdate<TValue>(modifierPath: readonly TokenModifierKey[], value: ModifierUpdateValue<TValue>): Record<TokenModifierKey, ModifierUpdateValue<TValue>>;
+/**
+ * Combines multiple token-modifier update payloads into one patch
+ * object. Later updates win on scalar/null leaves; object branches
+ * deep-merge so swap operations can delete one nested row and set
+ * another nested row under the same parent modifier in a single
+ * patch.
+ */
+declare function mergeModifierUpdates<TValue>(...updates: readonly ModifierUpdate<TValue>[]): Record<string, ModifierUpdateValue<TValue>>; //#endregion
+//#endregion
+export { ModeBackedModifierDefinition, ModeBackedModifierInput, ModeBackedModifierLookup, OverrideModeRef, OverrideRow, buildModeBackedModifierLookup, buildNestedModifierUpdate, createModeBackedModifierLookup, mergeModifierUpdates, modifierIdToPath, modifierPathToId, modifierTreeToOverrideRows, overrideRowsToModifierTree, resolveOverrideRowValue };

package/dist/config/dist/token-override-rows.js

@@ -0,0 +1,223 @@
+//#region ../config/dist/token-override-rows.js
+function createModeBackedModifierLookup(inputs) {
+	const byModifier = /* @__PURE__ */ new Map();
+	const byModeRef = /* @__PURE__ */ new Map();
+	for (const input of inputs) {
+		const definition = {
+			...input,
+			modeRef: `${input.mode}.${input.option}`
+		};
+		byModifier.set(input.modifier, definition);
+		byModeRef.set(definition.modeRef, definition);
+	}
+	return {
+		byModifier,
+		byModeRef
+	};
+}
+function buildModeBackedModifierLookup(modes, modifiers) {
+	const optionMetadata = /* @__PURE__ */ new Map();
+	modes.forEach((mode, modeOrder) => {
+		mode.options.forEach((option, optionOrder) => {
+			optionMetadata.set(`${mode.name}/${option.name}`, {
+				mode: mode.name,
+				option: option.name,
+				label: option.label ?? option.name,
+				modeOrder,
+				optionOrder
+			});
+		});
+	});
+	const inputs = [];
+	for (const modifier of modifiers) {
+		const marker = getModeMarker(modifier.selector);
+		if (!marker) continue;
+		const metadata = optionMetadata.get(marker.ref);
+		if (!metadata) continue;
+		inputs.push({
+			...metadata,
+			modifier: modifier.modifier
+		});
+	}
+	return createModeBackedModifierLookup(inputs);
+}
+function modifierTreeToOverrideRows(modifiers, lookup) {
+	const rows = [];
+	let sourceOrder = 0;
+	const visit = (value, modifierPath) => {
+		const node = asModifierNode(value);
+		const modes = canonicalizeModifierPath(modifierPath, lookup);
+		if (!node) {
+			rows.push({
+				modes,
+				value,
+				sourceModifierPath: modifierPath,
+				sourceOrder
+			});
+			sourceOrder++;
+			return;
+		}
+		if (Object.hasOwn(node, "value") && node.value !== void 0) {
+			rows.push({
+				modes,
+				value: node.value,
+				sourceModifierPath: modifierPath,
+				sourceOrder
+			});
+			sourceOrder++;
+		}
+		for (const [key, nestedValue] of Object.entries(node)) {
+			if (key === "value" || nestedValue === void 0) continue;
+			if (!isModifierKey(key) || !lookup.byModifier.has(key)) continue;
+			visit(nestedValue, [...modifierPath, key]);
+		}
+	};
+	for (const [modifier, value] of Object.entries(modifiers ?? {})) {
+		if (value === void 0) continue;
+		if (!isModifierKey(modifier) || !lookup.byModifier.has(modifier)) continue;
+		visit(value, [modifier]);
+	}
+	return rows;
+}
+function overrideRowsToModifierTree(rows, lookup) {
+	const tree = {};
+	for (const row of rows) {
+		const path = resolveWritableModifierPath(row, lookup);
+		if (path.length === 0) continue;
+		assignModifierPath(tree, path, row.value);
+	}
+	return tree;
+}
+function resolveOverrideRowValue(baseValue, rows, activeModes) {
+	const active = new Set(activeModes);
+	let resolved = baseValue;
+	let bestSpecificity = -1;
+	let bestOrder = -1;
+	rows.forEach((row, order) => {
+		if (!row.modes.every((mode) => active.has(mode))) return;
+		const specificity = row.modes.length;
+		if (specificity < bestSpecificity) return;
+		if (specificity === bestSpecificity && order < bestOrder) return;
+		resolved = row.value;
+		bestSpecificity = specificity;
+		bestOrder = order;
+	});
+	return resolved;
+}
+function modifierPathToId(path) {
+	return path.join(".");
+}
+function modifierIdToPath(id) {
+	return id.split(".").filter(isModifierKey).map((part) => part);
+}
+function buildNestedModifierUpdate(modifierPath, value) {
+	if (modifierPath.length === 0) return {};
+	const [first, ...rest] = modifierPath;
+	if (!first) return {};
+	if (rest.length === 0) return { [first]: value };
+	return { [first]: buildNestedModifierUpdate(rest, value) };
+}
+/**
+* Combines multiple token-modifier update payloads into one patch
+* object. Later updates win on scalar/null leaves; object branches
+* deep-merge so swap operations can delete one nested row and set
+* another nested row under the same parent modifier in a single
+* patch.
+*/
+function mergeModifierUpdates(...updates) {
+	const merged = {};
+	for (const update of updates) mergeModifierUpdateInto(merged, update);
+	return merged;
+}
+function getModeMarker(selector) {
+	if (typeof selector !== "object" || selector === null) return null;
+	const marker = selector;
+	if (marker.__kind !== "mode" || typeof marker.ref !== "string") return null;
+	return {
+		__kind: "mode",
+		ref: marker.ref
+	};
+}
+function mergeModifierUpdateInto(target, update) {
+	for (const [key, value] of Object.entries(update)) {
+		if (value === void 0) continue;
+		const current = target[key];
+		if (isModifierUpdateObject(current) && isModifierUpdateObject(value)) {
+			target[key] = mergeModifierUpdateObjects(current, value);
+			continue;
+		}
+		target[key] = value;
+	}
+}
+function mergeModifierUpdateObjects(current, update) {
+	const merged = {};
+	for (const [key, value] of Object.entries(current)) if (value !== void 0) merged[key] = value;
+	mergeModifierUpdateInto(merged, update);
+	return merged;
+}
+function isModifierUpdateObject(value) {
+	return typeof value === "object" && value !== null;
+}
+function canonicalizeModifierPath(modifierPath, lookup) {
+	return modifierPath.map((modifier) => lookup.byModifier.get(modifier)).filter((definition) => definition !== void 0).sort(compareModeBackedModifiers).map((definition) => definition.modeRef);
+}
+function resolveWritableModifierPath(row, lookup) {
+	if (pathMatchesModes(row.sourceModifierPath, row.modes, lookup)) return row.sourceModifierPath;
+	return row.modes.map((modeRef) => lookup.byModeRef.get(modeRef)).filter((definition) => definition !== void 0).sort(compareModeBackedModifiers).map((definition) => definition.modifier);
+}
+function pathMatchesModes(path, modes, lookup) {
+	if (path.length !== modes.length) return false;
+	const pathModes = canonicalizeModifierPath(path, lookup);
+	const expectedModes = [...modes].sort((a, b) => compareModeBackedModifiersByRef(a, b, lookup));
+	return pathModes.length === expectedModes.length && pathModes.every((mode, index) => mode === expectedModes[index]);
+}
+function assignModifierPath(tree, path, value) {
+	const [modifier, ...rest] = path;
+	if (!modifier) return;
+	if (rest.length === 0) {
+		tree[modifier] = mergeLeafValue(tree[modifier], value);
+		return;
+	}
+	const current = tree[modifier];
+	const node = asWritableModifierNode(current);
+	tree[modifier] = node;
+	assignModifierPath(node, rest, value);
+}
+function mergeLeafValue(current, value) {
+	const node = asModifierNode(current);
+	if (!node) return value;
+	return {
+		...node,
+		value
+	};
+}
+function asWritableModifierNode(current) {
+	const node = asModifierNode(current);
+	if (node) return { ...node };
+	if (current !== void 0) return { value: current };
+	return {};
+}
+function asModifierNode(value) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return null;
+	if (Object.hasOwn(value, "value")) return value;
+	if (Object.keys(value).some(isModifierKey)) return value;
+	return null;
+}
+function isModifierKey(value) {
+	return value.startsWith("_");
+}
+function compareModeBackedModifiers(a, b) {
+	if (a.modeOrder !== b.modeOrder) return a.modeOrder - b.modeOrder;
+	if (a.optionOrder !== b.optionOrder) return a.optionOrder - b.optionOrder;
+	return a.modifier.localeCompare(b.modifier);
+}
+function compareModeBackedModifiersByRef(a, b, lookup) {
+	const aDefinition = lookup.byModeRef.get(a);
+	const bDefinition = lookup.byModeRef.get(b);
+	if (aDefinition && bDefinition) return compareModeBackedModifiers(aDefinition, bDefinition);
+	if (aDefinition) return -1;
+	if (bDefinition) return 1;
+	return a.localeCompare(b);
+}
+//#endregion
+export { buildModeBackedModifierLookup, buildNestedModifierUpdate, createModeBackedModifierLookup, mergeModifierUpdates, modifierIdToPath, modifierPathToId, modifierTreeToOverrideRows, overrideRowsToModifierTree, resolveOverrideRowValue };

package/dist/config/dist/tokenValueType.js

@@ -0,0 +1,138 @@
+//#region ../config/dist/tokenValueType.js
+const CSS_STRING_KEYWORDS = new Set([
+	"inherit",
+	"initial",
+	"unset",
+	"revert",
+	"revert-layer",
+	"auto",
+	"none",
+	"currentColor",
+	"currentcolor",
+	"transparent",
+	"min-content",
+	"max-content",
+	"fit-content"
+]);
+const HEX_COLOR_RE = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+const COLOR_FUNCTION_RE = /^(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|color|color-mix|light-dark)\s*\(/i;
+const GRADIENT_FUNCTION_RE = /^(?:linear|radial|conic|repeating-linear|repeating-radial|repeating-conic)-gradient\s*\(/i;
+const EASING_FUNCTION_RE = /^(?:cubic-bezier|steps)\s*\(/i;
+const EASING_KEYWORDS = new Set([
+	"linear",
+	"ease",
+	"ease-in",
+	"ease-out",
+	"ease-in-out",
+	"step-start",
+	"step-end"
+]);
+const NAMED_COLOR_KEYWORDS = new Set([
+	"aliceblue",
+	"antiquewhite",
+	"aqua",
+	"aquamarine",
+	"azure",
+	"beige",
+	"bisque",
+	"black",
+	"blue",
+	"brown",
+	"crimson",
+	"cyan",
+	"fuchsia",
+	"gold",
+	"gray",
+	"grey",
+	"green",
+	"indigo",
+	"lavender",
+	"lime",
+	"magenta",
+	"maroon",
+	"navy",
+	"olive",
+	"orange",
+	"pink",
+	"purple",
+	"red",
+	"salmon",
+	"silver",
+	"teal",
+	"tomato",
+	"violet",
+	"white",
+	"yellow"
+]);
+const NUMBER_RE_SRC = "(?:\\d+(?:\\.\\d+)?|\\.\\d+)";
+const DIMENSION_RE = new RegExp(`^-?${NUMBER_RE_SRC}(?:px|rem|em|%|vh|vw|vmin|vmax|vi|vb|svh|svw|lvh|lvw|dvh|dvw|ch|ex|cap|ic|lh|rlh|pt|pc|in|cm|mm|q|fr|deg|turn|rad|grad)$`, "i");
+const DURATION_RE = new RegExp(`^-?${NUMBER_RE_SRC}(?:ms|s)$`, "i");
+const PURE_NUMBER_RE = new RegExp(`^-?${NUMBER_RE_SRC}$`);
+const RATIO_RE = /^\d+(?:\.\d+)?\s*\/\s*\d+(?:\.\d+)?$/;
+const SHADOW_LENGTH_RE = /(?:^|[\s,])-?\d+(?:\.\d+)?(?:px|rem|em|ch|ex)/i;
+const SHADOW_COLOR_RE = /(?:rgba?|hsla?|color|oklch|oklab|lch|lab|hwb)\(|#[0-9a-fA-F]{3,8}\b/;
+function looksLikeShadow(value) {
+	return SHADOW_LENGTH_RE.test(value) && SHADOW_COLOR_RE.test(value);
+}
+/**
+* Heuristic CSS-value classifier. Given a raw value string, returns the
+* best-guess type or `undefined` when no confident match is possible
+* (e.g. `var(...)` references). Used by `Token.sniffValueType` and as
+* the value-shape tier of {@link resolveTokenValueType}.
+*/
+function sniffTokenType(value) {
+	const v = value.trim();
+	if (v.length === 0) return void 0;
+	if (CSS_STRING_KEYWORDS.has(v)) return "string";
+	if (v.startsWith("var(")) return void 0;
+	if (COLOR_FUNCTION_RE.test(v)) return "color";
+	if (HEX_COLOR_RE.test(v)) return "color";
+	if (NAMED_COLOR_KEYWORDS.has(v.toLowerCase())) return "color";
+	if (GRADIENT_FUNCTION_RE.test(v)) return "gradient";
+	if (EASING_FUNCTION_RE.test(v)) return "easing-function";
+	if (EASING_KEYWORDS.has(v.toLowerCase())) return "easing-function";
+	if (DURATION_RE.test(v)) return "time";
+	if (DIMENSION_RE.test(v)) {
+		if (v.endsWith("%")) return "percentage";
+		if (/(deg|rad|grad|turn)$/i.test(v)) return "angle";
+		return "length";
+	}
+	if (PURE_NUMBER_RE.test(v)) return "number";
+	if (RATIO_RE.test(v)) return "ratio";
+	if (looksLikeShadow(v)) return "shadow";
+}
+/**
+* Resolve a token's effective {@link CssValueTypeName} using the
+* canonical 3-tier precedence:
+*
+*   1. Per-token explicit `type` — authored override always wins.
+*   2. Value-shape sniff — handles `'#1167f4' → color` even inside a
+*      `string` group, and `'transparent' → string` even inside a
+*      `color` group.
+*   3. Group `type` — least-specific fallback for legacy untyped
+*      values.
+*
+* `length-percentage` narrows to `length` / `percentage` / `angle` /
+* `time` based on the trailing suffix; `string` narrows to `shadow`
+* when the value looks like a CSS shadow declaration.
+*/
+function resolveTokenValueType(token, groupType) {
+	let resolved;
+	if (token.type) resolved = token.type;
+	else {
+		resolved = sniffTokenType(token.value);
+		if (resolved === void 0 && groupType) resolved = groupType;
+	}
+	if (resolved === void 0) return void 0;
+	const trimmed = token.value.trim();
+	if (resolved === "length-percentage") {
+		if (trimmed.endsWith("%")) return "percentage";
+		if (/(deg|rad|grad|turn)$/.test(trimmed)) return "angle";
+		if (/(ms|s)$/.test(trimmed)) return "time";
+		return "length";
+	}
+	if (resolved === "string" && looksLikeShadow(trimmed)) return "shadow";
+	return resolved;
+}
+//#endregion
+export { resolveTokenValueType, sniffTokenType };

package/dist/config/dist/types/css-properties.d.ts

@@ -0,0 +1,233 @@
+import { CssValue, CssVarRef } from "./css-values.js";
+import { CSS_PROPERTY_KEYWORDS } from "./css-property-keywords.js";
+
+//#region ../config/dist/types/css-properties.d.ts
+//#region src/types/css-properties.d.ts
+type LengthPercentageOrVar = CssValue['length-percentage'] | CssVarRef;
+type LengthOrVar = CssValue['length'] | CssVarRef;
+type ColorOrVar = CssValue['color'] | CssVarRef;
+type NumberOrVar = CssValue['number'] | CssVarRef;
+type IntegerOrVar = CssValue['integer'] | CssVarRef;
+type TimeOrVar = CssValue['time'] | CssVarRef;
+type AngleOrVar = CssValue['angle'] | CssVarRef;
+type IntrinsicSize = 'auto' | 'min-content' | 'max-content' | 'fit-content';
+type GlobalKeyword = 'inherit' | 'initial' | 'unset' | 'revert';
+type CssPropertyValues = {
+  gap: LengthPercentageOrVar;
+  'column-gap': LengthPercentageOrVar;
+  'row-gap': LengthPercentageOrVar;
+  padding: LengthPercentageOrVar;
+  'padding-top': LengthPercentageOrVar;
+  'padding-right': LengthPercentageOrVar;
+  'padding-bottom': LengthPercentageOrVar;
+  'padding-left': LengthPercentageOrVar;
+  'padding-block': LengthPercentageOrVar;
+  'padding-inline': LengthPercentageOrVar;
+  'padding-inline-start': LengthPercentageOrVar;
+  'padding-inline-end': LengthPercentageOrVar;
+  margin: LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['margin'][number];
+  'margin-top': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['margin-top'][number];
+  'margin-right': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['margin-right'][number];
+  'margin-bottom': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['margin-bottom'][number];
+  'margin-left': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['margin-left'][number];
+  'margin-block': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['margin-block'][number];
+  'margin-inline': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['margin-inline'][number];
+  'margin-inline-start': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['margin-inline-start'][number];
+  'margin-inline-end': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['margin-inline-end'][number];
+  top: LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['top'][number];
+  right: LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['right'][number];
+  bottom: LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['bottom'][number];
+  left: LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['left'][number];
+  inset: LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['inset'][number];
+  'inset-block': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['inset-block'][number];
+  'inset-inline': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['inset-inline'][number];
+  'inset-inline-start': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['inset-inline-start'][number];
+  'inset-inline-end': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['inset-inline-end'][number];
+  'inset-block-start': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['inset-block-start'][number];
+  'inset-block-end': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['inset-block-end'][number];
+  'scroll-margin': LengthPercentageOrVar;
+  'scroll-margin-top': LengthPercentageOrVar;
+  'scroll-margin-bottom': LengthPercentageOrVar;
+  'scroll-margin-block': LengthPercentageOrVar;
+  'scroll-margin-inline': LengthPercentageOrVar;
+  'scroll-margin-inline-start': LengthPercentageOrVar;
+  'scroll-margin-inline-end': LengthPercentageOrVar;
+  'scroll-padding': LengthPercentageOrVar;
+  'scroll-padding-top': LengthPercentageOrVar;
+  'scroll-padding-bottom': LengthPercentageOrVar;
+  'scroll-padding-block': LengthPercentageOrVar;
+  'scroll-padding-inline': LengthPercentageOrVar;
+  'scroll-padding-inline-start': LengthPercentageOrVar;
+  'scroll-padding-inline-end': LengthPercentageOrVar;
+  width: LengthPercentageOrVar | IntrinsicSize;
+  height: LengthPercentageOrVar | IntrinsicSize;
+  'min-width': LengthPercentageOrVar | IntrinsicSize;
+  'max-width': LengthPercentageOrVar | IntrinsicSize | (typeof CSS_PROPERTY_KEYWORDS)['max-width'][number];
+  'min-height': LengthPercentageOrVar | IntrinsicSize;
+  'max-height': LengthPercentageOrVar | IntrinsicSize | (typeof CSS_PROPERTY_KEYWORDS)['max-height'][number];
+  'border-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['border-width'][number];
+  'border-top-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['border-top-width'][number];
+  'border-right-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['border-right-width'][number];
+  'border-bottom-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['border-bottom-width'][number];
+  'border-left-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['border-left-width'][number];
+  'border-block-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['border-block-width'][number];
+  'border-inline-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['border-inline-width'][number];
+  'border-inline-start-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['border-inline-start-width'][number];
+  'border-inline-end-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['border-inline-end-width'][number];
+  'outline-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['outline-width'][number];
+  'outline-offset': LengthOrVar;
+  'border-spacing': LengthOrVar;
+  'border-radius': LengthPercentageOrVar;
+  'border-top-left-radius': LengthPercentageOrVar;
+  'border-top-right-radius': LengthPercentageOrVar;
+  'border-bottom-left-radius': LengthPercentageOrVar;
+  'border-bottom-right-radius': LengthPercentageOrVar;
+  'border-start-start-radius': LengthPercentageOrVar;
+  'border-start-end-radius': LengthPercentageOrVar;
+  'border-end-start-radius': LengthPercentageOrVar;
+  'border-end-end-radius': LengthPercentageOrVar;
+  'border-style': (typeof CSS_PROPERTY_KEYWORDS)['border-style'][number] | CssVarRef;
+  'border-top-style': (typeof CSS_PROPERTY_KEYWORDS)['border-top-style'][number] | CssVarRef;
+  'border-bottom-style': (typeof CSS_PROPERTY_KEYWORDS)['border-bottom-style'][number] | CssVarRef;
+  'border-inline-start-style': (typeof CSS_PROPERTY_KEYWORDS)['border-inline-start-style'][number] | CssVarRef;
+  'border-inline-end-style': (typeof CSS_PROPERTY_KEYWORDS)['border-inline-end-style'][number] | CssVarRef;
+  'outline-style': (typeof CSS_PROPERTY_KEYWORDS)['outline-style'][number] | CssVarRef;
+  'text-decoration-style': (typeof CSS_PROPERTY_KEYWORDS)['text-decoration-style'][number] | CssVarRef;
+  'text-decoration-thickness': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['text-decoration-thickness'][number];
+  'text-underline-offset': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['text-underline-offset'][number];
+  color: ColorOrVar;
+  'background-color': ColorOrVar;
+  'background-image': string;
+  'border-color': ColorOrVar;
+  'border-top-color': ColorOrVar;
+  'border-right-color': ColorOrVar;
+  'border-bottom-color': ColorOrVar;
+  'border-left-color': ColorOrVar;
+  'border-block-color': ColorOrVar;
+  'border-inline-color': ColorOrVar;
+  'border-inline-start-color': ColorOrVar;
+  'border-inline-end-color': ColorOrVar;
+  'outline-color': ColorOrVar | (typeof CSS_PROPERTY_KEYWORDS)['outline-color'][number];
+  'text-decoration-color': ColorOrVar;
+  'caret-color': ColorOrVar | (typeof CSS_PROPERTY_KEYWORDS)['caret-color'][number];
+  fill: ColorOrVar | (typeof CSS_PROPERTY_KEYWORDS)['fill'][number];
+  stroke: ColorOrVar | (typeof CSS_PROPERTY_KEYWORDS)['stroke'][number];
+  'stroke-width': LengthPercentageOrVar | CssValue['number'];
+  'scrollbar-color': ColorOrVar | (typeof CSS_PROPERTY_KEYWORDS)['scrollbar-color'][number] | `${string} ${string}`;
+  'font-size': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['font-size'][number];
+  'font-weight': CssValue['font-weight'] | CssVarRef;
+  'font-family': CssValue['font-family'] | CssVarRef;
+  'font-style': (typeof CSS_PROPERTY_KEYWORDS)['font-style'][number] | `oblique ${string}` | CssVarRef;
+  'font-stretch': CssValue['percentage'] | (typeof CSS_PROPERTY_KEYWORDS)['font-stretch'][number] | CssVarRef;
+  'font-variant-numeric': string | CssVarRef;
+  'line-height': LengthPercentageOrVar | NumberOrVar | (typeof CSS_PROPERTY_KEYWORDS)['line-height'][number];
+  'letter-spacing': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['letter-spacing'][number];
+  'text-align': (typeof CSS_PROPERTY_KEYWORDS)['text-align'][number] | CssVarRef;
+  'text-transform': (typeof CSS_PROPERTY_KEYWORDS)['text-transform'][number] | CssVarRef;
+  'text-indent': LengthPercentageOrVar;
+  'text-wrap': (typeof CSS_PROPERTY_KEYWORDS)['text-wrap'][number] | CssVarRef;
+  'text-overflow': (typeof CSS_PROPERTY_KEYWORDS)['text-overflow'][number] | string;
+  'text-decoration-line': (typeof CSS_PROPERTY_KEYWORDS)['text-decoration-line'][number] | string | CssVarRef;
+  'text-shadow': CssValue['shadow'] | (typeof CSS_PROPERTY_KEYWORDS)['text-shadow'][number] | CssVarRef;
+  'white-space': (typeof CSS_PROPERTY_KEYWORDS)['white-space'][number] | CssVarRef;
+  'word-break': (typeof CSS_PROPERTY_KEYWORDS)['word-break'][number] | CssVarRef;
+  'overflow-wrap': (typeof CSS_PROPERTY_KEYWORDS)['overflow-wrap'][number] | CssVarRef;
+  hyphens: (typeof CSS_PROPERTY_KEYWORDS)['hyphens'][number] | CssVarRef;
+  'list-style-type': string | CssVarRef;
+  'list-style-image': CssValue['url'] | (typeof CSS_PROPERTY_KEYWORDS)['list-style-image'][number] | CssVarRef;
+  'list-style-position': (typeof CSS_PROPERTY_KEYWORDS)['list-style-position'][number] | CssVarRef;
+  'vertical-align': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['vertical-align'][number];
+  '-webkit-font-smoothing': (typeof CSS_PROPERTY_KEYWORDS)['-webkit-font-smoothing'][number];
+  '-webkit-line-clamp': IntegerOrVar | (typeof CSS_PROPERTY_KEYWORDS)['-webkit-line-clamp'][number];
+  display: (typeof CSS_PROPERTY_KEYWORDS)['display'][number] | CssVarRef;
+  visibility: (typeof CSS_PROPERTY_KEYWORDS)['visibility'][number] | CssVarRef;
+  isolation: (typeof CSS_PROPERTY_KEYWORDS)['isolation'][number] | CssVarRef;
+  position: (typeof CSS_PROPERTY_KEYWORDS)['position'][number] | CssVarRef;
+  'box-sizing': (typeof CSS_PROPERTY_KEYWORDS)['box-sizing'][number] | CssVarRef;
+  'container-type': (typeof CSS_PROPERTY_KEYWORDS)['container-type'][number] | CssVarRef;
+  columns: IntegerOrVar | LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['columns'][number] | `${number} ${string}`;
+  flex: string | NumberOrVar | (typeof CSS_PROPERTY_KEYWORDS)['flex'][number];
+  'flex-direction': (typeof CSS_PROPERTY_KEYWORDS)['flex-direction'][number] | CssVarRef;
+  'flex-wrap': (typeof CSS_PROPERTY_KEYWORDS)['flex-wrap'][number] | CssVarRef;
+  'flex-grow': NumberOrVar;
+  'flex-shrink': NumberOrVar;
+  'flex-basis': LengthPercentageOrVar | IntrinsicSize | (typeof CSS_PROPERTY_KEYWORDS)['flex-basis'][number];
+  'justify-content': (typeof CSS_PROPERTY_KEYWORDS)['justify-content'][number] | CssVarRef;
+  'align-items': (typeof CSS_PROPERTY_KEYWORDS)['align-items'][number] | CssVarRef;
+  'align-content': (typeof CSS_PROPERTY_KEYWORDS)['align-content'][number] | CssVarRef;
+  'align-self': (typeof CSS_PROPERTY_KEYWORDS)['align-self'][number] | CssVarRef;
+  'place-content': string | CssVarRef;
+  'place-items': string | CssVarRef;
+  'place-self': string | CssVarRef;
+  order: IntegerOrVar;
+  'grid-template-columns': string | (typeof CSS_PROPERTY_KEYWORDS)['grid-template-columns'][number] | CssVarRef;
+  'grid-template-rows': string | (typeof CSS_PROPERTY_KEYWORDS)['grid-template-rows'][number] | CssVarRef;
+  'grid-column': string | (typeof CSS_PROPERTY_KEYWORDS)['grid-column'][number] | CssVarRef;
+  'grid-column-start': string | (typeof CSS_PROPERTY_KEYWORDS)['grid-column-start'][number] | CssVarRef;
+  'grid-column-end': string | (typeof CSS_PROPERTY_KEYWORDS)['grid-column-end'][number] | CssVarRef;
+  'grid-row': string | (typeof CSS_PROPERTY_KEYWORDS)['grid-row'][number] | CssVarRef;
+  'grid-row-start': string | (typeof CSS_PROPERTY_KEYWORDS)['grid-row-start'][number] | CssVarRef;
+  'grid-row-end': string | (typeof CSS_PROPERTY_KEYWORDS)['grid-row-end'][number] | CssVarRef;
+  transform: string | (typeof CSS_PROPERTY_KEYWORDS)['transform'][number] | CssVarRef;
+  'transform-origin': string | CssVarRef;
+  rotate: AngleOrVar | (typeof CSS_PROPERTY_KEYWORDS)['rotate'][number] | `${number}` | `${string} ${string}`;
+  scale: NumberOrVar | (typeof CSS_PROPERTY_KEYWORDS)['scale'][number] | `${number} ${number}` | `${number} ${number} ${number}`;
+  translate: LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['translate'][number] | `${string} ${string}` | `${string} ${string} ${string}`;
+  transition: string | (typeof CSS_PROPERTY_KEYWORDS)['transition'][number] | CssVarRef;
+  'transition-property': string | (typeof CSS_PROPERTY_KEYWORDS)['transition-property'][number] | CssVarRef;
+  'transition-duration': TimeOrVar;
+  'transition-delay': TimeOrVar;
+  'transition-timing-function': CssValue['easing-function'] | CssVarRef;
+  'transition-behavior': (typeof CSS_PROPERTY_KEYWORDS)['transition-behavior'][number] | CssVarRef;
+  animation: string | (typeof CSS_PROPERTY_KEYWORDS)['animation'][number] | CssVarRef;
+  opacity: CssValue['percentage'] | NumberOrVar;
+  'fill-opacity': CssValue['percentage'] | NumberOrVar;
+  'box-shadow': CssValue['shadow'] | (typeof CSS_PROPERTY_KEYWORDS)['box-shadow'][number] | CssVarRef;
+  filter: string | (typeof CSS_PROPERTY_KEYWORDS)['filter'][number] | CssVarRef;
+  'backdrop-filter': string | (typeof CSS_PROPERTY_KEYWORDS)['backdrop-filter'][number] | CssVarRef;
+  'mix-blend-mode': (typeof CSS_PROPERTY_KEYWORDS)['mix-blend-mode'][number] | CssVarRef;
+  'background-blend-mode': (typeof CSS_PROPERTY_KEYWORDS)['background-blend-mode'][number] | CssVarRef;
+  overflow: (typeof CSS_PROPERTY_KEYWORDS)['overflow'][number] | CssVarRef;
+  'overflow-x': (typeof CSS_PROPERTY_KEYWORDS)['overflow-x'][number] | CssVarRef;
+  'overflow-y': (typeof CSS_PROPERTY_KEYWORDS)['overflow-y'][number] | CssVarRef;
+  'overscroll-behavior': (typeof CSS_PROPERTY_KEYWORDS)['overscroll-behavior'][number] | CssVarRef;
+  'scroll-behavior': (typeof CSS_PROPERTY_KEYWORDS)['scroll-behavior'][number] | CssVarRef;
+  'scroll-snap-align': (typeof CSS_PROPERTY_KEYWORDS)['scroll-snap-align'][number] | CssVarRef;
+  'scroll-snap-stop': (typeof CSS_PROPERTY_KEYWORDS)['scroll-snap-stop'][number] | CssVarRef;
+  'scroll-snap-type': string | (typeof CSS_PROPERTY_KEYWORDS)['scroll-snap-type'][number] | CssVarRef;
+  'scrollbar-width': (typeof CSS_PROPERTY_KEYWORDS)['scrollbar-width'][number] | CssVarRef;
+  cursor: (typeof CSS_PROPERTY_KEYWORDS)['cursor'][number] | CssValue['url'] | CssVarRef;
+  'pointer-events': (typeof CSS_PROPERTY_KEYWORDS)['pointer-events'][number] | CssVarRef;
+  'user-select': (typeof CSS_PROPERTY_KEYWORDS)['user-select'][number] | CssVarRef;
+  resize: (typeof CSS_PROPERTY_KEYWORDS)['resize'][number] | CssVarRef;
+  appearance: (typeof CSS_PROPERTY_KEYWORDS)['appearance'][number] | CssVarRef;
+  'touch-action': string | (typeof CSS_PROPERTY_KEYWORDS)['touch-action'][number] | CssVarRef;
+  'will-change': (typeof CSS_PROPERTY_KEYWORDS)['will-change'][number] | string | CssVarRef;
+  'z-index': IntegerOrVar | (typeof CSS_PROPERTY_KEYWORDS)['z-index'][number];
+  'aspect-ratio': CssValue['ratio'] | NumberOrVar | (typeof CSS_PROPERTY_KEYWORDS)['aspect-ratio'][number];
+  'object-fit': (typeof CSS_PROPERTY_KEYWORDS)['object-fit'][number] | CssVarRef;
+  'object-position': string | CssVarRef;
+  'caption-side': (typeof CSS_PROPERTY_KEYWORDS)['caption-side'][number] | CssVarRef;
+  'border-collapse': (typeof CSS_PROPERTY_KEYWORDS)['border-collapse'][number] | CssVarRef;
+  'table-layout': (typeof CSS_PROPERTY_KEYWORDS)['table-layout'][number] | CssVarRef;
+};
+type CssPropertyName = keyof CssPropertyValues;
+/**
+ * Standard CSS properties that accept a `<color>` value. Used to gate
+ * any `.withOpacity({...})` builder on `defineStyleProp` — only
+ * color-typed props can pair with an opacity sibling (`bg` +
+ * `bgOpacity` → class `bg-primary_75` etc.).
+ *
+ * Custom CSS properties (`--foo`) authored with `cssType: 'color'` are
+ * also eligible for opacity pairing; that check happens via the
+ * `cssType` generic on `defineStyleProp`, not in this union.
+ */
+type ColorCssProperty = 'background-color' | 'color' | 'text-decoration-color' | 'border-color' | 'border-top-color' | 'border-right-color' | 'border-bottom-color' | 'border-left-color' | 'border-block-color' | 'border-block-start-color' | 'border-block-end-color' | 'border-inline-color' | 'border-inline-start-color' | 'border-inline-end-color' | 'outline-color' | 'caret-color' | 'fill' | 'stroke';
+/**
+ * The CSS-wide keyword union (`inherit | initial | unset | revert`).
+ * Not added to `CssPropertyValues` entries by default — list locally
+ * on a per-property entry if you want them.
+ */
+type CssGlobalKeyword = GlobalKeyword; //#endregion
+//#endregion
+export { ColorCssProperty, CssGlobalKeyword, CssPropertyName, CssPropertyValues };