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