@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/buttons/button.css CHANGED
@@ -1,29 +1,55 @@
1
+ :root {
2
+ --ard-button-height: 2.5em;
3
+ --ard-button-height-compact: 2.25em;
4
+ --ard-button-margin: 0.125rem;
5
+ --ard-button-padding: 0 1.2em;
6
+ --ard-button-padding-compact: 0 0.9em;
7
+ --ard-button-padding-vertical: 0.3em 1em;
8
+ --ard-button-padding-vertical-compact: 0.2em 0.8em;
9
+ --ard-button-gap: 0.375rem;
10
+ --ard-button-font-size: 0.875rem;
11
+ --ard-button-font-size-compact: 0.75rem;
12
+ --ard-button-font-weight: 500;
13
+ --ard-button-overlay-hover-opacity: 0.04;
14
+ --ard-button-overlay-focus-opacity: 0.12;
15
+ --ard-button-overlay-active-opacity: 0.18;
16
+ --ard-button-overlay-focus-visible-opacity: 0.24;
17
+ --ard-button-overlay-disabled-opacity: 0.2;
18
+ --ard-button-disabled-opacity: 0.6;
19
+ }
20
+
1
21
  ard-button {
2
- display: block;
22
+ display: flex;
3
23
  width: max-content;
4
24
  height: max-content;
25
+ justify-content: stretch;
5
26
  }
6
27
 
7
28
  .ard-button {
8
- font-family: "Roboto", sans-serif;
9
- margin: 2px;
29
+ font-family: var(--ard-font-family);
30
+ margin: var(--ard-button-margin, 0.125rem);
31
+ padding: var(--ard-button-padding, 0 1.2em);
10
32
  border: 1px solid transparent;
11
- font-weight: 500;
33
+ font-weight: var(--ard-button-font-weight, 500);
34
+ font-size: var(--ard-button-font-size, 0.875rem);
12
35
  display: inline-flex;
13
36
  align-items: center;
14
37
  position: relative;
15
38
  cursor: pointer;
16
39
  outline: none;
17
40
  background: transparent;
18
- gap: 0.375rem;
19
- font-size: 0.875rem;
20
- height: 2.5em;
21
- padding: 0 1.2em;
22
- letter-spacing: 0.5px;
23
- width: 100%;
41
+ gap: var(--ard-button-gap, 0.375rem);
42
+ font-size: var(--ard-button-font-size, 0.875rem);
43
+ height: var(--ard-button-height, 2.5em);
44
+ padding: var(--ard-button-padding, 0 1.2em);
45
+ width: max-content;
24
46
  min-width: max-content;
47
+ letter-spacing: 0.5px;
25
48
  justify-content: center;
26
49
  margin: 0;
50
+ user-select: none;
51
+ text-decoration: none;
52
+ flex-grow: 1;
27
53
  }
28
54
  .ard-button.ard-color-none {
29
55
  --ard-cmpcl--bg: var(--ard-bg);
@@ -158,38 +184,37 @@ ard-button {
158
184
  --ard-cmpcl--overlay-colored: currentColor;
159
185
  --ard-cmpcl--overlay-colored-light: currentColor;
160
186
  }
161
- .ard-button .ard-button-icon {
162
- font-family: "Material Symbols Outlined";
163
- font-size: 1.5em;
164
- font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48;
165
- }
166
- .ard-button .ard-focus-overlay {
187
+ .ard-button::before {
188
+ content: "";
167
189
  position: absolute;
168
- top: -0;
169
- bottom: -0;
170
- left: -0;
171
- right: -0;
190
+ top: calc(-1 * 0px);
191
+ bottom: calc(-1 * 0px);
192
+ left: calc(-1 * 0px);
193
+ right: calc(-1 * 0px);
172
194
  opacity: 0;
173
195
  border-radius: inherit;
174
196
  pointer-events: none;
175
197
  transition: opacity 0.2s ease;
176
198
  background-color: var(--ard-cmpcl--overlay);
177
199
  }
178
- .ard-button:hover .ard-focus-overlay, .ard-button:focus .ard-focus-overlay {
179
- opacity: 4%;
200
+ .ard-button:hover::before {
201
+ opacity: var(--ard-button-overlay-hover-opacity, 0.04);
180
202
  }
181
- .ard-button.ard-active .ard-focus-overlay, .ard-button:active .ard-focus-overlay {
182
- opacity: 12%;
203
+ .ard-button:focus::before {
204
+ opacity: var(--ard-button-overlay-focus-opacity, 0.12);
183
205
  }
184
- .ard-button:focus-visible .ard-focus-overlay {
185
- opacity: 18%;
206
+ .ard-button.ard-active::before, .ard-button:active::before {
207
+ opacity: var(--ard-button-overlay-active-opacity, 0.18);
208
+ }
209
+ .ard-button:focus-visible::before {
210
+ opacity: var(--ard-button-overlay-focus-visible-opacity, 0.24);
186
211
  }
187
212
  .ard-button.ard-appearance-transparent, .ard-button.ard-appearance-raised {
188
213
  background: transparent;
189
214
  color: var(--ard-cmpcl--content);
190
215
  border: none;
191
216
  }
192
- .ard-button.ard-appearance-transparent .ard-focus-overlay, .ard-button.ard-appearance-raised .ard-focus-overlay {
217
+ .ard-button.ard-appearance-transparent::before, .ard-button.ard-appearance-raised::before {
193
218
  background: var(--ard-cmpcl--overlay-colored);
194
219
  }
195
220
  .ard-button.ard-appearance-raised, .ard-button.ard-appearance-raised-strong {
@@ -208,7 +233,7 @@ ard-button {
208
233
  color: var(--ard-cmpcl--content);
209
234
  border: 1px solid var(--ard-border-light);
210
235
  }
211
- .ard-button.ard-appearance-outlined .ard-focus-overlay {
236
+ .ard-button.ard-appearance-outlined::before {
212
237
  background: var(--ard-cmpcl--overlay-colored);
213
238
  }
214
239
  .ard-button.ard-appearance-outlined-strong {
@@ -217,7 +242,7 @@ ard-button {
217
242
  border: 1px solid var(--ard-border-light);
218
243
  transition: background-color 0.2s ease, color 0.2s ease;
219
244
  }
220
- .ard-button.ard-appearance-outlined-strong .ard-focus-overlay {
245
+ .ard-button.ard-appearance-outlined-strong::before {
221
246
  display: none;
222
247
  }
223
248
  .ard-button.ard-appearance-outlined-strong:hover, .ard-button.ard-appearance-outlined-strong:focus-visible {
@@ -225,11 +250,11 @@ ard-button {
225
250
  color: var(--ard-cmpcl--on-bg-colored);
226
251
  }
227
252
  .ard-button.ard-appearance-flat, .ard-button.ard-appearance-raised-strong {
228
- background: var(--ard-cmpcl--bg);
229
- color: var(--ard-cmpcl--on-bg);
230
- border: none;
253
+ background: var(--ard-cmpcl--bg-colored);
254
+ color: var(--ard-cmpcl--on-bg-colored);
255
+ border: 1px solid var(--ard-cmpcl--bg-colored);
231
256
  }
232
- .ard-button.ard-appearance-flat .ard-focus-overlay, .ard-button.ard-appearance-raised-strong .ard-focus-overlay {
257
+ .ard-button.ard-appearance-flat::before, .ard-button.ard-appearance-raised-strong::before {
233
258
  background: var(--ard-cmpcl--on-bg);
234
259
  }
235
260
  .ard-button.ard-appearance-flat:focus-visible, .ard-button.ard-appearance-raised-strong:focus-visible {
@@ -238,14 +263,9 @@ ard-button {
238
263
  .ard-button.ard-appearance-transparent.ard-light-coloring {
239
264
  color: var(--ard-cmpcl--content-light);
240
265
  }
241
- .ard-button.ard-appearance-transparent.ard-light-coloring .ard-focus-overlay {
266
+ .ard-button.ard-appearance-transparent.ard-light-coloring::before {
242
267
  background: var(--ard-cmpcl--overlay-colored-light);
243
268
  }
244
- .ard-button .ard-button-content {
245
- display: flex;
246
- align-items: center;
247
- gap: 0.375rem;
248
- }
249
269
  .ard-button.ard-align-left {
250
270
  flex-direction: row;
251
271
  }
@@ -254,12 +274,12 @@ ard-button {
254
274
  }
255
275
  .ard-button.ard-button-vertical {
256
276
  height: max-content;
257
- padding: 0.3em 1em;
277
+ padding: var(--ard-button-padding-vertical, 0.3em 1em);
258
278
  gap: 2px;
259
279
  flex-direction: column;
260
280
  }
261
281
  .ard-button.ard-variant-rounded, .ard-button.ard-variant-pill.ard-button-vertical {
262
- border-radius: 6px;
282
+ border-radius: var(--ard-button-rounded-corner-radius, var(--ard-rounded-corner-radius, 0.375rem));
263
283
  }
264
284
  .ard-button.ard-variant-pill:not(.ard-button-vertical) {
265
285
  border-radius: 9999px;
@@ -268,36 +288,32 @@ ard-button {
268
288
  border-radius: 0;
269
289
  }
270
290
  .ard-button.ard-compact {
271
- font-size: 0.75rem;
272
- height: 2.25em;
273
- padding: 0 0.9em;
291
+ font-size: var(--ard-button-font-size-compact, 0.75rem);
292
+ height: var(--ard-button-height-compact, 2.25em);
293
+ padding: var(--ard-button-padding-compact, 0 0.9em);
274
294
  }
275
295
  .ard-button.ard-compact.ard-button-vertical {
276
296
  height: max-content;
277
- padding: 0.2em 0.8em;
297
+ padding: var(--ard-button-padding-vertical-compact, 0.2em 0.8em);
278
298
  gap: 0;
279
299
  }
280
-
281
- ard-button.ard-disabled > .ard-button {
300
+ .ard-button.ard-disabled {
282
301
  pointer-events: none;
283
- opacity: 60%;
302
+ opacity: var(--ard-button-disabled-opacity, 0.6);
284
303
  cursor: not-allowed;
285
304
  }
286
- ard-button.ard-disabled > .ard-button .ard-focus-overlay {
287
- opacity: 20%;
305
+ .ard-button.ard-disabled::before {
306
+ opacity: var(--ard-button-overlay-disabled-opacity, 0.2);
288
307
  transform: scale(1);
289
308
  }
290
- ard-button.ard-disabled > .ard-button.ard-color-none .ard-button-icon,
291
- ard-button.ard-disabled > .ard-button.ard-color-none .ard-button-content {
292
- opacity: 60%;
309
+ .ard-button.ard-disabled.ard-color-none .ard-button-icon,
310
+ .ard-button.ard-disabled.ard-color-none .ard-button-content {
311
+ opacity: var(--ard-button-disabled-opacity, 0.6);
293
312
  }
294
- ard-button.ard-disabled > .ard-button.ard-color-none .ard-focus-overlay {
313
+ .ard-button.ard-disabled.ard-color-none::before {
295
314
  background: var(--ard-cmpcl--overlay);
296
315
  }
297
- ard-button.ard-disabled.ard-button-with-pointer-events-when-disabled {
298
- pointer-events: all;
299
- }
300
- ard-button.ard-disabled.ard-button-with-pointer-events-when-disabled > .ard-button {
316
+ .ard-button.ard-disabled.ard-button-with-pointer-events-when-disabled {
301
317
  pointer-events: all;
302
318
  }
303
319
 
package/prebuilt-themes/default/buttons/button.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/buttons/button.scss","../../../../../projects/ui/src/themes/default/buttons/_button-mixins.scss","../../../../../projects/ui/src/themes/default/_coloring.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;;;AAGF;ECFE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDJA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AEhBA;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;;ADrHF;EEdA;EACA;EACA,yBACE;;AFeF;EERA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFCE;;AAIA;EACE;;AAKF;EACE;;AAIF;EACE;;AAIJ;EAEE;EACA;EACA;;AAEA;EACE;;AAGJ;EAEE,YGvDC;EHwDD;EACA,YGxBY;;AH0BZ;EAEE,YG3BW;;AH6Bb;EACE,YG7BW;;AHgCf;EACE,YGpEC;EHqED;EACA;;AAEA;EACE;;AAGJ;EACE,YG7EC;EH8ED;EACA;EAMA,YACE;;AALF;EACE;;AAMF;EAEE;EACA;;AAGJ;EAEE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAIJ;EACE;;AAEA;EACE;;AD3FJ;EACE;EACA;EACA;;AAIF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;EACA;;AAEF;EAEE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAMJ;ECmDA;EACA;EACA;;AAEA;EACE;EACA;;AAKA;AAAA;EAEE;;AAEF;EACE;;ADhEJ;EACE;;AAEA;EACE","file":"button.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/buttons/button.scss","../../../../../projects/ui/src/themes/default/buttons/_button-mixins.scss","../../../../../projects/ui/src/themes/default/_coloring.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;ECjBE;EACA,QDkBE;ECjBF,SDkBE;ECjBF;EACA,aDkBE;ECjBF,WDgBE;ECfF;EACA;EACA;EACA;EACA;EDkBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AEpDA;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;;AD1GF;EACE;EEhBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFSE;;AAGA;EACE,SDGF;;ACCA;EACE,SDDF;;ACMA;EACE,SDNF;;ACUA;EACE,SDVF;;ACcF;EAEE;EACA;EACA;;AAEA;EACE;;AAGJ;EAEE,YGnEC;EHoED;EACA,YGnCY;;AHqCZ;EAEE,YGtCW;;AHwCb;EACE,YGxCW;;AH2Cf;EACE,YGhFC;EHiFD;EACA;;AAEA;EACE;;AAGJ;EACE,YGzFC;EH0FD;EACA;EAMA;;AAJA;EACE;;AAIF;EAEE;EACA;;AAGJ;EAEE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAIJ;EACE;;AAEA;EACE;;ADhEJ;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;EACA;;AAEF;EAEE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;ECiCA;EACA,SDjCkC;ECkClC;;AAEA;EACE,SDrCyE;ECsCzE;;AAKA;AAAA;EAEE,SD7C8B;;AC+ChC;EACE;;AD9CF;EACE","file":"button.css"}
package/prebuilt-themes/default/buttons/fab.css CHANGED
@@ -1,15 +1,33 @@
1
+ :root {
2
+ --ard-fab-size-standard: 3.5rem;
3
+ --ard-fab-size-small: 2.5rem;
4
+ --ard-fab-margin: 0.5rem;
5
+ --ard-fab-size-standard-font-size: 1.75rem;
6
+ --ard-fab-size-small-font-size: 1.375rem;
7
+ --ard-fab-font-weight: 900;
8
+ --ard-fab-extended-gap: 0.75em;
9
+ --ard-fab-overlay-hover-opacity: 0.04;
10
+ --ard-fab-overlay-focus-opacity: 0.12;
11
+ --ard-fab-overlay-active-opacity: 0.18;
12
+ --ard-fab-overlay-focus-visible-opacity: 0.24;
13
+ --ard-fab-overlay-disabled-opacity: 0.2;
14
+ --ard-fab-disabled-opacity: 0.6;
15
+ }
16
+
1
17
  ard-fab {
2
- margin: 8px;
18
+ margin: var(--ard-fab-margin, 0.5rem);
3
19
  display: block;
4
20
  width: max-content;
5
21
  height: max-content;
6
22
  }
7
23
 
8
24
  .ard-fab {
9
- font-family: "Roboto", sans-serif;
10
- margin: 2px;
25
+ font-family: var(--ard-font-family);
26
+ margin: 0;
27
+ padding: 0;
11
28
  border: 1px solid transparent;
12
- font-weight: 500;
29
+ font-weight: var(--ard-fab-font-weight, 900);
30
+ font-size: unset;
13
31
  display: inline-flex;
14
32
  align-items: center;
15
33
  position: relative;
@@ -17,11 +35,17 @@ ard-fab {
17
35
  outline: none;
18
36
  height: var(--ard-_fab-size);
19
37
  width: var(--ard-_fab-size);
20
- font-weight: 900;
38
+ max-height: var(--ard-_fab-size);
39
+ max-width: var(--ard-_fab-size);
40
+ min-height: var(--ard-_fab-size);
41
+ min-width: var(--ard-_fab-size);
21
42
  user-select: none;
22
- border-radius: 999px;
43
+ border-radius: 9999px;
23
44
  justify-content: center;
24
45
  margin: 0;
46
+ font-weight: 500;
47
+ overflow: hidden;
48
+ transition: max-width 0.5s ease;
25
49
  }
26
50
  .ard-fab.ard-color-none {
27
51
  --ard-cmpcl--bg: var(--ard-bg);
@@ -156,38 +180,37 @@ ard-fab {
156
180
  --ard-cmpcl--overlay-colored: currentColor;
157
181
  --ard-cmpcl--overlay-colored-light: currentColor;
158
182
  }
159
- .ard-fab .ard-button-icon {
160
- font-family: "Material Symbols Outlined";
161
- font-size: 1.5em;
162
- font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48;
163
- }
164
- .ard-fab .ard-focus-overlay {
183
+ .ard-fab::before {
184
+ content: "";
165
185
  position: absolute;
166
- top: -0;
167
- bottom: -0;
168
- left: -0;
169
- right: -0;
186
+ top: calc(-1 * 0px);
187
+ bottom: calc(-1 * 0px);
188
+ left: calc(-1 * 0px);
189
+ right: calc(-1 * 0px);
170
190
  opacity: 0;
171
191
  border-radius: inherit;
172
192
  pointer-events: none;
173
193
  transition: opacity 0.2s ease;
174
194
  background-color: var(--ard-cmpcl--overlay);
175
195
  }
176
- .ard-fab:hover .ard-focus-overlay, .ard-fab:focus .ard-focus-overlay {
177
- opacity: 4%;
196
+ .ard-fab:hover::before {
197
+ opacity: var(--ard-fab-overlay-hover-opacity, var(--ard-button-overlay-hover-opacity, 0.04));
178
198
  }
179
- .ard-fab.ard-active .ard-focus-overlay, .ard-fab:active .ard-focus-overlay {
180
- opacity: 12%;
199
+ .ard-fab:focus::before {
200
+ opacity: var(--ard-fab-overlay-focus-opacity, var(--ard-button-overlay-focus-opacity, 0.12));
181
201
  }
182
- .ard-fab:focus-visible .ard-focus-overlay {
183
- opacity: 18%;
202
+ .ard-fab.ard-active::before, .ard-fab:active::before {
203
+ opacity: var(--ard-fab-overlay-active-opacity, var(--ard-button-overlay-active-opacity, 0.18));
204
+ }
205
+ .ard-fab:focus-visible::before {
206
+ opacity: var(--ard-fab-overlay-focus-visible-opacity, var(--ard-button-overlay-focus-visible-opacity, 0.24));
184
207
  }
185
208
  .ard-fab.ard-appearance-transparent, .ard-fab.ard-appearance-raised {
186
209
  background: transparent;
187
210
  color: var(--ard-cmpcl--content);
188
211
  border: none;
189
212
  }
190
- .ard-fab.ard-appearance-transparent .ard-focus-overlay, .ard-fab.ard-appearance-raised .ard-focus-overlay {
213
+ .ard-fab.ard-appearance-transparent::before, .ard-fab.ard-appearance-raised::before {
191
214
  background: var(--ard-cmpcl--overlay-colored);
192
215
  }
193
216
  .ard-fab.ard-appearance-raised, .ard-fab.ard-appearance-raised-strong {
@@ -206,7 +229,7 @@ ard-fab {
206
229
  color: var(--ard-cmpcl--content);
207
230
  border: 1px solid var(--ard-border-light);
208
231
  }
209
- .ard-fab.ard-appearance-outlined .ard-focus-overlay {
232
+ .ard-fab.ard-appearance-outlined::before {
210
233
  background: var(--ard-cmpcl--overlay-colored);
211
234
  }
212
235
  .ard-fab.ard-appearance-outlined-strong {
@@ -215,7 +238,7 @@ ard-fab {
215
238
  border: 1px solid var(--ard-border-light);
216
239
  transition: background-color 0.2s ease, color 0.2s ease;
217
240
  }
218
- .ard-fab.ard-appearance-outlined-strong .ard-focus-overlay {
241
+ .ard-fab.ard-appearance-outlined-strong::before {
219
242
  display: none;
220
243
  }
221
244
  .ard-fab.ard-appearance-outlined-strong:hover, .ard-fab.ard-appearance-outlined-strong:focus-visible {
@@ -223,11 +246,11 @@ ard-fab {
223
246
  color: var(--ard-cmpcl--on-bg-colored);
224
247
  }
225
248
  .ard-fab.ard-appearance-flat, .ard-fab.ard-appearance-raised-strong {
226
- background: var(--ard-cmpcl--bg);
227
- color: var(--ard-cmpcl--on-bg);
228
- border: none;
249
+ background: var(--ard-cmpcl--bg-colored);
250
+ color: var(--ard-cmpcl--on-bg-colored);
251
+ border: 1px solid var(--ard-cmpcl--bg-colored);
229
252
  }
230
- .ard-fab.ard-appearance-flat .ard-focus-overlay, .ard-fab.ard-appearance-raised-strong .ard-focus-overlay {
253
+ .ard-fab.ard-appearance-flat::before, .ard-fab.ard-appearance-raised-strong::before {
231
254
  background: var(--ard-cmpcl--on-bg);
232
255
  }
233
256
  .ard-fab.ard-appearance-flat:focus-visible, .ard-fab.ard-appearance-raised-strong:focus-visible {
@@ -236,35 +259,25 @@ ard-fab {
236
259
  .ard-fab.ard-appearance-transparent.ard-light-coloring {
237
260
  color: var(--ard-cmpcl--content-light);
238
261
  }
239
- .ard-fab.ard-appearance-transparent.ard-light-coloring .ard-focus-overlay {
262
+ .ard-fab.ard-appearance-transparent.ard-light-coloring::before {
240
263
  background: var(--ard-cmpcl--overlay-colored-light);
241
264
  }
242
265
  .ard-fab.ard-fab-size-standard {
243
- --ard-_fab-size: 3.5rem;
244
- font-size: 1.75rem;
266
+ --ard-_fab-size: var(--ard-fab-size-standard, 3.5rem);
267
+ font-size: var(--ard-fab-size-standard-font-size, 1.75rem);
245
268
  }
246
269
  .ard-fab.ard-fab-size-small {
247
- --ard-_fab-size: 2.5rem;
248
- font-size: 1.375rem;
270
+ --ard-_fab-size: var(--ard-fab-size-small, 2.5rem);
271
+ font-size: var(--ard-fab-size-small-font-size, 1.375rem);
249
272
  }
250
273
  .ard-fab.ard-fab-extended {
251
274
  min-width: var(--ard-_fab-size);
252
275
  width: max-content;
253
276
  font-weight: unset;
254
- }
255
- .ard-fab.ard-fab-extended .ard-button-content {
256
- gap: 0.75em;
277
+ gap: var(--ard-fab-extended-gap, 1em);
257
278
  max-width: 10em;
258
279
  }
259
- .ard-fab .ard-button-content {
260
- gap: 1em;
261
- font-weight: 500;
262
- justify-content: flex-start !important;
263
- max-width: 1.5em;
264
- overflow: hidden;
265
- transition: max-width 0.5s ease;
266
- }
267
- .ard-fab .ard-button-content ard-icon {
280
+ .ard-fab ard-icon {
268
281
  font-size: 1em;
269
282
  }
270
283
  .ard-fab.ard-appearance-transparent > .ard-focus-overlay {
@@ -277,18 +290,18 @@ ard-fab {
277
290
 
278
291
  ard-fab.ard-disabled > .ard-fab {
279
292
  pointer-events: none;
280
- opacity: 60%;
293
+ opacity: var(--ard-fab-overlay-disabled-opacity, var(--ard-button-overlay-disabled-opacity, 0.2));
281
294
  cursor: not-allowed;
282
295
  }
283
- ard-fab.ard-disabled > .ard-fab .ard-focus-overlay {
284
- opacity: 20%;
296
+ ard-fab.ard-disabled > .ard-fab::before {
297
+ opacity: var(--ard-fab-disabled-opacity, var(--ard-button-disabled-opacity, 0.6));
285
298
  transform: scale(1);
286
299
  }
287
300
  ard-fab.ard-disabled > .ard-fab.ard-color-none .ard-button-icon,
288
301
  ard-fab.ard-disabled > .ard-fab.ard-color-none .ard-button-content {
289
- opacity: 60%;
302
+ opacity: var(--ard-fab-overlay-disabled-opacity, var(--ard-button-overlay-disabled-opacity, 0.2));
290
303
  }
291
- ard-fab.ard-disabled > .ard-fab.ard-color-none .ard-focus-overlay {
304
+ ard-fab.ard-disabled > .ard-fab.ard-color-none::before {
292
305
  background: var(--ard-cmpcl--overlay);
293
306
  }
294
307
  ard-fab.ard-disabled.ard-button-with-pointer-events-when-disabled {
package/prebuilt-themes/default/buttons/fab.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/buttons/fab.scss","../../../../../projects/ui/src/themes/default/buttons/_button-mixins.scss","../../../../../projects/ui/src/themes/default/_coloring.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;;;AAGF;ECJE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDFA;EACA;EACA;EACA;EACA;EACA;EACA;;AEfA;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;;ADrHF;EEdA;EACA;EACA,yBACE;;AFeF;EERA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFCE;;AAIA;EACE;;AAKF;EACE;;AAIF;EACE;;AAIJ;EAEE;EACA;EACA;;AAEA;EACE;;AAGJ;EAEE,YGvDC;EHwDD;EACA,YGxBY;;AH0BZ;EAEE,YG3BW;;AH6Bb;EACE,YG7BW;;AHgCf;EACE,YGpEC;EHqED;EACA;;AAEA;EACE;;AAGJ;EACE,YG7EC;EH8ED;EACA;EAMA,YACE;;AALF;EACE;;AAMF;EAEE;EACA;;AAGJ;EAEE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAIJ;EACE;;AAEA;EACE;;AD5FJ;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AGvBJ;EACE;EAEA,YACE;;AAMF;EACE;;;AHsBJ;EC6DA;EACA;EACA;;AAEA;EACE;EACA;;AAKA;AAAA;EAEE;;AAEF;EACE;;AD1EJ;EACE;;AAEA;EACE;;;AAKN;EACE;IACE;;EAEF;IACE;;EAEF;IACE","file":"fab.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/buttons/fab.scss","../../../../../projects/ui/src/themes/default/buttons/_button-mixins.scss","../../../../../projects/ui/src/themes/default/_coloring.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;ECXE;EACA,QDYE;ECXF,SDYE;ECXF;EACA,aDYE;ECXF,WDUE;ECTF;EACA;EACA;EACA;EACA;EDYA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AE9CA;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;;AD1GF;EACE;EEhBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFSE;;AAGA;EACE,SDHF;;ACOA;EACE,SDPF;;ACYA;EACE,SDZF;;ACgBA;EACE,SDhBF;;ACoBF;EAEE;EACA;EACA;;AAEA;EACE;;AAGJ;EAEE,YGnEC;EHoED;EACA,YGnCY;;AHqCZ;EAEE,YGtCW;;AHwCb;EACE,YGxCW;;AH2Cf;EACE,YGhFC;EHiFD;EACA;;AAEA;EACE;;AAGJ;EACE,YGzFC;EH0FD;EACA;EAMA;;AAJA;EACE;;AAIF;EAEE;EACA;;AAGJ;EAEE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAIJ;EACE;;AAEA;EACE;;ADvEJ;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AG3CF;EACE;EAEA,YACE;;AAMF;EACE;;;AHwCJ;ECqDA;EACA,SDpDI;ECqDJ;;AAEA;EACE,SDvDE;ECwDF;;AAKA;AAAA;EAEE,SDhEA;;ACkEF;EACE;;AD/DJ;EACE;;AAEA;EACE;;;AAKN;EACE;IACE;;EAEF;IACE;;EAEF;IACE","file":"fab.css"}
package/prebuilt-themes/default/buttons/icon-button.css CHANGED
@@ -1,32 +1,43 @@
1
+ :root {
2
+ --ard-icon-button-height: 2.1875em;
3
+ --ard-icon-button-height-compact: 2.25em;
4
+ --ard-icon-button-margin: 0;
5
+ --ard-icon-button-font-size: 1rem;
6
+ --ard-icon-button-icon-font-size: 1.5em;
7
+ --ard-icon-button-font-size-compact: 0.75rem;
8
+ --ard-icon-button-font-weight: 600;
9
+ }
10
+
1
11
  ard-icon-button {
2
12
  height: max-content;
3
13
  width: max-content;
4
14
  border-radius: 9999px;
5
15
  aspect-ratio: 1;
6
16
  display: inline-block;
7
- font-size: 1rem;
17
+ margin: var(--ard-icon-button-margin, 0);
18
+ font-size: var(--ard-icon-button-font-size, 1rem);
8
19
  }
9
20
 
10
21
  .ard-icon-button {
11
- font-family: "Roboto", sans-serif;
12
- margin: 2px;
22
+ font-family: var(--ard-font-family);
23
+ margin: 0;
24
+ padding: 0;
13
25
  border: 1px solid transparent;
14
- font-weight: 500;
26
+ font-weight: inherit;
27
+ font-size: inherit;
15
28
  display: inline-flex;
16
29
  align-items: center;
17
30
  position: relative;
18
31
  cursor: pointer;
19
32
  outline: none;
20
33
  background: transparent;
21
- height: 2.1875em;
34
+ height: var(--ard-icon-button-height, 2.1875em);
22
35
  aspect-ratio: 1;
23
36
  border-radius: 9999px;
24
37
  align-items: center;
25
38
  justify-content: center;
26
39
  padding: 0;
27
40
  overflow: hidden;
28
- font-weight: 600;
29
- font-size: inherit;
30
41
  color: var(--ard-cmpcl--bg-colored);
31
42
  }
32
43
  .ard-icon-button.ard-color-none {
@@ -162,38 +173,37 @@ ard-icon-button {
162
173
  --ard-cmpcl--overlay-colored: currentColor;
163
174
  --ard-cmpcl--overlay-colored-light: currentColor;
164
175
  }
165
- .ard-icon-button .ard-button-icon {
166
- font-family: "Material Symbols Outlined";
167
- font-size: 1.5em;
168
- font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48;
169
- }
170
- .ard-icon-button .ard-focus-overlay {
176
+ .ard-icon-button::before {
177
+ content: "";
171
178
  position: absolute;
172
- top: -0;
173
- bottom: -0;
174
- left: -0;
175
- right: -0;
179
+ top: calc(-1 * 0px);
180
+ bottom: calc(-1 * 0px);
181
+ left: calc(-1 * 0px);
182
+ right: calc(-1 * 0px);
176
183
  opacity: 0;
177
184
  border-radius: inherit;
178
185
  pointer-events: none;
179
186
  transition: opacity 0.2s ease;
180
187
  background-color: var(--ard-cmpcl--overlay);
181
188
  }
182
- .ard-icon-button:hover .ard-focus-overlay, .ard-icon-button:focus .ard-focus-overlay {
183
- opacity: 4%;
189
+ .ard-icon-button:hover::before {
190
+ opacity: var(--ard-icon-button-overlay-hover-opacity, var(--ard-button-overlay-hover-opacity, 0.04));
184
191
  }
185
- .ard-icon-button.ard-active .ard-focus-overlay, .ard-icon-button:active .ard-focus-overlay {
186
- opacity: 12%;
192
+ .ard-icon-button:focus::before {
193
+ opacity: var(--ard-icon-button-overlay-focus-opacity, var(--ard-button-overlay-focus-opacity, 0.12));
187
194
  }
188
- .ard-icon-button:focus-visible .ard-focus-overlay {
189
- opacity: 18%;
195
+ .ard-icon-button.ard-active::before, .ard-icon-button:active::before {
196
+ opacity: var(--ard-icon-button-overlay-active-opacity, var(--ard-button-overlay-active-opacity, 0.18));
197
+ }
198
+ .ard-icon-button:focus-visible::before {
199
+ opacity: var(--ard-icon-button-overlay-focus-visible-opacity, var(--ard-button-overlay-focus-visible-opacity, 0.24));
190
200
  }
191
201
  .ard-icon-button.ard-appearance-transparent, .ard-icon-button.ard-appearance-raised {
192
202
  background: transparent;
193
203
  color: var(--ard-cmpcl--content);
194
204
  border: none;
195
205
  }
196
- .ard-icon-button.ard-appearance-transparent .ard-focus-overlay, .ard-icon-button.ard-appearance-raised .ard-focus-overlay {
206
+ .ard-icon-button.ard-appearance-transparent::before, .ard-icon-button.ard-appearance-raised::before {
197
207
  background: var(--ard-cmpcl--overlay-colored);
198
208
  }
199
209
  .ard-icon-button.ard-appearance-raised, .ard-icon-button.ard-appearance-raised-strong {
@@ -212,7 +222,7 @@ ard-icon-button {
212
222
  color: var(--ard-cmpcl--content);
213
223
  border: 1px solid var(--ard-border-light);
214
224
  }
215
- .ard-icon-button.ard-appearance-outlined .ard-focus-overlay {
225
+ .ard-icon-button.ard-appearance-outlined::before {
216
226
  background: var(--ard-cmpcl--overlay-colored);
217
227
  }
218
228
  .ard-icon-button.ard-appearance-outlined-strong {
@@ -221,7 +231,7 @@ ard-icon-button {
221
231
  border: 1px solid var(--ard-border-light);
222
232
  transition: background-color 0.2s ease, color 0.2s ease;
223
233
  }
224
- .ard-icon-button.ard-appearance-outlined-strong .ard-focus-overlay {
234
+ .ard-icon-button.ard-appearance-outlined-strong::before {
225
235
  display: none;
226
236
  }
227
237
  .ard-icon-button.ard-appearance-outlined-strong:hover, .ard-icon-button.ard-appearance-outlined-strong:focus-visible {
@@ -229,11 +239,11 @@ ard-icon-button {
229
239
  color: var(--ard-cmpcl--on-bg-colored);
230
240
  }
231
241
  .ard-icon-button.ard-appearance-flat, .ard-icon-button.ard-appearance-raised-strong {
232
- background: var(--ard-cmpcl--bg);
233
- color: var(--ard-cmpcl--on-bg);
234
- border: none;
242
+ background: var(--ard-cmpcl--bg-colored);
243
+ color: var(--ard-cmpcl--on-bg-colored);
244
+ border: 1px solid var(--ard-cmpcl--bg-colored);
235
245
  }
236
- .ard-icon-button.ard-appearance-flat .ard-focus-overlay, .ard-icon-button.ard-appearance-raised-strong .ard-focus-overlay {
246
+ .ard-icon-button.ard-appearance-flat::before, .ard-icon-button.ard-appearance-raised-strong::before {
237
247
  background: var(--ard-cmpcl--on-bg);
238
248
  }
239
249
  .ard-icon-button.ard-appearance-flat:focus-visible, .ard-icon-button.ard-appearance-raised-strong:focus-visible {
@@ -242,20 +252,16 @@ ard-icon-button {
242
252
  .ard-icon-button.ard-appearance-transparent.ard-light-coloring {
243
253
  color: var(--ard-cmpcl--content-light);
244
254
  }
245
- .ard-icon-button.ard-appearance-transparent.ard-light-coloring .ard-focus-overlay {
255
+ .ard-icon-button.ard-appearance-transparent.ard-light-coloring::before {
246
256
  background: var(--ard-cmpcl--overlay-colored-light);
247
257
  }
248
- .ard-icon-button .ard-button-content {
249
- display: flex;
250
- align-items: center;
251
- }
252
- .ard-icon-button .ard-button-content > ard-icon {
258
+ .ard-icon-button > ard-icon {
253
259
  font-weight: 500;
254
- font-size: 1.5em;
260
+ font-size: var(--ard-icon-button-icon-font-size);
255
261
  }
256
262
  .ard-icon-button.ard-compact {
257
- height: 2.25em;
258
- font-size: 0.75em;
263
+ height: var(--ard-icon-button-height-compact, 2.25em);
264
+ font-size: var(--ard-icon-button-font-size-compact, 0.75rem);
259
265
  }
260
266
  .ard-icon-button.ard-light-coloring {
261
267
  color: var(--ard-cmpcl--bg-colored-light);
@@ -263,18 +269,18 @@ ard-icon-button {
263
269
 
264
270
  ard-icon-button.ard-disabled > .ard-icon-button {
265
271
  pointer-events: none;
266
- opacity: 60%;
272
+ opacity: var(--ard-icon-button-overlay-disabled-opacity, var(--ard-button-overlay-disabled-opacity, 0.2));
267
273
  cursor: not-allowed;
268
274
  }
269
- ard-icon-button.ard-disabled > .ard-icon-button .ard-focus-overlay {
270
- opacity: 20%;
275
+ ard-icon-button.ard-disabled > .ard-icon-button::before {
276
+ opacity: var(--ard-icon-button-disabled-opacity, var(--ard-button-disabled-opacity, 0.6));
271
277
  transform: scale(1);
272
278
  }
273
279
  ard-icon-button.ard-disabled > .ard-icon-button.ard-color-none .ard-button-icon,
274
280
  ard-icon-button.ard-disabled > .ard-icon-button.ard-color-none .ard-button-content {
275
- opacity: 60%;
281
+ opacity: var(--ard-icon-button-overlay-disabled-opacity, var(--ard-button-overlay-disabled-opacity, 0.2));
276
282
  }
277
- ard-icon-button.ard-disabled > .ard-icon-button.ard-color-none .ard-focus-overlay {
283
+ ard-icon-button.ard-disabled > .ard-icon-button.ard-color-none::before {
278
284
  background: var(--ard-cmpcl--overlay);
279
285
  }
280
286
  ard-icon-button.ard-disabled > .ard-icon-button .ard-focus-overlay {