@yahoo/uds-v5-wip 1.36.0 → 1.37.0

package/dist/loader/dist/loader/style-transform.js

@@ -2,8 +2,9 @@ import { applyComponentStyleDefaults } from "../../../utils/dist/component-style
 import { kebabCase } from "../../../utils/dist/string-utils/kebabCase.js";
 import { componentVariantClass } from "../../../utils/dist/string-utils/componentClassName.js";
 import "../../../utils/dist/index.js";
+import { colorPropToOpacityProp } from "../packages/core/dist/color-opacity-map.js";
 import { expandCompositeStyles } from "../packages/core/dist/compositeStyles.js";
-import { colorPropToOpacityProp, propMappings } from "../packages/core/dist/propMappings.js";
+import { propMappings } from "../packages/core/dist/style-prop-data.js";
 import { toCamelCase } from "../packages/core/dist/getStyles.js";
 import "../packages/core/dist/index.js";
 import { buildDynamicClassExpression, parseHandlerString } from "./dynamic-style-codegen.js";

package/dist/loader/dist/packages/core/dist/color-opacity-map.js

@@ -0,0 +1,33 @@
+//#region ../loader/dist/packages/core/dist/color-opacity-map.js
+/**
+* Maps each color prop name to its corresponding opacity prop name.
+* Used by the runtime (`getStyles`) and loader (`style-transform`) to merge
+* a color value with its opacity before class generation.
+*
+* @example
+* `bg="primary"` + `bgOpacity="75"` → class `bg-primary_75`
+*/
+const colorPropToOpacityProp = {
+	bg: "bgOpacity",
+	color: "colorOpacity",
+	textDecorationColor: "textDecorationColorOpacity",
+	borderColor: "borderColorOpacity",
+	borderYColor: "borderYColorOpacity",
+	borderXColor: "borderXColorOpacity",
+	borderStartColor: "borderStartColorOpacity",
+	borderLeftColor: "borderLeftColorOpacity",
+	borderEndColor: "borderEndColorOpacity",
+	borderRightColor: "borderRightColorOpacity",
+	borderTopColor: "borderTopColorOpacity",
+	borderBottomColor: "borderBottomColorOpacity",
+	divideColor: "divideColorOpacity",
+	outlineColor: "outlineColorOpacity",
+	ringColor: "ringColorOpacity",
+	ringOffsetColor: "ringOffsetColorOpacity",
+	fillColor: "fillColorOpacity",
+	strokeColor: "strokeColorOpacity",
+	shadowColor: "shadowColorOpacity",
+	caretColor: "caretColorOpacity"
+};
+//#endregion
+export { colorPropToOpacityProp };

package/dist/loader/dist/packages/core/dist/getStyles.js

@@ -1,7 +1,9 @@
 import "../../../../../utils/dist/index.js";
+import { colorPropToOpacityProp } from "./color-opacity-map.js";
 import "./compositeStyles.js";
-import { colorPropToOpacityProp, modifierMappings, propMappings } from "./propMappings.js";
+import { propMappings } from "./style-prop-data.js";
 import { stylePropsTwMap } from "./generated/stylePropsTwMap.js";
+import { modifierMappings } from "./modifier-mappings.js";
 //#region ../loader/dist/packages/core/dist/getStyles.js
 /** Convert kebab-case CSS property to camelCase for React inline styles.
 *  CSS custom properties (--*) are kept as-is since React supports them verbatim. */

package/dist/loader/dist/packages/core/dist/modifier-mappings.js

@@ -0,0 +1,61 @@
+//#region ../loader/dist/packages/core/dist/modifier-mappings.js
+const modifierMappings = {
+	_after: "after:",
+	_hover: "hover:",
+	_focus: "focus:",
+	_focusWithin: "focus-within:",
+	_focusVisible: "focus-visible:",
+	_active: "active:",
+	_visited: "visited:",
+	_target: "target:",
+	_first: "first:",
+	_last: "last:",
+	_only: "only:",
+	_odd: "odd:",
+	_even: "even:",
+	_firstOfType: "first-of-type:",
+	_lastOfType: "last-of-type:",
+	_onlyOfType: "only-of-type:",
+	_empty: "empty:",
+	_disabled: "disabled:",
+	_enabled: "enabled:",
+	_checked: "checked:",
+	_indeterminate: "indeterminate:",
+	_default: "default:",
+	_required: "required:",
+	_valid: "valid:",
+	_invalid: "invalid:",
+	_inRange: "in-range:",
+	_outOfRange: "out-of-range:",
+	_placeholderShown: "placeholder-shown:",
+	_autofill: "autofill:",
+	_readonly: "read-only:",
+	_file: "file:",
+	_selection: "selection:",
+	_backdrop: "backdrop:",
+	_motionReduce: "motion-reduce:",
+	_motionSafe: "motion-safe:",
+	_contrastMore: "contrast-more:",
+	_contrastLess: "contrast-less:",
+	_forcedColors: "forced-colors:",
+	_placeholder: "placeholder:",
+	_ariaBusy: "aria-busy:",
+	_ariaChecked: "aria-checked:",
+	_ariaHidden: "aria-hidden:",
+	_ariaPressed: "aria-pressed:",
+	_ariaReadonly: "aria-readonly:",
+	_ariaRequired: "aria-required:",
+	_ariaSelected: "aria-selected:",
+	_ariaCurrent: "aria-[current]:",
+	_ariaDisabled: "aria-disabled:",
+	_ariaExpanded: "aria-expanded:",
+	_dataDisabled: "data-[disabled=true]:",
+	_dataStateOpen: "data-[state=open]:",
+	_dataStateClosed: "data-[state=closed]:",
+	_startingStyle: "starting-style:",
+	_scrollbar: "*::-webkit-scrollbar:",
+	_scrollbarThumb: "*::-webkit-scrollbar-thumb:",
+	_scrollbarTrack: "*::-webkit-scrollbar-track:"
+};
+//#endregion
+export { modifierMappings };

package/dist/{core/dist/propMappings.js → loader/dist/packages/core/dist/style-prop-data.js}

@@ -1,4 +1,4 @@
-//#region ../core/dist/propMappings.js
+//#region ../loader/dist/packages/core/dist/style-prop-data.js
 const propMappings = {
 	animation: {
 		classPrefix: "animation",
@@ -1253,153 +1253,5 @@ const propMappings = {
 		augmentType: "CustomTextShadow"
 	}
 };
-/**
-* Built-in modifier mappings (pseudo-classes, pseudo-elements, etc.).
-* Custom modifiers from defineModes() are handled dynamically in the runtime.
-*/
-const modifierMappings = {
-	_after: "after:",
-	_hover: "hover:",
-	_focus: "focus:",
-	_focusWithin: "focus-within:",
-	_focusVisible: "focus-visible:",
-	_active: "active:",
-	_visited: "visited:",
-	_target: "target:",
-	_first: "first:",
-	_last: "last:",
-	_only: "only:",
-	_odd: "odd:",
-	_even: "even:",
-	_firstOfType: "first-of-type:",
-	_lastOfType: "last-of-type:",
-	_onlyOfType: "only-of-type:",
-	_empty: "empty:",
-	_disabled: "disabled:",
-	_enabled: "enabled:",
-	_checked: "checked:",
-	_indeterminate: "indeterminate:",
-	_default: "default:",
-	_required: "required:",
-	_valid: "valid:",
-	_invalid: "invalid:",
-	_inRange: "in-range:",
-	_outOfRange: "out-of-range:",
-	_placeholderShown: "placeholder-shown:",
-	_autofill: "autofill:",
-	_readonly: "read-only:",
-	_file: "file:",
-	_selection: "selection:",
-	_backdrop: "backdrop:",
-	_motionReduce: "motion-reduce:",
-	_motionSafe: "motion-safe:",
-	_contrastMore: "contrast-more:",
-	_contrastLess: "contrast-less:",
-	_forcedColors: "forced-colors:",
-	_placeholder: "placeholder:",
-	_ariaBusy: "aria-busy:",
-	_ariaChecked: "aria-checked:",
-	_ariaHidden: "aria-hidden:",
-	_ariaPressed: "aria-pressed:",
-	_ariaReadonly: "aria-readonly:",
-	_ariaRequired: "aria-required:",
-	_ariaSelected: "aria-selected:",
-	_ariaCurrent: "aria-[current]:",
-	_ariaDisabled: "aria-disabled:",
-	_ariaExpanded: "aria-expanded:",
-	_dataDisabled: "data-[disabled=true]:",
-	_dataStateOpen: "data-[state=open]:",
-	_dataStateClosed: "data-[state=closed]:",
-	_startingStyle: "starting-style:",
-	_scrollbar: "*::-webkit-scrollbar:",
-	_scrollbarThumb: "*::-webkit-scrollbar-thumb:",
-	_scrollbarTrack: "*::-webkit-scrollbar-track:"
-};
-/** Maps ConfigurableProp names to propMappings keys when they differ */
-const configurablePropAliases = {};
-/** Look up a PropMapping by ConfigurableProp name */
-function getConfigurablePropMapping(prop) {
-	return propMappings[configurablePropAliases[prop] ?? prop];
-}
-/**
-* Derives the configurable properties table from propMappings.
-* Groups props by augmentType — the primary prop is the one matching
-* a ConfigurableProp name, the rest are sub-properties.
-*/
-function getConfigurableProperties() {
-	const byAugment = {};
-	for (const [prop, mapping] of Object.entries(propMappings)) {
-		if (!mapping.augmentType) continue;
-		const aug = mapping.augmentType;
-		if (!byAugment[aug]) byAugment[aug] = [];
-		byAugment[aug].push(prop);
-	}
-	const entries = [];
-	for (const [augmentType, props] of Object.entries(byAugment)) {
-		const sorted = [...props].sort((a, b) => a.length - b.length);
-		const primary = sorted[0];
-		const subs = sorted.slice(1);
-		entries.push({
-			property: primary,
-			subProperties: subs,
-			augmentType
-		});
-	}
-	return entries;
-}
-/**
-* Derives the CSS variable prefix table from propMappings.
-* Only includes props that have both cssProperty and defaultVarPrefix.
-* Deduplicates by defaultVarPrefix so each namespace appears once.
-*/
-function getCssVariablePrefixes() {
-	const seen = /* @__PURE__ */ new Set();
-	const entries = [];
-	for (const [prop, mapping] of Object.entries(propMappings)) {
-		if (!mapping.defaultVarPrefix || !mapping.cssProperty) continue;
-		if (seen.has(mapping.defaultVarPrefix)) continue;
-		seen.add(mapping.defaultVarPrefix);
-		const prefix = `--uds-${mapping.defaultVarPrefix}-*`;
-		const exampleToken = mapping.defaultVarPrefix.includes("color") ? "brand" : mapping.defaultVarPrefix === "spacing" ? "4" : mapping.defaultVarPrefix === "radius" ? "lg" : mapping.defaultVarPrefix === "border-width" ? "2" : "value";
-		const exampleVar = `--uds-${mapping.defaultVarPrefix}-${exampleToken}`;
-		const exampleUtility = `${mapping.classPrefix}-${exampleToken}`;
-		entries.push({
-			property: prop,
-			cssPrefix: prefix,
-			exampleVariable: exampleVar,
-			exampleUtility
-		});
-	}
-	return entries;
-}
-/**
-* Maps each color prop name to its corresponding opacity prop name.
-* Used by runtime (getStyles) and loader (style-transform) to merge
-* a color value with its opacity before class generation.
-*
-* e.g. `bg="primary"` + `bgOpacity="75"` → class `bg-primary_75`
-*/
-const colorPropToOpacityProp = {
-	bg: "bgOpacity",
-	color: "colorOpacity",
-	textDecorationColor: "textDecorationColorOpacity",
-	borderColor: "borderColorOpacity",
-	borderYColor: "borderYColorOpacity",
-	borderXColor: "borderXColorOpacity",
-	borderStartColor: "borderStartColorOpacity",
-	borderLeftColor: "borderLeftColorOpacity",
-	borderEndColor: "borderEndColorOpacity",
-	borderRightColor: "borderRightColorOpacity",
-	borderTopColor: "borderTopColorOpacity",
-	borderBottomColor: "borderBottomColorOpacity",
-	divideColor: "divideColorOpacity",
-	outlineColor: "outlineColorOpacity",
-	ringColor: "ringColorOpacity",
-	ringOffsetColor: "ringOffsetColorOpacity",
-	fillColor: "fillColorOpacity",
-	strokeColor: "strokeColorOpacity",
-	shadowColor: "shadowColorOpacity",
-	caretColor: "caretColorOpacity"
-};
 //#endregion
-export { colorPropToOpacityProp, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, modifierMappings, propMappings };
+export { propMappings };