@wavemaker/foundation-css 12.0.0-next.25480 → 12.0.0-next.28533

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 (236) hide show
  1. package/cjs/foundation-css.cjs +5749 -5466
  2. package/cjs/src_tokens_mobile_components_accordion_accordion_json.foundation-css.cjs +4 -4
  3. package/cjs/src_tokens_mobile_components_anchor_anchor_json.foundation-css.cjs +4 -4
  4. package/cjs/src_tokens_mobile_components_audio_audio_json.foundation-css.cjs +3 -3
  5. package/cjs/src_tokens_mobile_components_badge_badge_json.foundation-css.cjs +3 -3
  6. package/cjs/src_tokens_mobile_components_barcodescanner_barcodescanner_json.foundation-css.cjs +3 -3
  7. package/cjs/src_tokens_mobile_components_bottomsheet_bottomsheet_json.foundation-css.cjs +4 -4
  8. package/cjs/src_tokens_mobile_components_breadcrumb_breadcrumb_json.foundation-css.cjs +3 -3
  9. package/cjs/src_tokens_mobile_components_button-group_button-group_json.foundation-css.cjs +3 -3
  10. package/cjs/src_tokens_mobile_components_button_button_json.foundation-css.cjs +4 -4
  11. package/cjs/src_tokens_mobile_components_calendar_calendar_json.foundation-css.cjs +3 -3
  12. package/cjs/src_tokens_mobile_components_camera_camera_json.foundation-css.cjs +4 -4
  13. package/cjs/src_tokens_mobile_components_cards_cards_json.foundation-css.cjs +4 -4
  14. package/cjs/src_tokens_mobile_components_carousel_carousel_json.foundation-css.cjs +4 -4
  15. package/cjs/src_tokens_mobile_components_checkbox_checkbox_json.foundation-css.cjs +3 -3
  16. package/cjs/src_tokens_mobile_components_checkboxset_checkboxset_json.foundation-css.cjs +3 -3
  17. package/cjs/src_tokens_mobile_components_chips_chips_json.foundation-css.cjs +3 -3
  18. package/cjs/src_tokens_mobile_components_container_container_json.foundation-css.cjs +4 -4
  19. package/cjs/src_tokens_mobile_components_currency_currency_json.foundation-css.cjs +3 -3
  20. package/cjs/src_tokens_mobile_components_datetime_datetime_json.foundation-css.cjs +3 -3
  21. package/cjs/src_tokens_mobile_components_dropdown-menu_dropdown-menu_json.foundation-css.cjs +3 -3
  22. package/cjs/src_tokens_mobile_components_fileupload_fileupload_json.foundation-css.cjs +3 -3
  23. package/cjs/src_tokens_mobile_components_form-controls_form-controls_json.foundation-css.cjs +4 -4
  24. package/cjs/src_tokens_mobile_components_form-wrapper_form-wrapper_json.foundation-css.cjs +3 -3
  25. package/cjs/src_tokens_mobile_components_grid-layout_grid-layout_json.foundation-css.cjs +3 -3
  26. package/cjs/src_tokens_mobile_components_icon_icon_json.foundation-css.cjs +3 -3
  27. package/cjs/src_tokens_mobile_components_label_label_json.foundation-css.cjs +4 -4
  28. package/cjs/src_tokens_mobile_components_left-nav_left-nav_json.foundation-css.cjs +3 -3
  29. package/cjs/src_tokens_mobile_components_list_list_json.foundation-css.cjs +4 -4
  30. package/cjs/src_tokens_mobile_components_login_login_json.foundation-css.cjs +3 -3
  31. package/cjs/src_tokens_mobile_components_lottie_lottie_json.foundation-css.cjs +4 -4
  32. package/cjs/src_tokens_mobile_components_message_message_json.foundation-css.cjs +3 -3
  33. package/cjs/src_tokens_mobile_components_modal-dialog_modal-dialog_json.foundation-css.cjs +4 -4
  34. package/cjs/src_tokens_mobile_components_nav_nav_json.foundation-css.cjs +4 -4
  35. package/cjs/src_tokens_mobile_components_navbar_navbar_json.foundation-css.cjs +4 -4
  36. package/cjs/src_tokens_mobile_components_navitem_navitem_json.foundation-css.cjs +14 -0
  37. package/cjs/src_tokens_mobile_components_page-content_page-content_json.foundation-css.cjs +3 -3
  38. package/cjs/src_tokens_mobile_components_panel-footer_panel-footer_json.foundation-css.cjs +14 -0
  39. package/cjs/src_tokens_mobile_components_panel_panel_json.foundation-css.cjs +4 -4
  40. package/cjs/src_tokens_mobile_components_picture_picture_json.foundation-css.cjs +3 -3
  41. package/cjs/src_tokens_mobile_components_popover_popover_json.foundation-css.cjs +4 -4
  42. package/cjs/src_tokens_mobile_components_progress-bar_progress-bar_json.foundation-css.cjs +3 -3
  43. package/cjs/src_tokens_mobile_components_progress-circle_progress-circle_json.foundation-css.cjs +3 -3
  44. package/cjs/src_tokens_mobile_components_radioset_radioset_json.foundation-css.cjs +3 -3
  45. package/cjs/src_tokens_mobile_components_rating_rating_json.foundation-css.cjs +3 -3
  46. package/cjs/src_tokens_mobile_components_scrollbar_scrollbar_json.foundation-css.cjs +3 -3
  47. package/cjs/src_tokens_mobile_components_search_search_json.foundation-css.cjs +4 -4
  48. package/cjs/src_tokens_mobile_components_select_select_json.foundation-css.cjs +3 -3
  49. package/cjs/src_tokens_mobile_components_slider_slider_json.foundation-css.cjs +3 -3
  50. package/cjs/src_tokens_mobile_components_spinner_spinner_json.foundation-css.cjs +3 -3
  51. package/cjs/src_tokens_mobile_components_switch_switch_json.foundation-css.cjs +3 -3
  52. package/cjs/src_tokens_mobile_components_tabbar_tabbar_json.foundation-css.cjs +4 -4
  53. package/cjs/src_tokens_mobile_components_tabs_tabs_json.foundation-css.cjs +3 -3
  54. package/cjs/src_tokens_mobile_components_textarea_textarea_json.foundation-css.cjs +3 -3
  55. package/cjs/src_tokens_mobile_components_tile_tile_json.foundation-css.cjs +3 -3
  56. package/cjs/src_tokens_mobile_components_toast_toast_json.foundation-css.cjs +3 -3
  57. package/cjs/src_tokens_mobile_components_toggle_toggle_json.foundation-css.cjs +4 -4
  58. package/cjs/src_tokens_mobile_components_video_video_json.foundation-css.cjs +3 -3
  59. package/cjs/src_tokens_mobile_components_webview_webview_json.foundation-css.cjs +4 -4
  60. package/cjs/src_tokens_mobile_components_wizard_wizard_json.foundation-css.cjs +3 -3
  61. package/cjs/src_tokens_web_components_accordion_accordion_json.foundation-css.cjs +3 -3
  62. package/cjs/src_tokens_web_components_anchor_anchor_json.foundation-css.cjs +3 -3
  63. package/cjs/src_tokens_web_components_audio_audio_json.foundation-css.cjs +3 -3
  64. package/cjs/src_tokens_web_components_badge_badge_json.foundation-css.cjs +3 -3
  65. package/cjs/src_tokens_web_components_breadcrumb_breadcrumb_json.foundation-css.cjs +3 -3
  66. package/cjs/src_tokens_web_components_button-group_button-group_json.foundation-css.cjs +3 -3
  67. package/cjs/src_tokens_web_components_button_button_json.foundation-css.cjs +4 -4
  68. package/cjs/src_tokens_web_components_calendar_calendar_json.foundation-css.cjs +4 -4
  69. package/cjs/src_tokens_web_components_cards_cards_json.foundation-css.cjs +4 -4
  70. package/cjs/src_tokens_web_components_carousel_carousel_json.foundation-css.cjs +3 -3
  71. package/cjs/src_tokens_web_components_checkbox_checkbox_json.foundation-css.cjs +4 -4
  72. package/cjs/src_tokens_web_components_checkboxset_checkboxset_json.foundation-css.cjs +3 -3
  73. package/cjs/src_tokens_web_components_chips_chips_json.foundation-css.cjs +3 -3
  74. package/cjs/src_tokens_web_components_color-picker_color-picker_json.foundation-css.cjs +3 -3
  75. package/cjs/src_tokens_web_components_container_container_json.foundation-css.cjs +3 -3
  76. package/cjs/src_tokens_web_components_currency_currency_json.foundation-css.cjs +3 -3
  77. package/cjs/src_tokens_web_components_data-table_data-table_json.foundation-css.cjs +4 -4
  78. package/cjs/src_tokens_web_components_date_date_json.foundation-css.cjs +3 -3
  79. package/cjs/src_tokens_web_components_dropdown-menu_dropdown-menu_json.foundation-css.cjs +4 -4
  80. package/cjs/src_tokens_web_components_fileupload_fileupload_json.foundation-css.cjs +3 -3
  81. package/cjs/src_tokens_web_components_form-controls_form-controls_json.foundation-css.cjs +4 -4
  82. package/cjs/src_tokens_web_components_grid-layout_grid-layout_json.foundation-css.cjs +3 -3
  83. package/cjs/src_tokens_web_components_icon_icon_json.foundation-css.cjs +3 -3
  84. package/cjs/src_tokens_web_components_iconbutton-toggleable_iconbutton-toggleable_json.foundation-css.cjs +14 -0
  85. package/cjs/src_tokens_web_components_iframe_iframe_json.foundation-css.cjs +3 -3
  86. package/cjs/src_tokens_web_components_label_label_json.foundation-css.cjs +3 -3
  87. package/cjs/src_tokens_web_components_list_list_json.foundation-css.cjs +3 -3
  88. package/cjs/src_tokens_web_components_message_message_json.foundation-css.cjs +3 -3
  89. package/cjs/src_tokens_web_components_modal-dialog_modal-dialog_json.foundation-css.cjs +3 -3
  90. package/cjs/src_tokens_web_components_nav_nav_json.foundation-css.cjs +3 -3
  91. package/cjs/src_tokens_web_components_page-content_page-content_json.foundation-css.cjs +4 -4
  92. package/cjs/src_tokens_web_components_page-footer_page-footer_json.foundation-css.cjs +3 -3
  93. package/cjs/src_tokens_web_components_page-header_page-header_json.foundation-css.cjs +3 -3
  94. package/cjs/src_tokens_web_components_page-left-nav_page-left-nav_json.foundation-css.cjs +4 -4
  95. package/cjs/src_tokens_web_components_page-right-nav_page-right-nav_json.foundation-css.cjs +4 -4
  96. package/cjs/src_tokens_web_components_page-top-nav_page-top-nav_json.foundation-css.cjs +3 -3
  97. package/cjs/src_tokens_web_components_pagination_pagination_json.foundation-css.cjs +3 -3
  98. package/cjs/src_tokens_web_components_panel_panel_json.foundation-css.cjs +3 -3
  99. package/cjs/src_tokens_web_components_picture_picture_json.foundation-css.cjs +3 -3
  100. package/cjs/src_tokens_web_components_popover_popover_json.foundation-css.cjs +4 -4
  101. package/cjs/src_tokens_web_components_progress-bar_progress-bar_json.foundation-css.cjs +3 -3
  102. package/cjs/src_tokens_web_components_progress-circle_progress-circle_json.foundation-css.cjs +4 -4
  103. package/cjs/src_tokens_web_components_radioset_radioset_json.foundation-css.cjs +3 -3
  104. package/cjs/src_tokens_web_components_rating_rating_json.foundation-css.cjs +4 -4
  105. package/cjs/src_tokens_web_components_richtext-editor_richtext-editor_json.foundation-css.cjs +3 -3
  106. package/cjs/src_tokens_web_components_scrollbar_scrollbar_json.foundation-css.cjs +3 -3
  107. package/cjs/src_tokens_web_components_search_search_json.foundation-css.cjs +3 -3
  108. package/cjs/src_tokens_web_components_slider_slider_json.foundation-css.cjs +14 -0
  109. package/cjs/src_tokens_web_components_spinner_spinner_json.foundation-css.cjs +3 -3
  110. package/cjs/src_tokens_web_components_switch_switch_json.foundation-css.cjs +4 -4
  111. package/cjs/src_tokens_web_components_tabs_tabs_json.foundation-css.cjs +4 -4
  112. package/cjs/src_tokens_web_components_tile_tile_json.foundation-css.cjs +3 -3
  113. package/cjs/src_tokens_web_components_time_time_json.foundation-css.cjs +3 -3
  114. package/cjs/src_tokens_web_components_toast_toast_json.foundation-css.cjs +3 -3
  115. package/cjs/src_tokens_web_components_toggle_toggle_json.foundation-css.cjs +3 -3
  116. package/cjs/src_tokens_web_components_video_video_json.foundation-css.cjs +3 -3
  117. package/cjs/src_tokens_web_components_wizard_wizard_json.foundation-css.cjs +3 -3
  118. package/foundation/foundation.css +668 -179
  119. package/foundation/foundation.min.css +1 -1
  120. package/native_mobile.index.d.ts +25 -0
  121. package/native_mobile.index.js +29 -3
  122. package/native_mobile.index.js.map +1 -1
  123. package/npm-shrinkwrap.json +359 -49
  124. package/package-lock.json +359 -49
  125. package/package.json +8 -7
  126. package/src/styles/mobile/components/advanced/carousel.less +10 -0
  127. package/src/styles/mobile/components/advanced/webview.less +6 -2
  128. package/src/styles/mobile/components/basic/anchor.less +2 -2
  129. package/src/styles/mobile/components/basic/bottomsheet.less +6 -0
  130. package/src/styles/mobile/components/basic/button.less +17 -5
  131. package/src/styles/mobile/components/basic/label.less +150 -15
  132. package/src/styles/mobile/components/basic/lottie.less +6 -3
  133. package/src/styles/mobile/components/basic/search.less +21 -2
  134. package/src/styles/mobile/components/container/panel/panel-footer.less +13 -1
  135. package/src/styles/mobile/components/container/panel.less +31 -34
  136. package/src/styles/mobile/components/container/tabs.less +1 -0
  137. package/src/styles/mobile/components/container.less +16 -4
  138. package/src/styles/mobile/components/data/card.less +4 -1
  139. package/src/styles/mobile/components/data/form.less +72 -27
  140. package/src/styles/mobile/components/data/list.less +10 -45
  141. package/src/styles/mobile/components/device/camera.less +4 -3
  142. package/src/styles/mobile/components/dialogs/dialog.less +56 -12
  143. package/src/styles/mobile/components/input/toggle.less +2 -0
  144. package/src/styles/mobile/components/navigation/appnavbar.less +12 -4
  145. package/src/styles/mobile/components/navigation/navitem.less +78 -17
  146. package/src/styles/mobile/components/navigation/popover.less +19 -4
  147. package/src/styles/mobile/components/page/tabbar.less +13 -2
  148. package/src/styles/mobile/components/tokens.light.css +192 -374
  149. package/src/styles/mobile/components/variables/carousel.variant.less +8 -0
  150. package/src/styles/mobile/components/variables/container.variant.less +26 -3
  151. package/src/styles/mobile/components/variables/form-controls.variant.less +8 -2
  152. package/src/styles/mobile/components/variables/label.variant.less +35 -4
  153. package/src/styles/mobile/components/variables/navitem.variant.less +14 -0
  154. package/src/styles/mobile/components/variables/toggle.variant.less +8 -0
  155. package/src/styles/mobile/studio/advanced/styles.less +1 -0
  156. package/src/styles/mobile/studio/advanced/webview.less +7 -0
  157. package/src/styles/mobile/studio/basic/label.less +22 -7
  158. package/src/styles/mobile/studio/basic/picture.less +6 -0
  159. package/src/styles/mobile/studio/basic/search.less +8 -0
  160. package/src/styles/mobile/studio/container/container.less +10 -3
  161. package/src/styles/mobile/studio/container/linearlayout.less +8 -0
  162. package/src/styles/mobile/studio/container/panel.less +3 -7
  163. package/src/styles/mobile/studio/container/styles.less +2 -1
  164. package/src/styles/mobile/studio/container/tabs.less +2 -1
  165. package/src/styles/mobile/studio/data/list.less +22 -0
  166. package/src/styles/mobile/studio/dialogs/base-dialog.less +152 -3
  167. package/src/styles/mobile/studio/input/form.less +61 -26
  168. package/src/styles/mobile/studio/layouts/appnavbar.less +11 -4
  169. package/src/styles/mobile/studio/layouts/page-content.less +1 -1
  170. package/src/styles/mobile/studio/layouts/tabbar.less +10 -2
  171. package/src/styles/mobile/studio/navigation/nav.less +19 -1
  172. package/src/styles/mobile/studio/navigation/popover.less +32 -1
  173. package/src/tokens/mobile/components/accordion/accordion.json +0 -28
  174. package/src/tokens/mobile/components/anchor/anchor.json +18 -0
  175. package/src/tokens/mobile/components/bottomsheet/bottomsheet.json +39 -5
  176. package/src/tokens/mobile/components/button/button.json +1 -3
  177. package/src/tokens/mobile/components/camera/camera.json +34 -8
  178. package/src/tokens/mobile/components/cards/cards.json +34 -8
  179. package/src/tokens/mobile/components/carousel/carousel.json +74 -2
  180. package/src/tokens/mobile/components/container/container.json +142 -12
  181. package/src/tokens/mobile/components/form-controls/form-controls.json +200 -56
  182. package/src/tokens/mobile/components/label/label.json +219 -21
  183. package/src/tokens/mobile/components/list/list.json +45 -135
  184. package/src/tokens/mobile/components/lottie/lottie.json +40 -7
  185. package/src/tokens/mobile/components/modal-dialog/modal-dialog.json +116 -54
  186. package/src/tokens/mobile/components/nav/nav.json +38 -83
  187. package/src/tokens/mobile/components/navbar/navbar.json +61 -0
  188. package/src/tokens/mobile/components/navitem/navitem.json +521 -0
  189. package/src/tokens/mobile/components/panel/panel.json +26 -60
  190. package/src/tokens/mobile/components/panel-footer/panel-footer.json +116 -0
  191. package/src/tokens/mobile/components/popover/popover.json +102 -18
  192. package/src/tokens/mobile/components/search/search.json +133 -9
  193. package/src/tokens/mobile/components/tabbar/tabbar.json +29 -11
  194. package/src/tokens/mobile/components/toggle/toggle.json +68 -0
  195. package/src/tokens/mobile/components/webview/webview.json +45 -4
  196. package/src/tokens/mobile/global/box-shadow/box-shadow.json +6 -0
  197. package/src/tokens/mobile/global/font/font.json +33 -0
  198. package/src/tokens/mobile/global/opacity/opacity.json +2 -3
  199. package/src/tokens/web/components/button/button.json +1 -1
  200. package/src/tokens/web/components/calendar/Token.Readme.md +55 -22
  201. package/src/tokens/web/components/calendar/calendar.json +422 -152
  202. package/src/tokens/web/components/cards/cards.json +5 -5
  203. package/src/tokens/web/components/checkbox/Token.Readme.md +1 -0
  204. package/src/tokens/web/components/checkbox/checkbox.json +8 -0
  205. package/src/tokens/web/components/data-table/data-table.json +27 -2
  206. package/src/tokens/web/components/dropdown-menu/dropdown-menu.json +2 -2
  207. package/src/tokens/web/components/form-controls/Token.Readme.md +1 -0
  208. package/src/tokens/web/components/form-controls/form-controls.json +19 -2
  209. package/src/tokens/web/components/iconbutton-toggleable/Readme.md +17 -0
  210. package/src/tokens/web/components/iconbutton-toggleable/Token.Readme.md +19 -0
  211. package/src/tokens/web/components/iconbutton-toggleable/iconbutton-toggleable.json +557 -0
  212. package/src/tokens/web/components/page-content/page-content.json +1 -1
  213. package/src/tokens/web/components/page-left-nav/page-left-nav.json +1 -1
  214. package/src/tokens/web/components/page-right-nav/Readme.md +4 -4
  215. package/src/tokens/web/components/page-right-nav/page-right-nav.json +4 -4
  216. package/src/tokens/web/components/popover/Token.Readme.md +3 -2
  217. package/src/tokens/web/components/popover/popover.json +26 -16
  218. package/src/tokens/web/components/progress-circle/Token.Readme.md +6 -1
  219. package/src/tokens/web/components/progress-circle/progress-circle.json +40 -0
  220. package/src/tokens/web/components/rating/rating.json +2 -2
  221. package/src/tokens/web/components/slider/Token.Readme.md +24 -0
  222. package/src/tokens/web/components/slider/slider.json +153 -0
  223. package/src/tokens/web/components/switch/switch.json +1 -1
  224. package/src/tokens/web/components/tabs/Token.Readme.md +4 -0
  225. package/src/tokens/web/components/tabs/tabs.json +33 -1
  226. package/src/tokens/web/global/elevation/elevation.json +5 -5
  227. package/src/utils/style-dictionary-utils.js +25 -40
  228. package/src/utils/style-dictionary-utils.js.map +1 -1
  229. package/web.index.js +21 -2
  230. package/web.index.js.map +1 -1
  231. package/cjs/src_tokens_mobile_components_page-layout_page-layout_json.foundation-css.cjs +0 -14
  232. package/cjs/src_tokens_mobile_components_pagination_pagination_json.foundation-css.cjs +0 -14
  233. package/cjs/src_tokens_mobile_components_richtext-editor_richtext-editor_json.foundation-css.cjs +0 -14
  234. package/src/tokens/mobile/components/page-layout/page-layout.json +0 -738
  235. package/src/tokens/mobile/components/pagination/pagination.json +0 -250
  236. package/src/tokens/mobile/components/richtext-editor/richtext-editor.json +0 -546
@@ -0,0 +1,521 @@
1
+ {
2
+ "navitem": {
3
+ "meta": {
4
+ "mapping": {
5
+ "selector": {
6
+ "mobile": ".app-navitem"
7
+ },
8
+ "states": {
9
+ "active": {
10
+ "selector": {
11
+ "mobile": "-active,.app-navitem-active.app-navitem-anchor"
12
+ }
13
+ }
14
+ }
15
+ }
16
+ },
17
+ "mapping": {
18
+ "background": {
19
+ "value": "{color.surface.container.lowest.@.value}",
20
+ "type": "color",
21
+ "attributes": {
22
+ "subtype": "color",
23
+ "description": "Sets the background color of navigation items (individual menu items in navigation menus). This is the main background color that appears behind each navigation item.<br>CSS variable: --wm-nav-item-background"
24
+ }
25
+ },
26
+ "font-size": {
27
+ "value": "{label.large.font-size.value}",
28
+ "type": "font",
29
+ "attributes": {
30
+ "subtype": "font-size",
31
+ "description": "Controls the size of navigation item text (the text that appears in each navigation menu item). This affects how large the navigation text appears.<br>CSS variable: --wm-nav-item-font-size"
32
+ }
33
+ },
34
+ "font-family": {
35
+ "value": "{label.large.font-family.value}",
36
+ "type": "font",
37
+ "attributes": {
38
+ "subtype": "font-family",
39
+ "description": "Sets the typeface (font style) for navigation item text. This determines whether the navigation text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-nav-item-font-family"
40
+ }
41
+ },
42
+ "font-weight": {
43
+ "value": "{font.weight.600.value}",
44
+ "type": "font",
45
+ "attributes": {
46
+ "subtype": "font-weight",
47
+ "description": "Controls how thick or bold navigation item text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-nav-item-font-weight"
48
+ }
49
+ },
50
+ "line-height": {
51
+ "value": "{label.large.line-height.value}",
52
+ "type": "font",
53
+ "attributes": {
54
+ "subtype": "line-height",
55
+ "description": "Controls the vertical spacing between lines when navigation item text wraps to multiple lines. This ensures proper spacing for the navigation text.<br>CSS variable: --wm-nav-item-line-height"
56
+ }
57
+ },
58
+ "letter-spacing": {
59
+ "value": "{label.large.letter-spacing.value}",
60
+ "type": "font",
61
+ "attributes": {
62
+ "subtype": "letter-spacing",
63
+ "description": "Controls the horizontal spacing between individual letters in navigation item text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-nav-item-letter-spacing"
64
+ }
65
+ },
66
+ "color": {
67
+ "value": "{color.on-secondary.fixed.@.value}",
68
+ "type": "color",
69
+ "attributes": {
70
+ "subtype": "color",
71
+ "description": "Sets the text color of navigation items (individual menu items in navigation menus). This determines what color the navigation text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-nav-item-color"
72
+ }
73
+ },
74
+ "icon": {
75
+ "size": {
76
+ "value": "{icon.size.@.value}",
77
+ "type": "space",
78
+ "attributes": {
79
+ "subtype": "icon-size",
80
+ "description": "Controls the size of icons within navigation items. This ensures icons are appropriately sized relative to the navigation text for visual balance.<br>CSS variable: --wm-nav-item-icon-size"
81
+ }
82
+ },
83
+ "color": {
84
+ "value": "{color.on-secondary.container.@.value}",
85
+ "type": "color",
86
+ "attributes": {
87
+ "subtype": "color",
88
+ "description": "Sets the icon color of navigation items (individual menu items in navigation menus). This determines what color the navigation icon appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-nav-item-icon-color"
89
+ }
90
+ },
91
+ "padding": {
92
+ "left": {
93
+ "value": "{space.0.value}",
94
+ "type": "space",
95
+ "attributes": {
96
+ "subtype": "space",
97
+ "description": "Controls the left padding of the icon in navigation items. This creates breathing room on the left side of the icon. Acceptable units: px.<br>CSS variable: --wm-nav-item-icon-padding-left"
98
+ }
99
+ },
100
+ "right": {
101
+ "value": "{space.0.value}",
102
+ "type": "space",
103
+ "attributes": {
104
+ "subtype": "space",
105
+ "description": "Controls the right padding of the icon in navigation items. This creates breathing room on the right side of the icon. Acceptable units: px.<br>CSS variable: --wm-nav-item-icon-padding-right"
106
+ }
107
+ },
108
+ "top": {
109
+ "value": "{space.0.value}",
110
+ "type": "space",
111
+ "attributes": {
112
+ "subtype": "space",
113
+ "description": "Controls the top padding of the icon in navigation items. This creates breathing room on the top side of the icon. Acceptable units: px.<br>CSS variable: --wm-nav-item-icon-padding-top"
114
+ }
115
+ },
116
+ "bottom": {
117
+ "value": "{space.0.value}",
118
+ "type": "space",
119
+ "attributes": {
120
+ "subtype": "space",
121
+ "description": "Controls the bottom padding of the icon in navigation items. This creates breathing room on the bottom side of the icon. Acceptable units: px.<br>CSS variable: --wm-nav-item-icon-padding-bottom"
122
+ }
123
+ }
124
+ }
125
+ },
126
+ "padding": {
127
+ "left": {
128
+ "type": "space",
129
+ "value": "{space.4.value}",
130
+ "attributes": {
131
+ "subtype": "space",
132
+ "description": "Controls the left padding (horizontal spacing) inside navigation items. This creates breathing room on the left side of the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-left"
133
+ }
134
+ },
135
+ "right": {
136
+ "type": "space",
137
+ "value": "{space.4.value}",
138
+ "attributes": {
139
+ "subtype": "space",
140
+ "description": "Controls the right padding (horizontal spacing) inside navigation items. This creates breathing room on the right side of the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-right"
141
+ }
142
+ },
143
+ "top": {
144
+ "type": "space",
145
+ "value": "{space.4.value}",
146
+ "attributes": {
147
+ "subtype": "space",
148
+ "description": "Controls the top padding (vertical spacing) inside navigation items. This creates breathing room above the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-top"
149
+ }
150
+ },
151
+ "bottom": {
152
+ "type": "space",
153
+ "value": "{space.4.value}",
154
+ "attributes": {
155
+ "subtype": "space",
156
+ "description": "Controls the bottom padding (vertical spacing) inside navigation items. This creates breathing room below the navigation item content. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-bottom"
157
+ }
158
+ }
159
+ },
160
+ "margin": {
161
+ "left": {
162
+ "type": "space",
163
+ "value": "{space.3.value}",
164
+ "attributes": {
165
+ "subtype": "space",
166
+ "description": "Controls the left margin (horizontal spacing) around navigation items. This creates spacing between the navigation item and the panel edges. Acceptable units: px.<br>CSS variable: --wm-nav-item-margin-left"
167
+ }
168
+ },
169
+ "right": {
170
+ "type": "space",
171
+ "value": "{space.3.value}",
172
+ "attributes": {
173
+ "subtype": "space",
174
+ "description": "Controls the right margin (horizontal spacing) around navigation items. This creates spacing between the navigation item and the panel edges. Acceptable units: px.<br>CSS variable: --wm-nav-item-margin-right"
175
+ }
176
+ },
177
+ "top": {
178
+ "type": "space",
179
+ "value": "{space.0.value}",
180
+ "attributes": {
181
+ "subtype": "space",
182
+ "description": "Controls the top margin (vertical spacing) around navigation items. This creates spacing above the navigation item. Acceptable units: px.<br>CSS variable: --wm-nav-item-margin-top"
183
+ }
184
+ },
185
+ "bottom": {
186
+ "type": "space",
187
+ "value": "{space.0.value}",
188
+ "attributes": {
189
+ "subtype": "space",
190
+ "description": "Controls the bottom margin (vertical spacing) around navigation items. This creates spacing below the navigation item. Acceptable units: px.<br>CSS variable: --wm-nav-item-margin-bottom"
191
+ }
192
+ }
193
+ },
194
+ "border": {
195
+ "radius": {
196
+ "value": "{radius.pill.value}",
197
+ "type": "radius",
198
+ "attributes": {
199
+ "subtype": "border",
200
+ "description": "Controls the border radius of navigation items. This creates rounded corners for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-border-radius"
201
+ }
202
+ }
203
+ },
204
+ "badge": {
205
+ "margin": {
206
+ "left": {
207
+ "value": "{space.0.value}",
208
+ "type": "space",
209
+ "attributes": {
210
+ "subtype": "space",
211
+ "description": "Controls the left margin of the badge within navigation items. This creates spacing between the badge and the navigation text. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-margin-left"
212
+ }
213
+ },
214
+ "right": {
215
+ "value": "{space.1.value}",
216
+ "type": "space",
217
+ "attributes": {
218
+ "subtype": "space",
219
+ "description": "Controls the right margin of the badge within navigation items. This creates spacing between the badge and the navigation text. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-margin-right"
220
+ }
221
+ },
222
+ "top": {
223
+ "value": "{space.0.value}",
224
+ "type": "space",
225
+ "attributes": {
226
+ "subtype": "space",
227
+ "description": "Controls the top margin of the badge within navigation items. This creates spacing above the badge. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-margin-top"
228
+ }
229
+ },
230
+ "bottom": {
231
+ "value": "{space.0.value}",
232
+ "type": "space",
233
+ "attributes": {
234
+ "subtype": "space",
235
+ "description": "Controls the bottom margin of the badge within navigation items. This creates spacing below the badge. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-margin-bottom"
236
+ }
237
+ }
238
+ },
239
+ "background": {
240
+ "value": "{color.secondary.fixed.dim.value}",
241
+ "type": "color",
242
+ "attributes": {
243
+ "subtype": "color",
244
+ "description": "Sets the background color of the badge within navigation items. This is the background color for the badge element.<br>CSS variable: --wm-nav-item-badge-background"
245
+ }
246
+ },
247
+ "text-align": {
248
+ "value": "center",
249
+ "type": "font",
250
+ "attributes": {
251
+ "description": "Sets the horizontal alignment of text within navigation items. This controls how the text is positioned horizontally within the navigation item.<br>CSS variable: --wm-nav-item-badge-text-align"
252
+ }
253
+ },
254
+ "align-self": {
255
+ "value": "unset",
256
+ "type": "other",
257
+ "attributes": {
258
+ "subtype": "other",
259
+ "description": "Sets the alignment of the navigation item along the cross axis. This controls how the item is aligned vertically within its container.<br>CSS variable: --wm-nav-item-badge-align-self"
260
+ }
261
+ },
262
+ "font": {
263
+ "size": {
264
+ "value": "{label.large.font-size.value}",
265
+ "type": "font",
266
+ "attributes": {
267
+ "subtype": "font-size",
268
+ "description": "Controls the size of navigation item badge text (the text that appears in each navigation menu item). This affects how large the navigation text appears.<br>CSS variable: --wm-nav-item-badge-font-size"
269
+ }
270
+ },
271
+ "family": {
272
+ "value": "{label.large.font-family.value}",
273
+ "type": "font",
274
+ "attributes": {
275
+ "subtype": "font-family",
276
+ "description": "Sets the typeface (font style) for navigation item text. This determines whether the navigation text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-nav-item-font-family"
277
+ }
278
+ },
279
+ "weight": {
280
+ "value": "{font.weight.600.value}",
281
+ "type": "font",
282
+ "attributes": {
283
+ "subtype": "font-weight",
284
+ "description": "Controls the weight of navigation item badge text (the text that appears in each navigation menu item). This affects how bold the navigation text appears.<br>CSS variable: --wm-nav-item-badge-font-weight"
285
+ }
286
+ }
287
+ },
288
+ "border": {
289
+ "radius": {
290
+ "value": "{radius.circle.value}",
291
+ "type": "radius",
292
+ "attributes": {
293
+ "subtype": "border",
294
+ "description": "Controls the border radius of navigation items. This creates rounded corners for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-border-radius"
295
+ }
296
+ }
297
+ },
298
+ "min": {
299
+ "width": {
300
+ "value": "{space.6.value}",
301
+ "type": "space",
302
+ "attributes": {
303
+ "subtype": "space",
304
+ "description": "Controls the minimum width of navigation items. This creates a minimum width for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-min-width"
305
+ }
306
+ },
307
+ "height": {
308
+ "value": "{space.6.value}",
309
+ "type": "space",
310
+ "attributes": {
311
+ "subtype": "space",
312
+ "description": "Controls the minimum height of navigation items. This creates a minimum height for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-min-height"
313
+ }
314
+ }
315
+ },
316
+ "line-height": {
317
+ "value": "{space.6.value}",
318
+ "type": "space",
319
+ "attributes": {
320
+ "subtype": "space",
321
+ "description": "Controls the line height of navigation items. This creates a line height for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-line-height"
322
+ }
323
+ },
324
+ "color": {
325
+ "value": "{color.on-secondary.fixed.@.value}",
326
+ "type": "color",
327
+ "attributes": {
328
+ "subtype": "color",
329
+ "description": "Controls the color of navigation items. This creates a color for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-color"
330
+ }
331
+ }
332
+ },
333
+ "text": {
334
+ "decoration": {
335
+ "value": "none",
336
+ "type": "font",
337
+ "attributes": {
338
+ "subtype": "font",
339
+ "description": "Controls the decoration of navigation items. This creates a decoration for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-text-decoration"
340
+ }
341
+ },
342
+ "padding": {
343
+ "left": {
344
+ "value": "{space.2.value}",
345
+ "type": "space",
346
+ "attributes": {
347
+ "subtype": "space",
348
+ "description": "Controls the left padding of navigation items. This creates a left padding for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-left"
349
+ }
350
+ },
351
+ "right": {
352
+ "value": "{space.2.value}",
353
+ "type": "space",
354
+ "attributes": {
355
+ "subtype": "space",
356
+ "description": "Controls the right padding of navigation items. This creates a right padding for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-right"
357
+ }
358
+ },
359
+ "top": {
360
+ "value": "{space.0.value}",
361
+ "type": "space",
362
+ "attributes": {
363
+ "subtype": "space",
364
+ "description": "Controls the top padding of navigation items. This creates a top padding for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-top"
365
+ }
366
+ },
367
+ "bottom": {
368
+ "value": "{space.0.value}",
369
+ "type": "space",
370
+ "attributes": {
371
+ "subtype": "space",
372
+ "description": "Controls the bottom padding of navigation items. This creates a bottom padding for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-padding-bottom"
373
+ }
374
+ }
375
+ },
376
+ "flex": {
377
+ "value": "1",
378
+ "type": "space",
379
+ "attributes": {
380
+ "subtype": "space",
381
+ "description": "Controls the flex of navigation items. This creates a flex for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-text-flex"
382
+ }
383
+ }
384
+ },
385
+ "child": {
386
+ "background": {
387
+ "color": {
388
+ "value": "{color.surface.container.lowest.@.value}",
389
+ "type": "color",
390
+ "attributes": {
391
+ "subtype": "color",
392
+ "description": "Sets the background color of the child navigation in navigation. This is the background color for the child navigation area.<br>CSS variable: --wm-nav-child-background"
393
+ }
394
+ }
395
+ },
396
+ "color": {
397
+ "value": "{color.on-secondary.fixed.@.value}",
398
+ "type": "color",
399
+ "attributes": {
400
+ "subtype": "color",
401
+ "description": "Sets the color of the child navigation in navigation. This is the color for the child navigation area.<br>CSS variable: --wm-nav-child-color"
402
+ }
403
+ }
404
+ },
405
+ "caret": {
406
+ "color": {
407
+ "value": "{color.on-secondary.fixed.@.value}",
408
+ "type": "color",
409
+ "attributes": {
410
+ "subtype": "color",
411
+ "description": "Sets the color of the caret in navigation. This is the color for the caret area.<br>CSS variable: --wm-nav-item-caret-color"
412
+ }
413
+ }
414
+ },
415
+ "states": {
416
+ "active": {
417
+ "color": {
418
+ "value": "{color.on-secondary.fixed.@.value}",
419
+ "type": "color",
420
+ "attributes": {
421
+ "subtype": "color",
422
+ "description": "Sets the text color of navigation items (individual menu items in navigation menus). This determines what color the navigation text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-nav-item-color"
423
+ }
424
+ },
425
+ "icon": {
426
+ "size": {
427
+ "value": "{icon.size.@.value}",
428
+ "type": "space",
429
+ "attributes": {
430
+ "subtype": "icon-size",
431
+ "description": "Controls the size of icons within navigation items. This ensures icons are appropriately sized relative to the navigation text for visual balance.<br>CSS variable: --wm-nav-item-icon-size"
432
+ }
433
+ },
434
+ "color": {
435
+ "value": "{color.on-secondary.container.@.value}",
436
+ "type": "color",
437
+ "attributes": {
438
+ "subtype": "color",
439
+ "description": "Sets the icon color of navigation items (individual menu items in navigation menus). This determines what color the navigation icon appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-nav-item-icon-color"
440
+ }
441
+ }
442
+ },
443
+ "border": {
444
+ "radius": {
445
+ "value": "{radius.pill.value}",
446
+ "type": "radius",
447
+ "attributes": {
448
+ "subtype": "border",
449
+ "description": "Controls the border radius of navigation items. This creates rounded corners for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-border-radius"
450
+ }
451
+ }
452
+ },
453
+ "background": {
454
+ "value": "{color.secondary.fixed.@.value}",
455
+ "type": "color",
456
+ "attributes": {
457
+ "subtype": "color",
458
+ "description": "Sets the background color of navigation items (individual menu items in navigation menus). This determines what color the navigation background appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-nav-item-background"
459
+ }
460
+ },
461
+ "badge": {
462
+ "font": {
463
+ "size": {
464
+ "value": "{label.large.font-size.value}",
465
+ "type": "font",
466
+ "attributes": {
467
+ "subtype": "font-size",
468
+ "description": "Controls the size of navigation item badge text (the text that appears in each navigation menu item). This affects how large the navigation text appears.<br>CSS variable: --wm-nav-item-badge-font-size"
469
+ }
470
+ },
471
+ "family": {
472
+ "value": "{label.large.font-family.value}",
473
+ "type": "font",
474
+ "attributes": {
475
+ "subtype": "font-family",
476
+ "description": "Sets the typeface (font style) for navigation item text. This determines whether the navigation text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-nav-item-font-family"
477
+ }
478
+ },
479
+ "weight": {
480
+ "value": "{font.weight.600.value}",
481
+ "type": "font",
482
+ "attributes": {
483
+ "subtype": "font-weight",
484
+ "description": "Controls the weight of navigation item badge text (the text that appears in each navigation menu item). This affects how bold the navigation text appears.<br>CSS variable: --wm-nav-item-badge-font-weight"
485
+ }
486
+ }
487
+ },
488
+ "border": {
489
+ "radius": {
490
+ "value": "{radius.circle.value}",
491
+ "type": "radius",
492
+ "attributes": {
493
+ "subtype": "border",
494
+ "description": "Controls the border radius of navigation items. This creates rounded corners for the navigation item container. Acceptable units: px.<br>CSS variable: --wm-nav-item-badge-border-radius"
495
+ }
496
+ }
497
+ },
498
+ "background": {
499
+ "value": "{color.secondary.fixed.dim.value}",
500
+ "type": "color",
501
+ "attributes": {
502
+ "subtype": "color",
503
+ "description": "Sets the background color of the badge within navigation items. This is the background color for the badge element.<br>CSS variable: --wm-nav-item-badge-background"
504
+ }
505
+ }
506
+ },
507
+ "caret": {
508
+ "color": {
509
+ "value": "{color.on-secondary.fixed.@.value}",
510
+ "type": "color",
511
+ "attributes": {
512
+ "subtype": "color",
513
+ "description": "Sets the color of the caret in navigation. This is the color for the caret area.<br>CSS variable: --wm-nav-item-caret-color"
514
+ }
515
+ }
516
+ }
517
+ }
518
+ }
519
+ }
520
+ }
521
+ }
@@ -170,12 +170,32 @@
170
170
  "description": "Controls the horizontal spacing between individual letters in panel heading text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-panel-heading-letter-spacing"
171
171
  }
172
172
  },
173
- "color": {
174
- "value": "{color.on-surface.@.value}",
175
- "type": "color",
176
- "attributes": {
177
- "subtype": "color",
178
- "description": "Sets the text color of panel headings (the title text that appears at the top of panels). This determines what color the heading text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-panel-heading-color"
173
+ "icon": {
174
+ "size": {
175
+ "value": "{icon.size.md.value}",
176
+ "type": "icon",
177
+ "attributes": {
178
+ "subtype": "size",
179
+ "description": "Controls the size of icons that appear in panel headings (the icon that appears next to the heading text). This determines what size the heading icon appears in.<br>CSS variable: --wm-panel-heading-icon-size"
180
+ }
181
+ },
182
+ "color": {
183
+ "value": "{color.on-surface.@.value}",
184
+ "type": "color",
185
+ "attributes": {
186
+ "subtype": "color",
187
+ "description": "Sets the color of icons that appear in panel headings (the icon that appears next to the heading text). This determines what color the heading icon appears in.<br>CSS variable: --wm-panel-heading-icon-color"
188
+ }
189
+ }
190
+ },
191
+ "text": {
192
+ "color": {
193
+ "value": "{color.on-surface.@.value}",
194
+ "type": "color",
195
+ "attributes": {
196
+ "subtype": "color",
197
+ "description": "Sets the text color of panel headings (the title text that appears at the top of panels). This determines what color the heading text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-panel-heading-text-color"
198
+ }
179
199
  }
180
200
  },
181
201
  "background": {
@@ -237,16 +257,6 @@
237
257
  }
238
258
  }
239
259
  },
240
- "actions": {
241
- "gap": {
242
- "value": "{space.2.value}",
243
- "type": "space",
244
- "attributes": {
245
- "subtype": "space",
246
- "description": "Controls the spacing between action buttons in panels (the gap between action buttons in the panel). This creates breathing room between buttons. Acceptable units: px.<br>CSS variable: --wm-panel-actions-gap"
247
- }
248
- }
249
- },
250
260
  "content": {
251
261
  "padding": {
252
262
  "value": "{space.4.value}",
@@ -256,50 +266,6 @@
256
266
  "description": "Controls the internal spacing inside panel content sections (the main content area of the panel). This creates breathing room around the panel content. Acceptable units: px.<br>CSS variable: --wm-panel-content-padding"
257
267
  }
258
268
  }
259
- },
260
- "footer": {
261
- "background": {
262
- "value": "{color.surface.@.value}",
263
- "type": "color",
264
- "attributes": {
265
- "subtype": "color",
266
- "description": "Controls the background color of the panel footer.<br>CSS variable: --wm-panel-footer-background"
267
- }
268
- },
269
- "padding": {
270
- "value": "{space.4.value}",
271
- "type": "space",
272
- "attributes": {
273
- "subtype": "space",
274
- "description": "Controls the internal spacing inside panel footers (the bottom section that contains action buttons or additional content). This creates breathing room around the footer content. Acceptable units: px.<br>CSS variable: --wm-panel-footer-padding"
275
- }
276
- },
277
- "border": {
278
- "color": {
279
- "value": "{color.outline.variant.value}",
280
- "type": "color",
281
- "attributes": {
282
- "subtype": "color",
283
- "description": "Sets the color of the border at the top of panel footers. This determines the color of the separator line between the footer and the panel content.<br>CSS variable: --wm-panel-footer-border-color"
284
- }
285
- },
286
- "width": {
287
- "value": "{border.width.base.value}",
288
- "type": "space",
289
- "attributes": {
290
- "subtype": "border-width",
291
- "description": "Controls the thickness of the border at the top of panel footers. This determines how thick the separator line appears between the footer and the panel content. Acceptable units: px.<br>CSS variable: --wm-panel-footer-border-width"
292
- }
293
- },
294
- "style": {
295
- "value": "{border.style.base.value}",
296
- "type": "radius",
297
- "attributes": {
298
- "subtype": "border-style",
299
- "description": "Controls the style of the border at the top of panel footers. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-panel-footer-border-style"
300
- }
301
- }
302
- }
303
269
  }
304
270
  },
305
271
  "appearances": {