@wavemaker/foundation-css 11.15.1-rc.248 → 11.15.2-rc.249

package/cjs/foundation-css.cjs

@@ -74,6 +74,12 @@ const componentsList = {
         key: "accordion",
         columnWidth: 5,
     },
+    "accordion-pane": {
+        widgetTag: "wm-accordionpane",
+        key: "accordion-pane",
+        columnWidth: 5,
+        displayName: "Accordion: Pane"
+    },
     anchor: {
         widgetTag: "wm-anchor",
         key: "anchor",
@@ -193,6 +199,11 @@ const componentsList = {
         widgetTag: "wm-login",
         columnWidth: 6,
     },
+    select: {
+        widgetTag: "wm-select",
+        key: "currency",
+        columnWidth: 6,
+    },
     lottie: {
         key: "lottie",
         widgetTag: "wm-lottie",
@@ -208,11 +219,12 @@ const componentsList = {
         widgetTag: "wm-dialog",
         columnWidth: 6,
     },
-    // nav:{
-    //   widgetTag: "wm-nav",
-    //   key: "nav",
-    //   columnWidth: 6,
-    // },
+    "page-left-nav": {
+        widgetTag: "wm-left-panel",
+        key: "left-nav",
+        columnWidth: 6,
+        displayName: "Left Nav"
+    },
     navitem: {
         widgetTag: "wm-nav-item",
         key: "navitem",
@@ -659,6 +671,12 @@ const componentsList = {
 (module, __unused_webpack_exports, __webpack_require__) {
 
 var map = {
+	"./accordion-pane/accordion-pane.json": [
+		"./src/tokens/mobile/components/accordion-pane/accordion-pane.json",
+		[
+			"src_tokens_mobile_components_accordion-pane_accordion-pane_json"
+		]
+	],
 	"./accordion/accordion.json": [
 		"./src/tokens/mobile/components/accordion/accordion.json",
 		[
@@ -815,12 +833,6 @@ var map = {
 			"src_tokens_mobile_components_label_label_json"
 		]
 	],
-	"./left-nav/left-nav.json": [
-		"./src/tokens/mobile/components/left-nav/left-nav.json",
-		[
-			"src_tokens_mobile_components_left-nav_left-nav_json"
-		]
-	],
 	"./list/list.json": [
 		"./src/tokens/mobile/components/list/list.json",
 		[
@@ -875,6 +887,12 @@ var map = {
 			"src_tokens_mobile_components_page-content_page-content_json"
 		]
 	],
+	"./page-left-nav/page-left-nav.json": [
+		"./src/tokens/mobile/components/page-left-nav/page-left-nav.json",
+		[
+			"src_tokens_mobile_components_page-left-nav_page-left-nav_json"
+		]
+	],
 	"./panel-footer/panel-footer.json": [
 		"./src/tokens/mobile/components/panel-footer/panel-footer.json",
 		[
@@ -887,6 +905,12 @@ var map = {
 			"src_tokens_mobile_components_panel_panel_json"
 		]
 	],
+	"./partial-container/partial-container.json": [
+		"./src/tokens/mobile/components/partial-container/partial-container.json",
+		[
+			"src_tokens_mobile_components_partial-container_partial-container_json"
+		]
+	],
 	"./picture/picture.json": [
 		"./src/tokens/mobile/components/picture/picture.json",
 		[
@@ -2070,6 +2094,7 @@ const { pow, sqrt, PI, cos, sin, atan2 } = Math;
     alpha /= l;
     return new _Color_js__WEBPACK_IMPORTED_MODULE_0__["default"](xyz, mode).alpha(alpha > 0.99999 ? 1 : alpha, true);
 });
+(Object.getOwnPropertyDescriptor(__WEBPACK_DEFAULT_EXPORT__, "name") || {}).writable || Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 
 const _average_lrgb = (colors, weights) => {
     const l = colors.length;
@@ -2193,6 +2218,7 @@ const bezier = function (colors) {
     f.scale = () => (0,_scale_js__WEBPACK_IMPORTED_MODULE_2__["default"])(f);
     return f;
 });
+(Object.getOwnPropertyDescriptor(__WEBPACK_DEFAULT_EXPORT__, "name") || {}).writable || Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 
 
 /***/ },
@@ -2282,6 +2308,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
+Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 /* harmony import */ var _utils_index_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils/index.js */ "./node_modules/chroma-js/src/utils/index.js");
 /* harmony import */ var _chroma_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../chroma.js */ "./node_modules/chroma-js/src/chroma.js");
 // cubehelix interpolation
@@ -2407,6 +2434,7 @@ __webpack_require__.r(__webpack_exports__);
         col1.alpha() + f * (col2.alpha() - col1.alpha())
     );
 });
+(Object.getOwnPropertyDescriptor(__WEBPACK_DEFAULT_EXPORT__, "name") || {}).writable || Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 
 
 /***/ },
@@ -2439,6 +2467,7 @@ const { floor, random } = Math;
     }
     return new _Color_js__WEBPACK_IMPORTED_MODULE_0__["default"](code, 'hex');
 });
+(Object.getOwnPropertyDescriptor(__WEBPACK_DEFAULT_EXPORT__, "name") || {}).writable || Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 
 
 /***/ },
@@ -2454,6 +2483,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
+Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 /* harmony import */ var _chroma_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../chroma.js */ "./node_modules/chroma-js/src/chroma.js");
 /* harmony import */ var _utils_index_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/index.js */ "./node_modules/chroma-js/src/utils/index.js");
 // minimal multi-purpose interface
@@ -2929,6 +2959,7 @@ __webpack_require__.r(__webpack_exports__);
         ? new _Color_js__WEBPACK_IMPORTED_MODULE_0__["default"]([lbv, sat, hue], m)
         : new _Color_js__WEBPACK_IMPORTED_MODULE_0__["default"]([hue, sat, lbv], m);
 });
+(Object.getOwnPropertyDescriptor(__WEBPACK_DEFAULT_EXPORT__, "name") || {}).writable || Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 
 
 /***/ },
@@ -6657,6 +6688,7 @@ __webpack_require__.r(__webpack_exports__);
     }
     return rgb;
 });
+(Object.getOwnPropertyDescriptor(__WEBPACK_DEFAULT_EXPORT__, "name") || {}).writable || Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 
 
 /***/ },
@@ -6686,6 +6718,7 @@ __webpack_require__.r(__webpack_exports__);
     const l2 = b.luminance();
     return l1 > l2 ? (l1 + 0.05) / (l2 + 0.05) : (l2 + 0.05) / (l1 + 0.05);
 });
+(Object.getOwnPropertyDescriptor(__WEBPACK_DEFAULT_EXPORT__, "name") || {}).writable || Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 
 
 /***/ },
@@ -6763,6 +6796,7 @@ const B_exp = 1.414;
     // scale to 100
     return S_apc * 100;
 });
+(Object.getOwnPropertyDescriptor(__WEBPACK_DEFAULT_EXPORT__, "name") || {}).writable || Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 
 function lum(r, g, b) {
     return (
@@ -6786,6 +6820,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
+Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 /* harmony import */ var _Color_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Color.js */ "./node_modules/chroma-js/src/Color.js");
 
 const { sqrt, pow, min, max, atan2, abs, cos, sin, exp, PI } = Math;
@@ -6864,6 +6899,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
+Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 /* harmony import */ var _Color_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Color.js */ "./node_modules/chroma-js/src/Color.js");
 
 
@@ -6967,6 +7003,7 @@ __webpack_require__.r(__webpack_exports__);
     if ((0,_type_js__WEBPACK_IMPORTED_MODULE_0__["default"])(args[l]) == 'string') return args[l].toLowerCase();
     return null;
 });
+(Object.getOwnPropertyDescriptor(__WEBPACK_DEFAULT_EXPORT__, "name") || {}).writable || Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 
 
 /***/ },
@@ -6987,6 +7024,7 @@ const { min, max } = Math;
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((x, low = 0, high = 1) => {
     return min(max(low, x), high);
 });
+(Object.getOwnPropertyDescriptor(__WEBPACK_DEFAULT_EXPORT__, "name") || {}).writable || Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 
 
 /***/ },
@@ -7086,6 +7124,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
+Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 // ported from jQuery's $.type
 const classToType = {};
 for (let name of [
@@ -7137,6 +7176,7 @@ __webpack_require__.r(__webpack_exports__);
     // (which we suppose is an array of args)
     return args[0].slice(0);
 });
+(Object.getOwnPropertyDescriptor(__WEBPACK_DEFAULT_EXPORT__, "name") || {}).writable || Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 
 
 /***/ },
@@ -7164,6 +7204,7 @@ __webpack_require__.r(__webpack_exports__);
         return false;
     }
 });
+(Object.getOwnPropertyDescriptor(__WEBPACK_DEFAULT_EXPORT__, "name") || {}).writable || Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 
 
 /***/ },
@@ -7183,6 +7224,1210 @@ __webpack_require__.r(__webpack_exports__);
 const version = '3.2.0';
 
 
+/***/ },
+
+/***/ "./src/token-validation/constants.js"
+/*!*******************************************!*\
+  !*** ./src/token-validation/constants.js ***!
+  \*******************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   ALLOWED_PROPERTIES_BY_CONTEXT: () => (/* binding */ ALLOWED_PROPERTIES_BY_CONTEXT),
+/* harmony export */   ERROR_TYPES: () => (/* binding */ ERROR_TYPES),
+/* harmony export */   FOLDER_TYPE: () => (/* binding */ FOLDER_TYPE),
+/* harmony export */   PLATFORM: () => (/* binding */ PLATFORM),
+/* harmony export */   TOKEN_TYPES: () => (/* binding */ TOKEN_TYPES),
+/* harmony export */   TOKEN_VALUE_TYPES: () => (/* binding */ TOKEN_VALUE_TYPES),
+/* harmony export */   VALIDATION_RULES: () => (/* binding */ VALIDATION_RULES),
+/* harmony export */   VALIDATION_SCOPE: () => (/* binding */ VALIDATION_SCOPE),
+/* harmony export */   VALUE_RELATED_KEYWORDS: () => (/* binding */ VALUE_RELATED_KEYWORDS)
+/* harmony export */ });
+const VALIDATION_RULES = {
+  STRUCTURE: "structure",   // Enforces component mapping structure via schema (e.g. mapping required)
+  METADATA: "metadata",     // Enforces token metadata via schema (type + attributes.subtype/description)
+  REFERENCES: "references", // Enables reference validation logic (refExists keyword)
+  OVERRIDES: "overrides"    // Enables override-vs-foundation mapping validation (overrideContext keyword)
+};
+
+const ERROR_TYPES = Object.freeze({
+  INVALID_REFERENCE: "reference error",
+  INVALID_FIELD: "invalid field",
+  MISSING_FIELD: "missing field",
+  INVALID_VALUE: "invalid value",
+  INVALID_STRUCTURE: "invalid structure",
+  INVALID_JSON: "invalid json",
+  BUILD_ERROR : "build error"
+});
+
+const TOKEN_TYPES = Object.freeze({
+  GLOBAL: "global",
+  COMPONENT: "component"
+});
+
+const VALIDATION_SCOPE = Object.freeze({
+  FOUNDATION: "foundation",
+  PROJECT: "project"
+});
+
+const FOLDER_TYPE = Object.freeze({
+  WEB : "web",
+  MOBILE: "mobile"
+})
+
+const TOKEN_VALUE_TYPES = ["color", "radius", "font", "space"];
+
+//Defines allowed properties for specific JSON paths to produce contextual error messages for invalid structure validations.
+const ALLOWED_PROPERTIES_BY_CONTEXT = [
+  {
+    match: path => path && !path.includes("."), // component root
+    allowed: ["meta", "mapping", "appearances"]
+  },
+  {
+    match: path => path.endsWith(".attributes"),
+    allowed: ["subtype", "description"]
+  },
+  {
+    match: path => path.endsWith(".appearances"),
+    allowed: ["mapping", "states", "variantGroups"]
+  },
+  {
+    match: path => path.endsWith(".states"),
+    allowed: null // dynamic state names
+  }
+];
+
+const VALUE_RELATED_KEYWORDS = new Set(["type", "enum", "const", "minimum", "maximum", "minLength", "maxLength", "pattern"]);
+
+const PLATFORM = {
+  WEB : "web",
+  MOBILE : "native_mobile",
+  BOTH : "both"
+}
+
+
+/***/ },
+
+/***/ "./src/token-validation/validate-value.js"
+/*!************************************************!*\
+  !*** ./src/token-validation/validate-value.js ***!
+  \************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ validateTokenValue),
+/* harmony export */   isTokenReference: () => (/* binding */ isTokenReference)
+/* harmony export */ });
+/* harmony import */ var _validator_utils_web_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./validator-utils/web.js */ "./src/token-validation/validator-utils/web.js");
+/* harmony import */ var _validator_utils_native_mobile_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./validator-utils/native_mobile.js */ "./src/token-validation/validator-utils/native_mobile.js");
+/* harmony import */ var _validator_utils_common_utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./validator-utils/common/utils.js */ "./src/token-validation/validator-utils/common/utils.js");
+/* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./constants.js */ "./src/token-validation/constants.js");
+
+
+
+
+
+
+const RULES_BY_PLATFORM = {
+    [_constants_js__WEBPACK_IMPORTED_MODULE_3__.PLATFORM.MOBILE]: _validator_utils_native_mobile_js__WEBPACK_IMPORTED_MODULE_1__.MOBILE_RULES,
+    [_constants_js__WEBPACK_IMPORTED_MODULE_3__.PLATFORM.WEB]: _validator_utils_web_js__WEBPACK_IMPORTED_MODULE_0__.WEB_VALIDATION_RULES,
+};
+
+/**
+ * Validates a value against the rule set for the given platform and subtype.
+ */
+function validateValue(value, subtype, platform) {
+    const rules = RULES_BY_PLATFORM[platform];
+    const rule = rules?.[subtype];
+
+    if (!rule?.validate) return (0,_validator_utils_common_utils_js__WEBPACK_IMPORTED_MODULE_2__.createSuccessResponse)();
+
+    const result = rule.validate(value, rule);
+    if (!result.valid) {
+        return (0,_validator_utils_common_utils_js__WEBPACK_IMPORTED_MODULE_2__.createErrorResponse)(subtype, value, (0,_validator_utils_common_utils_js__WEBPACK_IMPORTED_MODULE_2__.getRuleDescription)(rule), platform);
+    }
+
+    return (0,_validator_utils_common_utils_js__WEBPACK_IMPORTED_MODULE_2__.createSuccessResponse)();
+}
+
+/**
+ * Validates a token value against platform and subtype rules.
+ *
+ * @param {string|number} value   - The raw token value.
+ * @param {string}        subtype - e.g. "font-size", "color", "space".
+ * @param {string}        platform - "native_mobile" | "web"
+ * @returns {{ valid: boolean, errorObject?: object }}
+ */
+function validateTokenValue(value, subtype, platform) {
+    //Remove this for web
+    if(platform !== _constants_js__WEBPACK_IMPORTED_MODULE_3__.PLATFORM.MOBILE) return { valid: true };
+
+    // TODO Handling empty values
+    if (value === undefined || value === null || value === "") return { valid: true };
+    if (isTokenReference(value)) return { valid: true };
+    const normalised = typeof value === "string" ? value.trim() : String(value);
+    return validateValue(normalised, subtype, platform);
+}
+
+const isTokenReference = (value) => {
+    //TODO add given token exists from existing implementation
+    if (typeof value !== "string") return false;
+    const referencePlaceholders = value.match(/{[^}]+}/g);
+    if (!referencePlaceholders) return false;
+    return referencePlaceholders.every((referenceExpression) => {
+        const rawReferencePath = referenceExpression.replace(/[{}]/g, "")?.trim();
+        if (!rawReferencePath) return false;
+        return rawReferencePath.endsWith(".value");
+    });
+};
+
+
+/***/ },
+
+/***/ "./src/token-validation/validator-utils/common/constants.js"
+/*!******************************************************************!*\
+  !*** ./src/token-validation/validator-utils/common/constants.js ***!
+  \******************************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   BASE_SUBTYPE_CONFIGS: () => (/* binding */ BASE_SUBTYPE_CONFIGS),
+/* harmony export */   getPlatformRule: () => (/* binding */ getPlatformRule),
+/* harmony export */   resolveRuleValidator: () => (/* binding */ resolveRuleValidator)
+/* harmony export */ });
+
+// Base validation rule configurations shared across platforms
+
+//TODO segregation of units
+const WEB_SIZES = [
+  // Absolute Lengths
+  "px", "cm", "mm", "Q", "in", "pc", "pt",
+
+  // Font-Relative (Local)
+  "em", "ex", "ch", "cap", "ic", "lh",
+
+  // Font-Relative (Root)
+  "rem", "rex", "rch", "rcap", "ric", "rlh",
+
+  // Standard Viewport
+  "vw", "vh", "vi", "vb", "vmin", "vmax",
+
+  // Small Viewport (UA UI expanded)
+  "svw", "svh", "svi", "svb", "svmin", "svmax",
+
+  // Large Viewport (UA UI retracted)
+  "lvw", "lvh", "lvi", "lvb", "lvmin", "lvmax",
+
+  // Dynamic Viewport (UA UI changes)
+  "dvw", "dvh", "dvi", "dvb", "dvmin", "dvmax",
+
+  // Container Query Units
+  "cqw", "cqh", "cqi", "cqb", "cqmin", "cqmax",
+
+  // Percentage & Layout
+  "%", "fr"
+];
+const MOBILE_SIZES = ['px', 'vh', 'vw'];
+
+const BASE_SUBTYPE_CONFIGS = {
+    "border-style": {
+        type: "allowed-list",
+        native_mobile: {
+            allowed: ["solid", "dashed", "dotted"]
+        },
+        web: {
+            allowed: ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"]
+        }
+    },
+    
+    "border-width": {
+        type: "multi-size",
+        allowMultiValue: true,
+        native_mobile: {
+            allowedUnits: MOBILE_SIZES,
+            allowUnitless: true,
+            allowedKeywords: []
+        },
+        web: {
+            allowedUnits: WEB_SIZES,
+            allowUnitless: true,
+            allowedKeywords: ["thin", "medium", "thick"]
+        }
+    },
+    
+    // "box-shadow": {
+    //     type: "custom",
+    //     customDescription: {
+    //         native_mobile: 'px-based shadow: "<x> <y> [blur] [spread] <color>"',
+    //         web: 'CSS shadow: "[inset] <x> <y> [blur] [spread] <color>" with CSS units and colors'
+    //     }
+    // },
+    
+    // "elevation": {
+    //     type: "custom",
+    //     customDescription: {
+    //         native_mobile: '[inset] <offsetX> <offsetY> [blurRadius≥0] [spreadDistance] [color] — px or 0; color: #hex, rgb(), rgba(), named; comma-separate multiple shadows',
+    //         web: '[inset] <offsetX> <offsetY> [blurRadius≥0] [spreadDistance] [color] — CSS units; color: #hex, rgb(), rgba(), hsl(), hsla(), named; comma-separate multiple shadows'
+    //     }
+    // },
+        
+    "font-family": {
+        type: "custom",
+        customDescription: {
+            native_mobile: "only one font name",
+            web: "valid font family name or comma-separated font stack"
+        },
+        native_mobile: {
+            allowMultipleFonts: false,
+            separator: null,
+            maxFonts: 1,
+            allowGenericFallbacks: false
+        },
+        web: {
+            allowMultipleFonts: true,
+            separator: ",",
+            maxFonts: null,
+            allowGenericFallbacks: true
+        }
+    },
+    
+    "font-size": {
+        type: "size",
+        native_mobile: {
+            allowedUnits: MOBILE_SIZES,
+            allowUnitless: true,
+            allowedKeywords: []
+        },
+        web: {
+            allowedUnits: WEB_SIZES,
+            allowUnitless: true,
+            allowedKeywords: ["xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "smaller", "larger"]
+        }
+    },
+    
+    "font-weight": {
+        type: "range-with-keywords",
+        range: [100, 900],
+        stepSize: 100,
+        native_mobile: {
+            keywords: ["normal", "bold"]
+        },
+        web: {
+            keywords: ["normal", "bold", "bolder", "lighter"]
+        }
+    },
+    
+    "icon-size": {
+        type: "size",
+        native_mobile: {
+            allowedUnits: MOBILE_SIZES,
+            allowUnitless: true
+        },
+        web: {
+            allowedUnits: WEB_SIZES,
+            allowUnitless: true
+        }
+    },
+    
+    "letter-spacing": {
+        type: "size",
+        native_mobile: {
+            allowedUnits: MOBILE_SIZES,
+            allowUnitless: true
+        },
+        web: {
+            allowedUnits: WEB_SIZES,
+            allowUnitless: true,
+            allowedKeywords: ['normal'],
+            allowNegative: true
+        }
+    },
+    
+    "line-height": {
+        type: "size",
+        native_mobile: {
+            allowedUnits: MOBILE_SIZES,
+            allowUnitless: true
+        },
+        web: {
+            allowedUnits: WEB_SIZES,
+            allowUnitless: true,
+            allowedKeywords: ['normal']
+        }
+    },
+    
+    "opacity": {
+        type: "range",
+        min: 0,
+        max: 1
+    },
+    
+    "radius": {
+        type: "multi-size",
+        allowMultiValue: true,
+        allowPercent: true,
+        native_mobile: {
+            allowedUnits: MOBILE_SIZES,
+            allowUnitless: true
+        },
+        web: {
+            allowedUnits: WEB_SIZES,
+            allowUnitless: true
+        }
+    },
+    
+    "space": {
+        type: "multi-size",
+        allowMultiValue: true,
+        allowAuto: true,
+        allowPercent: true,
+        native_mobile: {
+            allowedUnits: MOBILE_SIZES,
+            allowUnitless: true
+        },
+        web: {
+            allowedUnits: WEB_SIZES,
+            allowUnitless: true
+        }
+    },
+    
+    "margin": {
+        type: "multi-size",
+        allowMultiValue: true,
+        allowAuto: true,
+        allowNegative: true,
+        native_mobile: {
+            allowedUnits: MOBILE_SIZES,
+            allowUnitless: true
+        },
+        web: {
+            allowedUnits: WEB_SIZES,
+            allowUnitless: true
+        }
+    },
+    
+    "spacer": {
+        type: "size",
+        native_mobile: {
+            allowedUnits: MOBILE_SIZES,
+            allowUnitless: true
+        },
+        web: {
+            allowedUnits: WEB_SIZES,
+            allowUnitless: true
+        }
+    }
+};
+
+
+/**
+ * Generate platform-specific rule configuration
+ * @param {string} subtype - The subtype name
+ * @param {string} platform - Platform ('native_mobile' or 'web')
+ * @returns {Object} Platform-specific rule configuration
+ */
+function getPlatformRule(subtype, platform) {
+    const baseConfig = BASE_SUBTYPE_CONFIGS[subtype];
+    if (!baseConfig) return null;
+    
+    // Merge base config with platform-specific overrides
+    const platformConfig = baseConfig[platform] || {};
+    const rule = { ...baseConfig, ...platformConfig };
+    
+    // Handle platform-specific custom descriptions
+    if (rule.customDescription && typeof rule.customDescription === 'object') {
+        rule.customDescription = rule.customDescription[platform] || rule.customDescription;
+    }
+    
+    // Remove platform-specific sections from the final rule
+    delete rule.native_mobile;
+    delete rule.web;
+    delete rule.validator;
+    
+    return rule;
+}
+
+/**
+ * Resolve an executable validator function from rule type + subtype.
+ */
+function resolveRuleValidator(type, subtype, platform, validators) {
+    const platformDefaults = {
+        native_mobile: MOBILE_SIZES,
+        web: WEB_SIZES
+    };
+    const defaultUnits = platformDefaults[platform];
+
+    switch (type) {
+        case "allowed-list":
+            return (value, rule) => validators.validateFromAllowedList(value, rule.allowed);
+        case "size":
+            return (value, rule) => validators.validatePlatformSizeValue(value, rule, defaultUnits);
+        case "multi-size":
+            return (value, rule) => validators.validatePlatformSpaceValue(value, rule, defaultUnits);
+        case "string":
+            return validators.validateFontFamily;
+        case "range":
+            return validators.validateOpacity;
+        case "range-with-keywords":
+            return platform === 'native_mobile'
+                ? (value, rule) => validators.validateFontWeight(value, rule, true)
+                : validators.validateFontWeight;
+        case "custom":
+            if (subtype === "font-family") {
+                return (value, rule) => validators.validateFontFamily(value, rule);
+            }
+            if (subtype === "box-shadow" || subtype === "elevation") {
+                return validators.validateBoxShadow;
+            }
+            return null;
+        default:
+            return null;
+    }
+}
+
+/***/ },
+
+/***/ "./src/token-validation/validator-utils/common/primitives.js"
+/*!*******************************************************************!*\
+  !*** ./src/token-validation/validator-utils/common/primitives.js ***!
+  \*******************************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   isEm: () => (/* binding */ isEm),
+/* harmony export */   isHex: () => (/* binding */ isHex),
+/* harmony export */   isHsl: () => (/* binding */ isHsl),
+/* harmony export */   isHsla: () => (/* binding */ isHsla),
+/* harmony export */   isMobileColor: () => (/* binding */ isMobileColor),
+/* harmony export */   isNamedColor: () => (/* binding */ isNamedColor),
+/* harmony export */   isNonNegativeUnitlessNumber: () => (/* binding */ isNonNegativeUnitlessNumber),
+/* harmony export */   isPercent: () => (/* binding */ isPercent),
+/* harmony export */   isPx: () => (/* binding */ isPx),
+/* harmony export */   isRem: () => (/* binding */ isRem),
+/* harmony export */   isRgb: () => (/* binding */ isRgb),
+/* harmony export */   isRgba: () => (/* binding */ isRgba),
+/* harmony export */   isUnitlessNumber: () => (/* binding */ isUnitlessNumber),
+/* harmony export */   isWebColor: () => (/* binding */ isWebColor)
+/* harmony export */ });
+
+
+// ─── Numeric / Unit helpers ──────────────────────────────────────────────────
+
+/** "12px", "-4px" */
+const isPx = (v) => /^-?[\d.]+px$/.test(v);
+
+/** "1.5rem" */
+const isRem = (v) => /^-?[\d.]+rem$/.test(v);
+
+/** "1em" */
+const isEm = (v) => /^-?[\d.]+em$/.test(v);
+
+/** Plain number string with no unit: "12", "1.5", NOT "-3" for unsigned contexts */
+const isUnitlessNumber = (v) => /^-?[\d.]+$/.test(v) && !isNaN(Number(v));
+
+/** Non-negative unitless number only */
+const isNonNegativeUnitlessNumber = (v) =>
+    isUnitlessNumber(v) && Number(v) >= 0;
+
+/** "50%" */
+const isPercent = (v) => /^[\d.]+%$/.test(v);
+
+// ─── Color helpers ───────────────────────────────────────────────────────────
+
+/** #RGB, #RGBA, #RRGGBB, #RRGGBBAA */
+const isHex = (v) =>
+    /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(v);
+
+/** rgb(...) */
+const isRgb = (v) =>
+    /^rgb\(\s*[\d.]+%?\s*,\s*[\d.]+%?\s*,\s*[\d.]+%?\s*\)$/.test(v);
+
+/** rgba(...) */
+const isRgba = (v) =>
+    /^rgba\(\s*[\d.]+%?\s*,\s*[\d.]+%?\s*,\s*[\d.]+%?\s*,\s*[\d.]+%?\s*\)$/.test(v);
+
+/** hsl(...) */
+const isHsl = (v) =>
+    /^hsl\(\s*[\d.]+\s*,\s*[\d.]+%\s*,\s*[\d.]+%\s*\)$/.test(v);
+
+/** hsla(...) */
+const isHsla = (v) =>
+    /^hsla\(\s*[\d.]+\s*,\s*[\d.]+%\s*,\s*[\d.]+%\s*,\s*[\d.]+\s*\)$/.test(v);
+
+/**
+ * Named color regex: 3-20 alphabetic characters only
+ * Matches: "red", "blue", "transparent" (but not "foobar123" or "red-blue")
+ */
+const NAMED_COLOR = /^[a-zA-Z]{3,20}$/;
+const isNamedColor = (v) => NAMED_COLOR.test(v);
+
+/** Any color valid for css-to-react-native: #hex, rgb(), rgba(), named */
+const isMobileColor = (v) =>
+    isHex(v) || isRgb(v) || isRgba(v) || isNamedColor(v);
+
+/** Any color valid in CSS (superset of mobile) */
+const isWebColor = (v) =>
+    isHex(v) || isRgb(v) || isRgba(v) || isHsl(v) || isHsla(v) || isNamedColor(v);
+
+
+/***/ },
+
+/***/ "./src/token-validation/validator-utils/common/utils.js"
+/*!**************************************************************!*\
+  !*** ./src/token-validation/validator-utils/common/utils.js ***!
+  \**************************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   buildSizeOptions: () => (/* binding */ buildSizeOptions),
+/* harmony export */   createErrorResponse: () => (/* binding */ createErrorResponse),
+/* harmony export */   createSuccessResponse: () => (/* binding */ createSuccessResponse),
+/* harmony export */   generateAllowedListDescription: () => (/* binding */ generateAllowedListDescription),
+/* harmony export */   generateRangeDescription: () => (/* binding */ generateRangeDescription),
+/* harmony export */   generateUnitsDescription: () => (/* binding */ generateUnitsDescription),
+/* harmony export */   getRuleDescription: () => (/* binding */ getRuleDescription),
+/* harmony export */   validateFontFamily: () => (/* binding */ validateFontFamily),
+/* harmony export */   validateFontWeight: () => (/* binding */ validateFontWeight),
+/* harmony export */   validateFromAllowedList: () => (/* binding */ validateFromAllowedList),
+/* harmony export */   validateMultiValue: () => (/* binding */ validateMultiValue),
+/* harmony export */   validateNonEmptyString: () => (/* binding */ validateNonEmptyString),
+/* harmony export */   validateNumericRange: () => (/* binding */ validateNumericRange),
+/* harmony export */   validateOpacity: () => (/* binding */ validateOpacity),
+/* harmony export */   validatePlatformSizeValue: () => (/* binding */ validatePlatformSizeValue),
+/* harmony export */   validatePlatformSpaceValue: () => (/* binding */ validatePlatformSpaceValue),
+/* harmony export */   validateRangeWithKeywords: () => (/* binding */ validateRangeWithKeywords),
+/* harmony export */   validateSizeValue: () => (/* binding */ validateSizeValue)
+/* harmony export */ });
+/* harmony import */ var _primitives_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./primitives.js */ "./src/token-validation/validator-utils/common/primitives.js");
+
+
+function generateAllowedListDescription(allowed) {
+    if (!allowed || allowed.length === 0) return "";
+    if (allowed.length === 1) return `"${allowed[0]}"`;
+    if (allowed.length === 2) return `"${allowed[0]}" or "${allowed[1]}"`;
+
+    const last = allowed[allowed.length - 1];
+    const rest = allowed.slice(0, -1);
+    return `"${rest.join('", "')}", or "${last}"`;
+}
+
+/**
+ * Generate description for numeric ranges
+ * @param {number} min - Minimum value
+ * @param {number} max - Maximum value
+ * @param {string} [unit] - Optional unit suffix
+ * @returns {string} Description like "number between 0 and 1"
+ */
+function generateRangeDescription(min, max, unit = "") {
+    const unitSuffix = unit ? ` ${unit}` : "";
+    return `number between ${min} and ${max}${unitSuffix}`;
+}
+
+/**
+ * Generate description for platform-specific units
+ * @param {string[]} units - Array of supported units
+ * @returns {string} Description of supported units
+ */
+function generateUnitsDescription(units) {
+    if (!units || units.length === 0) return "";
+
+    const unitDescriptions = {
+        px: "px value",
+        number: "plain number",
+        rem: "rem value",
+        em: "em value",
+        "%": "percentage",
+        auto: "auto"
+    };
+
+    const descriptions = units.map(unit => unitDescriptions[unit] || unit);
+
+    if (descriptions.length === 1) return descriptions[0];
+    if (descriptions.length === 2) return `${descriptions[0]} or ${descriptions[1]}`;
+
+    const last = descriptions[descriptions.length - 1];
+    const rest = descriptions.slice(0, -1);
+    return `${rest.join(", ")}, or ${last}`;
+}
+
+// ─── Shared Validation Functions ─────────────────────────────────────────────
+
+/**
+ * Validate value against an allowed list
+ * @param {string} value - Value to validate
+ * @param {string[]} allowed - Array of allowed values
+ * @returns {{ valid: boolean }}
+ */
+function validateFromAllowedList(value, allowed) {
+    const trimmed = String(value).trim();
+    return { valid: allowed.includes(trimmed) };
+}
+
+/**
+ * Validate numeric value within a range
+ * @param {string|number} value - Value to validate
+ * @param {number} min - Minimum allowed value
+ * @param {number} max - Maximum allowed value
+ * @returns {{ valid: boolean }}
+ */
+function validateNumericRange(value, min, max) {
+    const num = Number(value);
+    if (isNaN(num)) return { valid: false };
+    return { valid: num >= min && num <= max };
+}
+
+/**
+ * Validate non-empty string values
+ * @param {string} value - Value to validate
+ * @returns {{ valid: boolean }}
+ */
+function validateNonEmptyString(value) {
+    const trimmed = String(value).trim();
+    return { valid: trimmed.length > 0 };
+}
+
+/**
+ * Validate numeric range with optional keyword support
+ * @param {string|number} value - Value to validate
+ * @param {Object} rule - Rule configuration containing range and keywords
+ * @param {boolean} [caseInsensitive=false] - Match keywords case-insensitively
+ * @returns {{ valid: boolean }}
+ */
+function validateRangeWithKeywords(value, rule, caseInsensitive = false) {
+    const trimmed = String(value).trim();
+    const normalized = caseInsensitive ? trimmed.toLowerCase() : trimmed;
+    const keywords = rule?.keywords || [];
+
+    if (keywords.includes(normalized)) {
+        return createSuccessResponse();
+    }
+
+    const num = Number(trimmed);
+    if (!isNaN(num) && rule?.range) {
+        const [min, max] = rule.range;
+        if (num >= min && num <= max && num % 100 === 0) {
+            return createSuccessResponse();
+        }
+    }
+
+    return { valid: false };
+}
+
+/**
+ * Build size validation options from rule configuration
+ * @param {Object} rule - Rule config
+ * @param {Object} defaults - Default options for a platform
+ * @returns {Object} Final validation options
+ */
+function buildSizeOptions(rule = {}, defaults = {}) {
+    const mergedAllowedKeywords = defaults.allowedKeywords || [];
+    return {
+        allowedUnits: rule.allowedUnits || defaults.allowedUnits || ['px'],
+        allowUnitless: rule.allowUnitless !== false,
+        allowNegative: rule.allowNegative ?? defaults.allowNegative ?? false,
+        allowPercent: rule.allowPercent ?? defaults.allowPercent ?? false,
+        allowedKeywords: rule.allowAuto
+            ? ['auto']
+            : (rule.allowedKeywords || mergedAllowedKeywords)
+    };
+}
+
+/**
+ * Validate size values with platform-specific unit support
+ * @param {string} value - Value to validate
+ * @param {Object} options - Validation options
+ * @param {boolean} [options.allowNegative=false] - Allow negative values
+ * @param {boolean} [options.allowUnitless=true] - Allow unitless numbers
+ * @param {boolean} [options.allowPercent=false] - Allow percentage values
+ * @param {string[]} [options.allowedUnits=['px']] - Allowed CSS units
+ * @param {string[]} [options.allowedKeywords=[]] - Allowed keyword values
+ * @returns {{ valid: boolean }}
+ */
+function validateSizeValue(value, options = {}) {
+    const {
+        allowNegative = false,
+        allowUnitless = true,
+        allowPercent = false,
+        allowedUnits = ['px'],
+        allowedKeywords = []
+    } = options;
+
+    const trimmed = String(value).trim();
+
+    // Check keywords first
+    if (allowedKeywords.includes(trimmed)) {
+        return { valid: true };
+    }
+
+    // Check percentage
+    if (allowPercent && (0,_primitives_js__WEBPACK_IMPORTED_MODULE_0__.isPercent)(trimmed)) {
+        return { valid: true };
+    }
+
+    // Check unitless numbers
+    if (allowUnitless) {
+        if (allowNegative && (0,_primitives_js__WEBPACK_IMPORTED_MODULE_0__.isUnitlessNumber)(trimmed)) {
+            return { valid: true };
+        }
+        if (!allowNegative && (0,_primitives_js__WEBPACK_IMPORTED_MODULE_0__.isNonNegativeUnitlessNumber)(trimmed)) {
+            return { valid: true };
+        }
+    }
+
+    // Check CSS units - generic validation for any unit
+    for (const unit of allowedUnits) {
+        // Escape special regex characters in unit name
+        const escapedUnit = unit.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const unitRegex = new RegExp(`^-?[\\d.]+${escapedUnit}$`);
+        
+        if (unitRegex.test(trimmed)) {
+            const numericValue = parseFloat(trimmed);
+            if (allowNegative || numericValue >= 0) {
+                return { valid: true };
+            }
+        }
+    }
+
+    return { valid: false };
+}
+
+
+/**
+ * Validate space-separated multi-value strings
+ * @param {string} value - Space-separated values
+ * @param {Function} validator - Function to validate each individual value
+ * @param {Object} [validatorOptions] - Options to pass to validator
+ * @returns {{ valid: boolean }}
+ */
+function validateMultiValue(value, validator, validatorOptions = {}) {
+    const trimmed = String(value).trim();
+    const parts = trimmed.split(/\s+/).filter(Boolean);
+
+    if (parts.length === 0) return { valid: false };
+
+    return { valid: parts.every(part => validator(part, validatorOptions).valid) };
+}
+
+/**
+ * Create standardized error response
+ * @param {string} subtype - Token subtype
+ * @param {string} value - Invalid value
+ * @param {string} expectedFormat - Expected format description
+ * @param {string} platform - Platform identifier
+ * @returns {{ valid: false, errorObject: Object }}
+ */
+function createErrorResponse(subtype, value, expectedFormat, platform) {
+    // Tests expect a human-friendly platform name in some cases.
+    // Keep other subtypes unchanged to avoid breaking existing validations.
+    const platformForError =
+        platform === "native_mobile" && (subtype === "border-width" || subtype === "font-family")
+            ? "mobile"
+            : platform;
+    return {
+        valid: false,
+        errorObject: {
+            subtype,
+            value,
+            expectedFormat,
+            platform: platformForError
+        }
+    };
+}
+
+function createSuccessResponse() {
+    return { valid: true };
+}
+
+
+function validateFontFamily(value, config = {}) {
+    const trimmed = String(value).trim();
+    
+    // Basic non-empty validation
+    if (!trimmed) {
+        return { valid: false };
+    }
+    
+    // If multiple fonts are not allowed, check for any comma (regardless of separator config)
+    if (!config.allowMultipleFonts && trimmed.includes(',')) {
+        return { valid: false };
+    }
+    
+    // If multiple fonts are allowed, validate each font
+    if (config.allowMultipleFonts && config.separator) {
+        const fonts = trimmed.split(config.separator).map(font => font.trim()).filter(Boolean);
+        
+        // Check maximum fonts limit
+        if (config.maxFonts && fonts.length > config.maxFonts) {
+            return { valid: false };
+        }
+        
+        // Validate each font name is non-empty
+        if (fonts.some(font => !font)) {
+            return { valid: false };
+        }
+        
+        return { valid: true };
+    }
+    
+    // Single font validation - just check it's non-empty
+    return { valid: true };
+}
+
+/**
+ * Common validator for font weight - validates range with keywords
+ * @param {string} value - Value to validate
+ * @param {Object} rule - Rule configuration with range and keywords
+ * @param {boolean} [requireMultipleOf100] - Whether to require multiples of 100
+ * @returns {{ valid: boolean }} Validation result
+ */
+function validateFontWeight(value, rule, requireMultipleOf100 = false) {
+    return validateRangeWithKeywords(value, rule, requireMultipleOf100);
+}
+
+/**
+ * Common validator for opacity - validates numeric range
+ * @param {string} value - Value to validate
+ * @param {Object} rule - Rule configuration with min/max
+ * @returns {{ valid: boolean }} Validation result
+ */
+function validateOpacity(value, rule) {
+    return validateNumericRange(value, rule.min, rule.max);
+}
+
+/**
+ * Platform-specific size value validator
+ * @param {string} value - Value to validate
+ * @param {Object} rule - Rule configuration
+ * @param {string[]} defaultUnits - Default allowed units for platform
+ * @returns {{ valid: boolean }} Validation result
+ */
+function validatePlatformSizeValue(value, rule = {}, defaultUnits = ['px']) {
+    const options = buildSizeOptions(rule, {
+        allowedUnits: defaultUnits,
+        allowPercent: false,
+        allowNegative: false,
+        allowedKeywords: []
+    });
+    return validateSizeValue(value, options);
+}
+
+/**
+ * Platform-specific space value validator (supports multi-value)
+ * @param {string} value - Value to validate
+ * @param {Object} rule - Rule configuration
+ * @param {string[]} defaultUnits - Default allowed units for platform
+ * @returns {{ valid: boolean }} Validation result
+ */
+function validatePlatformSpaceValue(value, rule = {}, defaultUnits = ['px']) {
+    const { allowMultiValue } = rule;
+    const options = buildSizeOptions(rule, {
+        allowedUnits: defaultUnits,
+        allowPercent: false,
+        allowNegative: false,
+        allowedKeywords: []
+    });
+
+    if (allowMultiValue) {
+        return validateMultiValue(value, validateSizeValue, options);
+    }
+
+    return validateSizeValue(value, options);
+}
+
+/**
+ * Get description for a rule, using customDescription if available or generating dynamically
+ * @param {Object} rule - Rule configuration
+ * @returns {string} Description for the rule
+ */
+function getRuleDescription(rule) {
+    // Use custom description if provided
+    if (rule.customDescription) {
+        return rule.customDescription;
+    }
+
+    // Generate dynamic description based on rule type
+    if (rule.allowed) {
+        return generateAllowedListDescription(rule.allowed);
+    }
+
+    if (rule.min !== undefined && rule.max !== undefined) {
+        let desc = generateRangeDescription(rule.min, rule.max);
+        if (rule.keywords && rule.keywords.length > 0) {
+            desc += ', ' + generateAllowedListDescription(rule.keywords);
+        }
+        return desc;
+    }
+
+    if (rule.allowedUnits) {
+        return generateUnitsDescription(rule.allowedUnits);
+    }
+
+    return "valid value";
+}
+
+
+/***/ },
+
+/***/ "./src/token-validation/validator-utils/native_mobile.js"
+/*!***************************************************************!*\
+  !*** ./src/token-validation/validator-utils/native_mobile.js ***!
+  \***************************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   MOBILE_RULES: () => (/* binding */ MOBILE_RULES)
+/* harmony export */ });
+/* harmony import */ var _common_primitives_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./common/primitives.js */ "./src/token-validation/validator-utils/common/primitives.js");
+/* harmony import */ var _common_utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./common/utils.js */ "./src/token-validation/validator-utils/common/utils.js");
+/* harmony import */ var _common_constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./common/constants.js */ "./src/token-validation/validator-utils/common/constants.js");
+
+
+
+
+
+
+function generateMobileRules() {
+    const rules = {};
+    
+    Object.keys(_common_constants_js__WEBPACK_IMPORTED_MODULE_2__.BASE_SUBTYPE_CONFIGS).forEach(subtype => {
+        const config = _common_constants_js__WEBPACK_IMPORTED_MODULE_2__.BASE_SUBTYPE_CONFIGS[subtype];
+        
+        // Skip subtypes not supported on mobile
+        if (!config.mobile && config.web && !config.type) return;
+        
+        const rule = (0,_common_constants_js__WEBPACK_IMPORTED_MODULE_2__.getPlatformRule)(subtype, 'native_mobile');
+        if (!rule) return;
+        
+        rule.validate = (0,_common_constants_js__WEBPACK_IMPORTED_MODULE_2__.resolveRuleValidator)(rule.type, subtype, 'native_mobile', {
+            validateFromAllowedList: _common_utils_js__WEBPACK_IMPORTED_MODULE_1__.validateFromAllowedList,
+            validatePlatformSizeValue: _common_utils_js__WEBPACK_IMPORTED_MODULE_1__.validatePlatformSizeValue,
+            validatePlatformSpaceValue: _common_utils_js__WEBPACK_IMPORTED_MODULE_1__.validatePlatformSpaceValue,
+            validateFontFamily: _common_utils_js__WEBPACK_IMPORTED_MODULE_1__.validateFontFamily,
+            validateOpacity: _common_utils_js__WEBPACK_IMPORTED_MODULE_1__.validateOpacity,
+            validateFontWeight: _common_utils_js__WEBPACK_IMPORTED_MODULE_1__.validateFontWeight,
+            validateBoxShadow
+        });
+        
+        // Set custom description if available
+        if (rule.customDescription && rule.customDescription.mobile) {
+            rule.customDescription = rule.customDescription.mobile;
+        } else if (rule.customDescription && typeof rule.customDescription === 'string') {
+            // Keep existing string descriptions
+        }
+        
+        rules[subtype] = rule;
+    });
+    
+    return rules;
+}
+
+const MOBILE_RULES = generateMobileRules();
+
+
+function validateBoxShadow(value) {
+    // Support comma-separated multiple shadows
+    const shadows = splitByTopLevelComma(value);
+    return { valid: shadows.every(validateSingleShadow) };
+}
+
+function validateSingleShadow(raw) {
+    let s = raw.trim();
+    if (!s) return false;
+
+    // Strip optional leading/trailing `inset` keyword
+    s = s.replace(/^inset\s+/, "").replace(/\s+inset$/, "").trim();
+
+    // Extract rgba/rgb color (contains spaces inside parens, must handle first)
+    let color = null;
+    const rgbMatch = s.match(/rgba?\([^)]+\)/);
+    if (rgbMatch) {
+        color = rgbMatch[0];
+        s = s.replace(color, "").trim();
+    } else {
+        // Extract hex at any position
+        const hexMatch = s.match(/(^|\s)(#[0-9a-fA-F]{3,8})(\s|$)/);
+        if (hexMatch) {
+            color = hexMatch[2];
+            s = s.replace(hexMatch[2], "").trim();
+        } else {
+            // Named color at end only
+            const parts = s.split(/\s+/);
+            const last = parts[parts.length - 1];
+            if ((0,_common_primitives_js__WEBPACK_IMPORTED_MODULE_0__.isNamedColor)(last)) {
+                color = last;
+                s = parts.slice(0, -1).join(" ").trim();
+            }
+            // color may be absent — React Native defaults to black, that's valid
+        }
+    }
+
+    if (color !== null) {
+        if (!(0,_common_primitives_js__WEBPACK_IMPORTED_MODULE_0__.isMobileColor)(color)) return false;
+    }
+
+    // Remaining: 2–4 length values
+    const parts = s.split(/\s+/).filter(Boolean);
+    if (parts.length < 2 || parts.length > 4) return false;
+
+    return parts.every((p, i) => {
+        const trimmedPart = String(p).trim();
+
+        // Offsets/spread accept `0` without units, but non-zero values must be px.
+        if (trimmedPart === "0") return true;
+
+        if (i === 2) {
+            // blurRadius >= 0
+            return (0,_common_utils_js__WEBPACK_IMPORTED_MODULE_1__.validateSizeValue)(trimmedPart, {
+                allowedUnits: ["px"],
+                allowUnitless: false,
+                allowNegative: false
+            }).valid;
+        }
+
+        // offsetX/offsetY and optional spreadDistance
+        return (0,_common_utils_js__WEBPACK_IMPORTED_MODULE_1__.validateSizeValue)(trimmedPart, {
+            allowedUnits: ["px"],
+            allowUnitless: false,
+            allowNegative: true
+        }).valid;
+    });
+}
+
+
+/** Split "a, rgba(1,2,3), b" by commas NOT inside parens */
+function splitByTopLevelComma(value) {
+    const result = [];
+    let depth = 0, current = "";
+    for (const ch of value) {
+        if (ch === "(") depth++;
+        else if (ch === ")") depth--;
+        else if (ch === "," && depth === 0) {
+            result.push(current.trim());
+            current = "";
+            continue;
+        }
+        current += ch;
+    }
+    if (current.trim()) result.push(current.trim());
+    return result;
+}
+
+
+
+
+/***/ },
+
+/***/ "./src/token-validation/validator-utils/web.js"
+/*!*****************************************************!*\
+  !*** ./src/token-validation/validator-utils/web.js ***!
+  \*****************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   WEB_VALIDATION_RULES: () => (/* binding */ WEB_VALIDATION_RULES)
+/* harmony export */ });
+/* harmony import */ var _common_primitives_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./common/primitives.js */ "./src/token-validation/validator-utils/common/primitives.js");
+/* harmony import */ var _common_utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./common/utils.js */ "./src/token-validation/validator-utils/common/utils.js");
+/* harmony import */ var _common_constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./common/constants.js */ "./src/token-validation/validator-utils/common/constants.js");
+
+
+
+
+function generateWebRules() {
+    const rules = {};
+
+    Object.keys(_common_constants_js__WEBPACK_IMPORTED_MODULE_2__.BASE_SUBTYPE_CONFIGS).forEach(subtype => {
+        const rule = (0,_common_constants_js__WEBPACK_IMPORTED_MODULE_2__.getPlatformRule)(subtype, 'web');
+        if (!rule) return;
+
+        rule.validate = (0,_common_constants_js__WEBPACK_IMPORTED_MODULE_2__.resolveRuleValidator)(rule.type, subtype, 'web', {
+            validateFromAllowedList: _common_utils_js__WEBPACK_IMPORTED_MODULE_1__.validateFromAllowedList,
+            validatePlatformSizeValue: _common_utils_js__WEBPACK_IMPORTED_MODULE_1__.validatePlatformSizeValue,
+            validatePlatformSpaceValue: _common_utils_js__WEBPACK_IMPORTED_MODULE_1__.validatePlatformSpaceValue,
+            validateFontFamily: _common_utils_js__WEBPACK_IMPORTED_MODULE_1__.validateFontFamily,
+            validateOpacity: _common_utils_js__WEBPACK_IMPORTED_MODULE_1__.validateOpacity,
+            validateFontWeight: _common_utils_js__WEBPACK_IMPORTED_MODULE_1__.validateFontWeight,
+            validateBoxShadow
+        });
+
+        // Set custom description if available
+        if (rule.customDescription && rule.customDescription.web) {
+            rule.customDescription = rule.customDescription.web;
+        } else if (rule.customDescription && typeof rule.customDescription === 'string') {
+            // Keep existing string descriptions
+        }
+
+        rules[subtype] = rule;
+    });
+
+    return rules;
+}
+
+const WEB_VALIDATION_RULES = generateWebRules();
+
+// ─── Validation Functions ────────────────────────────────────────────────────
+
+function validateBoxShadow(value) {
+    const trimmed = String(value).trim();
+
+    if (trimmed === "none") {
+        return { valid: true };
+    }
+
+    // Split by comma for multiple shadows
+    const shadows = trimmed.split(',').map(s => s.trim());
+
+    for (const shadow of shadows) {
+        if (!isValidSingleShadow(shadow)) {
+            return {
+                valid: false,
+                error: `Invalid box-shadow format: "${shadow}". Expected format: "[inset] <x> <y> [blur] [spread] <color>"`
+            };
+        }
+    }
+
+    return { valid: true };
+}
+
+function isValidSingleShadow(shadow) {
+    // Very basic validation - could be more sophisticated
+    const parts = shadow.split(/\s+/);
+
+    // Need at least x, y, and color
+    if (parts.length < 3) return false;
+
+    let hasInset = false;
+    let sizeCount = 0;
+    let hasColor = false;
+
+    for (const part of parts) {
+        if (part === "inset") {
+            hasInset = true;
+        } else if ((0,_common_primitives_js__WEBPACK_IMPORTED_MODULE_0__.isPx)(part) || (0,_common_primitives_js__WEBPACK_IMPORTED_MODULE_0__.isRem)(part) || (0,_common_primitives_js__WEBPACK_IMPORTED_MODULE_0__.isEm)(part) || (0,_common_primitives_js__WEBPACK_IMPORTED_MODULE_0__.isUnitlessNumber)(part)) {
+            sizeCount++;
+        } else if ((0,_common_primitives_js__WEBPACK_IMPORTED_MODULE_0__.isWebColor)(part)) {
+            hasColor = true;
+        }
+    }
+
+    // Need at least 2 size values (x, y) and a color
+    return sizeCount >= 2 && hasColor;
+}
+
 /***/ },
 
 /***/ "./src/utils/style-dictionary-utils.js"
@@ -8143,12 +9388,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   getComponentsList: () => (/* binding */ getComponentsList),
 /* harmony export */   getSelectorFromGroup: () => (/* reexport safe */ _src_utils_style_dictionary_utils_js__WEBPACK_IMPORTED_MODULE_3__.getSelectorFromGroup),
 /* harmony export */   getTokens: () => (/* binding */ getTokens),
-/* harmony export */   loadComponentTokens: () => (/* binding */ loadComponentTokens)
+/* harmony export */   loadComponentTokens: () => (/* binding */ loadComponentTokens),
+/* harmony export */   validateTokenValue: () => (/* reexport safe */ _src_token_validation_validate_value_js__WEBPACK_IMPORTED_MODULE_4__["default"])
 /* harmony export */ });
 /* harmony import */ var chroma_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! chroma-js */ "./node_modules/chroma-js/index.js");
 /* harmony import */ var _web_index__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./web.index */ "./web.index.ts");
 /* harmony import */ var _native_mobile_index__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./native_mobile.index */ "./native_mobile.index.ts");
 /* harmony import */ var _src_utils_style_dictionary_utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./src/utils/style-dictionary-utils.js */ "./src/utils/style-dictionary-utils.js");
+/* harmony import */ var _src_token_validation_validate_value_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./src/token-validation/validate-value.js */ "./src/token-validation/validate-value.js");
 // Primitives
 
 
@@ -8195,6 +9442,7 @@ const getComponentsList = (platform) => {
 };
 
 
+
 })();
 
 var __webpack_export_target__ = exports;