@wavemaker/foundation-css 11.15.5-rc.253 → 11.15.5-rc.261

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/cjs/foundation-css.cjs +58 -42
  2. package/cjs/src_tokens_mobile_components_chips_chips_json.foundation-css.cjs +1 -1
  3. package/cjs/src_tokens_mobile_components_dropdown-menu_dropdown-menu_json.foundation-css.cjs +1 -1
  4. package/cjs/src_tokens_mobile_components_form-controls_form-controls_json.foundation-css.cjs +1 -1
  5. package/cjs/src_tokens_mobile_components_icon_icon_json.foundation-css.cjs +1 -1
  6. package/cjs/src_tokens_mobile_components_label_label_json.foundation-css.cjs +1 -1
  7. package/cjs/src_tokens_mobile_components_switch_switch_json.foundation-css.cjs +1 -1
  8. package/cjs/src_tokens_mobile_components_tabs_tabs_json.foundation-css.cjs +1 -1
  9. package/npm-shrinkwrap.json +298 -232
  10. package/package-lock.json +298 -232
  11. package/package.json +1 -1
  12. package/src/styles/mobile/components/basic/icon.less +6 -4
  13. package/src/styles/mobile/components/basic/label.less +46 -4
  14. package/src/styles/mobile/components/container/tabs/tab-header.less +15 -3
  15. package/src/styles/mobile/components/data/form.less +14 -0
  16. package/src/styles/mobile/components/input/chips.less +37 -0
  17. package/src/styles/mobile/components/input/select.less +29 -1
  18. package/src/styles/mobile/components/input/switch.less +4 -4
  19. package/src/styles/mobile/components/navigation/menu.less +1 -0
  20. package/src/styles/mobile/components/tokens.light.css +18 -1
  21. package/src/styles/mobile/components/variables/chips.variant.less +5 -1
  22. package/src/styles/mobile/studio/basic/icon.less +0 -3
  23. package/src/styles/mobile/studio/container/tabs.less +5 -1
  24. package/src/styles/mobile/studio/input/form.less +20 -5
  25. package/src/tokens/mobile/components/chips/chips.json +72 -2
  26. package/src/tokens/mobile/components/dropdown-menu/dropdown-menu.json +8 -0
  27. package/src/tokens/mobile/components/form-controls/form-controls.json +28 -4
  28. package/src/tokens/mobile/components/icon/icon.json +3 -3
  29. package/src/tokens/mobile/components/label/label.json +8 -0
  30. package/src/tokens/mobile/components/switch/switch.json +24 -0
  31. package/src/tokens/mobile/components/tabs/tabs.json +27 -3
package/cjs/foundation-css.cjs CHANGED
@@ -670,7 +670,7 @@ const componentsList = {
670
670
  \********************************************************************************/
671
671
  (module, __unused_webpack_exports, __webpack_require__) {
672
672
 
673
- var map = {
673
+ const map = {
674
674
  "./accordion-pane/accordion-pane.json": [
675
675
  "./src/tokens/mobile/components/accordion-pane/accordion-pane.json",
676
676
  [
@@ -1042,7 +1042,7 @@ function webpackAsyncContext(req) {
1042
1042
  try {
1043
1043
  if(!__webpack_require__.o(map, req)) {
1044
1044
  return Promise.resolve().then(() => {
1045
- var e = new Error("Cannot find module '" + req + "'");
1045
+ const e = new Error("Cannot find module '" + req + "'");
1046
1046
  e.code = 'MODULE_NOT_FOUND';
1047
1047
  throw e;
1048
1048
  });
@@ -1051,7 +1051,7 @@ function webpackAsyncContext(req) {
1051
1051
  return Promise.reject(err);
1052
1052
  }
1053
1053
 
1054
- var ids = map[req], id = ids[0];
1054
+ const ids = map[req], id = ids[0];
1055
1055
  return __webpack_require__.e(ids[1][0]).then(() => (__webpack_require__.t(id, 3 | 16)));
1056
1056
  }
1057
1057
  webpackAsyncContext.keys = () => (Object.keys(map));
@@ -1066,7 +1066,7 @@ module.exports = webpackAsyncContext;
1066
1066
  \*****************************************************************************/
1067
1067
  (module, __unused_webpack_exports, __webpack_require__) {
1068
1068
 
1069
- var map = {
1069
+ const map = {
1070
1070
  "./accordion/accordion.json": [
1071
1071
  "./src/tokens/web/components/accordion/accordion.json",
1072
1072
  [
@@ -1414,7 +1414,7 @@ function webpackAsyncContext(req) {
1414
1414
  try {
1415
1415
  if(!__webpack_require__.o(map, req)) {
1416
1416
  return Promise.resolve().then(() => {
1417
- var e = new Error("Cannot find module '" + req + "'");
1417
+ const e = new Error("Cannot find module '" + req + "'");
1418
1418
  e.code = 'MODULE_NOT_FOUND';
1419
1419
  throw e;
1420
1420
  });
@@ -1423,7 +1423,7 @@ function webpackAsyncContext(req) {
1423
1423
  return Promise.reject(err);
1424
1424
  }
1425
1425
 
1426
- var ids = map[req], id = ids[0];
1426
+ const ids = map[req], id = ids[0];
1427
1427
  return __webpack_require__.e(ids[1][0]).then(() => (__webpack_require__.t(id, 3 | 16)));
1428
1428
  }
1429
1429
  webpackAsyncContext.keys = () => (Object.keys(map));
@@ -9100,17 +9100,17 @@ module.exports = /*#__PURE__*/JSON.parse('{"space":{"0":{"value":"{space.rule.va
9100
9100
  /******/ });
9101
9101
  /************************************************************************/
9102
9102
  /******/ // The module cache
9103
- /******/ var __webpack_module_cache__ = {};
9103
+ /******/ const __webpack_module_cache__ = {};
9104
9104
  /******/
9105
9105
  /******/ // The require function
9106
9106
  /******/ function __webpack_require__(moduleId) {
9107
9107
  /******/ // Check if module is in cache
9108
- /******/ var cachedModule = __webpack_module_cache__[moduleId];
9108
+ /******/ const cachedModule = __webpack_module_cache__[moduleId];
9109
9109
  /******/ if (cachedModule !== undefined) {
9110
9110
  /******/ return cachedModule.exports;
9111
9111
  /******/ }
9112
9112
  /******/ // Create a new module (and put it into the cache)
9113
- /******/ var module = __webpack_module_cache__[moduleId] = {
9113
+ /******/ const module = __webpack_module_cache__[moduleId] = {
9114
9114
  /******/ // no module.id needed
9115
9115
  /******/ // no module.loaded needed
9116
9116
  /******/ exports: {}
@@ -9119,7 +9119,7 @@ module.exports = /*#__PURE__*/JSON.parse('{"space":{"0":{"value":"{space.rule.va
9119
9119
  /******/ // Execute the module function
9120
9120
  /******/ if (!(moduleId in __webpack_modules__)) {
9121
9121
  /******/ delete __webpack_module_cache__[moduleId];
9122
- /******/ var e = new Error("Cannot find module '" + moduleId + "'");
9122
+ /******/ const e = new Error("Cannot find module '" + moduleId + "'");
9123
9123
  /******/ e.code = 'MODULE_NOT_FOUND';
9124
9124
  /******/ throw e;
9125
9125
  /******/ }
@@ -9135,8 +9135,8 @@ module.exports = /*#__PURE__*/JSON.parse('{"space":{"0":{"value":"{space.rule.va
9135
9135
  /************************************************************************/
9136
9136
  /******/ /* webpack/runtime/create fake namespace object */
9137
9137
  /******/ (() => {
9138
- /******/ var getProto = Object.getPrototypeOf ? (obj) => (Object.getPrototypeOf(obj)) : (obj) => (obj.__proto__);
9139
- /******/ var leafPrototypes;
9138
+ /******/ const getProto = Object.getPrototypeOf ? (obj) => (Object.getPrototypeOf(obj)) : (obj) => (obj.__proto__);
9139
+ /******/ let leafPrototypes;
9140
9140
  /******/ // create a fake namespace object
9141
9141
  /******/ // mode & 1: value is a module id, require it
9142
9142
  /******/ // mode & 2: merge all properties of value into the ns
@@ -9150,9 +9150,9 @@ module.exports = /*#__PURE__*/JSON.parse('{"space":{"0":{"value":"{space.rule.va
9150
9150
  /******/ if((mode & 4) && value.__esModule) return value;
9151
9151
  /******/ if((mode & 16) && typeof value.then === 'function') return value;
9152
9152
  /******/ }
9153
- /******/ var ns = Object.create(null);
9153
+ /******/ const ns = Object.create(null);
9154
9154
  /******/ __webpack_require__.r(ns);
9155
- /******/ var def = {};
9155
+ /******/ const def = {};
9156
9156
  /******/ leafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)];
9157
9157
  /******/ for(var current = mode & 2 && value; (typeof current == 'object' || typeof current == 'function') && !~leafPrototypes.indexOf(current); current = getProto(current)) {
9158
9158
  /******/ Object.getOwnPropertyNames(current).forEach((key) => (def[key] = () => (value[key])));
@@ -9165,11 +9165,26 @@ module.exports = /*#__PURE__*/JSON.parse('{"space":{"0":{"value":"{space.rule.va
9165
9165
  /******/
9166
9166
  /******/ /* webpack/runtime/define property getters */
9167
9167
  /******/ (() => {
9168
- /******/ // define getter functions for harmony exports
9168
+ /******/ // define getter/value functions for harmony exports
9169
9169
  /******/ __webpack_require__.d = (exports, definition) => {
9170
- /******/ for(var key in definition) {
9171
- /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
9172
- /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
9170
+ /******/ if(Array.isArray(definition)) {
9171
+ /******/ var i = 0;
9172
+ /******/ while(i < definition.length) {
9173
+ /******/ var key = definition[i++];
9174
+ /******/ var binding = definition[i++];
9175
+ /******/ if(!__webpack_require__.o(exports, key)) {
9176
+ /******/ if(binding === 0) {
9177
+ /******/ Object.defineProperty(exports, key, { enumerable: true, value: definition[i++] });
9178
+ /******/ } else {
9179
+ /******/ Object.defineProperty(exports, key, { enumerable: true, get: binding });
9180
+ /******/ }
9181
+ /******/ } else if(binding === 0) { i++; }
9182
+ /******/ }
9183
+ /******/ } else {
9184
+ /******/ for(var key in definition) {
9185
+ /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
9186
+ /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
9187
+ /******/ }
9173
9188
  /******/ }
9174
9189
  /******/ }
9175
9190
  /******/ };
@@ -9204,16 +9219,16 @@ module.exports = /*#__PURE__*/JSON.parse('{"space":{"0":{"value":"{space.rule.va
9204
9219
  /******/
9205
9220
  /******/ /* webpack/runtime/load script */
9206
9221
  /******/ (() => {
9207
- /******/ var inProgress = {};
9208
- /******/ var dataWebpackPrefix = "@wavemaker/foundation-css:";
9222
+ /******/ const inProgress = {};
9223
+ /******/ const dataWebpackPrefix = "@wavemaker/foundation-css:";
9209
9224
  /******/ // loadScript function to load a script via script tag
9210
9225
  /******/ __webpack_require__.l = (url, done, key, chunkId) => {
9211
9226
  /******/ if(inProgress[url]) { inProgress[url].push(done); return; }
9212
- /******/ var script, needAttach;
9227
+ /******/ let script, needAttach;
9213
9228
  /******/ if(key !== undefined) {
9214
- /******/ var scripts = document.getElementsByTagName("script");
9229
+ /******/ const scripts = document.getElementsByTagName("script");
9215
9230
  /******/ for(var i = 0; i < scripts.length; i++) {
9216
- /******/ var s = scripts[i];
9231
+ /******/ const s = scripts[i];
9217
9232
  /******/ if(s.getAttribute("src") == url || s.getAttribute("data-webpack") == dataWebpackPrefix + key) { script = s; break; }
9218
9233
  /******/ }
9219
9234
  /******/ }
@@ -9230,17 +9245,17 @@ module.exports = /*#__PURE__*/JSON.parse('{"space":{"0":{"value":"{space.rule.va
9230
9245
  /******/ script.src = url;
9231
9246
  /******/ }
9232
9247
  /******/ inProgress[url] = [done];
9233
- /******/ var onScriptComplete = (prev, event) => {
9248
+ /******/ const onScriptComplete = (prev, event) => {
9234
9249
  /******/ // avoid mem leaks in IE.
9235
9250
  /******/ script.onerror = script.onload = null;
9236
9251
  /******/ clearTimeout(timeout);
9237
- /******/ var doneFns = inProgress[url];
9252
+ /******/ const doneFns = inProgress[url];
9238
9253
  /******/ delete inProgress[url];
9239
- /******/ script.parentNode && script.parentNode.removeChild(script);
9240
- /******/ doneFns && doneFns.forEach((fn) => (fn(event)));
9254
+ /******/ script.parentNode?.removeChild(script);
9255
+ /******/ doneFns?.forEach((fn) => (fn(event)));
9241
9256
  /******/ if(prev) return prev(event);
9242
9257
  /******/ }
9243
- /******/ var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);
9258
+ /******/ const timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);
9244
9259
  /******/ script.onerror = onScriptComplete.bind(null, script.onerror);
9245
9260
  /******/ script.onload = onScriptComplete.bind(null, script.onload);
9246
9261
  /******/ needAttach && document.head.appendChild(script);
@@ -9251,7 +9266,7 @@ module.exports = /*#__PURE__*/JSON.parse('{"space":{"0":{"value":"{space.rule.va
9251
9266
  /******/ (() => {
9252
9267
  /******/ // define __esModule on exports
9253
9268
  /******/ __webpack_require__.r = (exports) => {
9254
- /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
9269
+ /******/ if(Symbol.toStringTag) {
9255
9270
  /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
9256
9271
  /******/ }
9257
9272
  /******/ Object.defineProperty(exports, '__esModule', { value: true });
@@ -9270,13 +9285,13 @@ module.exports = /*#__PURE__*/JSON.parse('{"space":{"0":{"value":"{space.rule.va
9270
9285
  /******/ // object to store loaded and loading chunks
9271
9286
  /******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
9272
9287
  /******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
9273
- /******/ var installedChunks = {
9288
+ /******/ const installedChunks = {
9274
9289
  /******/ "main": 0
9275
9290
  /******/ };
9276
9291
  /******/
9277
9292
  /******/ __webpack_require__.f.j = (chunkId, promises) => {
9278
9293
  /******/ // JSONP chunk loading for javascript
9279
- /******/ var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
9294
+ /******/ let installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
9280
9295
  /******/ if(installedChunkData !== 0) { // 0 means "already installed".
9281
9296
  /******/
9282
9297
  /******/ // a Promise means "currently loading".
@@ -9285,24 +9300,25 @@ module.exports = /*#__PURE__*/JSON.parse('{"space":{"0":{"value":"{space.rule.va
9285
9300
  /******/ } else {
9286
9301
  /******/ if(true) { // all chunks have JS
9287
9302
  /******/ // setup Promise in chunk cache
9288
- /******/ var promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));
9303
+ /******/ const promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));
9289
9304
  /******/ promises.push(installedChunkData[2] = promise);
9290
9305
  /******/
9291
9306
  /******/ // start chunk loading
9292
- /******/ var url = __webpack_require__.p + __webpack_require__.u(chunkId);
9307
+ /******/ const url = __webpack_require__.p + __webpack_require__.u(chunkId);
9293
9308
  /******/ // create error before stack unwound to get useful stacktrace later
9294
- /******/ var error = new Error();
9295
- /******/ var loadingEnded = (event) => {
9309
+ /******/ const error = new Error();
9310
+ /******/ const loadingEnded = (event) => {
9296
9311
  /******/ if(__webpack_require__.o(installedChunks, chunkId)) {
9297
9312
  /******/ installedChunkData = installedChunks[chunkId];
9298
9313
  /******/ if(installedChunkData !== 0) installedChunks[chunkId] = undefined;
9299
9314
  /******/ if(installedChunkData) {
9300
- /******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
9301
- /******/ var realSrc = event && event.target && event.target.src;
9315
+ /******/ const errorType = event && (event.type === 'load' ? 'missing' : event.type);
9316
+ /******/ const realSrc = event && event.target && event.target.src;
9302
9317
  /******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
9303
9318
  /******/ error.name = 'ChunkLoadError';
9304
9319
  /******/ error.type = errorType;
9305
9320
  /******/ error.request = realSrc;
9321
+ /******/ error.event = event;
9306
9322
  /******/ installedChunkData[1](error);
9307
9323
  /******/ }
9308
9324
  /******/ }
@@ -9324,8 +9340,8 @@ module.exports = /*#__PURE__*/JSON.parse('{"space":{"0":{"value":"{space.rule.va
9324
9340
  /******/ // no on chunks loaded
9325
9341
  /******/
9326
9342
  /******/ // install a JSONP callback for chunk loading
9327
- /******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
9328
- /******/ var [chunkIds, moreModules, runtime] = data;
9343
+ /******/ const webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
9344
+ /******/ let [chunkIds, moreModules, runtime] = data;
9329
9345
  /******/ // add "moreModules" to the modules object,
9330
9346
  /******/ // then flag all "chunkIds" as loaded and fire callback
9331
9347
  /******/ var moduleId, chunkId, i = 0;
@@ -9348,13 +9364,13 @@ module.exports = /*#__PURE__*/JSON.parse('{"space":{"0":{"value":"{space.rule.va
9348
9364
  /******/
9349
9365
  /******/ }
9350
9366
  /******/
9351
- /******/ var chunkLoadingGlobal = this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || [];
9367
+ /******/ const chunkLoadingGlobal = this["webpackChunk_wavemaker_foundation_css"] = this["webpackChunk_wavemaker_foundation_css"] || [];
9352
9368
  /******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
9353
9369
  /******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
9354
9370
  /******/ })();
9355
9371
  /******/
9356
9372
  /************************************************************************/
9357
- var __webpack_exports__ = {};
9373
+ let __webpack_exports__ = {};
9358
9374
  // This entry needs to be wrapped in an IIFE because it needs to be in strict mode.
9359
9375
  (() => {
9360
9376
  "use strict";
@@ -9428,7 +9444,7 @@ const getComponentsList = (platform) => {
9428
9444
 
9429
9445
  })();
9430
9446
 
9431
- var __webpack_export_target__ = exports;
9447
+ const __webpack_export_target__ = exports;
9432
9448
  for(var __webpack_i__ in __webpack_exports__) __webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
9433
9449
  if(__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, "__esModule", { value: true });
9434
9450
  /******/ })()
package/cjs/src_tokens_mobile_components_chips_chips_json.foundation-css.cjs CHANGED
@@ -7,7 +7,7 @@
7
7
  \*******************************************************/
8
8
  (module) {
9
9
 
10
- module.exports = /*#__PURE__*/JSON.parse('{"chips":{"meta":{"mapping":{"selector":{"mobile":".app-chips"},"states":{"disabled":{"selector":{"mobile":"-disabled"}},"active":{"selector":{"mobile":"-active-item, .app-chips-active-item-text"}}}}},"mapping":{"border":{"width":{"value":"{border.width.base.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the border width of the main chips container (the wrapper that holds all chips and the input field). This creates the outline around the entire chips component.<br>CSS variable: --wm-chips-border-width"}}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of individual chip items (the small pill-shaped elements). This affects the background color that appears behind each chip, not the container.<br>CSS variable: --wm-chips-background-color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of individual chip items (the small pill-shaped elements). This affects the color of the text content inside each chip, not the container.<br>CSS variable: --wm-chips-color"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the overall transparency of the chips component. When set to 1, the component is fully opaque. Lower values make the entire component more transparent.<br>CSS variable: --wm-chips-opacity"}},"pointer-events":{"value":"auto","type":"radius","attributes":{"subtype":"pointer-events","description":"Controls whether the chips component can receive mouse/touch interactions. Acceptable values: all (fully interactive), none (not clickable), auto (browser default).<br>CSS variable: --wm-chips-pointer-events"}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around the main chips container. This creates a subtle elevation effect that makes the chips component appear to float above the background.<br>CSS variable: --wm-chips-shadow"}},"list":{"gap":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between individual chip items (the small pill-shaped elements) within the chips container. This creates visual separation between each chip so users can easily distinguish between them.<br>CSS variable: --wm-chips-list-gap"}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (all sides) inside the chips container (the wrapper that holds all chips and the input field). This creates breathing room between the container border and the chips/input inside. Acceptable units: px.<br>CSS variable: --wm-chips-list-padding"}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the chips container (the wrapper that holds all chips and the input field). When set to \'transparent\', the container has no background color, making it transparent.<br>CSS variable: --wm-chips-list-background-color"}},"border":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the chips container (the wrapper that holds all chips and the input field). This determines the color of the outline that defines the container shape.<br>CSS variable: --wm-chips-list-border-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the chips container (the wrapper that holds all chips and the input field). This makes the container appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-chips-list-border-radius"}},"style":{"value":"{border.style.base.value}","type":"style","attributes":{"subtype":"border-style","description":"Controls the border style of the chips container. Acceptable values: solid (continuous line), dashed (dotted line), dotted (small dots), none (no border).<br>CSS variable: --wm-chips-list-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the chips container (the wrapper that holds all chips and the input field). This creates the outline that defines the container shape.<br>CSS variable: --wm-chips-list-border-width"}}},"place":{"holder":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of placeholder text in the input field where users type to add new chips. This determines what color the placeholder text appears in.<br>CSS variable: --wm-chips-list-place-holder-color"}}}},"height":{"value":"70px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of the chips container (the wrapper that holds all chips and the input field). This ensures the container has a consistent height even when empty or with few chips.<br>CSS variable: --wm-chips-list-height"}}},"input":{"padding":{"value":"{space.2.value} {space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top/bottom, left/right) inside the input field where users type to add new chips. This creates breathing room around the input text. Acceptable units: px.<br>CSS variable: --wm-chips-input-padding"}}},"item":{"height":{"value":"32px","type":"space","attributes":{"subtype":"space","description":"Controls the height of individual chip items (the small pill-shaped elements). This determines how tall each chip appears visually. Acceptable units: px.<br>CSS variable: --wm-chips-item-height"}},"padding":{"value":"{space.1.value} {space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top/bottom, left/right) of each chip item. This creates breathing room between the chip text/icon and the chip border. Acceptable units: px.<br>CSS variable: --wm-chips-item-padding"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between elements within individual chip items (like between text and icons, or between text and the remove button). This creates visual separation between different parts of each chip.<br>CSS variable: --wm-chips-item-gap"}},"icon":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons that appear inside individual chip items (like remove buttons or action icons). This determines what color the icons appear in.<br>CSS variable: --wm-chips-item-icon-color"}},"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons that appear inside individual chip items (like remove buttons or action icons). This affects how large the icons appear within each chip.<br>CSS variable: --wm-chips-item-icon-size"}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between icons and text content within individual chip items. This creates visual separation between the icon and text.<br>CSS variable: --wm-chips-item-icon-gap"}}},"border":{"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of individual chip items. Acceptable values: solid (continuous line), dashed (dotted line), dotted (small dots), none (no border).<br>CSS variable: --wm-chips-item-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around individual chip items (the small pill-shaped elements). This determines the color of the outline that defines each chip\'s shape.<br>CSS variable: --wm-chips-item-border-color"}},"radius":{"@":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of individual chip items (the small pill-shaped elements). This makes each chip appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-chips-item-border-radius"}}}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family (typeface) for the text content inside individual chip items (the small pill-shaped elements). This determines the visual style of the text that appears within each chip.<br>CSS variable: --wm-chips-item-font-family"}},"font-weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the thickness/boldness of the text content inside individual chip items. Acceptable values: normal, bold, 100-900. This affects how prominent the text appears within each chip.<br>CSS variable: --wm-chips-item-font-weight"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the text content inside individual chip items (the small pill-shaped elements). This determines how large the text appears within each chip.<br>CSS variable: --wm-chips-item-font-size"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines of text inside individual chip items. This is important when chip text wraps to multiple lines, ensuring proper readability.<br>CSS variable: --wm-chips-item-line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in the text content inside chip items. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-chips-item-letter-spacing"}},"avatar":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of user avatars that appear inside chip items (the small pill-shaped elements). This determines how large profile pictures or user images appear within each chip.<br>CSS variable: --wm-chips-item-avatar-size"}},"radius":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of user avatars inside chip items. When set to pill, avatars appear as perfect circles. Other values create rounded rectangles.<br>CSS variable: --wm-chips-item-avatar-radius"}}}},"states":{"disabled":{"opacity":{"value":"0.38","type":"radius","attributes":{"subtype":"opacity","description":"Controls the overall transparency of the chips component when it is disabled. When set to 0.38, the component appears semi-transparent to indicate it cannot be interacted with.<br>CSS variable: --wm-chips-disabled-opacity"}},"pointer-events":{"value":"none","type":"radius","attributes":{"subtype":"pointer-events","description":"Prevents mouse/touch interactions with the chips component when it is disabled. When set to \'none\', the component cannot receive any pointer events, making it non-interactive.<br>CSS variable: --wm-chips-disabled-pointer-events"}}},"active":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of individual chip items when they are in an active/selected state. This determines what color the chip text appears in when a chip is active.<br>CSS variable: --wm-chips-active-color"}},"background-color":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of individual chip items when they are in an active/selected state. This determines what color appears behind chips when they are active.<br>CSS variable: --wm-chips-active-background-color"}},"item":{"border":{"color":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around individual chip items when they are in an active/selected state. This determines what color the border appears in when a chip is active.<br>CSS variable: --wm-chips-active-item-border-color"}}}}}}},"appearances":{"filled":{"mapping":{"border":{"width":{"value":"0","type":"radius"}}},"variantGroups":{"status":{"default":{"background-color":{"value":"{color.surface.@.value}","type":"color"},"color":{"value":"{color.on-surface.@.value}","type":"color"}},"primary":{"background-color":{"value":"{color.primary.@.value}","type":"color"},"color":{"value":"{color.on-primary.@.value}","type":"color"}},"secondary":{"background-color":{"value":"{color.secondary.@.value}","type":"color"},"color":{"value":"{color.on-secondary.@.value}","type":"color"}},"tertiary":{"background-color":{"value":"{color.tertiary.@.value}","type":"color"},"color":{"value":"{color.on-tertiary.@.value}","type":"color"}}}}},"elevated":{"mapping":{"border":{"width":{"value":"0","type":"radius"}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius"}}}}}}');
10
+ module.exports = /*#__PURE__*/JSON.parse('{"chips":{"meta":{"mapping":{"selector":{"mobile":".app-chips"},"states":{"disabled":{"selector":{"mobile":"-disabled"}},"active":{"selector":{"mobile":"-active-item, .app-chips-active-item-text, .app-chips-active-left-badge, .app-chips-active-right-badge, .app-chips-active-left-icon, .app-chips-active-right-icon"}}}}},"mapping":{"border":{"width":{"value":"{border.width.base.value}","type":"radius","attributes":{"subtype":"border-width","description":"Controls the border width of the main chips container (the wrapper that holds all chips and the input field). This creates the outline around the entire chips component.<br>CSS variable: --wm-chips-border-width"}}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of individual chip items (the small pill-shaped elements). This affects the background color that appears behind each chip, not the container.<br>CSS variable: --wm-chips-background-color"}},"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of individual chip items (the small pill-shaped elements). This affects the color of the text content inside each chip, not the container.<br>CSS variable: --wm-chips-color"}},"opacity":{"value":"1","type":"radius","attributes":{"subtype":"opacity","description":"Controls the overall transparency of the chips component. When set to 1, the component is fully opaque. Lower values make the entire component more transparent.<br>CSS variable: --wm-chips-opacity"}},"pointer-events":{"value":"auto","type":"radius","attributes":{"subtype":"pointer-events","description":"Controls whether the chips component can receive mouse/touch interactions. Acceptable values: all (fully interactive), none (not clickable), auto (browser default).<br>CSS variable: --wm-chips-pointer-events"}},"shadow":{"value":"none","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow effect around the main chips container. This creates a subtle elevation effect that makes the chips component appear to float above the background.<br>CSS variable: --wm-chips-shadow"}},"list":{"gap":{"value":"{space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the horizontal spacing between individual chip items (the small pill-shaped elements) within the chips container. This creates visual separation between each chip so users can easily distinguish between them.<br>CSS variable: --wm-chips-list-gap"}},"padding":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (all sides) inside the chips container (the wrapper that holds all chips and the input field). This creates breathing room between the container border and the chips/input inside. Acceptable units: px.<br>CSS variable: --wm-chips-list-padding"}},"background-color":{"value":"transparent","type":"color","attributes":{"subtype":"color","description":"Sets the background color of the chips container (the wrapper that holds all chips and the input field). When set to \'transparent\', the container has no background color, making it transparent.<br>CSS variable: --wm-chips-list-background-color"}},"border":{"color":{"value":"{color.transparent.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around the chips container (the wrapper that holds all chips and the input field). This determines the color of the outline that defines the container shape.<br>CSS variable: --wm-chips-list-border-color"}},"radius":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of the chips container (the wrapper that holds all chips and the input field). This makes the container appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-chips-list-border-radius"}},"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of the chips container. Acceptable values: solid (continuous line), dashed (dotted line), dotted (small dots), none (no border).<br>CSS variable: --wm-chips-list-border-style"}},"width":{"value":"{border.width.base.value}","type":"space","attributes":{"subtype":"border-width","description":"Controls the thickness of the border around the chips container (the wrapper that holds all chips and the input field). This creates the outline that defines the container shape.<br>CSS variable: --wm-chips-list-border-width"}}},"place":{"holder":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of placeholder text in the input field where users type to add new chips. This determines what color the placeholder text appears in.<br>CSS variable: --wm-chips-list-place-holder-color"}}}},"height":{"value":"70px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of the chips container (the wrapper that holds all chips and the input field). This ensures the container has a consistent height even when empty or with few chips.<br>CSS variable: --wm-chips-list-height"}}},"input":{"padding":{"value":"{space.2.value} {space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top/bottom, left/right) inside the input field where users type to add new chips. This creates breathing room around the input text. Acceptable units: px.<br>CSS variable: --wm-chips-input-padding"}}},"item":{"text":{"padding":{"value":"0px","type":"space","attributes":{"subtype":"space","description":"Controls the padding of chip item label text (.app-chips-item-text).<br>CSS variable: --wm-chips-item-text-padding"}}},"height":{"value":"32px","type":"space","attributes":{"subtype":"space","description":"Controls the height of individual chip items (the small pill-shaped elements). This determines how tall each chip appears visually. Acceptable units: px.<br>CSS variable: --wm-chips-item-height"}},"padding":{"value":"{space.1.value} {space.3.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding (top/bottom, left/right) of each chip item. This creates breathing room between the chip text/icon and the chip border. Acceptable units: px.<br>CSS variable: --wm-chips-item-padding"}},"gap":{"value":"{space.2.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between elements within individual chip items (like between text and icons, or between text and the remove button). This creates visual separation between different parts of each chip.<br>CSS variable: --wm-chips-item-gap"}},"icon":{"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of icons that appear inside individual chip items (like remove buttons or action icons). This determines what color the icons appear in.<br>CSS variable: --wm-chips-item-icon-color"}},"size":{"value":"{icon.size.sm.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of icons that appear inside individual chip items (like remove buttons or action icons). This affects how large the icons appear within each chip.<br>CSS variable: --wm-chips-item-icon-size"}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between icons and text content within individual chip items. This creates visual separation between the icon and text.<br>CSS variable: --wm-chips-item-icon-gap"}}},"border":{"style":{"value":"{border.style.base.value}","type":"radius","attributes":{"subtype":"border-style","description":"Controls the border style of individual chip items. Acceptable values: solid (continuous line), dashed (dotted line), dotted (small dots), none (no border).<br>CSS variable: --wm-chips-item-border-style"}},"color":{"value":"{color.outline.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around individual chip items (the small pill-shaped elements). This determines the color of the outline that defines each chip\'s shape.<br>CSS variable: --wm-chips-item-border-color"}},"radius":{"@":{"value":"{radius.sm.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of individual chip items (the small pill-shaped elements). This makes each chip appear with rounded corners instead of sharp edges.<br>CSS variable: --wm-chips-item-border-radius"}}}},"font-family":{"value":"{label.large.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the font family (typeface) for the text content inside individual chip items (the small pill-shaped elements). This determines the visual style of the text that appears within each chip.<br>CSS variable: --wm-chips-item-font-family"}},"font-weight":{"value":"{label.large.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls the thickness/boldness of the text content inside individual chip items. Acceptable values: normal, bold, 100-900. This affects how prominent the text appears within each chip.<br>CSS variable: --wm-chips-item-font-weight"}},"font-size":{"value":"{label.large.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls the size of the text content inside individual chip items (the small pill-shaped elements). This determines how large the text appears within each chip.<br>CSS variable: --wm-chips-item-font-size"}},"line-height":{"value":"{label.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines of text inside individual chip items. This is important when chip text wraps to multiple lines, ensuring proper readability.<br>CSS variable: --wm-chips-item-line-height"}},"letter-spacing":{"value":"{label.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in the text content inside chip items. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-chips-item-letter-spacing"}},"avatar":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls the size of user avatars that appear inside chip items (the small pill-shaped elements). This determines how large profile pictures or user images appear within each chip.<br>CSS variable: --wm-chips-item-avatar-size"}},"radius":{"value":"{radius.pill.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of user avatars inside chip items. When set to pill, avatars appear as perfect circles. Other values create rounded rectangles.<br>CSS variable: --wm-chips-item-avatar-radius"}}}},"left-icon":{"padding":{"value":"{space.0.value} 2px {space.0.value} {space.0.value}","type":"space","attributes":{"subtype":"space","description":"Controls the padding of the left icon on chip items (.app-chips-left-icon, .app-chips-active-left-icon).<br>CSS variable: --wm-chips-left-icon-padding"}},"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the left icon on chip items (.app-chips-left-icon, .app-chips-active-left-icon).<br>CSS variable: --wm-chips-left-icon-color"}}},"right-icon":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the right icon on chip items (.app-chips-right-icon, .app-chips-active-right-icon).<br>CSS variable: --wm-chips-right-icon-color"}}},"left-badge":{"text":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the left badge on chip items (.app-chips-left-badge, .app-chips-active-left-badge).<br>CSS variable: --wm-chips-left-badge-text-color"}}}},"right-badge":{"text":{"color":{"value":"{color.on-surface.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of the right badge on chip items (.app-chips-right-badge, .app-chips-active-right-badge).<br>CSS variable: --wm-chips-right-badge-text-color"}},"margin-top":{"value":"0px","type":"space","attributes":{"subtype":"space","description":"Controls the top margin of the right badge text on chip items (.app-chips-right-badge, .app-chips-active-right-badge).<br>CSS variable: --wm-chips-right-badge-text-margin-top"}}}},"states":{"disabled":{"opacity":{"value":"0.38","type":"radius","attributes":{"subtype":"opacity","description":"Controls the overall transparency of the chips component when it is disabled. When set to 0.38, the component appears semi-transparent to indicate it cannot be interacted with.<br>CSS variable: --wm-chips-disabled-opacity"}},"pointer-events":{"value":"none","type":"radius","attributes":{"subtype":"pointer-events","description":"Prevents mouse/touch interactions with the chips component when it is disabled. When set to \'none\', the component cannot receive any pointer events, making it non-interactive.<br>CSS variable: --wm-chips-disabled-pointer-events"}}},"active":{"color":{"value":"{color.on-surface.variant.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of individual chip items when they are in an active/selected state. This determines what color the chip text appears in when a chip is active.<br>CSS variable: --wm-chips-active-color"}},"background-color":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of individual chip items when they are in an active/selected state. This determines what color appears behind chips when they are active.<br>CSS variable: --wm-chips-active-background-color"}},"item":{"border":{"color":{"value":"{color.secondary.container.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of the border around individual chip items when they are in an active/selected state. This determines what color the border appears in when a chip is active.<br>CSS variable: --wm-chips-active-item-border-color"}}}}}}},"appearances":{"filled":{"mapping":{"border":{"width":{"value":"0","type":"radius"}}},"variantGroups":{"status":{"default":{"background-color":{"value":"{color.surface.@.value}","type":"color"},"color":{"value":"{color.on-surface.@.value}","type":"color"}},"primary":{"background-color":{"value":"{color.primary.@.value}","type":"color"},"color":{"value":"{color.on-primary.@.value}","type":"color"}},"secondary":{"background-color":{"value":"{color.secondary.@.value}","type":"color"},"color":{"value":"{color.on-secondary.@.value}","type":"color"}},"tertiary":{"background-color":{"value":"{color.tertiary.@.value}","type":"color"},"color":{"value":"{color.on-tertiary.@.value}","type":"color"}}}}},"elevated":{"mapping":{"border":{"width":{"value":"0","type":"radius"}},"shadow":{"value":"{elevation.shadow.1.value}","type":"radius"}}}}}}');
11
11
 
12
12
  /***/ }
13
13
 
package/cjs/src_tokens_mobile_components_dropdown-menu_dropdown-menu_json.foundation-css.cjs CHANGED
@@ -7,7 +7,7 @@
7
7
  \***********************************************************************/
8
8
  (module) {
9
9
 
10
- 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"}}}}}}}');
10
+ 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"}},"box-shadow":{"value":"{elevation.shadow.2.value}","type":"radius","attributes":{"subtype":"elevation","description":"Controls the drop shadow on the floating dropdown menu panel (Material 3 menu surface elevation; uses global elevation shadow level 2).<br>CSS variable: --wm-dropdown-menu-box-shadow"}},"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"}}}}}}}');
11
11
 
12
12
  /***/ }
13
13
 
package/cjs/src_tokens_mobile_components_form-controls_form-controls_json.foundation-css.cjs CHANGED
@@ -7,7 +7,7 @@
7
7
  \***********************************************************************/
8
8
  (module) {
9
9
 
10
- 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"}}}}}}}}');
10
+ 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"}},"line-height":{"value":"{body.large.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when form control text wraps to multiple lines. This affects the height of each line of text inside input fields and text areas. Acceptable units: px.<br>CSS variable: --wm-form-controls-font-line-height"}},"letter-spacing":{"value":"{body.large.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual characters in form control text. Positive values spread characters apart for increased readability, negative values bring them closer. Acceptable units: px, em.<br>CSS variable: --wm-form-controls-font-letter-spacing"}}},"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":"radius","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"},"text-align":{"value":"left","type":"radius","attributes":{"subtype":"text-align","description":"Controls the horizontal alignment of text inside form controls (input fields where users enter data). \'left\' aligns the text to the left, \'center\' centers it, and \'right\' aligns it to the right.<br>CSS variable: --wm-form-controls-text-align"}},"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":"radius"},"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":"radius"},"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"}}}}}}}}');
11
11
 
12
12
  /***/ }
13
13