@medyll/idae-slotui-svelte 0.119.0 → 0.121.0

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 (305) hide show
  1. package/README.md +47 -47
  2. package/dist/base/alert/Alert.demo.svelte +62 -62
  3. package/dist/base/alert/Alert.svelte +121 -121
  4. package/dist/base/alert/alert.scss +93 -93
  5. package/dist/base/avatar/Avatar.demo.svelte +41 -41
  6. package/dist/base/avatar/Avatar.preview.svelte +6 -6
  7. package/dist/base/avatar/Avatar.svelte +65 -65
  8. package/dist/base/avatar/avatar.scss +17 -17
  9. package/dist/base/backdrop/Backdrop.demo.svelte +49 -49
  10. package/dist/base/backdrop/Backdrop.svelte +78 -78
  11. package/dist/base/backdrop/backdrop.scss +34 -34
  12. package/dist/base/badge/Badge.svelte +31 -31
  13. package/dist/base/badge/badge.scss +19 -19
  14. package/dist/base/box/Box.demo.svelte +54 -54
  15. package/dist/base/box/Box.svelte +72 -72
  16. package/dist/base/box/box.scss +33 -33
  17. package/dist/base/breadCrumb/BreadCrumb.svelte +23 -23
  18. package/dist/base/breadCrumb/breadcrumb.scss +11 -11
  19. package/dist/base/cartouche/Cartouche.demo.svelte +108 -108
  20. package/dist/base/cartouche/Cartouche.svelte +114 -114
  21. package/dist/base/cartouche/cartouche.scss +114 -114
  22. package/dist/base/chipper/Chipper.demo.svelte +45 -45
  23. package/dist/base/chipper/Chipper.svelte +36 -36
  24. package/dist/base/chipper/chipper.scss +65 -65
  25. package/dist/base/columner/Column.svelte +62 -62
  26. package/dist/base/columner/Columner.demo.svelte +15 -15
  27. package/dist/base/columner/Columner.svelte +21 -21
  28. package/dist/base/contentSwitcher/ContentSwitcher.demo.svelte +45 -45
  29. package/dist/base/contentSwitcher/ContentSwitcher.svelte +63 -63
  30. package/dist/base/contentSwitcher/content-switcher.scss +22 -22
  31. package/dist/base/debug/Debug.svelte +21 -21
  32. package/dist/base/demoer/DemoPage.svelte +40 -40
  33. package/dist/base/demoer/Demoer.svelte +170 -170
  34. package/dist/base/demoer/DemoerCode.svelte +45 -45
  35. package/dist/base/demoer/DemoerComponent.svelte +50 -50
  36. package/dist/base/divider/Divider.demo.svelte +34 -34
  37. package/dist/base/divider/Divider.svelte +68 -68
  38. package/dist/base/divider/divider.scss +19 -19
  39. package/dist/base/icon/Icon.demo.svelte +24 -24
  40. package/dist/base/icon/Icon.svelte +117 -117
  41. package/dist/base/icon/icon.scss +17 -17
  42. package/dist/base/paper/Paper.demo.svelte +31 -31
  43. package/dist/base/paper/Paper.svelte +20 -20
  44. package/dist/base/paper/paper.scss +15 -15
  45. package/dist/base/titleBar/TitleBar.demo.svelte +30 -30
  46. package/dist/base/titleBar/TitleBar.svelte +40 -40
  47. package/dist/base/titleBar/title-bar.scss +29 -29
  48. package/dist/controls/autocomplete/AutoComplete.demo.svelte +88 -88
  49. package/dist/controls/autocomplete/AutoComplete.svelte +152 -152
  50. package/dist/controls/autocomplete/auto-complete.scss +15 -15
  51. package/dist/controls/button/Button.demo.svelte +165 -165
  52. package/dist/controls/button/Button.svelte +95 -95
  53. package/dist/controls/button/ButtonAction.svelte +55 -55
  54. package/dist/controls/button/ButtonMenu.svelte +55 -55
  55. package/dist/controls/button/IconButton.svelte +45 -45
  56. package/dist/controls/button/button-action.scss +8 -8
  57. package/dist/controls/button/button-menu.scss +36 -36
  58. package/dist/controls/button/button.scss +293 -293
  59. package/dist/controls/checkbox/Checkbox.demo.svelte +29 -29
  60. package/dist/controls/checkbox/Checkbox.svelte +59 -59
  61. package/dist/controls/checkbox/checkbox.scss +115 -115
  62. package/dist/controls/confirm/Confirm.demo.svelte +60 -60
  63. package/dist/controls/confirm/Confirm.preview.svelte +14 -14
  64. package/dist/controls/confirm/Confirm.svelte +156 -156
  65. package/dist/controls/confirm/confirm.scss +12 -12
  66. package/dist/controls/inplaceedit/InPlaceEdit.demo.svelte +41 -41
  67. package/dist/controls/inplaceedit/InPlaceEdit.svelte +109 -109
  68. package/dist/controls/progress/Progress.demo.svelte +30 -30
  69. package/dist/controls/progress/Progress.svelte +26 -26
  70. package/dist/controls/progress/progress.scss +23 -23
  71. package/dist/controls/rating/Rating.demo.svelte +45 -45
  72. package/dist/controls/rating/Rating.svelte +44 -44
  73. package/dist/controls/rating/rating.scss +9 -9
  74. package/dist/controls/select/Select.demo.svelte +101 -101
  75. package/dist/controls/select/Select.svelte +125 -125
  76. package/dist/controls/select/select.scss +13 -13
  77. package/dist/controls/slider/Slider.demo.svelte +34 -34
  78. package/dist/controls/slider/Slider.svelte +153 -153
  79. package/dist/controls/slider/slider.scss +51 -51
  80. package/dist/controls/stepper/Stepper.demo.svelte +32 -32
  81. package/dist/controls/stepper/Stepper.svelte +30 -30
  82. package/dist/controls/stepper/stepper.scss +23 -23
  83. package/dist/controls/switch/Switch.demo.svelte +61 -61
  84. package/dist/controls/switch/Switch.svelte +45 -45
  85. package/dist/controls/switch/switch.scss +73 -73
  86. package/dist/controls/textfield/TextField.demo.svelte +79 -79
  87. package/dist/controls/textfield/TextField.svelte +86 -86
  88. package/dist/controls/textfield/textfield.scss +68 -68
  89. package/dist/csss/csss.scss +10 -10
  90. package/dist/data/dataList/DataList.demo.svelte +151 -151
  91. package/dist/data/dataList/DataList.preview.svelte +23 -23
  92. package/dist/data/dataList/DataList.svelte +233 -233
  93. package/dist/data/dataList/DataListCell.svelte +212 -212
  94. package/dist/data/dataList/DataListHead.svelte +75 -75
  95. package/dist/data/dataList/DataListRow.svelte +93 -93
  96. package/dist/data/dataList/datalist.scss +157 -157
  97. package/dist/data/finder/Finder.demo.svelte +55 -55
  98. package/dist/data/finder/Finder.svelte +166 -166
  99. package/dist/data/finder/finder.scss +14 -14
  100. package/dist/data/grouper/Grouper.demo.svelte +36 -36
  101. package/dist/data/grouper/Grouper.svelte +85 -85
  102. package/dist/data/jsoner/Jsoner.svelte +40 -40
  103. package/dist/data/list/List.svelte +16 -16
  104. package/dist/data/list/ListItem.svelte +10 -10
  105. package/dist/data/list/ListTitle.svelte +8 -8
  106. package/dist/data/loader/Loader.demo.svelte +95 -95
  107. package/dist/data/loader/Loader.preview.svelte +7 -7
  108. package/dist/data/loader/Loader.svelte +99 -99
  109. package/dist/data/loader/loader.scss +50 -50
  110. package/dist/data/sorter/Sorter.demo.svelte +62 -62
  111. package/dist/data/sorter/Sorter.svelte +80 -80
  112. package/dist/data/sorter/Sorterer.svelte +27 -27
  113. package/dist/data/sorter/sorterer.scss +11 -11
  114. package/dist/index.d.ts +42 -43
  115. package/dist/index.js +42 -43
  116. package/dist/navigation/drawer/Drawer.demo.svelte +52 -52
  117. package/dist/navigation/drawer/Drawer.svelte +163 -163
  118. package/dist/navigation/drawer/drawer.scss +69 -69
  119. package/dist/navigation/tabs/Tabs.demo.svelte +83 -83
  120. package/dist/navigation/tabs/Tabs.preview.svelte +22 -22
  121. package/dist/navigation/tabs/Tabs.svelte +158 -158
  122. package/dist/navigation/tabs/tabs.scss +92 -92
  123. package/dist/slotui-css/alert.css +95 -95
  124. package/dist/slotui-css/alert.min.css +95 -95
  125. package/dist/slotui-css/auto-complete.css +11 -11
  126. package/dist/slotui-css/auto-complete.min.css +11 -11
  127. package/dist/slotui-css/avatar.css +12 -12
  128. package/dist/slotui-css/avatar.min.css +12 -12
  129. package/dist/slotui-css/backdrop.css +31 -31
  130. package/dist/slotui-css/backdrop.min.css +31 -31
  131. package/dist/slotui-css/badge.css +15 -15
  132. package/dist/slotui-css/badge.min.css +15 -15
  133. package/dist/slotui-css/boot-menu.css +76 -76
  134. package/dist/slotui-css/boot-menu.min.css +76 -76
  135. package/dist/slotui-css/box.css +28 -28
  136. package/dist/slotui-css/box.min.css +28 -28
  137. package/dist/slotui-css/breadcrumb.css +2 -2
  138. package/dist/slotui-css/breadcrumb.min.css +2 -2
  139. package/dist/slotui-css/button-action.css +7 -7
  140. package/dist/slotui-css/button-action.min.css +7 -7
  141. package/dist/slotui-css/button-menu.css +30 -30
  142. package/dist/slotui-css/button-menu.min.css +30 -30
  143. package/dist/slotui-css/button.css +760 -760
  144. package/dist/slotui-css/button.min.css +760 -760
  145. package/dist/slotui-css/cartouche.css +113 -113
  146. package/dist/slotui-css/cartouche.min.css +113 -113
  147. package/dist/slotui-css/checkbox.css +126 -126
  148. package/dist/slotui-css/checkbox.min.css +126 -126
  149. package/dist/slotui-css/chipper.css +55 -55
  150. package/dist/slotui-css/chipper.min.css +55 -55
  151. package/dist/slotui-css/chrome-frame.css +33 -33
  152. package/dist/slotui-css/chrome-frame.min.css +33 -33
  153. package/dist/slotui-css/confirm.css +8 -8
  154. package/dist/slotui-css/confirm.min.css +8 -8
  155. package/dist/slotui-css/containerConfig.css +6 -6
  156. package/dist/slotui-css/containerConfig.min.css +6 -6
  157. package/dist/slotui-css/content-switcher.css +20 -20
  158. package/dist/slotui-css/content-switcher.min.css +20 -20
  159. package/dist/slotui-css/csss.css +9 -9
  160. package/dist/slotui-css/csss.min.css +9 -9
  161. package/dist/slotui-css/datalist.css +135 -135
  162. package/dist/slotui-css/datalist.min.css +135 -135
  163. package/dist/slotui-css/divider.css +15 -15
  164. package/dist/slotui-css/divider.min.css +15 -15
  165. package/dist/slotui-css/drawer.css +87 -87
  166. package/dist/slotui-css/drawer.min.css +87 -87
  167. package/dist/slotui-css/finder.css +73 -73
  168. package/dist/slotui-css/finder.min.css +73 -73
  169. package/dist/slotui-css/frame.css +48 -48
  170. package/dist/slotui-css/frame.min.css +48 -48
  171. package/dist/slotui-css/icon.css +15 -15
  172. package/dist/slotui-css/icon.min.css +15 -15
  173. package/dist/slotui-css/loader.css +45 -45
  174. package/dist/slotui-css/loader.min.css +45 -45
  175. package/dist/slotui-css/marquee.css +57 -57
  176. package/dist/slotui-css/marquee.min.css +57 -57
  177. package/dist/slotui-css/menu-list.css +216 -216
  178. package/dist/slotui-css/menu-list.min.css +216 -216
  179. package/dist/slotui-css/menu.css +95 -95
  180. package/dist/slotui-css/menu.min.css +95 -95
  181. package/dist/slotui-css/panel.css +24 -24
  182. package/dist/slotui-css/panel.min.css +24 -24
  183. package/dist/slotui-css/paper.css +20 -20
  184. package/dist/slotui-css/paper.min.css +20 -20
  185. package/dist/slotui-css/popper.css +84 -84
  186. package/dist/slotui-css/popper.min.css +84 -84
  187. package/dist/slotui-css/progress.css +19 -19
  188. package/dist/slotui-css/progress.min.css +19 -19
  189. package/dist/slotui-css/rating.css +8 -8
  190. package/dist/slotui-css/rating.min.css +8 -8
  191. package/dist/slotui-css/select.css +10 -10
  192. package/dist/slotui-css/select.min.css +10 -10
  193. package/dist/slotui-css/sheetConfig.css +6 -6
  194. package/dist/slotui-css/sheetConfig.min.css +6 -6
  195. package/dist/slotui-css/slider.css +73 -73
  196. package/dist/slotui-css/slider.min.css +73 -73
  197. package/dist/slotui-css/slotui-css.css +4574 -4574
  198. package/dist/slotui-css/slotui-min-css.css +4574 -4574
  199. package/dist/slotui-css/slotui-sheet.css +294 -294
  200. package/dist/slotui-css/slotui-sheet.min.css +294 -294
  201. package/dist/slotui-css/sorterer.css +10 -10
  202. package/dist/slotui-css/sorterer.min.css +10 -10
  203. package/dist/slotui-css/stepper.css +19 -19
  204. package/dist/slotui-css/stepper.min.css +19 -19
  205. package/dist/slotui-css/stylesheet-container.css +373 -373
  206. package/dist/slotui-css/stylesheet-container.min.css +373 -373
  207. package/dist/slotui-css/stylesheet.css +370 -370
  208. package/dist/slotui-css/stylesheet.min.css +370 -370
  209. package/dist/slotui-css/switch.css +62 -62
  210. package/dist/slotui-css/switch.min.css +62 -62
  211. package/dist/slotui-css/tabs.css +84 -84
  212. package/dist/slotui-css/tabs.min.css +84 -84
  213. package/dist/slotui-css/taskbar.css +24 -24
  214. package/dist/slotui-css/taskbar.min.css +24 -24
  215. package/dist/slotui-css/textfield.css +127 -127
  216. package/dist/slotui-css/textfield.min.css +127 -127
  217. package/dist/slotui-css/title-bar.css +27 -27
  218. package/dist/slotui-css/title-bar.min.css +27 -27
  219. package/dist/slotui-css/toggle-bar.css +40 -40
  220. package/dist/slotui-css/toggle-bar.min.css +40 -40
  221. package/dist/slotui-css/toolbar.css +27 -27
  222. package/dist/slotui-css/toolbar.min.css +27 -27
  223. package/dist/slotui-css/tree.css +49 -49
  224. package/dist/slotui-css/tree.min.css +49 -49
  225. package/dist/slotui-css/window.css +59 -59
  226. package/dist/slotui-css/window.min.css +59 -59
  227. package/dist/styles/slotui-mixins.scss +168 -168
  228. package/dist/styles/slotui-presets.scss +56 -56
  229. package/dist/styles/slotuisheet/SlotuiSheet.svelte +36 -36
  230. package/dist/styles/slotuisheet/SlotyuiSheet.demo.svelte +28 -28
  231. package/dist/styles/slotuisheet/sheetConfig.scss +7 -7
  232. package/dist/styles/slotuisheet/slotui-sheet.scss +192 -192
  233. package/dist/styles/slotuisheet/stylesheet-container.scss +147 -147
  234. package/dist/styles/slotuisheet/stylesheet.scss +156 -156
  235. package/dist/types/slotui-ambient.d.ts +27 -27
  236. package/dist/ui/bootstrapp/BootStrApp.svelte +92 -92
  237. package/dist/ui/chromeFrame/ChromeFrame.svelte +43 -43
  238. package/dist/ui/chromeFrame/ChromeFrameButtonList.svelte +33 -33
  239. package/dist/ui/chromeFrame/ChromeFrameList.svelte +106 -106
  240. package/dist/ui/chromeFrame/chrome-frame.scss +34 -34
  241. package/dist/ui/frame/Frame.demo.svelte +48 -48
  242. package/dist/ui/frame/Frame.svelte +90 -90
  243. package/dist/ui/frame/frame.scss +46 -46
  244. package/dist/ui/login/Login.demo.svelte +62 -62
  245. package/dist/ui/login/Login.svelte +102 -102
  246. package/dist/ui/marquee/Marquee.demo.svelte +33 -33
  247. package/dist/ui/marquee/Marquee.svelte +97 -97
  248. package/dist/ui/marquee/marquee.scss +34 -34
  249. package/dist/ui/menu/Menu.svelte +9 -9
  250. package/dist/ui/menu/MenuItem.svelte +9 -9
  251. package/dist/ui/menu/MenuTitle.svelte +10 -10
  252. package/dist/ui/menu/menu.scss +61 -61
  253. package/dist/ui/menuList/MenuList.demo.svelte +73 -73
  254. package/dist/ui/menuList/MenuList.svelte +143 -143
  255. package/dist/ui/menuList/MenuListItem.svelte +134 -134
  256. package/dist/ui/menuList/MenuListTitle.svelte +10 -10
  257. package/dist/ui/menuList/menu-list.scss +120 -120
  258. package/dist/ui/panel/Panel.demo.svelte +169 -169
  259. package/dist/ui/panel/Panel.svelte +96 -96
  260. package/dist/ui/panel/PanelGrid.svelte +62 -62
  261. package/dist/ui/panel/PanelSlide.svelte +156 -156
  262. package/dist/ui/panel/Paneler.svelte +63 -63
  263. package/dist/ui/panel/panel.scss +32 -32
  264. package/dist/ui/popper/Popper.demo.svelte +92 -92
  265. package/dist/ui/popper/Popper.svelte +160 -160
  266. package/dist/ui/popper/popper.scss +108 -108
  267. package/dist/ui/preview/Preview.svelte +41 -41
  268. package/dist/ui/serviceBox/ServiceBox.svelte +24 -24
  269. package/dist/ui/startMenu/BootMenu.svelte +102 -102
  270. package/dist/ui/startMenu/boot-menu.scss +86 -86
  271. package/dist/ui/taskbar/TaskBarContent.svelte +20 -20
  272. package/dist/ui/taskbar/Taskbar.svelte +26 -26
  273. package/dist/ui/taskbar/taskbar.scss +28 -28
  274. package/dist/ui/themeswitcher/ThemeSwitcher.svelte +18 -18
  275. package/dist/ui/toast/Toast.demo.svelte +19 -19
  276. package/dist/ui/toast/Toast.svelte +60 -60
  277. package/dist/ui/toast/Toaster.svelte +18 -18
  278. package/dist/ui/toggleBar/ToggleBar.demo.svelte +114 -114
  279. package/dist/ui/toggleBar/ToggleBar.svelte +58 -58
  280. package/dist/ui/toggleBar/toggle-bar.scss +45 -45
  281. package/dist/ui/toolBar/ToolBar.demo.svelte +98 -98
  282. package/dist/ui/toolBar/ToolBar.svelte +30 -30
  283. package/dist/ui/toolBar/toolbar.scss +32 -32
  284. package/dist/ui/tree/Tree.demo.svelte +84 -84
  285. package/dist/ui/tree/Tree.preview.svelte +19 -19
  286. package/dist/ui/tree/Tree.svelte +182 -182
  287. package/dist/ui/tree/tree.scss +38 -38
  288. package/dist/ui/window/Window.demo.svelte +111 -111
  289. package/dist/ui/window/Window.svelte +177 -177
  290. package/dist/ui/window/window.scss +66 -66
  291. package/dist/utils/content/Content.svelte +78 -78
  292. package/dist/utils/contextRooter/ContextRooter.demo.svelte +33 -33
  293. package/dist/utils/contextRooter/ContextRooter.svelte +6 -6
  294. package/dist/utils/css/Css.demo.svelte +5 -5
  295. package/dist/utils/css/Css.svelte +64 -64
  296. package/dist/utils/effects/transitions.js +6 -6
  297. package/dist/utils/looper/Looper.demo.svelte +36 -36
  298. package/dist/utils/looper/Looper.svelte +47 -47
  299. package/dist/utils/slotted/Slotted.svelte +21 -21
  300. package/dist/utils/stylesheet/StyleSheet.demo.svelte +28 -28
  301. package/dist/utils/stylesheet/StyleSheet.svelte +30 -30
  302. package/dist/utils/stylesheet/containerConfig.scss +7 -7
  303. package/dist/utils/stylesheet/stylesheet.scss +147 -147
  304. package/dist/utils/uses/sx4u/sx4uPreprocess.js +34 -34
  305. package/package.json +3 -3
@@ -1,217 +1,217 @@
1
- :root {
2
- --menulist-padding: var(--sld-pad-tiny);
3
- --menulist-item-padding: 0;
4
- --menulist-item-radius: var(--sld-radius-small);
5
- --menulist-item-selected-background: var(--sld-selected-background-color);
6
- --menulist-item-action-display: flex;
7
- --menulist-item-action-justify-content: center;
8
- --menulist-grid-items-count: 0;
9
- }
10
-
11
- :global(.slotui-menulist) {
12
- margin: 0;
13
- cursor: pointer;
14
- display: flex;
15
- flex-direction: column;
16
- align-items: end;
17
- padding: var(--menulist-padding);
18
- }
19
- :global(.slotui-menulist).grid {
20
- display: grid;
21
- grid-template-columns: repeat(auto-fit, minmax(max(var(--grid-item-min-width), 100% / var(--grid-items-count)), 1fr));
22
- }
23
- :global(.slotui-menulist) li.menulist-title,
24
- :global(.slotui-menulist) a.menulist-title {
25
- font-weight: bold;
26
- }
27
-
28
- :global(.menulist-item)[variant*=square] {
29
- aspect-ratio: 1/1 !important;
30
- height: auto;
31
- }
32
- :global(.menulist-item)[variant*=rounded] {
33
- border-radius: 50%;
34
- }
35
- :global(.menulist-item) {
36
- width: var(--sld-width-small);
37
- }
38
- :global(.menulist-item) {
39
- --preset-width: var(--sld-width-small);
40
- }
41
- :global(.menulist-item)[width=tiny], :global(.menulist-item).width-tiny {
42
- --preset-width: var(--sld-width-tiny);
43
- width: var(--sld-width-tiny) !important;
44
- }
45
- :global(.menulist-item)[width=mini], :global(.menulist-item).width-mini {
46
- --preset-width: var(--sld-width-mini);
47
- width: var(--sld-width-mini) !important;
48
- }
49
- :global(.menulist-item)[width=small], :global(.menulist-item).width-small {
50
- --preset-width: var(--sld-width-small);
51
- width: var(--sld-width-small) !important;
52
- }
53
- :global(.menulist-item)[width=med], :global(.menulist-item).width-med {
54
- --preset-width: var(--sld-width-med);
55
- width: var(--sld-width-med) !important;
56
- }
57
- :global(.menulist-item)[width=kind], :global(.menulist-item).width-kind {
58
- --preset-width: var(--sld-width-kind);
59
- width: var(--sld-width-kind) !important;
60
- }
61
- :global(.menulist-item)[width=full], :global(.menulist-item).width-full {
62
- --preset-width: var(--sld-width-full);
63
- width: var(--sld-width-full) !important;
64
- }
65
- :global(.menulist-item)[width=auto], :global(.menulist-item).width-auto {
66
- --preset-width: var(--sld-width-auto);
67
- width: var(--sld-width-auto) !important;
68
- }
69
- :global(.menulist-item)[width=default], :global(.menulist-item).width-default {
70
- --preset-width: var(--sld-width-default);
71
- width: var(--sld-width-default) !important;
72
- }
73
- :global(.menulist-item) {
74
- min-height: var(--preset-tall-small);
75
- height: var(--preset-tall-small);
76
- }
77
- :global(.menulist-item) {
78
- --preset-tall: var(--sld-tall-small);
79
- }
80
- :global(.menulist-item)[tall=tiny], :global(.menulist-item).tall-tiny {
81
- min-height: var(--sld-tall-tiny) !important;
82
- }
83
- :global(.menulist-item)[tall=mini], :global(.menulist-item).tall-mini {
84
- min-height: var(--sld-tall-mini) !important;
85
- }
86
- :global(.menulist-item)[tall=small], :global(.menulist-item).tall-small {
87
- min-height: var(--sld-tall-small) !important;
88
- }
89
- :global(.menulist-item)[tall=med], :global(.menulist-item).tall-med {
90
- min-height: var(--sld-tall-med) !important;
91
- }
92
- :global(.menulist-item)[tall=kind], :global(.menulist-item).tall-kind {
93
- min-height: var(--sld-tall-kind) !important;
94
- }
95
- :global(.menulist-item)[tall=auto], :global(.menulist-item).tall-auto {
96
- min-height: var(--sld-tall-auto) !important;
97
- }
98
- :global(.menulist-item)[tall=default], :global(.menulist-item).tall-default {
99
- min-height: var(--sld-tall-default) !important;
100
- }
101
- :global(.menulist-item) {
102
- --preset-gutter: var(--sld-gutter-default);
103
- }
104
- :global(.menulist-item) [gutter=tiny], :global(.menulist-item) .gutter-tiny {
105
- padding: var(--sld-gutter-tiny);
106
- gap: var(--sld-gutter-tiny);
107
- --preset-gutter: var(--sld-gutter-tiny);
108
- }
109
- :global(.menulist-item) [gutter=mini], :global(.menulist-item) .gutter-mini {
110
- padding: var(--sld-gutter-mini);
111
- gap: var(--sld-gutter-mini);
112
- --preset-gutter: var(--sld-gutter-mini);
113
- }
114
- :global(.menulist-item) [gutter=small], :global(.menulist-item) .gutter-small {
115
- padding: var(--sld-gutter-small);
116
- gap: var(--sld-gutter-small);
117
- --preset-gutter: var(--sld-gutter-small);
118
- }
119
- :global(.menulist-item) [gutter=med], :global(.menulist-item) .gutter-med {
120
- padding: var(--sld-gutter-med);
121
- gap: var(--sld-gutter-med);
122
- --preset-gutter: var(--sld-gutter-med);
123
- }
124
- :global(.menulist-item) [gutter=kind], :global(.menulist-item) .gutter-kind {
125
- padding: var(--sld-gutter-kind);
126
- gap: var(--sld-gutter-kind);
127
- --preset-gutter: var(--sld-gutter-kind);
128
- }
129
- :global(.menulist-item) [gutter=default], :global(.menulist-item) .gutter-default {
130
- padding: var(--sld-gutter-default);
131
- gap: var(--sld-gutter-default);
132
- --preset-gutter: var(--sld-gutter-default);
133
- }
134
- :global(.menulist-item):hover {
135
- border-color: var(--sld-hover-border-color);
136
- background-color: var(--sld-background-disabled);
137
- }
138
- :global(.menulist-item).selected, :global(.menulist-item)[aria-selected=true] {
139
- border-color: none;
140
- background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
141
- box-shadow: var(--sld-selected-shadow);
142
- }
143
- :global(.menulist-item).selected .chip,
144
- :global(.menulist-item).selected .menuItemChip, :global(.menulist-item)[aria-selected=true] .chip,
145
- :global(.menulist-item)[aria-selected=true] .menuItemChip {
146
- position: absolute;
147
- min-height: 16px;
148
- height: 50%;
149
- width: 3px;
150
- background-color: var(--sld-color-primary);
151
- border-radius: var(--sld-radius-med);
152
- left: 0;
153
- border: 1px solid var(--sld-color-primary-alpha-mid);
154
- }
155
- :global(.menulist-item) {
156
- text-decoration: none;
157
- overflow: hidden;
158
- display: flex;
159
- align-items: center;
160
- position: relative;
161
- width: 100%;
162
- max-width: 100%;
163
- border: 1px solid transparent;
164
- border-radius: var(--menulist-item-radius);
165
- align-self: flex-start;
166
- }
167
- :global(.menulist-item)::before {
168
- position: absolute;
169
- min-height: 16px;
170
- height: 45%;
171
- width: 2px;
172
- overflow: hidden;
173
- max-width: 3px;
174
- background-color: transparent;
175
- border-radius: var(--sld-radius-med);
176
- left: 0px;
177
- border: 1px solid transparent;
178
- content: " ";
179
- }
180
- :global(.menulist-item) .menulist-item-icon {
181
- width: 16px;
182
- max-width: 16px;
183
- text-align: center;
184
- overflow: hidden;
185
- text-align: center;
186
- display: flex;
187
- justify-content: center;
188
- padding: 0 0.2rem;
189
- }
190
- :global(.menulist-item) .menulist-item-text {
191
- flex: 1;
192
- }
193
- :global(.menulist-item) .menulist-item-text.wrap {
194
- text-wrap: ellipsis;
195
- white-space: normal;
196
- overflow: hidden;
197
- }
198
- :global(.menulist-item) .menulist-item-text svg {
199
- display: inline-block;
200
- }
201
- :global(.menulist-item) .menulist-item-action {
202
- display: var(--menulist-item-action-display);
203
- justify-content: var(--menulist-item-action-justify-content);
204
- }
205
-
206
- :global(ul.menuList.showLastOnSelected) :global(li.menulist-item[aria-selected="true"] .menulist-item-action) {
207
- visibility: visible;
208
- }
209
- :global(ul.menuList.showLastOnSelected) :global(a.menulist-item[aria-selected="true"] .menulist-item-action) {
210
- visibility: visible;
211
- }
212
- :global(ul.menuList.showLastOnSelected) :global(li.menulist-item .menulist-item-action) {
213
- visibility: hidden;
214
- }
215
- :global(ul.menuList.showLastOnSelected) :global(a.menulist-item .menulist-item-action) {
216
- visibility: hidden;
1
+ :root {
2
+ --menulist-padding: var(--sld-pad-tiny);
3
+ --menulist-item-padding: 0;
4
+ --menulist-item-radius: var(--sld-radius-small);
5
+ --menulist-item-selected-background: var(--sld-selected-background-color);
6
+ --menulist-item-action-display: flex;
7
+ --menulist-item-action-justify-content: center;
8
+ --menulist-grid-items-count: 0;
9
+ }
10
+
11
+ :global(.slotui-menulist) {
12
+ margin: 0;
13
+ cursor: pointer;
14
+ display: flex;
15
+ flex-direction: column;
16
+ align-items: end;
17
+ padding: var(--menulist-padding);
18
+ }
19
+ :global(.slotui-menulist).grid {
20
+ display: grid;
21
+ grid-template-columns: repeat(auto-fit, minmax(max(var(--grid-item-min-width), 100% / var(--grid-items-count)), 1fr));
22
+ }
23
+ :global(.slotui-menulist) li.menulist-title,
24
+ :global(.slotui-menulist) a.menulist-title {
25
+ font-weight: bold;
26
+ }
27
+
28
+ :global(.menulist-item)[variant*=square] {
29
+ aspect-ratio: 1/1 !important;
30
+ height: auto;
31
+ }
32
+ :global(.menulist-item)[variant*=rounded] {
33
+ border-radius: 50%;
34
+ }
35
+ :global(.menulist-item) {
36
+ width: var(--sld-width-small);
37
+ }
38
+ :global(.menulist-item) {
39
+ --preset-width: var(--sld-width-small);
40
+ }
41
+ :global(.menulist-item)[width=tiny], :global(.menulist-item).width-tiny {
42
+ --preset-width: var(--sld-width-tiny);
43
+ width: var(--sld-width-tiny) !important;
44
+ }
45
+ :global(.menulist-item)[width=mini], :global(.menulist-item).width-mini {
46
+ --preset-width: var(--sld-width-mini);
47
+ width: var(--sld-width-mini) !important;
48
+ }
49
+ :global(.menulist-item)[width=small], :global(.menulist-item).width-small {
50
+ --preset-width: var(--sld-width-small);
51
+ width: var(--sld-width-small) !important;
52
+ }
53
+ :global(.menulist-item)[width=med], :global(.menulist-item).width-med {
54
+ --preset-width: var(--sld-width-med);
55
+ width: var(--sld-width-med) !important;
56
+ }
57
+ :global(.menulist-item)[width=kind], :global(.menulist-item).width-kind {
58
+ --preset-width: var(--sld-width-kind);
59
+ width: var(--sld-width-kind) !important;
60
+ }
61
+ :global(.menulist-item)[width=full], :global(.menulist-item).width-full {
62
+ --preset-width: var(--sld-width-full);
63
+ width: var(--sld-width-full) !important;
64
+ }
65
+ :global(.menulist-item)[width=auto], :global(.menulist-item).width-auto {
66
+ --preset-width: var(--sld-width-auto);
67
+ width: var(--sld-width-auto) !important;
68
+ }
69
+ :global(.menulist-item)[width=default], :global(.menulist-item).width-default {
70
+ --preset-width: var(--sld-width-default);
71
+ width: var(--sld-width-default) !important;
72
+ }
73
+ :global(.menulist-item) {
74
+ min-height: var(--preset-tall-small);
75
+ height: var(--preset-tall-small);
76
+ }
77
+ :global(.menulist-item) {
78
+ --preset-tall: var(--sld-tall-small);
79
+ }
80
+ :global(.menulist-item)[tall=tiny], :global(.menulist-item).tall-tiny {
81
+ min-height: var(--sld-tall-tiny) !important;
82
+ }
83
+ :global(.menulist-item)[tall=mini], :global(.menulist-item).tall-mini {
84
+ min-height: var(--sld-tall-mini) !important;
85
+ }
86
+ :global(.menulist-item)[tall=small], :global(.menulist-item).tall-small {
87
+ min-height: var(--sld-tall-small) !important;
88
+ }
89
+ :global(.menulist-item)[tall=med], :global(.menulist-item).tall-med {
90
+ min-height: var(--sld-tall-med) !important;
91
+ }
92
+ :global(.menulist-item)[tall=kind], :global(.menulist-item).tall-kind {
93
+ min-height: var(--sld-tall-kind) !important;
94
+ }
95
+ :global(.menulist-item)[tall=auto], :global(.menulist-item).tall-auto {
96
+ min-height: var(--sld-tall-auto) !important;
97
+ }
98
+ :global(.menulist-item)[tall=default], :global(.menulist-item).tall-default {
99
+ min-height: var(--sld-tall-default) !important;
100
+ }
101
+ :global(.menulist-item) {
102
+ --preset-gutter: var(--sld-gutter-default);
103
+ }
104
+ :global(.menulist-item) [gutter=tiny], :global(.menulist-item) .gutter-tiny {
105
+ padding: var(--sld-gutter-tiny);
106
+ gap: var(--sld-gutter-tiny);
107
+ --preset-gutter: var(--sld-gutter-tiny);
108
+ }
109
+ :global(.menulist-item) [gutter=mini], :global(.menulist-item) .gutter-mini {
110
+ padding: var(--sld-gutter-mini);
111
+ gap: var(--sld-gutter-mini);
112
+ --preset-gutter: var(--sld-gutter-mini);
113
+ }
114
+ :global(.menulist-item) [gutter=small], :global(.menulist-item) .gutter-small {
115
+ padding: var(--sld-gutter-small);
116
+ gap: var(--sld-gutter-small);
117
+ --preset-gutter: var(--sld-gutter-small);
118
+ }
119
+ :global(.menulist-item) [gutter=med], :global(.menulist-item) .gutter-med {
120
+ padding: var(--sld-gutter-med);
121
+ gap: var(--sld-gutter-med);
122
+ --preset-gutter: var(--sld-gutter-med);
123
+ }
124
+ :global(.menulist-item) [gutter=kind], :global(.menulist-item) .gutter-kind {
125
+ padding: var(--sld-gutter-kind);
126
+ gap: var(--sld-gutter-kind);
127
+ --preset-gutter: var(--sld-gutter-kind);
128
+ }
129
+ :global(.menulist-item) [gutter=default], :global(.menulist-item) .gutter-default {
130
+ padding: var(--sld-gutter-default);
131
+ gap: var(--sld-gutter-default);
132
+ --preset-gutter: var(--sld-gutter-default);
133
+ }
134
+ :global(.menulist-item):hover {
135
+ border-color: var(--sld-hover-border-color);
136
+ background-color: var(--sld-background-disabled);
137
+ }
138
+ :global(.menulist-item).selected, :global(.menulist-item)[aria-selected=true] {
139
+ border-color: none;
140
+ background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
141
+ box-shadow: var(--sld-selected-shadow);
142
+ }
143
+ :global(.menulist-item).selected .chip,
144
+ :global(.menulist-item).selected .menuItemChip, :global(.menulist-item)[aria-selected=true] .chip,
145
+ :global(.menulist-item)[aria-selected=true] .menuItemChip {
146
+ position: absolute;
147
+ min-height: 16px;
148
+ height: 50%;
149
+ width: 3px;
150
+ background-color: var(--sld-color-primary);
151
+ border-radius: var(--sld-radius-med);
152
+ left: 0;
153
+ border: 1px solid var(--sld-color-primary-alpha-mid);
154
+ }
155
+ :global(.menulist-item) {
156
+ text-decoration: none;
157
+ overflow: hidden;
158
+ display: flex;
159
+ align-items: center;
160
+ position: relative;
161
+ width: 100%;
162
+ max-width: 100%;
163
+ border: 1px solid transparent;
164
+ border-radius: var(--menulist-item-radius);
165
+ align-self: flex-start;
166
+ }
167
+ :global(.menulist-item)::before {
168
+ position: absolute;
169
+ min-height: 16px;
170
+ height: 45%;
171
+ width: 2px;
172
+ overflow: hidden;
173
+ max-width: 3px;
174
+ background-color: transparent;
175
+ border-radius: var(--sld-radius-med);
176
+ left: 0px;
177
+ border: 1px solid transparent;
178
+ content: " ";
179
+ }
180
+ :global(.menulist-item) .menulist-item-icon {
181
+ width: 16px;
182
+ max-width: 16px;
183
+ text-align: center;
184
+ overflow: hidden;
185
+ text-align: center;
186
+ display: flex;
187
+ justify-content: center;
188
+ padding: 0 0.2rem;
189
+ }
190
+ :global(.menulist-item) .menulist-item-text {
191
+ flex: 1;
192
+ }
193
+ :global(.menulist-item) .menulist-item-text.wrap {
194
+ text-wrap: ellipsis;
195
+ white-space: normal;
196
+ overflow: hidden;
197
+ }
198
+ :global(.menulist-item) .menulist-item-text svg {
199
+ display: inline-block;
200
+ }
201
+ :global(.menulist-item) .menulist-item-action {
202
+ display: var(--menulist-item-action-display);
203
+ justify-content: var(--menulist-item-action-justify-content);
204
+ }
205
+
206
+ :global(ul.menuList.showLastOnSelected) :global(li.menulist-item[aria-selected="true"] .menulist-item-action) {
207
+ visibility: visible;
208
+ }
209
+ :global(ul.menuList.showLastOnSelected) :global(a.menulist-item[aria-selected="true"] .menulist-item-action) {
210
+ visibility: visible;
211
+ }
212
+ :global(ul.menuList.showLastOnSelected) :global(li.menulist-item .menulist-item-action) {
213
+ visibility: hidden;
214
+ }
215
+ :global(ul.menuList.showLastOnSelected) :global(a.menulist-item .menulist-item-action) {
216
+ visibility: hidden;
217
217
  }