@wavemaker/foundation-css 11.15.4-rc.250 → 11.15.5-rc.253

package/cjs/foundation-css.cjs

@@ -2094,7 +2094,6 @@ 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;
@@ -2218,7 +2217,6 @@ 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 });
 
 
 /***/ },
@@ -2308,7 +2306,6 @@ __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
@@ -2434,7 +2431,6 @@ __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 });
 
 
 /***/ },
@@ -2467,7 +2463,6 @@ 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 });
 
 
 /***/ },
@@ -2483,7 +2478,6 @@ __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
@@ -2959,7 +2953,6 @@ __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 });
 
 
 /***/ },
@@ -6688,7 +6681,6 @@ __webpack_require__.r(__webpack_exports__);
     }
     return rgb;
 });
-(Object.getOwnPropertyDescriptor(__WEBPACK_DEFAULT_EXPORT__, "name") || {}).writable || Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 
 
 /***/ },
@@ -6718,7 +6710,6 @@ __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 });
 
 
 /***/ },
@@ -6796,7 +6787,6 @@ 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 (
@@ -6820,7 +6810,6 @@ __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;
@@ -6899,7 +6888,6 @@ __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");
 
 
@@ -7003,7 +6991,6 @@ __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 });
 
 
 /***/ },
@@ -7024,7 +7011,6 @@ 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 });
 
 
 /***/ },
@@ -7124,7 +7110,6 @@ __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 [
@@ -7176,7 +7161,6 @@ __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 });
 
 
 /***/ },
@@ -7204,7 +7188,6 @@ __webpack_require__.r(__webpack_exports__);
         return false;
     }
 });
-(Object.getOwnPropertyDescriptor(__WEBPACK_DEFAULT_EXPORT__, "name") || {}).writable || Object.defineProperty(__WEBPACK_DEFAULT_EXPORT__, "name", { value: "default", configurable: true });
 
 
 /***/ },

package/cjs/src_tokens_mobile_components_dropdown-menu_dropdown-menu_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \***********************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"dropdown":{"mapping":{"menu":{"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of dropdown menus (lists of options that appear when users click on a button or link). This is the main background color that appears behind the dropdown menu items.<br>CSS variable: --wm-dropdown-menu-background"}},"padding":{"type":"space","value":"{space.2.value} {space.0.value}","attributes":{"subtype":"space","description":"Controls the padding inside dropdown menu containers (top/bottom, left/right). Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-padding"}},"color":{"type":"color","value":"{color.on-surface.variant.@.value}","attributes":{"subtype":"color","description":"Sets the text color of dropdown menu triggers (the button or link that opens the dropdown). This determines what color the trigger text appears in.<br>CSS variable: --wm-dropdown-menu-color"}},"text":{"decoration":{"type":"radius","value":"none","attributes":{"subtype":"text-decoration","description":"Controls the text decoration of dropdown menu triggers (underline, overline, line-through, or none). When set to \'none\', no decoration is applied to the trigger text.<br>CSS variable: --wm-dropdown-menu-text-decoration"}},"font-weight":{"type":"font","value":"{font.weight.700.value}","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the dropdown menu trigger text appears. When set to 700, the trigger text appears bold to emphasize the dropdown button.<br>CSS variable: --wm-dropdown-menu-text-font-weight"}},"padding":{"type":"space","value":"{space.0.value} {space.3.value} {space.0.value} {space.2.value}","attributes":{"subtype":"space","description":"Controls the padding of dropdown menu trigger text (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-text-padding"}}},"content":{"width":{"value":"220px","type":"space","attributes":{"subtype":"space","description":"Controls how wide dropdown menu content appears (the container that holds the dropdown menu items). This determines the horizontal size of the dropdown menu container.<br>CSS variable: --wm-dropdown-menu-content-width"}},"border":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of dropdown menu content. This makes the dropdown appear with slightly rounded corners for a softer appearance.<br>CSS variable: --wm-dropdown-menu-content-border-radius"}}},"background":{"value":"#fff","type":"color","attributes":{"subtype":"color","description":"Sets the background color of dropdown menu content (the container that holds the dropdown menu items). This is the main background color that appears behind the menu items.<br>CSS variable: --wm-dropdown-menu-content-background"}}},"caret":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of dropdown menu caret icons (the small arrow symbols that indicate dropdown menus). This determines what color the arrow symbols appear in.<br>CSS variable: --wm-dropdown-menu-caret-color"}},"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large dropdown menu caret icons appear (the small arrow symbols that indicate dropdown menus). This affects the size of the arrow symbols that users see in dropdown buttons.<br>CSS variable: --wm-dropdown-menu-caret-size"}}},"item":{"font-family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for dropdown menu items (individual options in the dropdown list). This determines whether the menu item text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-dropdown-menu-item-font-family"}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the dropdown menu items appear (individual options in the dropdown list). This affects the size of the text that users see in each menu option.<br>CSS variable: --wm-dropdown-menu-item-font-size"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the dropdown menu items appear (individual options in the dropdown list). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-dropdown-menu-item-font-weight"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when dropdown menu item text wraps to multiple lines. This ensures proper spacing for the menu item text displayed in the dropdown.<br>CSS variable: --wm-dropdown-menu-item-line-height"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of dropdown menu items (individual options in the dropdown list). This determines what color the menu item text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-dropdown-menu-item-color"}},"border":{"style":{"type":"radius","value":"{border.style.solid.value}","attributes":{"subtype":"border-style","description":"Controls the style of the border around dropdown menu items. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-dropdown-menu-item-border-style"}}},"padding":{"value":"{space.3.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding inside dropdown menu items (top/bottom, left/right). Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-item-padding"}}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of dropdown menus (lists of options that appear when users click on a button or link). When set to \'none\', dropdowns have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-dropdown-menu-border-radius"}},"width":{"value":"0","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around dropdown menus. When set to 0, there\'s no visible border. Higher values create thicker borders around the dropdown.<br>CSS variable: --wm-dropdown-menu-border-width"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around dropdown menus. This determines the color of the outline that defines the dropdown menu shape.<br>CSS variable: --wm-dropdown-menu-border-color"}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"dropdown":{"mapping":{"menu":{"background":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of dropdown menus (lists of options that appear when users click on a button or link). This is the main background color that appears behind the dropdown menu items.<br>CSS variable: --wm-dropdown-menu-background"}},"padding":{"type":"space","value":"{space.2.value} {space.0.value}","attributes":{"subtype":"space","description":"Controls the padding inside dropdown menu containers (top/bottom, left/right). Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-padding"}},"color":{"type":"color","value":"{color.on-surface.variant.@.value}","attributes":{"subtype":"color","description":"Sets the text color of dropdown menu triggers (the button or link that opens the dropdown). This determines what color the trigger text appears in.<br>CSS variable: --wm-dropdown-menu-color"}},"text":{"decoration":{"type":"radius","value":"none","attributes":{"subtype":"text-decoration","description":"Controls the text decoration of dropdown menu triggers (underline, overline, line-through, or none). When set to \'none\', no decoration is applied to the trigger text.<br>CSS variable: --wm-dropdown-menu-text-decoration"}},"font-weight":{"type":"font","value":"{font.weight.700.value}","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the dropdown menu trigger text appears. When set to 700, the trigger text appears bold to emphasize the dropdown button.<br>CSS variable: --wm-dropdown-menu-text-font-weight"}},"font-size":{"type":"font","value":"{body.large.font-size.value}","attributes":{"subtype":"font-size","description":"Controls the font size of dropdown menu trigger text.<br>CSS variable: --wm-dropdown-menu-text-font-size"}},"padding":{"type":"space","value":"{space.0.value} {space.3.value} {space.0.value} {space.2.value}","attributes":{"subtype":"space","description":"Controls the padding of dropdown menu trigger text (top, right, bottom, left). Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-text-padding"}}},"content":{"width":{"value":"220px","type":"space","attributes":{"subtype":"space","description":"Controls how wide dropdown menu content appears (the container that holds the dropdown menu items). This determines the horizontal size of the dropdown menu container.<br>CSS variable: --wm-dropdown-menu-content-width"}},"border":{"radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of dropdown menu content. This makes the dropdown appear with slightly rounded corners for a softer appearance.<br>CSS variable: --wm-dropdown-menu-content-border-radius"}},"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the border width of dropdown menu content.<br>CSS variable: --wm-dropdown-menu-content-border-width"}},"style":{"value":"{border.style.solid.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of dropdown menu content.<br>CSS variable: --wm-dropdown-menu-content-border-style"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of dropdown menu content.<br>CSS variable: --wm-dropdown-menu-content-border-color"}}},"background":{"value":"#fff","type":"color","attributes":{"subtype":"color","description":"Sets the background color of dropdown menu content (the container that holds the dropdown menu items). This is the main background color that appears behind the menu items.<br>CSS variable: --wm-dropdown-menu-content-background"}}},"caret":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of dropdown menu caret icons (the small arrow symbols that indicate dropdown menus). This determines what color the arrow symbols appear in.<br>CSS variable: --wm-dropdown-menu-caret-color"}},"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large dropdown menu caret icons appear (the small arrow symbols that indicate dropdown menus). This affects the size of the arrow symbols that users see in dropdown buttons.<br>CSS variable: --wm-dropdown-menu-caret-size"}}},"item":{"font-family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for dropdown menu items (individual options in the dropdown list). This determines whether the menu item text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-dropdown-menu-item-font-family"}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the dropdown menu items appear (individual options in the dropdown list). This affects the size of the text that users see in each menu option.<br>CSS variable: --wm-dropdown-menu-item-font-size"}},"font-weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the dropdown menu items appear (individual options in the dropdown list). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-dropdown-menu-item-font-weight"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when dropdown menu item text wraps to multiple lines. This ensures proper spacing for the menu item text displayed in the dropdown.<br>CSS variable: --wm-dropdown-menu-item-line-height"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of dropdown menu items (individual options in the dropdown list). This determines what color the menu item text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-dropdown-menu-item-color"}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of dropdown menu item anchor text.<br>CSS variable: --wm-dropdown-menu-item-background-color"}},"border":{"style":{"type":"radius","value":"{border.style.solid.value}","attributes":{"subtype":"border-style","description":"Controls the style of the border around dropdown menu items. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-dropdown-menu-item-border-style"}}},"padding":{"value":"{space.3.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding inside dropdown menu items (top/bottom, left/right). Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-item-padding"}},"icon":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the dropdown menu item icon glyph (grey).<br>CSS variable: --wm-dropdown-menu-item-icon-color"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding of the dropdown menu item icon glyph.<br>CSS variable: --wm-dropdown-menu-item-icon-padding"}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the font size of the dropdown menu item icon glyph (16px).<br>CSS variable: --wm-dropdown-menu-item-icon-font-size"}}}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of dropdown menus (lists of options that appear when users click on a button or link). When set to \'none\', dropdowns have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-dropdown-menu-border-radius"}},"width":{"value":"0","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around dropdown menus. When set to 0, there\'s no visible border. Higher values create thicker borders around the dropdown.<br>CSS variable: --wm-dropdown-menu-border-width"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around dropdown menus. This determines the color of the outline that defines the dropdown menu shape.<br>CSS variable: --wm-dropdown-menu-border-color"}}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_form-controls_form-controls_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \***********************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"form-controls":{"meta":{"mapping":{"selector":{"mobile":".app-input"},"states":{"focused":{"selector":{"mobile":"-focused"}},"disabled":{"selector":{"mobile":"-disabled"}}},"appearances":{}}},"mapping":{"opacity":{"value":"{border.width.1.value}","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of form controls (input fields, text areas, select boxes, and other form elements where users enter data). A value of 1 means fully opaque (completely visible), while lower values make the form controls more transparent.<br>CSS variable: --wm-form-controls-opacity"}},"min-height":{"value":"48px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of form controls (input fields, text areas, select boxes, and other form elements). This ensures form fields are always tall enough to be easily clickable and readable. Acceptable units: px, em, rem.<br>CSS variable: --wm-form-controls-min-height"}},"min-width":{"value":"160px","type":"space","attributes":{"subtype":"space","description":"Note: The min-width property does not affect form controls when they are placed inside a <form>. Controls the minimum width of form controls (input fields, text areas, select boxes, and other form elements). This ensures form fields are always wide enough to be easily clickable and readable. Acceptable units: px, em, rem.<br>CSS variable: --wm-form-controls-min-width"}},"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form control text appear (the text that appear next to or above input fields). This affects the size of the text that users see.<br>CSS variable: --wm-form-controls-font-size"}},"weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form control text appear (the text that appear next to or above input fields). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-controls-font-weight"}},"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form control text (the text that appear next to or above input fields). This determines whether the text appears in Roboto, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-font-family"}}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside form controls (the space between the form field content and its borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding"}},"border":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form controls (input fields, text areas, select boxes, and other form elements). This determines what color the border lines appear in that outline the form fields.<br>CSS variable: --wm-form-controls-border-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form controls (input fields, text areas, select boxes, and other form elements). This makes the form field corners slightly rounded for a softer appearance.<br>CSS variable: --wm-form-controls-border-radius"}},"style":{"value":"{border.style.base.value}","type":"style","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around form controls (input fields, text areas, select boxes, and other form elements). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-form-controls-border-style"}},"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-width"}}},"placeholder":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of placeholder text in form controls (the gray text that appears in empty input fields to show users what to enter, like \'Enter your name\' or \'Select an option\'). This determines what color the hint text appears in.<br>CSS variable: --wm-form-controls-placeholder-color"}}},"background":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form controls (input fields, text areas, select boxes, and other form elements where users enter data). This is the main background color that appears behind the form field content.<br>CSS variable: --wm-form-controls-background"}},"color":{"value":"{color.black.@.value}","type":"color"},"label":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form control labels (the text labels that appear next to or above input fields to describe what information should be entered). This determines what color the label text appears in.<br>CSS variable: --wm-form-controls-label-color"}},"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form control labels (the text labels that appear next to or above input fields). When transparent, only the label text is visible. When filled with a color, the label appears with a colored background.<br>CSS variable: --wm-form-controls-label-background"}},"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form control labels appear (the text labels that appear next to or above input fields). This affects the size of the label text that users see.<br>CSS variable: --wm-form-controls-label-font-size"}},"weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form control labels appear (the text labels that appear next to or above input fields). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-controls-label-font-weight"}},"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form control labels (the text labels that appear next to or above input fields). This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-label-font-family"}}},"margin":{"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical spacing around form control labels (the space above and below the label text). This creates visual separation between labels and form fields.<br>CSS variable: --wm-form-controls-label-margin-vertical"}},"horizontal":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing around form control labels (the space to the left and right of the label text). This creates visual separation between labels and form fields.<br>CSS variable: --wm-form-controls-label-margin-horizontal"}}}},"floating":{"color":{"value":"{color.surface.dim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form control labels (the text labels that appear next to or above input fields to describe what information should be entered). This determines what color the label text appears in.<br>CSS variable: --wm-form-controls-label-color"}},"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form control labels appear (the text labels that appear next to or above input fields). This affects the size of the label text that users see.<br>CSS variable: --wm-form-controls-label-font-size"}},"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form control labels appear (the text labels that appear next to or above input fields). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-controls-label-font-weight"}},"family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form control labels (the text labels that appear next to or above input fields). This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-label-font-family"}}},"top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside label badges (colored label containers). This creates breathing room above the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-top"}},"left":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the left side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-left"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside form controls (the space between the form field content and its borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding"}}},"states":{"focused":{"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form controls when they are in the focused state (when the user clicks or tabs into the form field). This determines what color the border appears in when the field is active and ready for input.<br>CSS variable: --wm-form-controls-border-color (focused state)"}},"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form controls when they are in the focused state (input fields, text areas, select boxes, and other form elements). This determines how thick the border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-width (focused state)"}}},"background":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form controls when they are in the focused state (when the user clicks or tabs into the form field). This is the background color that appears when the field is active and ready for input.<br>CSS variable: --wm-form-controls-background (focused state)"}},"color":{"value":"{color.black.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form controls when they are in the focused state (when the user clicks or tabs into the form field). This determines what color the text that users type appears in when the field is active.<br>CSS variable: --wm-form-controls-color (focused state)"}},"floating":{"color":{"value":"{color.surface.dim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form control labels (the text labels that appear next to or above input fields to describe what information should be entered). This determines what color the label text appears in.<br>CSS variable: --wm-form-controls-label-color"}},"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form control labels appear (the text labels that appear next to or above input fields). This affects the size of the label text that users see.<br>CSS variable: --wm-form-controls-label-font-size"}},"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form control labels appear (the text labels that appear next to or above input fields). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-controls-label-font-weight"}},"family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form control labels (the text labels that appear next to or above input fields). This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-label-font-family"}}},"top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside label badges (colored label containers). This creates breathing room above the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-top"}},"left":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the left side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-left"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside form controls (the space between the form field content and its borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding"}}}},"disabled":{"border":{"color":{"value":"{color.shadow.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form controls when they are in the disabled state (when the form field is not interactive and users cannot enter data). This determines what color the border appears in when the field is disabled.<br>CSS variable: --wm-form-controls-border-color (disabled state)"}},"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form controls when they are in the disabled state (input fields, text areas, select boxes, and other form elements). This determines how thick the border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-width (disabled state)"}}},"background":{"value":"{color.surface.dim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form controls when they are in the disabled state (when the form field is not interactive and users cannot enter data). This is the background color that appears when the field is disabled.<br>CSS variable: --wm-form-controls-background (disabled state)"}},"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form controls when they are in the disabled state (when the form field is not interactive). This determines what color the text appears in when the field is disabled.<br>CSS variable: --wm-form-controls-color (disabled state)"}},"opacity":{"value":"0.67","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of form controls when they are in the disabled state (when the form field is not interactive). A value of 0.67 makes the form controls appear dimmed to indicate they are disabled. Lower values make them more transparent.<br>CSS variable: --wm-form-controls-opacity (disabled state)"}}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"form-controls":{"meta":{"mapping":{"selector":{"mobile":".app-input"},"states":{"focused":{"selector":{"mobile":"-focused"}},"disabled":{"selector":{"mobile":"-disabled"}}},"appearances":{}}},"mapping":{"opacity":{"value":"{border.width.1.value}","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of form controls (input fields, text areas, select boxes, and other form elements where users enter data). A value of 1 means fully opaque (completely visible), while lower values make the form controls more transparent.<br>CSS variable: --wm-form-controls-opacity"}},"min-height":{"value":"48px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of form controls (input fields, text areas, select boxes, and other form elements). This ensures form fields are always tall enough to be easily clickable and readable. Acceptable units: px, em, rem.<br>CSS variable: --wm-form-controls-min-height"}},"min-width":{"value":"160px","type":"space","attributes":{"subtype":"space","description":"Note: The min-width property does not affect form controls when they are placed inside a <form>. Controls the minimum width of form controls (input fields, text areas, select boxes, and other form elements). This ensures form fields are always wide enough to be easily clickable and readable. Acceptable units: px, em, rem.<br>CSS variable: --wm-form-controls-min-width"}},"field":{"box-shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow (elevation) of form fields (containers that wrap a label and input control). This determines the shadow depth around each form field.<br>CSS variable: --wm-form-controls-field-box-shadow"}},"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form fields (containers that wrap a label and input control). A value of 0 removes rounded corners.<br>CSS variable: --wm-form-controls-field-radius"}}},"font":{"size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form control text appear (the text that appear next to or above input fields). This affects the size of the text that users see.<br>CSS variable: --wm-form-controls-font-size"}},"weight":{"value":"{body.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form control text appear (the text that appear next to or above input fields). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-controls-font-weight"}},"family":{"value":"{body.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form control text (the text that appear next to or above input fields). This determines whether the text appears in Roboto, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-font-family"}}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside form controls (the space between the form field content and its borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding"}},"border":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form controls (input fields, text areas, select boxes, and other form elements). This determines what color the border lines appear in that outline the form fields.<br>CSS variable: --wm-form-controls-border-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form controls (input fields, text areas, select boxes, and other form elements). This makes the form field corners slightly rounded for a softer appearance.<br>CSS variable: --wm-form-controls-border-radius"}},"style":{"value":"{border.style.base.value}","type":"style","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around form controls (input fields, text areas, select boxes, and other form elements). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-form-controls-border-style"}},"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form controls (input fields, text areas, select boxes, and other form elements). This determines how thick the border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-width"}}},"placeholder":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of placeholder text in form controls (the gray text that appears in empty input fields to show users what to enter, like \'Enter your name\' or \'Select an option\'). This determines what color the hint text appears in.<br>CSS variable: --wm-form-controls-placeholder-color"}}},"background":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form controls (input fields, text areas, select boxes, and other form elements where users enter data). This is the main background color that appears behind the form field content.<br>CSS variable: --wm-form-controls-background"}},"color":{"value":"{color.black.@.value}","type":"color"},"label":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form control labels (the text labels that appear next to or above input fields to describe what information should be entered). This determines what color the label text appears in.<br>CSS variable: --wm-form-controls-label-color"}},"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form control labels (the text labels that appear next to or above input fields). When transparent, only the label text is visible. When filled with a color, the label appears with a colored background.<br>CSS variable: --wm-form-controls-label-background"}},"font":{"size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form control labels appear (the text labels that appear next to or above input fields). This affects the size of the label text that users see.<br>CSS variable: --wm-form-controls-label-font-size"}},"weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form control labels appear (the text labels that appear next to or above input fields). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-controls-label-font-weight"}},"family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form control labels (the text labels that appear next to or above input fields). This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-label-font-family"}}},"margin":{"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical spacing around form control labels (the space above and below the label text). This creates visual separation between labels and form fields.<br>CSS variable: --wm-form-controls-label-margin-vertical"}},"horizontal":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing around form control labels (the space to the left and right of the label text). This creates visual separation between labels and form fields.<br>CSS variable: --wm-form-controls-label-margin-horizontal"}}}},"floating":{"color":{"value":"{color.surface.dim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form control labels (the text labels that appear next to or above input fields to describe what information should be entered). This determines what color the label text appears in.<br>CSS variable: --wm-form-controls-label-color"}},"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form control labels appear (the text labels that appear next to or above input fields). This affects the size of the label text that users see.<br>CSS variable: --wm-form-controls-label-font-size"}},"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form control labels appear (the text labels that appear next to or above input fields). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-controls-label-font-weight"}},"family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form control labels (the text labels that appear next to or above input fields). This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-label-font-family"}}},"top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside label badges (colored label containers). This creates breathing room above the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-top"}},"left":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the left side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-left"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside form controls (the space between the form field content and its borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding"}}},"states":{"focused":{"border":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form controls when they are in the focused state (when the user clicks or tabs into the form field). This determines what color the border appears in when the field is active and ready for input.<br>CSS variable: --wm-form-controls-border-color (focused state)"}},"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form controls when they are in the focused state (input fields, text areas, select boxes, and other form elements). This determines how thick the border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-width (focused state)"}}},"background":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form controls when they are in the focused state (when the user clicks or tabs into the form field). This is the background color that appears when the field is active and ready for input.<br>CSS variable: --wm-form-controls-background (focused state)"}},"color":{"value":"{color.black.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form controls when they are in the focused state (when the user clicks or tabs into the form field). This determines what color the text that users type appears in when the field is active.<br>CSS variable: --wm-form-controls-color (focused state)"}},"floating":{"color":{"value":"{color.surface.dim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form control labels (the text labels that appear next to or above input fields to describe what information should be entered). This determines what color the label text appears in.<br>CSS variable: --wm-form-controls-label-color"}},"font":{"size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form control labels appear (the text labels that appear next to or above input fields). This affects the size of the label text that users see.<br>CSS variable: --wm-form-controls-label-font-size"}},"weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form control labels appear (the text labels that appear next to or above input fields). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-controls-label-font-weight"}},"family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form control labels (the text labels that appear next to or above input fields). This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-label-font-family"}}},"top":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top padding (vertical spacing) inside label badges (colored label containers). This creates breathing room above the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-top"}},"left":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the left padding (horizontal spacing) inside label badges (colored label containers). This creates breathing room on the left side of the label content. Acceptable units: px.<br>CSS variable: --wm-label-padding-left"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside form controls (the space between the form field content and its borders). This creates breathing room around the text that users type in the form fields.<br>CSS variable: --wm-form-controls-padding"}}}},"disabled":{"border":{"color":{"value":"{color.shadow.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form controls when they are in the disabled state (when the form field is not interactive and users cannot enter data). This determines what color the border appears in when the field is disabled.<br>CSS variable: --wm-form-controls-border-color (disabled state)"}},"width":{"value":"{border.width.1.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form controls when they are in the disabled state (input fields, text areas, select boxes, and other form elements). This determines how thick the border lines appear around the form fields.<br>CSS variable: --wm-form-controls-border-width (disabled state)"}}},"background":{"value":"{color.surface.dim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form controls when they are in the disabled state (when the form field is not interactive and users cannot enter data). This is the background color that appears when the field is disabled.<br>CSS variable: --wm-form-controls-background (disabled state)"}},"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form controls when they are in the disabled state (when the form field is not interactive). This determines what color the text appears in when the field is disabled.<br>CSS variable: --wm-form-controls-color (disabled state)"}},"opacity":{"value":"0.67","type":"radius","attributes":{"subtype":"opacity","description":"Controls the transparency of form controls when they are in the disabled state (when the form field is not interactive). A value of 0.67 makes the form controls appear dimmed to indicate they are disabled. Lower values make them more transparent.<br>CSS variable: --wm-form-controls-opacity (disabled state)"}}}}},"appearances":{"standard":{},"filled":{"mapping":{"opacity":{"value":"{border.width.1.value}","type":"radius"},"min-height":{"value":"56px","type":"space"},"min-width":{"value":"210px","type":"space"},"padding":{"value":"{space.4.value} {space.4.value} 0 {space.4.value}","type":"space"},"border":{"color":{"value":"{color.outline.@.value}","type":"color"},"radius":{"value":"{radius.sm.value} {radius.sm.value} 0 0","type":"space"},"style":{"value":"{border.style.base.value}","type":"style"},"width":{"value":"0 0 {border.width.1.value} 0","type":"space"}},"placeholder":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color"}},"background":{"value":"{color.surface.dim.@.value}","type":"color"},"color":{"value":"{color.black.@.value}","type":"color"},"floating":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color"},"top":{"value":"{space.5.value}","type":"space"},"left":{"value":"{space.3.value}","type":"space"}},"label":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color"},"background":{"value":"{color.transparent.@.value}","type":"color"},"font":{"size":{"value":"{label.large.font-size.value}","type":"font"},"weight":{"value":"{label.large.font-weight.value}","type":"font"},"family":{"value":"{label.large.font-family.value}","type":"font"}},"margin":{"vertical":{"value":"{space.0.value}","type":"space"},"horizontal":{"value":"{space.0.value}","type":"space"}}},"states":{"focused":{"min-height":{"value":"56px","type":"space"},"min-width":{"value":"210px","type":"space"},"border":{"width":{"value":"0 0 {border.width.2.value} 0","type":"space"},"style":{"value":"{border.style.base.value}","type":"style"},"radius":{"value":"{radius.sm.value} {radius.sm.value} 0 0","type":"space"}},"floating":{"color":{"value":"{color.outline.@.value}","type":"color"},"top":{"value":"{space.5.value}","type":"space"},"left":{"value":"{space.3.value}","type":"space"}},"label":{"color":{"value":"{color.outline.@.value}","type":"color"}},"padding":{"value":"{space.4.value} {space.4.value} 0 {space.4.value}","type":"space"}},"disabled":{"border":{"color":{"value":"{color.shadow.@.value}","type":"color"},"width":{"value":"0 0 {border.width.1.value} 0","type":"space"}},"background":{"value":"{color.surface.dim.@.value}","type":"color"},"color":{"value":"{color.scrim.@.value}","type":"color"},"opacity":{"value":"0.67","type":"radius"}}}}},"outlined":{"mapping":{"opacity":{"value":"1","type":"radius"},"min-height":{"value":"56px","type":"space"},"min-width":{"value":"210px","type":"space"},"font":{"size":{"value":"{body.large.font-size.value}","type":"font"},"weight":{"value":"{body.large.font-weight.value}","type":"font"},"family":{"value":"{body.large.font-family.value}","type":"font"}},"padding":{"value":"{space.4.value}","type":"space"},"border":{"value":"{border.width.1.value}","type":"border","radius":{"value":"{radius.md.value}","type":"radius"}},"placeholder":{"color":{"value":"{color.on-surface.@.value}","type":"color"}},"background":{"value":"{color.white.@.value}","type":"color"},"color":{"value":"{color.black.@.value}","type":"color"},"label":{"color":{"value":"{color.on-surface.@.value}","type":"color"},"background":{"value":"{color.transparent.@.value}","type":"color"}},"floating":{"color":{"value":"{color.surface.dim.@.value}","type":"color"},"top":{"value":"{space.5.value}","type":"space"},"left":{"value":"{space.4.value}","type":"space"}},"states":{"focused":{"min-height":{"value":"56px","type":"space"},"min-width":{"value":"210px","type":"space"},"border":{"color":{"value":"{color.secondary.@.value}","type":"color"},"width":{"value":"{border.width.1.value}","type":"space"}},"padding":{"value":"{space.4.value}","type":"space"},"background":{"value":"{color.white.@.value}","type":"color"},"color":{"value":"{color.black.@.value}","type":"color"},"floating":{"color":{"value":"{color.primary.@.value}","type":"color"},"top":{"value":"{space.5.value}","type":"space"},"left":{"value":"{space.4.value}","type":"space"}}},"disabled":{"border":{"value":"1px solid {color.shadow.@.value}","type":"border"},"background":{"value":"{color.white.@.value}","type":"color"},"color":{"value":"{color.scrim.@.value}","type":"color"},"opacity":{"value":"0.67","type":"radius"}}}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_form-wrapper_form-wrapper_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*********************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"form":{"meta":{"mapping":{"selector":{"mobile":".app-form"}},"appearances":{}},"mapping":{"background":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form wrapper components (containers that wrap form elements with header, body, and footer sections). This is the main background color that appears behind the entire form wrapper.<br>CSS variable: --wm-form-background"}},"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside form wrapper components (the space between the form wrapper content and its borders). This creates breathing room around the entire form wrapper container.<br>CSS variable: --wm-form-padding"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form wrapper components (containers that wrap form elements). This makes the form wrapper corners slightly rounded for a softer appearance.<br>CSS variable: --wm-form-border-radius"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form wrapper components (containers that wrap form elements). This determines how thick the border lines appear around the form wrapper.<br>CSS variable: --wm-form-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around form wrapper components (containers that wrap form elements). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line.<br>CSS variable: --wm-form-border-style"}},"color":{"@":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form wrapper components (containers that wrap form elements). When transparent, borders are not visible. When filled with a color, the border appears with the specified color.<br>CSS variable: --wm-form-border-color"}}}},"header":{"padding":{"vertical":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal vertical spacing inside form wrapper headers (the top section that contains the form title and subtitle). This creates breathing room around the header content.<br>CSS variable: --wm-form-header-padding-vertical"}},"horizontal":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal horizontal spacing inside form wrapper headers (the top section that contains the form title and subtitle). This creates breathing room around the header content.<br>CSS variable: --wm-form-header-padding-horizontal"}}},"border":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form wrapper headers (the top section that contains the form title and subtitle). When transparent, borders are not visible. When filled with a color, the border appears with the specified color.<br>CSS variable: --wm-form-header-border-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form wrapper headers (the top section that contains the form title and subtitle). This makes the header corners slightly rounded for a softer appearance.<br>CSS variable: --wm-form-header-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around form wrapper headers (the top section that contains the form title and subtitle). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-form-header-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form wrapper headers (the top section that contains the form title and subtitle). This determines how thick the border lines appear around the header.<br>CSS variable: --wm-form-header-border-width"}}},"title":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form wrapper header titles (the main heading text that appears at the top of the form). This determines what color the title text appears in.<br>CSS variable: --wm-form-header-title-color"}},"font":{"size":{"value":"{h4.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form wrapper header titles appear (the main heading text that appears at the top of the form). This affects the size of the title text that users see.<br>CSS variable: --wm-form-header-title-font-size"}},"weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form wrapper header titles appear (the main heading text that appears at the top of the form). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-header-title-font-weight"}},"family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form wrapper header titles (the main heading text that appears at the top of the form). This determines whether the title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-header-title-font-family"}}},"margin":{"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical spacing around form wrapper header titles (the space above and below the title text). This creates visual separation between the title and other header elements.<br>CSS variable: --wm-form-header-title-margin-vertical"}},"horizontal":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing around form wrapper header titles (the space to the left and right of the title text). This creates visual separation between the title and other header elements.<br>CSS variable: --wm-form-header-title-margin-horizontal"}}}},"sub-title":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form wrapper header subtitles (the secondary heading text that appears below the main title). This determines what color the subtitle text appears in.<br>CSS variable: --wm-form-header-sub-title-color"}},"font":{"size":{"value":"{h6.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form wrapper header subtitles appear (the secondary heading text that appears below the main title). This affects the size of the subtitle text that users see.<br>CSS variable: --wm-form-header-sub-title-font-size"}},"weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form wrapper header subtitles appear (the secondary heading text that appears below the main title). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-header-sub-title-font-weight"}},"family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form wrapper header subtitles (the secondary heading text that appears below the main title). This determines whether the subtitle text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-header-sub-title-font-family"}}},"margin":{"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical spacing around form wrapper header subtitles (the space above and below the subtitle text). This creates visual separation between the subtitle and other header elements.<br>CSS variable: --wm-form-header-sub-title-margin-vertical"}},"horizontal":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing around form wrapper header subtitles (the space to the left and right of the subtitle text). This creates visual separation between the subtitle and other header elements.<br>CSS variable: --wm-form-header-sub-title-margin-horizontal"}}}},"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form wrapper headers (the top section that contains the form title and subtitle). When transparent, only the header content is visible. When filled with a color, the header appears with a colored background.<br>CSS variable: --wm-form-header-background"}}},"body":{"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form wrapper body sections (the main content area where form fields are displayed). When transparent, only the body content is visible. When filled with a color, the body appears with a colored background.<br>CSS variable: --wm-form-body-background"}},"padding":{"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal vertical spacing inside form wrapper body sections (the main content area where form fields are displayed). This creates breathing room around the body content.<br>CSS variable: --wm-form-body-padding-vertical"}},"horizontal":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal horizontal spacing inside form wrapper body sections (the main content area where form fields are displayed). This creates breathing room around the body content.<br>CSS variable: --wm-form-body-padding-horizontal"}}},"border":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form wrapper body sections (the main content area where form fields are displayed). When transparent, borders are not visible. When filled with a color, the border appears with the specified color.<br>CSS variable: --wm-form-body-border-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form wrapper body sections (the main content area where form fields are displayed). This makes the body corners slightly rounded for a softer appearance.<br>CSS variable: --wm-form-body-border-radius"}},"style":{"value":"{border.style.base.value}","type":"style","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around form wrapper body sections (the main content area where form fields are displayed). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-form-body-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form wrapper body sections (the main content area where form fields are displayed). This determines how thick the border lines appear around the body.<br>CSS variable: --wm-form-body-border-width"}}}},"footer":{"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form wrapper footer sections (the bottom section that typically contains action buttons like Submit or Cancel). When transparent, only the footer content is visible. When filled with a color, the footer appears with a colored background.<br>CSS variable: --wm-form-footer-background"}},"border":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form wrapper footer sections (the bottom section that typically contains action buttons). When transparent, borders are not visible. When filled with a color, the border appears with the specified color.<br>CSS variable: --wm-form-footer-border-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form wrapper footer sections (the bottom section that typically contains action buttons). This makes the footer corners slightly rounded for a softer appearance.<br>CSS variable: --wm-form-footer-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around form wrapper footer sections (the bottom section that typically contains action buttons). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-form-footer-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form wrapper footer sections (the bottom section that typically contains action buttons). This determines how thick the border lines appear around the footer.<br>CSS variable: --wm-form-footer-border-width"}}},"padding":{"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal vertical spacing inside form wrapper footer sections (the bottom section that typically contains action buttons). This creates breathing room around the footer content.<br>CSS variable: --wm-form-footer-padding-vertical"}},"horizontal":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal horizontal spacing inside form wrapper footer sections (the bottom section that typically contains action buttons). This creates breathing room around the footer content.<br>CSS variable: --wm-form-footer-padding-horizontal"}}}}},"appearances":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"form":{"meta":{"mapping":{"selector":{"mobile":".app-form"}},"appearances":{}},"mapping":{"background":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form wrapper components (containers that wrap form elements with header, body, and footer sections). This is the main background color that appears behind the entire form wrapper.<br>CSS variable: --wm-form-background"}},"padding":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal spacing inside form wrapper components (the space between the form wrapper content and its borders). This creates breathing room around the entire form wrapper container.<br>CSS variable: --wm-form-padding"}},"border":{"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form wrapper components (containers that wrap form elements). This makes the form wrapper corners slightly rounded for a softer appearance.<br>CSS variable: --wm-form-border-radius"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form wrapper components (containers that wrap form elements). This determines how thick the border lines appear around the form wrapper.<br>CSS variable: --wm-form-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around form wrapper components (containers that wrap form elements). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line.<br>CSS variable: --wm-form-border-style"}},"color":{"@":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form wrapper components (containers that wrap form elements). When transparent, borders are not visible. When filled with a color, the border appears with the specified color.<br>CSS variable: --wm-form-border-color"}}}},"box-shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow (elevation) of form wrapper components (containers that wrap form elements with header, body, and footer sections). This determines the shadow depth around the form container.<br>CSS variable: --wm-form-box-shadow"}},"header":{"padding":{"vertical":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal vertical spacing inside form wrapper headers (the top section that contains the form title and subtitle). This creates breathing room around the header content.<br>CSS variable: --wm-form-header-padding-vertical"}},"horizontal":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal horizontal spacing inside form wrapper headers (the top section that contains the form title and subtitle). This creates breathing room around the header content.<br>CSS variable: --wm-form-header-padding-horizontal"}}},"border":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form wrapper headers (the top section that contains the form title and subtitle). When transparent, borders are not visible. When filled with a color, the border appears with the specified color.<br>CSS variable: --wm-form-header-border-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form wrapper headers (the top section that contains the form title and subtitle). This makes the header corners slightly rounded for a softer appearance.<br>CSS variable: --wm-form-header-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around form wrapper headers (the top section that contains the form title and subtitle). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-form-header-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form wrapper headers (the top section that contains the form title and subtitle). This determines how thick the border lines appear around the header.<br>CSS variable: --wm-form-header-border-width"}}},"title":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form wrapper header titles (the main heading text that appears at the top of the form). This determines what color the title text appears in.<br>CSS variable: --wm-form-header-title-color"}},"font":{"size":{"value":"{h4.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form wrapper header titles appear (the main heading text that appears at the top of the form). This affects the size of the title text that users see.<br>CSS variable: --wm-form-header-title-font-size"}},"weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form wrapper header titles appear (the main heading text that appears at the top of the form). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-header-title-font-weight"}},"family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form wrapper header titles (the main heading text that appears at the top of the form). This determines whether the title text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-header-title-font-family"}}},"margin":{"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical spacing around form wrapper header titles (the space above and below the title text). This creates visual separation between the title and other header elements.<br>CSS variable: --wm-form-header-title-margin-vertical"}},"horizontal":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing around form wrapper header titles (the space to the left and right of the title text). This creates visual separation between the title and other header elements.<br>CSS variable: --wm-form-header-title-margin-horizontal"}}}},"sub-title":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of form wrapper header subtitles (the secondary heading text that appears below the main title). This determines what color the subtitle text appears in.<br>CSS variable: --wm-form-header-sub-title-color"}},"font":{"size":{"value":"{h6.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large form wrapper header subtitles appear (the secondary heading text that appears below the main title). This affects the size of the subtitle text that users see.<br>CSS variable: --wm-form-header-sub-title-font-size"}},"weight":{"value":"{font.weight.500.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold form wrapper header subtitles appear (the secondary heading text that appears below the main title). \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-form-header-sub-title-font-weight"}},"family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for form wrapper header subtitles (the secondary heading text that appears below the main title). This determines whether the subtitle text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-form-header-sub-title-font-family"}}},"margin":{"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical spacing around form wrapper header subtitles (the space above and below the subtitle text). This creates visual separation between the subtitle and other header elements.<br>CSS variable: --wm-form-header-sub-title-margin-vertical"}},"horizontal":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing around form wrapper header subtitles (the space to the left and right of the subtitle text). This creates visual separation between the subtitle and other header elements.<br>CSS variable: --wm-form-header-sub-title-margin-horizontal"}}}},"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form wrapper headers (the top section that contains the form title and subtitle). When transparent, only the header content is visible. When filled with a color, the header appears with a colored background.<br>CSS variable: --wm-form-header-background"}}},"body":{"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form wrapper body sections (the main content area where form fields are displayed). When transparent, only the body content is visible. When filled with a color, the body appears with a colored background.<br>CSS variable: --wm-form-body-background"}},"padding":{"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal vertical spacing inside form wrapper body sections (the main content area where form fields are displayed). This creates breathing room around the body content.<br>CSS variable: --wm-form-body-padding-vertical"}},"horizontal":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal horizontal spacing inside form wrapper body sections (the main content area where form fields are displayed). This creates breathing room around the body content.<br>CSS variable: --wm-form-body-padding-horizontal"}}},"border":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form wrapper body sections (the main content area where form fields are displayed). When transparent, borders are not visible. When filled with a color, the border appears with the specified color.<br>CSS variable: --wm-form-body-border-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form wrapper body sections (the main content area where form fields are displayed). This makes the body corners slightly rounded for a softer appearance.<br>CSS variable: --wm-form-body-border-radius"}},"style":{"value":"{border.style.base.value}","type":"style","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around form wrapper body sections (the main content area where form fields are displayed). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-form-body-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form wrapper body sections (the main content area where form fields are displayed). This determines how thick the border lines appear around the body.<br>CSS variable: --wm-form-body-border-width"}}}},"footer":{"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of form wrapper footer sections (the bottom section that typically contains action buttons like Submit or Cancel). When transparent, only the footer content is visible. When filled with a color, the footer appears with a colored background.<br>CSS variable: --wm-form-footer-background"}},"border":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of borders around form wrapper footer sections (the bottom section that typically contains action buttons). When transparent, borders are not visible. When filled with a color, the border appears with the specified color.<br>CSS variable: --wm-form-footer-border-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of form wrapper footer sections (the bottom section that typically contains action buttons). This makes the footer corners slightly rounded for a softer appearance.<br>CSS variable: --wm-form-footer-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Sets the visual style of borders around form wrapper footer sections (the bottom section that typically contains action buttons). \'solid\' creates a continuous line, \'dashed\' creates a broken line, \'dotted\' creates a dotted line, \'none\' removes borders completely.<br>CSS variable: --wm-form-footer-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of borders around form wrapper footer sections (the bottom section that typically contains action buttons). This determines how thick the border lines appear around the footer.<br>CSS variable: --wm-form-footer-border-width"}}},"padding":{"vertical":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal vertical spacing inside form wrapper footer sections (the bottom section that typically contains action buttons). This creates breathing room around the footer content.<br>CSS variable: --wm-form-footer-padding-vertical"}},"horizontal":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the internal horizontal spacing inside form wrapper footer sections (the bottom section that typically contains action buttons). This creates breathing room around the footer content.<br>CSS variable: --wm-form-footer-padding-horizontal"}}}}},"appearances":{}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_progress-circle_progress-circle_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \***************************************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"progress-circle":{"meta":{"appearances":{"filled":{"mapping":{"selector":{"mobile":".app-progress-circle"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".progress-circle-default"}},"success":{"selector":{"mobile":".progress-circle-success"}},"info":{"selector":{"mobile":".progress-circle-info"}},"warning":{"selector":{"mobile":".progress-circle-warning"}},"danger":{"selector":{"mobile":".progress-circle-danger"}}}}}}},"mapping":{"sub-title":{"font":{"family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for progress circle subtitle text (secondary text that appears below the progress indicator). This determines whether the subtitle text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-progress-circle-sub-title-font-family"}},"size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of progress circle subtitle text (secondary text that appears below the progress indicator). This affects how large the subtitle text appears.<br>CSS variable: --wm-progress-circle-sub-title-font-size"}}},"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of progress circle subtitles (secondary text that appears below the progress indicator). This determines what color the subtitle text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-progress-circle-sub-title-color"}}},"stroke":{"inactive":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of circular progress indicators (the unfilled portion of the circle that shows remaining progress). This is the color of the circle track that shows how much progress is left.<br>CSS variable: --wm-progress-circle-stroke-inactive"}},"active":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the fill color of circular progress indicators (the filled portion of the circle that shows completed progress). This is the color that shows how much progress has been made.<br>CSS variable: --wm-progress-circle-stroke-active"}}},"width":{"value":"150px","type":"space","attributes":{"subtype":"space","description":"Controls the width of progress circles (circular visual indicators that show the completion status of a task or process). This determines how wide the progress circle appears. Acceptable units: px.<br>CSS variable: --wm-progress-circle-width"}},"height":{"value":"150px","type":"space","attributes":{"subtype":"space","description":"Controls the height of progress circles (circular visual indicators that show the completion status of a task or process). This determines how tall the progress circle appears. Acceptable units: px.<br>CSS variable: --wm-progress-circle-height"}}},"appearances":{"filled":{"variantGroups":{"status":{"default":{"stroke":{"inactive":{"value":"{color.primary.container.@.value}","type":"color"},"active":{"value":"{color.primary.@.value}","type":"color"}}},"success":{"stroke":{"inactive":{"value":"{color.success.container.@.value}","type":"color"},"active":{"value":"{color.success.@.value}","type":"color"}}},"info":{"stroke":{"inactive":{"value":"{color.info.container.@.value}","type":"color"},"active":{"value":"{color.info.@.value}","type":"color"}}},"warning":{"stroke":{"inactive":{"value":"{color.warning.container.@.value}","type":"color"},"active":{"value":"{color.warning.@.value}","type":"color"}}},"danger":{"stroke":{"inactive":{"value":"{color.error.container.@.value}","type":"color"},"active":{"value":"{color.error.@.value}","type":"color"}}}}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"progress-circle":{"meta":{"appearances":{"filled":{"mapping":{"selector":{"mobile":".app-progress-circle"}},"variantGroups":{"status":{"default":{"selector":{"mobile":".progress-circle-default"}},"success":{"selector":{"mobile":".progress-circle-success"}},"info":{"selector":{"mobile":".progress-circle-info"}},"warning":{"selector":{"mobile":".progress-circle-warning"}},"danger":{"selector":{"mobile":".progress-circle-danger"}}}}}}},"mapping":{"sub-title":{"font":{"family":{"value":"{font.family.brand.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for progress circle subtitle text (secondary text that appears below the progress indicator). This determines whether the subtitle text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-progress-circle-sub-title-font-family"}},"size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of progress circle subtitle text (secondary text that appears below the progress indicator). This affects how large the subtitle text appears.<br>CSS variable: --wm-progress-circle-sub-title-font-size"}}},"color":{"value":"{color.scrim.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of progress circle subtitles (secondary text that appears below the progress indicator). This determines what color the subtitle text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-progress-circle-sub-title-color"}}},"stroke":{"inactive":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of circular progress indicators (the unfilled portion of the circle that shows remaining progress). This is the color of the circle track that shows how much progress is left.<br>CSS variable: --wm-progress-circle-stroke-inactive"}},"active":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the fill color of circular progress indicators (the filled portion of the circle that shows completed progress). This is the color that shows how much progress has been made.<br>CSS variable: --wm-progress-circle-stroke-active"}}},"progress-value":{"width":{"value":"16px","type":"space","attributes":{"subtype":"space","description":"Controls the width of the progress circle value stroke (the active arc that shows completed progress). Matches studio stroke thickness. Acceptable units: px.<br>CSS variable: --wm-progress-circle-progress-value-width"}},"height":{"value":"16px","type":"space","attributes":{"subtype":"space","description":"Controls the height of the progress circle value stroke (the active arc that shows completed progress). Default from runtime progressValue.height (16). Acceptable units: px.<br>CSS variable: --wm-progress-circle-progress-value-height"}}}},"appearances":{"filled":{"variantGroups":{"status":{"default":{"stroke":{"inactive":{"value":"{color.primary.container.@.value}","type":"color"},"active":{"value":"{color.primary.@.value}","type":"color"}}},"success":{"stroke":{"inactive":{"value":"{color.success.container.@.value}","type":"color"},"active":{"value":"{color.success.@.value}","type":"color"}}},"info":{"stroke":{"inactive":{"value":"{color.info.container.@.value}","type":"color"},"active":{"value":"{color.info.@.value}","type":"color"}}},"warning":{"stroke":{"inactive":{"value":"{color.warning.container.@.value}","type":"color"},"active":{"value":"{color.warning.@.value}","type":"color"}}},"danger":{"stroke":{"inactive":{"value":"{color.error.container.@.value}","type":"color"},"active":{"value":"{color.error.@.value}","type":"color"}}}}}}}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_select_select_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*********************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"select":{"meta":{"selector":{"mobile":".app-select"},"states":{"active":{"selector":{"mobile":"-active-item"}}}},"mapping":{"arrow-button":{"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding of arrow button This creates breathing room on the arrow button. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-padding"}},"background-color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of select arrow button This determines what background color the select arrow button appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-select-arrow-button--background-color"}},"icon":{"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-icon-color"}},"height":{"value":"24px","type":"space","attributes":{"subtype":"space","description":"Controls the height.<br>CSS variable: --wm-selec-icon-height"}},"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding of arrow button icon This creates breathing room on the arrow button. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-icon-padding"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of select modal content. This makes the select modal content appear with rounded corners for a softer appearance.<br>CSS variable: --wm-select-arrow-button-icon-border-radius"}},"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around select modal content. This determines how thick the outline appears around the select modal content. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-icon-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around select modal content. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-select-arrow-button-icon-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around select modal content. This determines the color of the outline that defines the select modal content.<br>CSS variable: --wm-select-arrow-button-icon-border-color"}}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-icon-font-size"}}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of select modal content. This makes the select modal content appear with rounded corners for a softer appearance.<br>CSS variable: --wm-select-modal-content-border-radius"}},"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around select modal content. This determines how thick the outline appears around the select modal content. Acceptable units: px.<br>CSS variable: --wm-select-modal-content-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around select modal content. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-select-modal-content-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around select modal content. This determines the color of the outline that defines the select modal content.<br>CSS variable: --wm-select-modal-content-border-color"}}}},"modal-content":{"background-color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of select modal content.This determines what background color the select modal content appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-select-modal-content-background-color"}},"border":{"radius":{"value":"{radius.base.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of select modal content. This makes the select modal content appear with rounded corners for a softer appearance.<br>CSS variable: --wm-select-modal-content-border-radius"}},"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around select modal content. This determines how thick the outline appears around the select modal content. Acceptable units: px.<br>CSS variable: --wm-select-modal-content-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around select modal content. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-select-modal-content-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around select modal content. This determines the color of the outline that defines the select modal content.<br>CSS variable: --wm-select-modal-content-border-color"}}}},"modal-text":{"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large label text appears (text that describes or identifies other content). Larger values make labels more prominent, smaller values make them more subtle.<br>CSS variable: --wm-label-font-size"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-label-font-family"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of labels (text elements that describe or identify other content). This determines what color the label text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-label-color"}}},"check":{"icon":{"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-icon-color"}},"font-size":{"value":"{icon.size.md.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-icon-font-size"}}}}},"appearance":{}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"select":{"meta":{"mapping":{"selector":{"mobile":".app-select"},"states":{"active":{"selector":{"mobile":"-active-item, .app-select-active-item-text"}}}}},"mapping":{"arrow-button":{"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding of arrow button This creates breathing room on the arrow button. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-padding"}},"background-color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of select arrow button This determines what background color the select arrow button appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-select-arrow-button--background-color"}},"icon":{"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-icon-color"}},"height":{"value":"24px","type":"space","attributes":{"subtype":"space","description":"Controls the height.<br>CSS variable: --wm-selec-icon-height"}},"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding of arrow button icon This creates breathing room on the arrow button. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-icon-padding"}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of select modal content. This makes the select modal content appear with rounded corners for a softer appearance.<br>CSS variable: --wm-select-arrow-button-icon-border-radius"}},"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around select modal content. This determines how thick the outline appears around the select modal content. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-icon-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around select modal content. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-select-arrow-button-icon-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around select modal content. This determines the color of the outline that defines the select modal content.<br>CSS variable: --wm-select-arrow-button-icon-border-color"}}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-icon-font-size"}}},"border":{"radius":{"value":"{radius.none.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of select modal content. This makes the select modal content appear with rounded corners for a softer appearance.<br>CSS variable: --wm-select-modal-content-border-radius"}},"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around select modal content. This determines how thick the outline appears around the select modal content. Acceptable units: px.<br>CSS variable: --wm-select-modal-content-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around select modal content. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-select-modal-content-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around select modal content. This determines the color of the outline that defines the select modal content.<br>CSS variable: --wm-select-modal-content-border-color"}}}},"modal-content":{"background-color":{"value":"{color.outline.variant.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of select modal content.This determines what background color the select modal content appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-select-modal-content-background-color"}},"border":{"radius":{"value":"{radius.base.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of select modal content. This makes the select modal content appear with rounded corners for a softer appearance.<br>CSS variable: --wm-select-modal-content-border-radius"}},"width":{"value":"{border.width.0.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around select modal content. This determines how thick the outline appears around the select modal content. Acceptable units: px.<br>CSS variable: --wm-select-modal-content-border-width"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the style of the border around select modal content. \'solid\' creates a continuous line, \'dashed\' creates a dotted line, \'dotted\' creates small dots.<br>CSS variable: --wm-select-modal-content-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around select modal content. This determines the color of the outline that defines the select modal content.<br>CSS variable: --wm-select-modal-content-border-color"}}},"box-shadow":{"value":"{elevation.shadow.none.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the box shadow of select modal content (floating option list panel).<br>CSS variable: --wm-select-modal-content-box-shadow"}}},"modal-text":{"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large label text appears (text that describes or identifies other content). Larger values make labels more prominent, smaller values make them more subtle.<br>CSS variable: --wm-label-font-size"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-label-font-family"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of labels (text elements that describe or identify other content). This determines what color the label text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-label-color"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of the selected select option item text.<br>CSS variable: --wm-select-item-text-line-height"}},"letter-spacing":{"value":"{body.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the letter spacing of the selected select option item text.<br>CSS variable: --wm-select-item-text-letter-spacing"}}},"item":{"border":{"width":{"value":"{border.width.1.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the border width of each select option item.<br>CSS variable: --wm-select-item-border-width"}},"color":{"value":"{color.shadow.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the border color of each select option item (light gray, similar to #dddddd).<br>CSS variable: --wm-select-item-border-color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of each select option item.<br>CSS variable: --wm-select-item-border-style"}}},"padding":{"value":"{space.2.value} {space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding inside each select option item (top/bottom, left/right). Acceptable units: px.<br>CSS variable: --wm-select-item-padding"}}},"check":{"icon":{"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the select check icon container.<br>CSS variable: --wm-select-check-icon-background-color"}},"height":{"value":"24px","type":"space","attributes":{"subtype":"space","description":"Controls the height of the select check icon container.<br>CSS variable: --wm-select-check-icon-height"}},"width":{"value":"24px","type":"space","attributes":{"subtype":"space","description":"Controls the width of the select check icon container.<br>CSS variable: --wm-select-check-icon-width"}},"border":{"radius":{"value":"1px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of the select check icon container.<br>CSS variable: --wm-select-check-icon-border-radius"}},"width":{"value":"{border.width.1.value}","type":"border","attributes":{"subtype":"border-width","description":"Controls the border width of the select check icon container.<br>CSS variable: --wm-select-check-icon-border-width"}},"color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the border color of the select check icon container.<br>CSS variable: --wm-select-check-icon-border-color"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of the select check icon container.<br>CSS variable: --wm-select-check-icon-border-style"}}},"color":{"value":"{color.on-background.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the select check icon glyph.<br>CSS variable: --wm-select-check-icon-color"}},"font-size":{"value":"{icon.size.md.value}","type":"font","attributes":{"subtype":"icon-size","description":"Controls the font size of the select check icon glyph.<br>CSS variable: --wm-select-check-icon-font-size"}},"padding":{"value":"{space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding of the select check icon glyph.<br>CSS variable: --wm-select-check-icon-padding"}}}},"states":{"active":{"modal-text":{"color":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the selected select option item.<br>CSS variable: --wm-select-item-text-color"}},"font-size":{"value":"{body.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the font size of the selected select option item text.<br>CSS variable: --wm-select-item-text-font-size"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-label-font-family"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the line height of the selected select option item text.<br>CSS variable: --wm-select-item-text-line-height"}},"letter-spacing":{"value":"{body.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the letter spacing of the selected select option item text.<br>CSS variable: --wm-select-item-text-letter-spacing"}}}}}},"appearance":{}}}');
 
 /***/ }
 

package/cjs/src_tokens_mobile_components_slider_slider_json.foundation-css.cjs

@@ -7,7 +7,7 @@
   \*********************************************************/
 (module) {
 
-module.exports = /*#__PURE__*/JSON.parse('{"slider":{"meta":{"mapping":{"selector":{"mobile":".app-slider"}}},"mapping":{"track":{"height":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of slider tracks (the horizontal bar that represents the slider range). This determines the vertical size of the track. Acceptable units: px.<br>CSS variable: --wm-slider-track-height"}},"margin-vertical":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical margin (top and bottom spacing) of slider tracks. This creates spacing above and below the track. Acceptable units: px.<br>CSS variable: --wm-slider-track-margin-vertical"}},"border-radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of slider tracks. This determines how rounded the corners of the track appear. Acceptable units: px.<br>CSS variable: --wm-slider-track-border-radius"}}},"min-track":{"background":{"value":"{color.surface.tint.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of slider minimum tracks (the portion of the track from the start to the current value). This determines what color the minimum track appears in.<br>CSS variable: --wm-slider-min-track-background"}}},"max-track":{"background":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of slider maximum tracks (the portion of the track from the current value to the end). This determines what color the maximum track appears in, typically matching the primary container theme color.<br>CSS variable: --wm-slider-max-track-background"}}},"thumb":{"background":{"value":"{color.surface.tint.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of slider thumbs (the draggable handle that users interact with to set values). This determines what color the thumb appears in.<br>CSS variable: --wm-slider-thumb-background"}},"height":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of slider thumbs. This determines the vertical size of the thumb. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-height"}},"width":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of slider thumbs. This determines the horizontal size of the thumb. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-width"}},"border-radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of slider thumbs. This determines how rounded the corners of the thumb appear. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-border-radius"}}},"tooltip":{"background":{"value":"#000","type":"color","attributes":{"subtype":"color","description":"Sets the background color of slider tooltips (popup labels that show the current value when hovering or dragging). This determines what color the background of the tooltip appears in.<br>CSS variable: --wm-slider-tooltip-background"}},"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of slider tooltips. This determines what color the text in the tooltip appears in, typically white for contrast against dark backgrounds.<br>CSS variable: --wm-slider-tooltip-color"}}}}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"slider":{"meta":{"mapping":{"selector":{"mobile":".app-slider"}},"appearances":{"default":{"mapping":{"selector":{"mobile":".app-slider"}}},"circle-thumb":{"mapping":{"selector":{"mobile":".slider-circle-thumb"}}}}},"mapping":{"track":{"height":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of slider tracks (the horizontal bar that represents the slider range). This determines the vertical size of the track. Acceptable units: px.<br>CSS variable: --wm-slider-track-height"}},"margin-vertical":{"value":"{space.4.value}","type":"space","attributes":{"subtype":"space","description":"Controls the vertical margin (top and bottom spacing) of slider tracks. This creates spacing above and below the track. Acceptable units: px.<br>CSS variable: --wm-slider-track-margin-vertical"}},"border-radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of slider tracks. This determines how rounded the corners of the track appear. Acceptable units: px.<br>CSS variable: --wm-slider-track-border-radius"}}},"min-track":{"background":{"value":"{color.surface.tint.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of slider minimum tracks (the portion of the track from the start to the current value). This determines what color the minimum track appears in.<br>CSS variable: --wm-slider-min-track-background"}}},"max-track":{"background":{"value":"{color.primary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of slider maximum tracks (the portion of the track from the current value to the end). This determines what color the maximum track appears in, typically matching the primary container theme color.<br>CSS variable: --wm-slider-max-track-background"}}},"thumb":{"background":{"value":"{color.surface.tint.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of slider thumbs (the draggable handle that users interact with to set values). This determines what color the thumb appears in.<br>CSS variable: --wm-slider-thumb-background"}},"height":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of slider thumbs. This determines the vertical size of the thumb. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-height"}},"width":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of slider thumbs. This determines the horizontal size of the thumb. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-width"}},"border-radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of slider thumbs. This determines how rounded the corners of the thumb appear. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-border-radius"}},"wrapper":{"width":{"value":"14px","type":"space","attributes":{"subtype":"space","description":"Controls the width of the slider thumb wrapper.<br>CSS variable: --wm-slider-thumb-wrapper-width"}},"height":{"value":"54px","type":"space","attributes":{"subtype":"space","description":"Controls the height of the slider thumb wrapper.<br>CSS variable: --wm-slider-thumb-wrapper-height"}},"border-radius":{"value":"2px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of the slider thumb wrapper.<br>CSS variable: --wm-slider-thumb-wrapper-border-radius"}},"background":{"value":"#fff","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the slider thumb wrapper.<br>CSS variable: --wm-slider-thumb-wrapper-background"}}}},"tooltip":{"background":{"value":"#000","type":"color","attributes":{"subtype":"color","description":"Sets the background color of slider tooltips (popup labels that show the current value when hovering or dragging). This determines what color the background of the tooltip appears in.<br>CSS variable: --wm-slider-tooltip-background"}},"color":{"value":"{color.white.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of slider tooltips. This determines what color the text in the tooltip appears in, typically white for contrast against dark backgrounds.<br>CSS variable: --wm-slider-tooltip-color"}}}},"appearances":{"default":{"mapping":{"thumb":{"background":{"value":"{color.surface.tint.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of slider thumbs (the draggable handle that users interact with to set values). This determines what color the thumb appears in.<br>CSS variable: --wm-slider-thumb-background"}},"height":{"value":"{space.8.value}","type":"space","attributes":{"subtype":"space","description":"Controls the height of slider thumbs. This determines the vertical size of the thumb. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-height"}},"width":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the width of slider thumbs. This determines the horizontal size of the thumb. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-width"}},"border-radius":{"value":"{radius.xs.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius (rounded corners) of slider thumbs. This determines how rounded the corners of the thumb appear. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-border-radius"}},"wrapper":{"width":{"value":"14px","type":"space","attributes":{"subtype":"space","description":"Controls the width of the slider thumb wrapper.<br>CSS variable: --wm-slider-thumb-wrapper-width"}},"height":{"value":"54px","type":"space","attributes":{"subtype":"space","description":"Controls the height of the slider thumb wrapper.<br>CSS variable: --wm-slider-thumb-wrapper-height"}},"border-radius":{"value":"2px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of the slider thumb wrapper.<br>CSS variable: --wm-slider-thumb-wrapper-border-radius"}},"background":{"value":"#fff","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the slider thumb wrapper.<br>CSS variable: --wm-slider-thumb-wrapper-background"}}}}}},"circle-thumb":{"mapping":{"thumb":{"background":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of slider thumbs for the circle-thumb variant. The visible thumb is provided by the wrapper.<br>CSS variable: --wm-slider-thumb-background"}},"wrapper":{"background":{"value":"{color.surface.tint.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the slider thumb wrapper for the circle-thumb variant.<br>CSS variable: --wm-slider-thumb-wrapper-background"}},"height":{"value":"20px","type":"space","attributes":{"subtype":"space","description":"Controls the height of the slider thumb wrapper for the circle-thumb variant.<br>CSS variable: --wm-slider-thumb-wrapper-height"}},"width":{"value":"20px","type":"space","attributes":{"subtype":"space","description":"Controls the width of the slider thumb wrapper for the circle-thumb variant.<br>CSS variable: --wm-slider-thumb-wrapper-width"}},"border-radius":{"value":"100px","type":"radius","attributes":{"subtype":"radius","description":"Controls the border radius of the slider thumb wrapper for the circle-thumb variant.<br>CSS variable: --wm-slider-thumb-wrapper-border-radius"}}}}}}}}}');
 
 /***/ }