@ardium-ui/ui 5.0.0-alpha.7 → 5.0.0-alpha.71

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 (293) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +4707 -2272
  2. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  3. package/lib/_internal/boolean-component.d.ts +13 -1
  4. package/lib/_internal/disablable-component.d.ts +2 -1
  5. package/lib/_internal/focusable-component.d.ts +2 -1
  6. package/lib/_internal/form-field-component.d.ts +3 -2
  7. package/lib/_internal/item-storages/dropdown-item-storage.d.ts +19 -19
  8. package/lib/_internal/item-storages/simple-item-storage.d.ts +15 -12
  9. package/lib/_internal/item-storages/simplest-item-storage.d.ts +1 -1
  10. package/lib/_internal/ngmodel-component.d.ts +5 -8
  11. package/lib/_internal/selectable-list-component.d.ts +6 -6
  12. package/lib/_internal/utils/date.utils.d.ts +16 -0
  13. package/lib/badge/badge.directive.d.ts +3 -2
  14. package/lib/breakpoints/breakpoint.service.d.ts +12 -0
  15. package/lib/breakpoints/breakpoint.utils.d.ts +7 -0
  16. package/lib/breakpoints/breakpoints.d.ts +13 -0
  17. package/lib/breakpoints/index.d.ts +2 -0
  18. package/lib/buttons/_button-base.d.ts +12 -8
  19. package/lib/buttons/_button-base.defaults.d.ts +3 -2
  20. package/lib/buttons/button/button.component.d.ts +5 -5
  21. package/lib/buttons/button/button.defaults.d.ts +0 -2
  22. package/lib/buttons/button/button.directive.d.ts +17 -0
  23. package/lib/buttons/button/button.module.d.ts +3 -2
  24. package/lib/buttons/button/index.d.ts +1 -0
  25. package/lib/buttons/fab/fab.component.d.ts +3 -1
  26. package/lib/buttons/icon-button/icon-button.component.d.ts +6 -4
  27. package/lib/buttons/icon-button/icon-button.defaults.d.ts +2 -1
  28. package/lib/calendar/abstract-calendar.d.ts +128 -0
  29. package/lib/calendar/calendar.component.d.ts +8 -96
  30. package/lib/calendar/calendar.defaults.d.ts +16 -1
  31. package/lib/calendar/calendar.internal-directives.d.ts +24 -8
  32. package/lib/calendar/calendar.internal-types.d.ts +1 -0
  33. package/lib/calendar/calendar.module.d.ts +4 -9
  34. package/lib/calendar/calendar.types.d.ts +21 -5
  35. package/lib/calendar/index.d.ts +3 -0
  36. package/lib/calendar/range-calendar.component.d.ts +16 -0
  37. package/lib/calendar/range-calendar.directives.d.ts +51 -0
  38. package/lib/calendar/range-calendar.module.d.ts +10 -0
  39. package/lib/calendar/views/calendar-views.module.d.ts +13 -0
  40. package/lib/calendar/views/days-view/days-view.component.d.ts +20 -2
  41. package/lib/calendar/views/days-view/days-view.helpers.d.ts +2 -2
  42. package/lib/calendar/views/months-view/months-view.component.d.ts +15 -3
  43. package/lib/calendar/views/years-view/years-view.component.d.ts +16 -3
  44. package/lib/checkbox/checkbox.component.d.ts +5 -2
  45. package/lib/checkbox/checkbox.types.d.ts +2 -0
  46. package/lib/checkbox-list/checkbox-list.component.d.ts +9 -7
  47. package/lib/checkbox-list/checkbox-list.directives.d.ts +7 -0
  48. package/lib/checkbox-list/checkbox-list.module.d.ts +1 -1
  49. package/lib/chip/chip.component.d.ts +2 -1
  50. package/lib/chip/deletable-chip/deletable-chip.component.d.ts +2 -1
  51. package/lib/chip/selectable-chip/selectable-chip.component.d.ts +5 -2
  52. package/lib/dialog/dialog.component.d.ts +13 -8
  53. package/lib/dialog/dialog.types.d.ts +1 -0
  54. package/lib/divider/divider.component.d.ts +2 -3
  55. package/lib/divider/divider.defaults.d.ts +5 -0
  56. package/lib/divider/divider.directive.d.ts +18 -0
  57. package/lib/divider/divider.module.d.ts +3 -2
  58. package/lib/divider/divider.types.d.ts +5 -0
  59. package/lib/divider/index.d.ts +2 -0
  60. package/lib/dropdown-panel/dropdown-panel.component.d.ts +2 -1
  61. package/lib/dropdown-panel/dropdown-panel.types.d.ts +1 -1
  62. package/lib/file-inputs/file-input/file-input.component.d.ts +2 -1
  63. package/lib/file-inputs/file-input-base.d.ts +4 -5
  64. package/lib/form-field/auto-error/auto-error.component.d.ts +19 -0
  65. package/lib/form-field/auto-error/auto-error.provider.d.ts +7 -0
  66. package/lib/form-field/error/error.directive.d.ts +3 -2
  67. package/lib/form-field/form-field-base.d.ts +5 -2
  68. package/lib/form-field/form-field-child.token.d.ts +5 -5
  69. package/lib/form-field/form-field-native-inputs.d.ts +6 -11
  70. package/lib/form-field/form-field.component.d.ts +1 -1
  71. package/lib/form-field/form-field.defaults.d.ts +1 -0
  72. package/lib/form-field/form-field.module.d.ts +5 -4
  73. package/lib/form-field/hint/hint.directive.d.ts +3 -2
  74. package/lib/form-field/hint-error/hint-error.directive.d.ts +3 -2
  75. package/lib/form-field/horizontal-form-field.component.d.ts +1 -1
  76. package/lib/form-field/index.d.ts +4 -0
  77. package/lib/form-field/label/label.component.d.ts +3 -2
  78. package/lib/form-field-frame/form-field-frame.component.d.ts +5 -3
  79. package/lib/grid/grid.component.d.ts +51 -0
  80. package/lib/grid/grid.defaults.d.ts +16 -0
  81. package/lib/grid/grid.module.d.ts +7 -0
  82. package/lib/grid/grid.types.d.ts +38 -0
  83. package/lib/grid/grid.utils.d.ts +11 -0
  84. package/lib/grid/index.d.ts +4 -0
  85. package/lib/icon/icon.component.d.ts +2 -1
  86. package/lib/inputs/_simple-input-base.d.ts +6 -3
  87. package/lib/inputs/autocomplete-input/autocomplete-input.component.d.ts +5 -4
  88. package/lib/inputs/date-input/abstract-date-input.d.ts +112 -0
  89. package/lib/inputs/date-input/date-input.component.d.ts +19 -81
  90. package/lib/inputs/date-input/date-input.defaults.d.ts +21 -3
  91. package/lib/inputs/date-input/{date-input.directive.d.ts → date-input.directives.d.ts} +2 -2
  92. package/lib/inputs/date-input/date-input.module.d.ts +5 -4
  93. package/lib/inputs/date-input/date-input.serializers.d.ts +4 -2
  94. package/lib/inputs/date-input/date-input.types.d.ts +5 -4
  95. package/lib/inputs/date-input/date-range-input.component.d.ts +30 -0
  96. package/lib/inputs/date-input/date-range-input.directives.d.ts +82 -0
  97. package/lib/inputs/date-input/date-range-input.module.d.ts +17 -0
  98. package/lib/inputs/date-input/index.d.ts +7 -1
  99. package/lib/inputs/date-input/multipage-date-range-input.component.d.ts +45 -0
  100. package/lib/inputs/date-input/multipage-date-range-input.directives.d.ts +82 -0
  101. package/lib/inputs/date-input/multipage-date-range-input.module.d.ts +17 -0
  102. package/lib/inputs/digit-input/digit-input.component.d.ts +4 -3
  103. package/lib/inputs/hex-input/hex-input.component.d.ts +4 -3
  104. package/lib/inputs/input-utils.d.ts +13 -2
  105. package/lib/inputs/number-input/number-input.component.d.ts +20 -12
  106. package/lib/inputs/number-input/number-input.defaults.d.ts +6 -0
  107. package/lib/inputs/number-input/number-input.directives.d.ts +12 -0
  108. package/lib/inputs/number-input/number-input.module.d.ts +1 -1
  109. package/lib/inputs/number-input/number-input.types.d.ts +6 -0
  110. package/lib/inputs/password-input/password-input.component.d.ts +5 -3
  111. package/lib/kbd/kbd.component.d.ts +2 -1
  112. package/lib/kbd-shortcut/kbd-shortcut.component.d.ts +2 -1
  113. package/lib/modal/modal.component.d.ts +9 -6
  114. package/lib/modal/modal.defaults.d.ts +2 -0
  115. package/lib/option/option.component.d.ts +2 -1
  116. package/lib/progress-bar/progress-bar.component.d.ts +4 -3
  117. package/lib/progress-circle/progress-circle.component.d.ts +5 -4
  118. package/lib/search-functions.d.ts +1 -1
  119. package/lib/segment/segment.component.d.ts +6 -5
  120. package/lib/select/select.component.d.ts +40 -30
  121. package/lib/select/select.defaults.d.ts +10 -2
  122. package/lib/select/select.directive.d.ts +6 -0
  123. package/lib/select/select.module.d.ts +1 -1
  124. package/lib/select/select.types.d.ts +6 -2
  125. package/lib/select/select.utils.d.ts +2 -0
  126. package/lib/slide-toggle/slide-toggle.component.d.ts +2 -0
  127. package/lib/slider/abstract-slider.d.ts +35 -29
  128. package/lib/slider/index.d.ts +1 -0
  129. package/lib/slider/range-slider/range-slider.component.d.ts +13 -10
  130. package/lib/slider/range-slider/range-slider.types.d.ts +6 -0
  131. package/lib/slider/slider.component.d.ts +5 -4
  132. package/lib/slider/slider.types.d.ts +3 -3
  133. package/lib/star/rating-display/rating-display.component.d.ts +2 -1
  134. package/lib/star/rating-input/rating-input.component.d.ts +5 -3
  135. package/lib/star/rating-input/rating-input.defaults.d.ts +2 -2
  136. package/lib/star/star-button/star-button.component.d.ts +4 -1
  137. package/lib/star/star-button/star-button.types.d.ts +1 -0
  138. package/lib/tabber/index.d.ts +2 -1
  139. package/lib/tabber/tab/tab.component.d.ts +16 -8
  140. package/lib/tabber/tabber.component.d.ts +25 -9
  141. package/lib/tabber/tabber.defaults.d.ts +2 -0
  142. package/lib/tabber/tabber.directives.d.ts +9 -0
  143. package/lib/tabber/tabber.module.d.ts +3 -2
  144. package/lib/tabber/tabber.types.d.ts +5 -0
  145. package/lib/table/table.component.d.ts +16 -15
  146. package/lib/table-pagination/table-pagination.component.d.ts +4 -3
  147. package/lib/text-list/text-list.component.d.ts +2 -1
  148. package/lib/types/alignment.types.d.ts +7 -1
  149. package/lib/types/item-storage.types.d.ts +17 -18
  150. package/package.json +3 -2
  151. package/prebuilt-themes/default/badge.css +37 -15
  152. package/prebuilt-themes/default/badge.css.map +1 -1
  153. package/prebuilt-themes/default/buttons/button.css +74 -58
  154. package/prebuilt-themes/default/buttons/button.css.map +1 -1
  155. package/prebuilt-themes/default/buttons/fab.css +64 -51
  156. package/prebuilt-themes/default/buttons/fab.css.map +1 -1
  157. package/prebuilt-themes/default/buttons/icon-button.css +50 -44
  158. package/prebuilt-themes/default/buttons/icon-button.css.map +1 -1
  159. package/prebuilt-themes/default/calendar.css +131 -55
  160. package/prebuilt-themes/default/calendar.css.map +1 -1
  161. package/prebuilt-themes/default/card.css +56 -24
  162. package/prebuilt-themes/default/card.css.map +1 -1
  163. package/prebuilt-themes/default/checkbox-list.css +48 -22
  164. package/prebuilt-themes/default/checkbox-list.css.map +1 -1
  165. package/prebuilt-themes/default/checkbox.css +31 -58
  166. package/prebuilt-themes/default/checkbox.css.map +1 -1
  167. package/prebuilt-themes/default/chips.css +75 -43
  168. package/prebuilt-themes/default/chips.css.map +1 -1
  169. package/prebuilt-themes/default/color-display.css +15 -8
  170. package/prebuilt-themes/default/color-display.css.map +1 -1
  171. package/prebuilt-themes/default/core.css +21 -1
  172. package/prebuilt-themes/default/core.css.map +1 -1
  173. package/prebuilt-themes/default/dialog.css +7 -2
  174. package/prebuilt-themes/default/dialog.css.map +1 -1
  175. package/prebuilt-themes/default/divider.css +82 -6
  176. package/prebuilt-themes/default/divider.css.map +1 -1
  177. package/prebuilt-themes/default/dropdown-panel.css +16 -8
  178. package/prebuilt-themes/default/dropdown-panel.css.map +1 -1
  179. package/prebuilt-themes/default/file-drop-area.css +81 -35
  180. package/prebuilt-themes/default/file-drop-area.css.map +1 -1
  181. package/prebuilt-themes/default/form-field-frame.css +18 -14
  182. package/prebuilt-themes/default/form-field-frame.css.map +1 -1
  183. package/prebuilt-themes/default/form-field.css +62 -29
  184. package/prebuilt-themes/default/form-field.css.map +1 -1
  185. package/prebuilt-themes/default/inputs/autocomplete-input.css +79 -28
  186. package/prebuilt-themes/default/inputs/autocomplete-input.css.map +1 -1
  187. package/prebuilt-themes/default/inputs/color-input.css +5 -44
  188. package/prebuilt-themes/default/inputs/color-input.css.map +1 -1
  189. package/prebuilt-themes/default/inputs/date-input.css +97 -25
  190. package/prebuilt-themes/default/inputs/date-input.css.map +1 -1
  191. package/prebuilt-themes/default/inputs/digit-input.css +31 -19
  192. package/prebuilt-themes/default/inputs/digit-input.css.map +1 -1
  193. package/prebuilt-themes/default/inputs/file-input.css +117 -62
  194. package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
  195. package/prebuilt-themes/default/inputs/hex-input.css +55 -23
  196. package/prebuilt-themes/default/inputs/hex-input.css.map +1 -1
  197. package/prebuilt-themes/default/inputs/input.css +47 -18
  198. package/prebuilt-themes/default/inputs/input.css.map +1 -1
  199. package/prebuilt-themes/default/inputs/number-input.css +83 -33
  200. package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
  201. package/prebuilt-themes/default/inputs/password-input.css +74 -25
  202. package/prebuilt-themes/default/inputs/password-input.css.map +1 -1
  203. package/prebuilt-themes/default/kbd-shortcut.css +8 -4
  204. package/prebuilt-themes/default/kbd-shortcut.css.map +1 -1
  205. package/prebuilt-themes/default/kbd.css +19 -9
  206. package/prebuilt-themes/default/kbd.css.map +1 -1
  207. package/prebuilt-themes/default/modal.css +46 -22
  208. package/prebuilt-themes/default/modal.css.map +1 -1
  209. package/prebuilt-themes/default/progress-circle.css +13 -7
  210. package/prebuilt-themes/default/progress-circle.css.map +1 -1
  211. package/prebuilt-themes/default/radio.css +46 -28
  212. package/prebuilt-themes/default/radio.css.map +1 -1
  213. package/prebuilt-themes/default/segment.css +71 -61
  214. package/prebuilt-themes/default/segment.css.map +1 -1
  215. package/prebuilt-themes/default/select.css +78 -44
  216. package/prebuilt-themes/default/select.css.map +1 -1
  217. package/prebuilt-themes/default/slide-toggle.css +88 -37
  218. package/prebuilt-themes/default/slide-toggle.css.map +1 -1
  219. package/prebuilt-themes/default/slider.css +93 -52
  220. package/prebuilt-themes/default/slider.css.map +1 -1
  221. package/prebuilt-themes/default/snackbar.css +29 -16
  222. package/prebuilt-themes/default/snackbar.css.map +1 -1
  223. package/prebuilt-themes/default/spinner.css +9 -3
  224. package/prebuilt-themes/default/spinner.css.map +1 -1
  225. package/prebuilt-themes/default/stars.css +42 -20
  226. package/prebuilt-themes/default/stars.css.map +1 -1
  227. package/prebuilt-themes/default/tabber.css +53 -17
  228. package/prebuilt-themes/default/tabber.css.map +1 -1
  229. package/prebuilt-themes/default/table-pagination.css +21 -9
  230. package/prebuilt-themes/default/table-pagination.css.map +1 -1
  231. package/prebuilt-themes/default/table.css +93 -69
  232. package/prebuilt-themes/default/table.css.map +1 -1
  233. package/public-api.d.ts +2 -1
  234. package/themes/_variables.scss +2 -1
  235. package/themes/default/_mixins.scss +5 -5
  236. package/themes/default/badge.scss +48 -15
  237. package/themes/default/buttons/_button-mixins.scss +43 -33
  238. package/themes/default/buttons/button.scss +54 -29
  239. package/themes/default/buttons/fab.scss +47 -26
  240. package/themes/default/buttons/icon-button.scss +40 -17
  241. package/themes/default/calendar.scss +148 -58
  242. package/themes/default/card.scss +68 -24
  243. package/themes/default/checkbox-list.scss +47 -21
  244. package/themes/default/checkbox.scss +30 -59
  245. package/themes/default/chips.scss +71 -40
  246. package/themes/default/color-display.scss +18 -8
  247. package/themes/default/core.scss +24 -1
  248. package/themes/default/dialog.scss +9 -2
  249. package/themes/default/divider.scss +106 -6
  250. package/themes/default/dropdown-panel.scss +21 -8
  251. package/themes/default/file-drop-area.scss +92 -35
  252. package/themes/default/form-field-frame.scss +23 -15
  253. package/themes/default/form-field.scss +64 -28
  254. package/themes/default/inputs/_shared.scss +52 -12
  255. package/themes/default/inputs/autocomplete-input.scss +83 -14
  256. package/themes/default/inputs/color-input.scss +2 -2
  257. package/themes/default/inputs/date-input.scss +74 -6
  258. package/themes/default/inputs/digit-input.scss +42 -20
  259. package/themes/default/inputs/file-input.scss +100 -23
  260. package/themes/default/inputs/hex-input.scss +59 -9
  261. package/themes/default/inputs/input.scss +51 -4
  262. package/themes/default/inputs/number-input.scss +94 -24
  263. package/themes/default/inputs/password-input.scss +84 -15
  264. package/themes/default/kbd-shortcut.scss +10 -4
  265. package/themes/default/kbd.scss +26 -9
  266. package/themes/default/modal.scss +56 -22
  267. package/themes/default/progress-circle.scss +16 -10
  268. package/themes/default/radio.scss +47 -26
  269. package/themes/default/segment.scss +77 -67
  270. package/themes/default/select.scss +98 -42
  271. package/themes/default/slide-toggle.scss +134 -59
  272. package/themes/default/slider.scss +102 -65
  273. package/themes/default/snackbar.scss +32 -14
  274. package/themes/default/spinner.scss +11 -3
  275. package/themes/default/stars.scss +45 -16
  276. package/themes/default/tabber.scss +54 -14
  277. package/themes/default/table-pagination.scss +24 -9
  278. package/themes/default/table.scss +104 -70
  279. package/lib/statebox/index.d.ts +0 -4
  280. package/lib/statebox/statebox.component.d.ts +0 -26
  281. package/lib/statebox/statebox.defaults.d.ts +0 -10
  282. package/lib/statebox/statebox.module.d.ts +0 -8
  283. package/lib/statebox/statebox.types.d.ts +0 -26
  284. package/lib/tabber/tab/tab.defaults.d.ts +0 -6
  285. package/prebuilt-themes/default/calendar-OLD.css +0 -294
  286. package/prebuilt-themes/default/calendar-OLD.css.map +0 -1
  287. package/prebuilt-themes/default/inputs/search-bar.css +0 -118
  288. package/prebuilt-themes/default/inputs/search-bar.css.map +0 -1
  289. package/prebuilt-themes/default/statebox.css +0 -235
  290. package/prebuilt-themes/default/statebox.css.map +0 -1
  291. package/themes/default/calendar-OLD.scss +0 -183
  292. package/themes/default/inputs/search-bar.scss +0 -19
  293. package/themes/default/statebox.scss +0 -109
package/prebuilt-themes/default/checkbox.css CHANGED
@@ -1,9 +1,20 @@
1
+ :root {
2
+ --ard-checkbox-size: 1.25em;
3
+ --ard-checkbox-icon-size: 1em;
4
+ --ard-checkbox-icon-size: 1.8em;
5
+ --ard-checkbox-hitbox-offset: -4px;
6
+ --ard-checkbox-overlay-offset: 0.4em;
7
+ --ard-checkbox-unselected-disabled-opacity: 40%;
8
+ --ard-checkbox-indeterminate-disabled-opacity: 50%;
9
+ --ard-checkbox-selected-disabled-opacity: 50%;
10
+ }
11
+
1
12
  .ard-checkbox {
2
13
  position: relative;
3
14
  cursor: pointer;
4
15
  user-select: none;
5
- width: 1.25em;
6
- height: 1.25em;
16
+ width: var(--ard-checkbox-size, 1.25em);
17
+ height: var(--ard-checkbox-size, 1.25em);
7
18
  display: flex;
8
19
  justify-content: center;
9
20
  align-items: center;
@@ -11,7 +22,8 @@
11
22
  background: none;
12
23
  padding: 0;
13
24
  outline: none;
14
- color: var(--ard-text2);
25
+ color: var(--ard-checkbox-base-color, var(--ard-text2));
26
+ font-size: var(--ard-checkbox-icon-size, 1em);
15
27
  }
16
28
  .ard-checkbox.ard-color-none {
17
29
  --ard-cmpcl--bg: var(--ard-bg);
@@ -279,74 +291,32 @@
279
291
  --ard-unsel-cmpcl--overlay-colored: currentColor;
280
292
  --ard-unsel-cmpcl--overlay-colored-light: currentColor;
281
293
  }
282
- .ard-checkbox.ard-color-currentColor {
294
+ .ard-checkbox.ard-color-currentColor.ard-state-selected {
283
295
  color: currentColor;
284
296
  }
285
297
  .ard-checkbox .ard-hitbox {
286
298
  position: absolute;
287
- left: -4px;
288
- right: -4px;
289
- bottom: -4px;
290
- top: -4px;
299
+ left: var(--ard-checkbox-hitbox-offset, -4px);
300
+ right: var(--ard-checkbox-hitbox-offset, -4px);
301
+ bottom: var(--ard-checkbox-hitbox-offset, -4px);
302
+ top: var(--ard-checkbox-hitbox-offset, -4px);
291
303
  }
292
304
  .ard-checkbox .ard-focus-overlay {
293
305
  position: absolute;
294
- top: -0.4em;
295
- bottom: -0.4em;
296
- left: -0.4em;
297
- right: -0.4em;
306
+ top: calc(-1 * var(--ard-checkbox-overlay-offset, 0.4em));
307
+ bottom: calc(-1 * var(--ard-checkbox-overlay-offset, 0.4em));
308
+ left: calc(-1 * var(--ard-checkbox-overlay-offset, 0.4em));
309
+ right: calc(-1 * var(--ard-checkbox-overlay-offset, 0.4em));
298
310
  opacity: 0;
299
311
  border-radius: inherit;
300
312
  pointer-events: none;
301
313
  transition: opacity 0.2s ease;
302
- border-radius: 999px;
314
+ border-radius: 9999px;
303
315
  background: currentColor;
304
316
  }
305
- .ard-checkbox .ard-checkbox-icon {
306
- position: absolute;
307
- top: 50%;
308
- left: 50%;
309
- transform: translate(-50%, -50%);
310
- height: 1.8em;
311
- display: none;
312
- opacity: 80%;
313
- transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
314
- }
315
- .ard-checkbox .ard-checkbox-icon::after {
316
- font-family: "Material Symbols Outlined";
317
- font-size: 1.5em;
318
- font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 48;
319
- }
320
- .ard-checkbox .ard-icon-for-selected::after {
321
- font-family: "Material Symbols Outlined";
322
- font-size: 1.5em;
323
- font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48;
324
- content: "check_box";
325
- }
326
- .ard-checkbox .ard-icon-for-indeterminate::after {
327
- content: "indeterminate_check_box";
328
- }
329
- .ard-checkbox .ard-icon-for-unselected::after {
330
- content: "check_box_outline_blank";
331
- }
332
317
  .ard-checkbox.ard-checkbox-selected {
333
318
  color: var(--ard-unsel-cmpcl--bg-colored);
334
319
  }
335
- .ard-checkbox.ard-checkbox-selected .ard-checkbox-icon {
336
- opacity: 90%;
337
- }
338
- .ard-checkbox.ard-checkbox-selected .ard-icon-for-selected {
339
- display: block;
340
- }
341
- .ard-checkbox.ard-checkbox-indeterminate .ard-icon-for-indeterminate {
342
- display: block;
343
- }
344
- .ard-checkbox.ard-checkbox-unselected .ard-icon-for-unselected {
345
- display: block;
346
- }
347
- .ard-checkbox:hover .ard-checkbox-icon, .ard-checkbox:focus .ard-checkbox-icon {
348
- opacity: 100%;
349
- }
350
320
  .ard-checkbox:hover .ard-focus-overlay, .ard-checkbox:focus .ard-focus-overlay {
351
321
  opacity: 10%;
352
322
  }
@@ -356,10 +326,13 @@
356
326
 
357
327
  .ard-disabled .ard-checkbox {
358
328
  pointer-events: none;
359
- opacity: 40%;
329
+ opacity: var(--ard-checkbox-unselected-disabled-opacity, 40%);
330
+ }
331
+ .ard-disabled .ard-checkbox.ard-checkbox-selected {
332
+ opacity: var(--ard-checkbox-selected-disabled-opacity, 50%);
360
333
  }
361
- .ard-disabled .ard-checkbox.ard-checkbox-selected, .ard-disabled .ard-checkbox.ard-checkbox-indeterminate {
362
- opacity: 50%;
334
+ .ard-disabled .ard-checkbox.ard-checkbox-indeterminate {
335
+ opacity: var(--ard-checkbox-indeterminate-disabled-opacity, 50%);
363
336
  }
364
337
 
365
338
  /*# sourceMappingURL=checkbox.css.map */
package/prebuilt-themes/default/checkbox.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/checkbox.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAIA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OCXM;;ACLN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAnIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AFjHF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EGnBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EHYE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EG5CF;EACA;EACA,yBACE;;AH6CF;EGhDA;EACA;EACA,yBACE;EH+CA;;AAEF;EACE;;AAEF;EACE;;AAGF;EACE;;AAEA;EACE;;AAIF;EACE;;AAIF;EACE;;AAIF;EACE;;AAKF;EACE;;AAEF;EACE;;AAIF;EACE;;;AAKN;EACE;EACA;;AAEA;EAEE","file":"checkbox.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/checkbox.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AC/BA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAnIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EElCA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EF2BE;EACA;;AAGF;EACE;;AAIA;EACE;;AAIF;EACE;;;AAKN;EACE;EACA;;AAEA;EACE;;AAEF;EACE","file":"checkbox.css"}
package/prebuilt-themes/default/chips.css CHANGED
@@ -1,20 +1,47 @@
1
+ :root {
2
+ --ard-chip-margin: 0;
3
+ --ard-chip-height: 2rem;
4
+ --ard-chip-height-compact: 1.4375rem;
5
+ --ard-chip-padding: 0 0.75rem;
6
+ --ard-chip-padding-compact: 0 0.5625rem;
7
+ --ard-chip-padding-align-left: 0.125rem;
8
+ --ard-chip-padding-align-left-deletable: 0.25rem;
9
+ --ard-chip-padding-align-right: 0.125rem;
10
+ --ard-chip-padding-align-right-deletable: 0.25rem;
11
+ --ard-chip-selection-icon-padding: 0.5rem;
12
+ --ard-chip-selection-icon-margin: -0.125rem;
13
+ --ard-chip-selection-icon-padding-compact: 0.25rem;
14
+ --ard-chip-selection-icon-margin-compact: -0.25rem;
15
+ --ard-chip-content-wrapper-padding: 0.5rem;
16
+ --ard-chip-selectable-hover-overlay-opacity: 7.5%;
17
+ --ard-chip-selectable-active-overlay-opacity: 20%;
18
+ --ard-chip-outlined-hover-overlay-opacity: 4%;
19
+ --ard-chip-outlined-active-overlay-opacity: 10%;
20
+ --ard-chip-outlined-selected-overlay-opacity: 12%;
21
+ --ard-chip-outlined-selected-hover-overlay-opacity: 17%;
22
+ --ard-chip-outlined-selected-active-overlay-opacity: 22%;
23
+ --ard-chip-transition: 0.15s ease;
24
+ --ard-chip-disabled-opacity: 60%;
25
+ --ard-chip-disabled-selected-opacity: 40%;
26
+ }
27
+
1
28
  .ard-chip-wrapper {
2
29
  border-radius: var(--ard-variant-border-radius);
3
- font-family: "Roboto", sans-serif;
30
+ font-family: var(--ard-font-family);
4
31
  color: var(--ard-text2);
5
32
  background: var(--ard-bg);
6
33
  border-radius: var(--ard-variant-border-radius);
7
34
  padding: 0;
8
- margin: 6px;
9
- vertical-align: middle;
35
+ margin: var(--ard-chip-margin, 0);
36
+ vertical-align: center;
10
37
  display: flex;
11
38
  align-items: center;
12
- font-size: 14px;
39
+ font-size: var(--ard-chip-font-size, 0.875rem);
13
40
  position: relative;
14
41
  outline: none;
15
42
  user-select: none;
16
43
  overflow: hidden;
17
- height: 32px;
44
+ height: var(--ard-chip-height, 2rem);
18
45
  }
19
46
  .ard-chip-wrapper.ard-color-none {
20
47
  --ard-cmpcl--bg: var(--ard-bg);
@@ -181,10 +208,10 @@
181
208
  }
182
209
  .ard-chip-wrapper .ard-clear-btn-wrapper .ard-focus-overlay {
183
210
  position: absolute;
184
- top: -1px;
185
- bottom: -1px;
186
- left: -1px;
187
- right: -1px;
211
+ top: calc(-1 * 1px);
212
+ bottom: calc(-1 * 1px);
213
+ left: calc(-1 * 1px);
214
+ right: calc(-1 * 1px);
188
215
  opacity: 0;
189
216
  border-radius: inherit;
190
217
  pointer-events: none;
@@ -223,14 +250,14 @@
223
250
  --ard-variant-border-radius: 0;
224
251
  }
225
252
  .ard-chip-wrapper > .ard-chip-content-wrapper {
226
- padding: 0 12px;
253
+ padding: var(--ard-chip-padding, 0 0.75rem);
227
254
  }
228
255
  .ard-chip-wrapper > .ard-focus-overlay {
229
256
  position: absolute;
230
- top: -0;
231
- bottom: -0;
232
- left: -0;
233
- right: -0;
257
+ top: calc(-1 * 0px);
258
+ bottom: calc(-1 * 0px);
259
+ left: calc(-1 * 0px);
260
+ right: calc(-1 * 0px);
234
261
  opacity: 0;
235
262
  border-radius: inherit;
236
263
  pointer-events: none;
@@ -244,10 +271,10 @@
244
271
  align-items: center;
245
272
  }
246
273
  .ard-chip-wrapper.ard-chip-selectable:hover > .ard-focus-overlay, .ard-chip-wrapper.ard-chip-selectable:focus > .ard-focus-overlay {
247
- opacity: 7.5%;
274
+ opacity: var(--ard-chip-selectable-hover-overlay-opacity, 7.5%);
248
275
  }
249
276
  .ard-chip-wrapper.ard-chip-selectable:active > .ard-focus-overlay {
250
- opacity: 20%;
277
+ opacity: var(--ard-chip-selectable-active-overlay-opacity, 20%);
251
278
  }
252
279
  .ard-chip-wrapper.ard-chip-selectable .ard-chip-selection-icon {
253
280
  font-family: "Material Symbols Outlined";
@@ -265,7 +292,7 @@
265
292
  .ard-chip-wrapper.ard-appearance-filled.ard-chip-selectable {
266
293
  background-color: var(--ard-bg-filled);
267
294
  color: var(--ard-text2);
268
- transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
295
+ transition: color var(--ard-chip-transition, 0.15s ease), border-color var(--ard-chip-transition, 0.15s ease), background-color var(--ard-chip-transition, 0.15s ease);
269
296
  }
270
297
  .ard-chip-wrapper.ard-appearance-filled.ard-chip-selectable.ard-chip-selected {
271
298
  color: var(--ard-cmpcl--on-bg-colored);
@@ -279,84 +306,89 @@
279
306
  font-weight: 600;
280
307
  }
281
308
  .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable {
282
- transition: color 0.15s ease, border-color 0.15s ease;
309
+ transition: color var(--ard-chip-transition, 0.15s ease), border-color var(--ard-chip-transition, 0.15s ease);
283
310
  }
284
311
  .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable > .ard-focus-overlay {
285
312
  opacity: 0;
286
313
  background: var(--ard-cmpcl--bg-colored);
287
314
  }
288
315
  .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable:hover > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable:focus > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable:hover > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable:focus > .ard-focus-overlay {
289
- opacity: 4%;
316
+ opacity: var(--ard-chip-outlined-hover-overlay-opacity, 4%);
290
317
  }
291
318
  .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable:active > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable:active > .ard-focus-overlay {
292
- opacity: 10%;
319
+ opacity: var(--ard-chip-outlined-active-overlay-opacity, 10%);
293
320
  }
294
321
  .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected {
295
322
  color: var(--ard-cmpcl--content);
323
+ border-color: var(--ard-cmpcl--content);
296
324
  }
297
325
  .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected > .ard-focus-overlay {
298
- opacity: 7.5%;
326
+ opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
299
327
  }
300
328
  .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected:hover > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected:focus > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected:hover > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected:focus > .ard-focus-overlay {
301
- opacity: 15%;
329
+ opacity: var(--ard-chip-outlined-selected-hover-overlay-opacity, 17%);
302
330
  }
303
331
  .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected:active > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected:active > .ard-focus-overlay {
304
- opacity: 20%;
332
+ opacity: var(--ard-chip-outlined-selected-active-overlay-opacity, 22%);
305
333
  }
306
334
  .ard-chip-wrapper.ard-appearance-outlined-strong > .ard-focus-overlay {
307
- opacity: 7.5%;
335
+ opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
308
336
  background: var(--ard-cmpcl--bg-colored);
309
337
  }
338
+ .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable {
339
+ color: var(--ard-text2);
340
+ border: 1px solid var(--ard-detail-light);
341
+ }
310
342
  .ard-chip-wrapper.ard-chip-align-left {
311
343
  flex-direction: row;
312
- padding-left: 2px;
344
+ padding-left: var(--ard-chip-padding-align-left, 0.125rem);
313
345
  }
314
346
  .ard-chip-wrapper.ard-chip-align-left .ard-chip-selection-icon {
315
- padding-left: 8px;
316
- margin-right: -2px;
347
+ padding-left: var(--ard-chip-selection-icon-padding, 0.5rem);
348
+ margin-right: var(--ard-chip-selection-icon-margin, -0.125rem);
317
349
  }
318
350
  .ard-chip-wrapper.ard-chip-align-left.ard-chip-deletable {
319
- padding-left: 4px;
351
+ padding-left: var(--ard-chip-padding-align-left-deletable, 0.25rem);
320
352
  }
321
353
  .ard-chip-wrapper.ard-chip-align-left.ard-chip-deletable .ard-chip-content-wrapper {
322
- padding-left: 8px;
354
+ padding-left: var(--ard-chip-content-wrapper-padding, 0.5rem);
323
355
  }
324
356
  .ard-chip-wrapper.ard-chip-align-right {
325
357
  flex-direction: row-reverse;
326
- padding-right: 2px;
358
+ padding-right: var(--ard-chip-padding-align-right, 0.125rem);
327
359
  }
328
360
  .ard-chip-wrapper.ard-chip-align-right .ard-chip-selection-icon {
329
- padding-right: 8px;
330
- margin-left: -2px;
361
+ padding-right: var(--ard-chip-selection-icon-padding, 0.5rem);
362
+ margin-left: var(--ard-chip-selection-icon-margin, -0.125rem);
331
363
  }
332
364
  .ard-chip-wrapper.ard-chip-align-right.ard-chip-deletable {
333
- padding-right: 4px;
365
+ padding-right: var(--ard-chip-padding-align-right-deletable, 0.25rem);
334
366
  }
335
367
  .ard-chip-wrapper.ard-chip-align-right.ard-chip-deletable .ard-chip-content-wrapper {
336
- padding-right: 8px;
368
+ padding-right: var(--ard-chip-content-wrapper-padding, 0.5rem);
337
369
  }
338
370
  .ard-chip-wrapper.ard-compact {
339
- height: 23px;
340
- font-size: 13px;
371
+ height: var(--ard-chip-height-compact, 1.4375rem);
372
+ font-size: var(--ard-chip-font-size-compact, 0.8125rem);
341
373
  }
342
374
  .ard-chip-wrapper.ard-compact > .ard-chip-content-wrapper {
343
- padding: 0 9px;
375
+ padding: var(--ard-chip-padding-compact, 0 0.5625rem);
344
376
  }
345
377
  .ard-chip-wrapper.ard-compact.ard-chip-align-left .ard-chip-selection-icon {
346
- padding-left: 4px;
347
- margin-right: -4px;
378
+ padding-left: var(--ard-chip-selection-icon-padding-compact, 0.25rem);
379
+ margin-right: var(--ard-chip-selection-icon-margin-compact, -0.25rem);
348
380
  }
349
381
  .ard-chip-wrapper.ard-compact.ard-chip-align-right .ard-chip-selection-icon {
350
- padding-right: 4px;
351
- margin-left: -4px;
382
+ padding-right: var(--ard-chip-selection-icon-padding-compact, 0.25rem);
383
+ margin-left: var(--ard-chip-selection-icon-margin-compact, -0.25rem);
352
384
  }
353
385
 
354
386
  .ard-disabled .ard-chip-wrapper {
355
387
  pointer-events: none;
356
- opacity: 60%;
388
+ opacity: var(--ard-chip-disabled-opacity, 60%);
357
389
  }
358
390
  .ard-disabled .ard-chip-wrapper.ard-chip-selected {
359
- opacity: 40%;
391
+ opacity: var(--ard-chip-disabled-selected-opacity, 40%);
360
392
  }
361
393
 
362
394
  /*# sourceMappingURL=chips.css.map */
package/prebuilt-themes/default/chips.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/chips.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/default/_clear-button.scss"],"names":[],"mappings":"AAMA;ECsEE;EDjEA;EACA,OEJM;EFKN,YEbG;EFcH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AGtBA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AClIF;EACE,QFkCgB;EEjChB,OFiCgB;EEhChB;;AAGF;EACE;EACA;EACA,OFGK;EEFL,OFyBgB;EExBhB,QFwBgB;EEvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EHvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EGgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EH7CN;EACA;EACA,yBACE;EG4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;AHUN;EAEE;;AAEF;EACE;;AAEF;EACE;;AD3DF;EACE;;AAEF;ECjBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDUE,YE9BM;EF+BN;;AAGF;EACE;EACA;EACA;;AAIE;EACE;;AAIF;EACE;;AAIJ;EClDF;EACA;EACA,yBACE;;ADkDE;EACE;;AAKN;EACE;EACA;EACA;;AAEA;EACE,kBE/DC;EFgED,OE7DE;EF8DF,YACE;;AAIF;EACE;EACA;;AAIN;EAEE;EACA;EACA;EACA;EACA;;AAEA;EACE,YACE;;AAGF;EACE;EACA;;AAIA;EACE;;AAIF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIA;EACE;;AAIF;EACE;;AAOR;EACE;EACA;;AAKJ;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEA;EACE;;AAIN;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEA;EACE;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEF;EACE;EACA;;;AAMJ;EACE;EACA;;AAEA;EACE","file":"chips.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/chips.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/default/_clear-button.scss"],"names":[],"mappings":"AAOA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;ECuCE;EDlCA;EACA,OEnCM;EFoCN,YE5CG;EF6CH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AGrDA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AClIF;EACE,QFmCgB;EElChB,OFkCgB;EEjChB;;AAGF;EACE;EACA;EACA,OFGK;EEFL,OF0BgB;EEzBhB,QFyBgB;EExBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EHvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EGgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EH7CN;EACA;EACA,yBACE;EG4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;AHUN;EAEE;;AAEF;EACE;;AAEF;EACE;;AD5BF;EACE;;AAEF;EChDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDyCE,YE7DM;EF8DN;;AAGF;EACE;EACA;EACA;;AAIE;EACE;;AAIF;EACE;;AAIJ;ECjFF;EACA;EACA,yBACE;;ADiFE;EACE;;AAKN;EACE;EACA;EACA;;AAEA;EACE,kBE9FC;EF+FD,OE5FE;EF6FF;;AAEA;EACE;EACA;;AAIN;EAEE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAIA;EACE;;AAIF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAIA;EACE;;AAIF;EACE;;AAOR;EACE;EACA;;AAEF;EACE;EACA;;AAKJ;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEA;EACE;;AAIN;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEA;EACE;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEF;EACE;EACA;;;AAMJ;EACE;EACA;;AAEA;EACE","file":"chips.css"}
package/prebuilt-themes/default/color-display.css CHANGED
@@ -1,20 +1,27 @@
1
+ :root {
2
+ --ard-color-display-gap: 0.3ch;
3
+ --ard-color-display-size: 1em * math.div(19, 16);
4
+ --ard-color-display-font-size: 1.15em;
5
+ --ard-color-display-rounded-corner-radius: 0.25em;
6
+ }
7
+
1
8
  .ard-color-display-wrapper {
2
- gap: 0.3ch;
9
+ gap: var(--ard-color-display-gap, 0.3ch);
3
10
  align-items: center;
4
11
  }
5
12
  .ard-color-display-wrapper .ard-color-display {
6
- width: 1.1875em;
7
- height: 1.1875em;
13
+ width: var(--ard-color-dsiplay-size, 1.1875em);
14
+ height: var(--ard-color-dsiplay-size, 1.1875em);
8
15
  font-size: inherit;
9
16
  cursor: help;
10
- border: 0.0625em solid transparent;
17
+ border: 1px solid transparent;
11
18
  }
12
19
  .ard-color-display-wrapper .ard-color-display-label {
13
- font-family: monospace;
14
- font-size: 1.15em;
20
+ font-family: var(--ard-font-family-mono);
21
+ font-size: var(--ard-color-display-font-size, 1.15em);
15
22
  }
16
23
  .ard-color-display-wrapper.ard-appearance-rounded .ard-color-display {
17
- border-radius: 0.25em;
24
+ border-radius: var(--ard-color-display-rounded-corner-radius, 0.25em);
18
25
  }
19
26
  .ard-color-display-wrapper.ard-appearance-circle .ard-color-display {
20
27
  border-radius: 9999px;
@@ -23,7 +30,7 @@
23
30
  border-radius: 0;
24
31
  }
25
32
  .ard-color-display-wrapper.ard-with-border .ard-color-display {
26
- border-color: var(--ard-text);
33
+ border-color: var(--ard-color-display-border-color, var(--ard-text));
27
34
  }
28
35
 
29
36
  /*# sourceMappingURL=color-display.css.map */
package/prebuilt-themes/default/color-display.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/color-display.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAGA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;;AAIF;EACE;;AAIF;EACE;;AAIF;EACE,cC9BC","file":"color-display.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/color-display.scss"],"names":[],"mappings":"AAKA;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;;AAIF;EACE;;AAIF;EACE;;AAIF;EACE","file":"color-display.css"}
package/prebuilt-themes/default/core.css CHANGED
@@ -27,14 +27,34 @@
27
27
  --ard-lighten-overlay-light: rgba(255, 255, 255, 5%);
28
28
  --ard-darken-overlay: rgba(0, 0, 0, 12.5%);
29
29
  --ard-darken-overlay-strong: rgba(0, 0, 0, 20%);
30
+ --ard-darken-overlay-medium-strong: rgba(0, 0, 0, 13%);
30
31
  --ard-darken-overlay-medium: rgba(0, 0, 0, 10%);
31
32
  --ard-darken-overlay-light: rgba(0, 0, 0, 5%);
32
33
  --ard-darken-overlay-ultralight: rgba(0, 0, 0, 3%);
34
+ --ard-font-family: "Roboto", sans-serif;
35
+ --ard-font-family-mono: monospace;
33
36
  --ard-gold: #ffc107;
34
37
  --ard-clear-button-size: 0.9rem;
35
38
  --ard-dropdown-button-size: 0.4rem;
36
39
  --ard-form-field-height: 2.3125rem;
37
- --ard-form-field-compact-height: 1.6875rem;
40
+ --ard-form-field-height-compact: 1.6875rem;
41
+ --ard-form-field-font-size: 1rem;
42
+ --ard-form-field-font-size-compact: 1rem;
43
+ --ard-form-field-padding-top: 0;
44
+ --ard-form-field-padding-right: 0.375rem;
45
+ --ard-form-field-padding-bottom: 0;
46
+ --ard-form-field-padding-left: 0.375rem;
47
+ --ard-form-field-padding-top-compact: 0;
48
+ --ard-form-field-padding-right-compact: 0.375rem;
49
+ --ard-form-field-padding-bottom-compact: 0;
50
+ --ard-form-field-padding-left-compact: 0.375rem;
51
+ --ard-form-field-transitions-duration: 150ms;
52
+ --ard-form-field-hover-overlay-opacity: 3%;
53
+ --ard-form-field-focus-overlay-opacity: 6%;
54
+ --ard-form-field-disabled-opacity: 50%;
55
+ --ard-form-field-disabled-transparent-overlay-opacity: 4.5%;
56
+ --ard-rounded-corner-radius: 0.375rem;
57
+ --ard-grid-spacing-unit: 0.25rem;
38
58
  --ard-primary-50: 234, 235, 243;
39
59
  --ard-primary-100: 159, 167, 228;
40
60
  --ard-primary-300: 78, 99, 219;
package/prebuilt-themes/default/core.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/core.scss"],"names":[],"mappings":"AAEQ;AACA;AAER;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;AAAA;EAEA;AAAA;EAEA;AAAA;EAGA;EAEA;EACA;;;AAGF;EACE","file":"core.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/core.scss"],"names":[],"mappings":"AAEQ;AACA;AAER;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;AAAA;EAEA;AAAA;EAEA;AAAA;EAGA;EAEA;EACA;;;AAGF;EACE","file":"core.css"}
package/prebuilt-themes/default/dialog.css CHANGED
@@ -1,7 +1,12 @@
1
+ :root {
2
+ --ard-dialog-content-actions-gap: 1rem;
3
+ --ard-dialog-buttons-gap: 1rem;
4
+ }
5
+
1
6
  .ard-dialog-container {
2
7
  display: flex;
3
8
  flex-direction: column;
4
- gap: 1rem;
9
+ gap: var(--ard-dialog-content-actions-gap, 1rem);
5
10
  }
6
11
 
7
12
  .ard-dialog-buttons {
@@ -11,7 +16,7 @@
11
16
 
12
17
  .ard-dialog-buttons-container {
13
18
  display: flex;
14
- gap: 1rem;
19
+ gap: var(--ard-dialog-buttons-gap, 1rem);
15
20
  align-items: center;
16
21
  }
17
22
 
package/prebuilt-themes/default/dialog.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/dialog.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA","file":"dialog.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/dialog.scss"],"names":[],"mappings":"AAEA;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA","file":"dialog.css"}
package/prebuilt-themes/default/divider.css CHANGED
@@ -1,11 +1,87 @@
1
- ard-divider {
2
- margin: 0;
1
+ :root {
2
+ --ard-divider-margin-size: 0.5rem;
3
+ --ard-divider-color: red;
4
+ --ard-divider-width: 1px;
5
+ --ard-divider-middle-inset: 1rem;
6
+ --ard-divider-content-padding: 0.5rem;
7
+ --ard-divider-content-font-size: 0.875rem;
8
+ --ard-divider-align-inset: 10%;
9
+ --ard-divider-align-min-inset: 1rem;
10
+ --ard-divider-align-max-inset: unset;
11
+ --ard-divider-style: solid;
3
12
  }
4
- ard-divider:not(.ard-divider-vertical) {
5
- border-top: 1px solid var(--ard-detail-ultralight);
13
+
14
+ .ard-divider {
15
+ border: none;
16
+ position: relative;
17
+ display: flex;
18
+ justify-content: stretch;
19
+ align-items: center;
20
+ box-sizing: border-box;
21
+ font-size: var(--ard-divider-content-font-size, 0.875rem);
22
+ }
23
+ .ard-divider::before, .ard-divider::after {
24
+ content: "";
25
+ flex-grow: 1;
26
+ pointer-events: none;
27
+ box-sizing: border-box;
28
+ }
29
+ .ard-divider.ard-divider__horizontal {
30
+ width: 100%;
31
+ min-height: var(--ard-divider-width, 1px);
32
+ margin: var(--ard-divider-margin-size, 0.5rem) 0;
33
+ }
34
+ .ard-divider.ard-divider__horizontal::before, .ard-divider.ard-divider__horizontal::after {
35
+ height: var(--ard-divider-width, 1px);
36
+ border-top: var(--ard-divider-width, 1px) var(--ard-divider-style, solid) var(--ard-divider-color, var(--ard-detail-ultralight));
37
+ }
38
+ .ard-divider.ard-divider__horizontal.ard-divider__flex-item {
39
+ align-self: stretch;
40
+ width: auto;
41
+ }
42
+ .ard-divider.ard-divider__vertical {
43
+ height: 100%;
44
+ min-width: var(--ard-divider-width, 1px);
45
+ margin: 0 var(--ard-divider-margin-size, 0.5rem);
46
+ flex-direction: column;
47
+ }
48
+ .ard-divider.ard-divider__vertical::before, .ard-divider.ard-divider__vertical::after {
49
+ width: var(--ard-divider-width, 1px);
50
+ border-left: var(--ard-divider-width, 1px) var(--ard-divider-style, solid) var(--ard-divider-color, var(--ard-detail-ultralight));
51
+ }
52
+ .ard-divider.ard-divider__vertical.ard-divider__flex-item {
53
+ align-self: stretch;
54
+ height: auto;
55
+ }
56
+ .ard-divider:not(:empty).ard-divider__horizontal::before {
57
+ margin-right: var(--ard-divider-content-padding, 0.5rem);
58
+ }
59
+ .ard-divider:not(:empty).ard-divider__horizontal::after {
60
+ margin-left: var(--ard-divider-content-padding, 0.5rem);
61
+ }
62
+ .ard-divider:not(:empty).ard-divider__vertical::before {
63
+ margin-bottom: var(--ard-divider-content-padding, 0.5rem);
64
+ }
65
+ .ard-divider:not(:empty).ard-divider__vertical::after {
66
+ margin-top: var(--ard-divider-content-padding, 0.5rem);
67
+ }
68
+ .ard-divider.ard-divider__full {
69
+ padding: 0;
70
+ }
71
+ .ard-divider.ard-divider__middle {
72
+ padding: 0 var(--ard-divider-middle-inset, 1rem);
73
+ }
74
+ .ard-divider.ard-divider__text-align-start::before {
75
+ width: var(--ard-divider-align-inset, 10%);
76
+ min-width: var(--ard-divider-align-min-inset, 1rem);
77
+ max-width: var(--ard-divider-align-max-inset, unset);
78
+ flex-grow: 0;
6
79
  }
7
- ard-divider.ard-divider-vertical {
8
- border-left: 1px solid var(--ard-detail-ultralight);
80
+ .ard-divider.ard-divider__text-align-end::after {
81
+ width: var(--ard-divider-align-inset, 10%);
82
+ min-width: var(--ard-divider-align-min-inset, 1rem);
83
+ max-width: var(--ard-divider-align-max-inset, unset);
84
+ flex-grow: 0;
9
85
  }
10
86
 
11
87
  /*# sourceMappingURL=divider.css.map */
package/prebuilt-themes/default/divider.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/divider.scss"],"names":[],"mappings":"AAEA;EACE;;AAEA;EACE;;AAGF;EACE","file":"divider.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/divider.scss"],"names":[],"mappings":"AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EAEE;EACA;;AAGF;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;;AAEA;EAEE;EACA;;AAGF;EACE;EACA;;AAOA;EACE;;AAEF;EACE;;AAIF;EACE;;AAEF;EACE;;AAMN;EACE;;AAEF;EACE;;AAKA;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA","file":"divider.css"}
package/prebuilt-themes/default/dropdown-panel.css CHANGED
@@ -1,37 +1,45 @@
1
+ :root {
2
+ --ard-dropdown-panel-margin: 0.375rem 0;
3
+ --ard-dropdown-panel-margin-compact: 0.25rem 0;
4
+ --ard-dropdown-panel-z-index: 5;
5
+ --ard-dropdown-panel-rounded-corner-radius: 0.5rem;
6
+ --ard-dropdown-panel-rounded-corner-radius-compact: 0.375rem;
7
+ }
8
+
1
9
  ard-dropdown-panel {
2
10
  width: 100%;
3
11
  }
4
12
 
5
13
  .ard-dropdown-panel-container {
6
14
  position: relative;
7
- background: var(--ard-bg);
8
- margin: 0.375rem 0;
9
- z-index: 5;
15
+ background: var(--ard-dropdown-panel-bg, var(--ard-bg));
16
+ margin: var(--ard-dropdown-panel-margin, 0.375rem 0);
17
+ z-index: var(--ard-dropdown-panel-z-index, 5);
10
18
  width: 100%;
11
19
  overflow: hidden;
12
20
  box-sizing: border-box;
13
21
  }
14
22
  .ard-dropdown-panel-container.ard-variant-rounded {
15
- border-radius: 0.5rem;
23
+ border-radius: var(--ard-dropdown-panel-rounded-corner-radius, 0.5rem);
16
24
  }
17
25
  .ard-dropdown-panel-container.ard-variant-sharp {
18
26
  border-radius: 0;
19
27
  }
20
28
  .ard-dropdown-panel-container.ard-appearance-outlined {
21
- border: 1px solid var(--ard-border);
29
+ border: 1px solid var(--ard-dropdown-panel-border-color, var(--ard-border));
22
30
  }
23
31
  .ard-dropdown-panel-container.ard-appearance-raised {
24
- box-shadow: var(--ard-box-shadow);
32
+ box-shadow: var(--ard-dropdown-panel-shadow, var(--ard-box-shadow));
25
33
  }
26
34
  .ard-dropdown-panel-container.ard-connected {
27
35
  margin: 0;
28
36
  border-top: none;
29
37
  }
30
38
  .ard-dropdown-panel-container.ard-compact {
31
- margin: 0.25rem 0;
39
+ margin: var(--ard-dropdown-panel-margin-compact, 0.25rem 0);
32
40
  }
33
41
  .ard-dropdown-panel-container.ard-compact.ard-variant-rounded {
34
- border-radius: 0.4rem;
42
+ border-radius: var(--ard-dropdown-panel-rounded-corner-radius-compact, 0.375rem);
35
43
  }
36
44
 
37
45
  /*# sourceMappingURL=dropdown-panel.css.map */