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

package/src/token-validation/validator-utils/native_mobile.js

@@ -0,0 +1,120 @@
+import { isMobileColor, isNamedColor } from "./common/primitives.js";
+import { validateSizeValue, validateFromAllowedList, validateFontFamily, validateFontWeight, validateOpacity, validatePlatformSizeValue, validatePlatformSpaceValue } from "./common/utils.js";
+import { BASE_SUBTYPE_CONFIGS, getPlatformRule, resolveRuleValidator } from "./common/constants.js";
+function generateMobileRules() {
+    const rules = {};
+    Object.keys(BASE_SUBTYPE_CONFIGS).forEach(subtype => {
+        const config = BASE_SUBTYPE_CONFIGS[subtype];
+        // Skip subtypes not supported on mobile
+        if (!config.mobile && config.web && !config.type)
+            return;
+        const rule = getPlatformRule(subtype, 'native_mobile');
+        if (!rule)
+            return;
+        rule.validate = resolveRuleValidator(rule.type, subtype, 'native_mobile', {
+            validateFromAllowedList,
+            validatePlatformSizeValue,
+            validatePlatformSpaceValue,
+            validateFontFamily,
+            validateOpacity,
+            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;
+}
+export 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 (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 (!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 validateSizeValue(trimmedPart, {
+                allowedUnits: ["px"],
+                allowUnitless: false,
+                allowNegative: false
+            }).valid;
+        }
+        // offsetX/offsetY and optional spreadDistance
+        return 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;
+}
+//# sourceMappingURL=native_mobile.js.map

package/src/token-validation/validator-utils/native_mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native_mobile.js","sourceRoot":"./","sources":["src/token-validation/validator-utils/native_mobile.js"],"names":[],"mappings":"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","sourcesContent":["import { isMobileColor, isNamedColor } from \"./common/primitives.js\";\n\nimport { validateSizeValue, validateFromAllowedList, validateFontFamily, validateFontWeight, validateOpacity, validatePlatformSizeValue, validatePlatformSpaceValue } from \"./common/utils.js\";\n\nimport { BASE_SUBTYPE_CONFIGS, getPlatformRule, resolveRuleValidator } from \"./common/constants.js\";\n\nfunction generateMobileRules() {\n    const rules = {};\n    \n    Object.keys(BASE_SUBTYPE_CONFIGS).forEach(subtype => {\n        const config = BASE_SUBTYPE_CONFIGS[subtype];\n        \n        // Skip subtypes not supported on mobile\n        if (!config.mobile && config.web && !config.type) return;\n        \n        const rule = getPlatformRule(subtype, 'native_mobile');\n        if (!rule) return;\n        \n        rule.validate = resolveRuleValidator(rule.type, subtype, 'native_mobile', {\n            validateFromAllowedList,\n            validatePlatformSizeValue,\n            validatePlatformSpaceValue,\n            validateFontFamily,\n            validateOpacity,\n            validateFontWeight,\n            validateBoxShadow\n        });\n        \n        // Set custom description if available\n        if (rule.customDescription && rule.customDescription.mobile) {\n            rule.customDescription = rule.customDescription.mobile;\n        } else if (rule.customDescription && typeof rule.customDescription === 'string') {\n            // Keep existing string descriptions\n        }\n        \n        rules[subtype] = rule;\n    });\n    \n    return rules;\n}\n\nexport const MOBILE_RULES = generateMobileRules();\n\n\nfunction validateBoxShadow(value) {\n    // Support comma-separated multiple shadows\n    const shadows = splitByTopLevelComma(value);\n    return { valid: shadows.every(validateSingleShadow) };\n}\n\nfunction validateSingleShadow(raw) {\n    let s = raw.trim();\n    if (!s) return false;\n\n    // Strip optional leading/trailing `inset` keyword\n    s = s.replace(/^inset\\s+/, \"\").replace(/\\s+inset$/, \"\").trim();\n\n    // Extract rgba/rgb color (contains spaces inside parens, must handle first)\n    let color = null;\n    const rgbMatch = s.match(/rgba?\\([^)]+\\)/);\n    if (rgbMatch) {\n        color = rgbMatch[0];\n        s = s.replace(color, \"\").trim();\n    } else {\n        // Extract hex at any position\n        const hexMatch = s.match(/(^|\\s)(#[0-9a-fA-F]{3,8})(\\s|$)/);\n        if (hexMatch) {\n            color = hexMatch[2];\n            s = s.replace(hexMatch[2], \"\").trim();\n        } else {\n            // Named color at end only\n            const parts = s.split(/\\s+/);\n            const last = parts[parts.length - 1];\n            if (isNamedColor(last)) {\n                color = last;\n                s = parts.slice(0, -1).join(\" \").trim();\n            }\n            // color may be absent — React Native defaults to black, that's valid\n        }\n    }\n\n    if (color !== null) {\n        if (!isMobileColor(color)) return false;\n    }\n\n    // Remaining: 2–4 length values\n    const parts = s.split(/\\s+/).filter(Boolean);\n    if (parts.length < 2 || parts.length > 4) return false;\n\n    return parts.every((p, i) => {\n        const trimmedPart = String(p).trim();\n\n        // Offsets/spread accept `0` without units, but non-zero values must be px.\n        if (trimmedPart === \"0\") return true;\n\n        if (i === 2) {\n            // blurRadius >= 0\n            return validateSizeValue(trimmedPart, {\n                allowedUnits: [\"px\"],\n                allowUnitless: false,\n                allowNegative: false\n            }).valid;\n        }\n\n        // offsetX/offsetY and optional spreadDistance\n        return validateSizeValue(trimmedPart, {\n            allowedUnits: [\"px\"],\n            allowUnitless: false,\n            allowNegative: true\n        }).valid;\n    });\n}\n\n\n/** Split \"a, rgba(1,2,3), b\" by commas NOT inside parens */\nfunction splitByTopLevelComma(value) {\n    const result = [];\n    let depth = 0, current = \"\";\n    for (const ch of value) {\n        if (ch === \"(\") depth++;\n        else if (ch === \")\") depth--;\n        else if (ch === \",\" && depth === 0) {\n            result.push(current.trim());\n            current = \"\";\n            continue;\n        }\n        current += ch;\n    }\n    if (current.trim()) result.push(current.trim());\n    return result;\n}\n\n\n"]}

package/src/token-validation/validator-utils/web.d.ts

@@ -0,0 +1 @@
+export const WEB_VALIDATION_RULES: {};

package/src/token-validation/validator-utils/web.js

@@ -0,0 +1,72 @@
+import { isPx, isRem, isEm, isUnitlessNumber, isWebColor } from "./common/primitives.js";
+import { validateFromAllowedList, validateFontFamily, validateFontWeight, validateOpacity, validatePlatformSizeValue, validatePlatformSpaceValue } from "./common/utils.js";
+import { BASE_SUBTYPE_CONFIGS, getPlatformRule, resolveRuleValidator } from "./common/constants.js";
+function generateWebRules() {
+    const rules = {};
+    Object.keys(BASE_SUBTYPE_CONFIGS).forEach(subtype => {
+        const rule = getPlatformRule(subtype, 'web');
+        if (!rule)
+            return;
+        rule.validate = resolveRuleValidator(rule.type, subtype, 'web', {
+            validateFromAllowedList,
+            validatePlatformSizeValue,
+            validatePlatformSpaceValue,
+            validateFontFamily,
+            validateOpacity,
+            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;
+}
+export 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 (isPx(part) || isRem(part) || isEm(part) || isUnitlessNumber(part)) {
+            sizeCount++;
+        }
+        else if (isWebColor(part)) {
+            hasColor = true;
+        }
+    }
+    // Need at least 2 size values (x, y) and a color
+    return sizeCount >= 2 && hasColor;
+}
+//# sourceMappingURL=web.js.map

package/src/token-validation/validator-utils/web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"web.js","sourceRoot":"./","sources":["src/token-validation/validator-utils/web.js"],"names":[],"mappings":"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","sourcesContent":["import { isPx, isRem, isEm, isUnitlessNumber, isWebColor } from \"./common/primitives.js\";\nimport { validateFromAllowedList, validateFontFamily, validateFontWeight, validateOpacity, validatePlatformSizeValue, validatePlatformSpaceValue } from \"./common/utils.js\";\nimport { BASE_SUBTYPE_CONFIGS, getPlatformRule, resolveRuleValidator } from \"./common/constants.js\";\n\nfunction generateWebRules() {\n    const rules = {};\n\n    Object.keys(BASE_SUBTYPE_CONFIGS).forEach(subtype => {\n        const rule = getPlatformRule(subtype, 'web');\n        if (!rule) return;\n\n        rule.validate = resolveRuleValidator(rule.type, subtype, 'web', {\n            validateFromAllowedList,\n            validatePlatformSizeValue,\n            validatePlatformSpaceValue,\n            validateFontFamily,\n            validateOpacity,\n            validateFontWeight,\n            validateBoxShadow\n        });\n\n        // Set custom description if available\n        if (rule.customDescription && rule.customDescription.web) {\n            rule.customDescription = rule.customDescription.web;\n        } else if (rule.customDescription && typeof rule.customDescription === 'string') {\n            // Keep existing string descriptions\n        }\n\n        rules[subtype] = rule;\n    });\n\n    return rules;\n}\n\nexport const WEB_VALIDATION_RULES = generateWebRules();\n\n// ─── Validation Functions ────────────────────────────────────────────────────\n\nfunction validateBoxShadow(value) {\n    const trimmed = String(value).trim();\n\n    if (trimmed === \"none\") {\n        return { valid: true };\n    }\n\n    // Split by comma for multiple shadows\n    const shadows = trimmed.split(',').map(s => s.trim());\n\n    for (const shadow of shadows) {\n        if (!isValidSingleShadow(shadow)) {\n            return {\n                valid: false,\n                error: `Invalid box-shadow format: \"${shadow}\". Expected format: \"[inset] <x> <y> [blur] [spread] <color>\"`\n            };\n        }\n    }\n\n    return { valid: true };\n}\n\nfunction isValidSingleShadow(shadow) {\n    // Very basic validation - could be more sophisticated\n    const parts = shadow.split(/\\s+/);\n\n    // Need at least x, y, and color\n    if (parts.length < 3) return false;\n\n    let hasInset = false;\n    let sizeCount = 0;\n    let hasColor = false;\n\n    for (const part of parts) {\n        if (part === \"inset\") {\n            hasInset = true;\n        } else if (isPx(part) || isRem(part) || isEm(part) || isUnitlessNumber(part)) {\n            sizeCount++;\n        } else if (isWebColor(part)) {\n            hasColor = true;\n        }\n    }\n\n    // Need at least 2 size values (x, y) and a color\n    return sizeCount >= 2 && hasColor;\n}"]}

package/src/tokens/mobile/components/accordion/accordion.json

@@ -23,6 +23,14 @@
           "description": "Controls the width of the accordion component. This determines how wide the accordion panel appears on the screen.<br>CSS variable: --wm-accordion-width"
         }
       },
+      "gap": {
+        "value": "{space.0.value}",
+        "type": "space",
+        "attributes": {
+          "subtype": "space",
+          "description": "Controls the gap between accordion items. This determines the spacing between accordion headers and content.<br>CSS variable: --wm-accordion-gap"
+        }
+      },
       "border": {
         "width": {
           "value": "{border.width.0.value}",
@@ -33,7 +41,7 @@
           }
         },
         "style": {
-          "value": "{border.style.solid}",
+          "value": "{border.style.solid.value}",
           "type": "radius",
           "attributes": {
             "subtype": "border-style",
@@ -66,6 +74,42 @@
         }
       },
       "text": {
+        "background": {
+              "color": {
+                "value": "transparent",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the background color of the accordion title. This is the background color that appears <br>CSS variable: --wm-accordion-active-text-background-color"
+                }
+              }
+            },
+            "border": {
+              "width": {
+                "value": "{border.width.0.value}",
+                "type": "border",
+                "attributes": {
+                  "subtype": "border-width",
+                  "description": "Sets the border width of the accordion title. This determines the thickness of the border that appears <br>CSS variable: --wm-accordion-active-text-border-width"
+                }
+              },
+              "radius": {
+                "value": "0px",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "radius",
+                  "description": "Sets the border radius of the accordion title. This determines the roundness of the border that appears <br>CSS variable: --wm-accordion-active-text-border-radius"
+                }
+              },
+              "color": {
+                "value": "{color.outline.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the border color of the accordion title. This determines what color the border appears <br>CSS variable: --wm-accordion-active-text-border-color"
+                }
+              }
+            },
         "color": {
           "value": "#333333",
           "type": "color",
@@ -85,12 +129,12 @@
       },
       "header": {
         "border": {
-          "bottom-width": {
-            "value": "{border.width.1.value}",
+          "width": {
+            "value": "{space.0.value} {space.0.value} {border.width.1.value} {space.0.value}",
             "type": "space",
             "attributes": {
               "subtype": "border-width",
-              "description": "Controls the bottom border thickness of the accordion header. This determines how thick the border at the bottom of the header appears.<br>CSS variable: --wm-accordion-header-border-bottom-width"
+              "description": "Controls the border thickness of the accordion header (bottom only). This determines how thick the border at the bottom of the header appears.<br>CSS variable: --wm-accordion-header-border-width"
             }
           },
           "color": {
@@ -241,7 +285,95 @@
           }
         }
       },
+      "pane":{
+        "border":{
+          "color":{
+            "value": "{color.outline.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the border color of the accordion pane. This determines what color the border around the pane appears in.<br>CSS variable: --wm-accordion-pane-border-color"
+            }
+          },
+          "radius":{
+            "value": "0px",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the border radius of the accordion pane. This determines the radius of the border around the pane.<br>CSS variable: --wm-accordion-pane-border-radius"
+            }
+          },
+          "width":{
+            "value": "{border.width.0.value}",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the border thickness of the accordion pane. This determines how thick the border around the pane appears.<br>CSS variable: --wm-accordion-pane-border-width"
+            }
+          },
+          "style":{
+            "value": "{border.style.solid.value}",
+            "type": "border",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Controls the border style of the accordion pane. This determines the style of the border around the pane.<br>CSS variable: --wm-accordion-pane-border-style"
+            }
+          }
+        }
+      },
       "title": {
+        "wrapper": {
+          "padding": {
+            "value": "{space.0.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the padding of the accordion title wrapper. This creates spacing around the title content.<br>CSS variable: --wm-accordion-title-wrapper-padding"
+            }
+          },
+          "width": {
+            "value": "auto",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the width of the accordion title wrapper. This determines the width of the title wrapper.<br>CSS variable: --wm-accordion-title-wrapper-width"
+            }
+          },
+          "border": {
+            "width": {
+              "value": "{border.width.0.value}",
+              "type": "border",
+              "attributes": {
+                "subtype": "border-width",
+                "description": "Controls the border thickness of the accordion title wrapper. This determines how thick the border around the title wrapper appears.<br>CSS variable: --wm-accordion-title-wrapper-border-width"
+              }
+            },
+            "radius": {
+              "value": "{radius.none.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "radius",
+                "description": "Controls the border radius of the accordion title wrapper. This determines the roundness of the border around the title wrapper.<br>CSS variable: --wm-accordion-title-wrapper-border-radius"
+              }
+            },
+            "style": {
+              "value": "{border.style.solid.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "border-style",
+                "description": "Controls the border style of the accordion title wrapper. This determines the style of the border around the title wrapper.<br>CSS variable: --wm-accordion-title-wrapper-border-style"
+              }
+            }
+          },
+          "background-color": {
+            "value": "{color.transparent.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of the accordion title wrapper. This is the background color that appears behind the title content.<br>CSS variable: --wm-accordion-title-wrapper-background-color"
+            }
+          }
+        },
         "icon": {
           "color": {
             "value": "#333333",
@@ -284,6 +416,42 @@
             }
           },
           "text": {
+            "background": {
+              "color": {
+                "value": "transparent",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the background color of the active accordion content. This is the background color that appears when the accordion is expanded.<br>CSS variable: --wm-accordion-active-text-background-color"
+                }
+              }
+            },
+            "border": {
+              "width": {
+                "value": "{border.width.0.value}",
+                "type": "border",
+                "attributes": {
+                  "subtype": "border-width",
+                  "description": "Sets the border width of the active accordion content. This determines the thickness of the border that appears when the accordion is expanded.<br>CSS variable: --wm-accordion-active-text-border-width"
+                }
+              },
+              "radius": {
+                "value": "0px",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "radius",
+                  "description": "Sets the border radius of the active accordion content. This determines the roundness of the border that appears when the accordion is expanded.<br>CSS variable: --wm-accordion-active-text-border-radius"
+                }
+              },
+              "color": {
+                "value": "{color.outline.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color",
+                  "description": "Sets the border color of the active accordion content. This determines what color the border appears in when the accordion is expanded.<br>CSS variable: --wm-accordion-active-text-border-color"
+                }
+              }
+            },
             "color": {
               "value": "{color.white.@.value}",
               "type": "color",

package/src/tokens/mobile/components/accordion-pane/accordion-pane.json

@@ -0,0 +1,65 @@
+{
+  "accordion-pane": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "mobile": ".app-accordionpane"
+        }
+      }
+    },
+    "mapping": {
+      "content": {
+        "background-color": {
+          "value": "{color.surface.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of the accordion pane content. This is the background color that appears behind the accordion content.<br>CSS variable: --wm-accordion-content-background-color"
+          }
+        },
+        "padding": {
+          "value": "0px",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Sets the internal spacing inside the accordion pane content. This creates breathing room around the content.<br>CSS variable: --wm-accordion-content-padding"
+          }
+        },
+        "border": {
+          "radius": {
+            "value": "{radius.sm.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the border radius for rounded corners of the accordion pane content. This makes the content appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-accordion-content-border-radius"
+            }
+          },
+          "style": {
+            "value": "{border.style.solid.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Sets the border style of the accordion pane content. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-accordion-content-border-style"
+            }
+          },
+          "width": {
+            "value": "{border.width.0.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the border thickness of the accordion pane content. This determines how thick the border around the content appears.<br>CSS variable: --wm-accordion-content-border-width"
+            }
+          },
+          "color": {
+            "value": "{color.outline.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the border color of the accordion pane content. This determines what color the border around the content appears in.<br>CSS variable: --wm-accordion-content-border-color"
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/tokens/mobile/components/anchor/anchor.json

@@ -79,21 +79,11 @@
                     }
                 },
                 "padding": {
-                    "left": {
-                        "value": "{space.2.value}",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "padding-left",
-                            "description": "Controls the left padding (spacing) inside anchor link text. This creates space between the left edge of the text and its container, making the anchor text more comfortable to read and click.<br>CSS variable: --wm-anchor-text-padding-left"
-                        }
-                    },
-                    "right": {
-                        "value": "{space.2.value}",
-                        "type": "space",
-                        "attributes": {
-                            "subtype": "padding-right",
-                            "description": "Controls the right padding (spacing) inside anchor link text. This creates space between the right edge of the text and its container, making the anchor text more comfortable to read and click.<br>CSS variable: --wm-anchor-text-padding-right"
-                        }
+                    "value": "{space.0.value} {space.2.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the padding (top/bottom, left/right) inside anchor link text. This creates space around the text, making the anchor text more comfortable to read and click. Acceptable units: px.<br>CSS variable: --wm-anchor-text-padding"
                     }
                 }
             },

package/src/tokens/mobile/components/barcodescanner/barcodescanner.json

@@ -46,13 +46,11 @@
                     }
                 },
                 "padding": {
-                    "left": {
-                        "value": "{space.0.value}",
-                        "type": "font",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Sets the left padding of the text in the barcode scanner component. This creates spacing to the left of the text.<br>CSS variable: --wm-barcodescanner-text-padding-left"
-                        }
+                    "value": "{space.0.value} {space.0.value} {space.0.value} {space.0.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the padding (top, right, bottom, left) of the text in the barcode scanner component. This creates spacing around the text. Acceptable units: px.<br>CSS variable: --wm-barcodescanner-text-padding"
                     }
                 }
             },
@@ -85,37 +83,11 @@
                 }
             },
             "padding": {
-                "top": {
-                    "value": "10px",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Sets the top padding of the barcode scanner component. This creates spacing at the top of the component.<br>CSS variable: --wm-barcodescanner-padding-top"
-                    }
-                },
-                "left": {
-                    "value": "{space.2.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Sets the left padding of the barcode scanner component. This creates spacing on the left side of the component.<br>CSS variable: --wm-barcodescanner-padding-left"
-                    }
-                },
-                "bottom": {
-                    "value": "{space.2.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Sets the bottom padding of the barcode scanner component. This creates spacing at the bottom of the component.<br>CSS variable: --wm-barcodescanner-padding-bottom"
-                    }
-                },
-                "right": {
-                    "value": "{space.2.value}",
-                    "type": "space",
-                    "attributes": {
-                        "subtype": "space",
-                        "description": "Sets the right padding of the barcode scanner component. This creates spacing on the right side of the component.<br>CSS variable: --wm-barcodescanner-padding-right"
-                    }
+                "value": "10px {space.2.value} {space.2.value} {space.2.value}",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the padding (top, right, bottom, left) of the barcode scanner component. This creates spacing around the component content. Acceptable units: px.<br>CSS variable: --wm-barcodescanner-padding"
                 }
             },
             "border": {