@ardium-ui/ui 5.0.0-alpha.6 → 5.0.0-alpha.61

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 (245) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +4809 -2358
  2. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  3. package/lib/_internal/disablable-component.d.ts +2 -1
  4. package/lib/_internal/focusable-component.d.ts +2 -1
  5. package/lib/_internal/form-field-component.d.ts +3 -2
  6. package/lib/_internal/item-storages/dropdown-item-storage.d.ts +20 -19
  7. package/lib/_internal/item-storages/simple-item-storage.d.ts +15 -12
  8. package/lib/_internal/item-storages/simplest-item-storage.d.ts +1 -1
  9. package/lib/_internal/ngmodel-component.d.ts +5 -8
  10. package/lib/_internal/selectable-list-component.d.ts +6 -6
  11. package/lib/_internal/utils/date.utils.d.ts +16 -0
  12. package/lib/badge/badge.directive.d.ts +3 -2
  13. package/lib/breakpoints/breakpoint.service.d.ts +12 -0
  14. package/lib/breakpoints/breakpoint.utils.d.ts +7 -0
  15. package/lib/breakpoints/breakpoints.d.ts +13 -0
  16. package/lib/breakpoints/index.d.ts +2 -0
  17. package/lib/buttons/_button-base.d.ts +12 -8
  18. package/lib/buttons/_button-base.defaults.d.ts +3 -2
  19. package/lib/buttons/button/button.component.d.ts +5 -5
  20. package/lib/buttons/button/button.defaults.d.ts +0 -2
  21. package/lib/buttons/button/button.directive.d.ts +17 -0
  22. package/lib/buttons/button/button.module.d.ts +3 -2
  23. package/lib/buttons/button/index.d.ts +1 -0
  24. package/lib/buttons/fab/fab.component.d.ts +3 -1
  25. package/lib/buttons/icon-button/icon-button.component.d.ts +6 -4
  26. package/lib/buttons/icon-button/icon-button.defaults.d.ts +2 -1
  27. package/lib/calendar/abstract-calendar.d.ts +128 -0
  28. package/lib/calendar/calendar.component.d.ts +8 -96
  29. package/lib/calendar/calendar.defaults.d.ts +16 -1
  30. package/lib/calendar/calendar.internal-directives.d.ts +24 -8
  31. package/lib/calendar/calendar.internal-types.d.ts +1 -0
  32. package/lib/calendar/calendar.module.d.ts +4 -9
  33. package/lib/calendar/calendar.types.d.ts +21 -5
  34. package/lib/calendar/index.d.ts +3 -0
  35. package/lib/calendar/range-calendar.component.d.ts +16 -0
  36. package/lib/calendar/range-calendar.directives.d.ts +51 -0
  37. package/lib/calendar/range-calendar.module.d.ts +10 -0
  38. package/lib/calendar/views/calendar-views.module.d.ts +13 -0
  39. package/lib/calendar/views/days-view/days-view.component.d.ts +20 -2
  40. package/lib/calendar/views/days-view/days-view.helpers.d.ts +2 -2
  41. package/lib/calendar/views/months-view/months-view.component.d.ts +15 -3
  42. package/lib/calendar/views/years-view/years-view.component.d.ts +16 -3
  43. package/lib/checkbox-list/checkbox-list.component.d.ts +9 -7
  44. package/lib/checkbox-list/checkbox-list.directives.d.ts +7 -0
  45. package/lib/checkbox-list/checkbox-list.module.d.ts +1 -1
  46. package/lib/chip/chip.component.d.ts +2 -1
  47. package/lib/chip/deletable-chip/deletable-chip.component.d.ts +2 -1
  48. package/lib/chip/selectable-chip/selectable-chip.component.d.ts +3 -2
  49. package/lib/dialog/dialog.component.d.ts +13 -8
  50. package/lib/dialog/dialog.types.d.ts +1 -0
  51. package/lib/divider/divider.component.d.ts +2 -1
  52. package/lib/dropdown-panel/dropdown-panel.component.d.ts +2 -1
  53. package/lib/file-inputs/file-input/file-input.component.d.ts +2 -1
  54. package/lib/file-inputs/file-input-base.d.ts +4 -5
  55. package/lib/form-field/auto-error/auto-error.component.d.ts +19 -0
  56. package/lib/form-field/auto-error/auto-error.provider.d.ts +7 -0
  57. package/lib/form-field/error/error.directive.d.ts +3 -2
  58. package/lib/form-field/form-field-base.d.ts +5 -2
  59. package/lib/form-field/form-field-child.token.d.ts +5 -5
  60. package/lib/form-field/form-field-native-inputs.d.ts +6 -11
  61. package/lib/form-field/form-field.component.d.ts +1 -1
  62. package/lib/form-field/form-field.defaults.d.ts +1 -0
  63. package/lib/form-field/form-field.module.d.ts +5 -4
  64. package/lib/form-field/hint/hint.directive.d.ts +3 -2
  65. package/lib/form-field/hint-error/hint-error.directive.d.ts +3 -2
  66. package/lib/form-field/horizontal-form-field.component.d.ts +1 -1
  67. package/lib/form-field/index.d.ts +4 -0
  68. package/lib/form-field/label/label.component.d.ts +3 -2
  69. package/lib/form-field-frame/form-field-frame.component.d.ts +4 -3
  70. package/lib/grid/grid.component.d.ts +51 -0
  71. package/lib/grid/grid.defaults.d.ts +16 -0
  72. package/lib/grid/grid.module.d.ts +7 -0
  73. package/lib/grid/grid.types.d.ts +38 -0
  74. package/lib/grid/grid.utils.d.ts +11 -0
  75. package/lib/grid/index.d.ts +4 -0
  76. package/lib/icon/icon.component.d.ts +2 -1
  77. package/lib/inputs/_simple-input-base.d.ts +7 -3
  78. package/lib/inputs/autocomplete-input/autocomplete-input.component.d.ts +5 -4
  79. package/lib/inputs/date-input/abstract-date-input.d.ts +112 -0
  80. package/lib/inputs/date-input/date-input.component.d.ts +19 -81
  81. package/lib/inputs/date-input/date-input.defaults.d.ts +21 -3
  82. package/lib/inputs/date-input/{date-input.directive.d.ts → date-input.directives.d.ts} +2 -2
  83. package/lib/inputs/date-input/date-input.module.d.ts +5 -4
  84. package/lib/inputs/date-input/date-input.serializers.d.ts +4 -2
  85. package/lib/inputs/date-input/date-input.types.d.ts +5 -4
  86. package/lib/inputs/date-input/date-range-input.component.d.ts +29 -0
  87. package/lib/inputs/date-input/date-range-input.directives.d.ts +82 -0
  88. package/lib/inputs/date-input/date-range-input.module.d.ts +17 -0
  89. package/lib/inputs/date-input/index.d.ts +7 -1
  90. package/lib/inputs/date-input/multipage-date-range-input.component.d.ts +44 -0
  91. package/lib/inputs/date-input/multipage-date-range-input.directives.d.ts +82 -0
  92. package/lib/inputs/date-input/multipage-date-range-input.module.d.ts +17 -0
  93. package/lib/inputs/digit-input/digit-input.component.d.ts +4 -3
  94. package/lib/inputs/hex-input/hex-input.component.d.ts +5 -3
  95. package/lib/inputs/input-utils.d.ts +6 -0
  96. package/lib/inputs/number-input/number-input.component.d.ts +18 -12
  97. package/lib/inputs/number-input/number-input.defaults.d.ts +4 -0
  98. package/lib/inputs/number-input/number-input.directives.d.ts +12 -0
  99. package/lib/inputs/number-input/number-input.module.d.ts +1 -1
  100. package/lib/inputs/password-input/password-input.component.d.ts +4 -3
  101. package/lib/kbd/kbd.component.d.ts +2 -1
  102. package/lib/kbd-shortcut/kbd-shortcut.component.d.ts +2 -1
  103. package/lib/modal/modal.component.d.ts +9 -6
  104. package/lib/modal/modal.defaults.d.ts +2 -0
  105. package/lib/option/option.component.d.ts +2 -1
  106. package/lib/progress-bar/progress-bar.component.d.ts +4 -3
  107. package/lib/progress-circle/progress-circle.component.d.ts +5 -4
  108. package/lib/search-functions.d.ts +1 -1
  109. package/lib/segment/segment.component.d.ts +6 -5
  110. package/lib/select/select.component.d.ts +38 -30
  111. package/lib/select/select.defaults.d.ts +9 -2
  112. package/lib/select/select.directive.d.ts +6 -0
  113. package/lib/select/select.module.d.ts +1 -1
  114. package/lib/select/select.types.d.ts +6 -2
  115. package/lib/select/select.utils.d.ts +2 -0
  116. package/lib/slider/abstract-slider.d.ts +35 -29
  117. package/lib/slider/index.d.ts +1 -0
  118. package/lib/slider/range-slider/range-slider.component.d.ts +12 -9
  119. package/lib/slider/range-slider/range-slider.types.d.ts +6 -0
  120. package/lib/slider/slider.component.d.ts +5 -4
  121. package/lib/slider/slider.types.d.ts +3 -3
  122. package/lib/star/rating-display/rating-display.component.d.ts +2 -1
  123. package/lib/star/rating-input/rating-input.component.d.ts +5 -3
  124. package/lib/star/rating-input/rating-input.defaults.d.ts +2 -2
  125. package/lib/tabber/index.d.ts +2 -1
  126. package/lib/tabber/tab/tab.component.d.ts +14 -8
  127. package/lib/tabber/tabber.component.d.ts +25 -9
  128. package/lib/tabber/tabber.defaults.d.ts +1 -0
  129. package/lib/tabber/tabber.directives.d.ts +9 -0
  130. package/lib/tabber/tabber.module.d.ts +3 -2
  131. package/lib/tabber/tabber.types.d.ts +5 -0
  132. package/lib/table/table.component.d.ts +16 -15
  133. package/lib/table-pagination/table-pagination.component.d.ts +4 -3
  134. package/lib/text-list/text-list.component.d.ts +2 -1
  135. package/lib/types/item-storage.types.d.ts +17 -18
  136. package/package.json +2 -1
  137. package/prebuilt-themes/default/buttons/button.css +74 -58
  138. package/prebuilt-themes/default/buttons/button.css.map +1 -1
  139. package/prebuilt-themes/default/buttons/fab.css +64 -51
  140. package/prebuilt-themes/default/buttons/fab.css.map +1 -1
  141. package/prebuilt-themes/default/buttons/icon-button.css +50 -44
  142. package/prebuilt-themes/default/buttons/icon-button.css.map +1 -1
  143. package/prebuilt-themes/default/calendar.css +131 -55
  144. package/prebuilt-themes/default/calendar.css.map +1 -1
  145. package/prebuilt-themes/default/card.css.map +1 -1
  146. package/prebuilt-themes/default/checkbox-list.css +48 -22
  147. package/prebuilt-themes/default/checkbox-list.css.map +1 -1
  148. package/prebuilt-themes/default/checkbox.css +4 -4
  149. package/prebuilt-themes/default/chips.css +74 -42
  150. package/prebuilt-themes/default/chips.css.map +1 -1
  151. package/prebuilt-themes/default/color-display.css +1 -1
  152. package/prebuilt-themes/default/core.css +10 -1
  153. package/prebuilt-themes/default/core.css.map +1 -1
  154. package/prebuilt-themes/default/dialog.css +7 -2
  155. package/prebuilt-themes/default/dialog.css.map +1 -1
  156. package/prebuilt-themes/default/dropdown-panel.css.map +1 -1
  157. package/prebuilt-themes/default/form-field-frame.css +6 -2
  158. package/prebuilt-themes/default/form-field-frame.css.map +1 -1
  159. package/prebuilt-themes/default/form-field.css +62 -29
  160. package/prebuilt-themes/default/form-field.css.map +1 -1
  161. package/prebuilt-themes/default/inputs/autocomplete-input.css +61 -25
  162. package/prebuilt-themes/default/inputs/autocomplete-input.css.map +1 -1
  163. package/prebuilt-themes/default/inputs/color-input.css +5 -44
  164. package/prebuilt-themes/default/inputs/color-input.css.map +1 -1
  165. package/prebuilt-themes/default/inputs/date-input.css +69 -21
  166. package/prebuilt-themes/default/inputs/date-input.css.map +1 -1
  167. package/prebuilt-themes/default/inputs/digit-input.css +1 -1
  168. package/prebuilt-themes/default/inputs/digit-input.css.map +1 -1
  169. package/prebuilt-themes/default/inputs/file-input.css +102 -62
  170. package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
  171. package/prebuilt-themes/default/inputs/hex-input.css +38 -20
  172. package/prebuilt-themes/default/inputs/hex-input.css.map +1 -1
  173. package/prebuilt-themes/default/inputs/input.css +31 -15
  174. package/prebuilt-themes/default/inputs/input.css.map +1 -1
  175. package/prebuilt-themes/default/inputs/number-input.css +42 -22
  176. package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
  177. package/prebuilt-themes/default/inputs/password-input.css +58 -22
  178. package/prebuilt-themes/default/inputs/password-input.css.map +1 -1
  179. package/prebuilt-themes/default/inputs/search-bar.css +33 -16
  180. package/prebuilt-themes/default/inputs/search-bar.css.map +1 -1
  181. package/prebuilt-themes/default/kbd-shortcut.css +8 -4
  182. package/prebuilt-themes/default/kbd-shortcut.css.map +1 -1
  183. package/prebuilt-themes/default/kbd.css +19 -9
  184. package/prebuilt-themes/default/kbd.css.map +1 -1
  185. package/prebuilt-themes/default/modal.css +46 -22
  186. package/prebuilt-themes/default/modal.css.map +1 -1
  187. package/prebuilt-themes/default/progress-circle.css.map +1 -1
  188. package/prebuilt-themes/default/radio.css +46 -28
  189. package/prebuilt-themes/default/radio.css.map +1 -1
  190. package/prebuilt-themes/default/segment.css +71 -61
  191. package/prebuilt-themes/default/segment.css.map +1 -1
  192. package/prebuilt-themes/default/select.css +78 -44
  193. package/prebuilt-themes/default/select.css.map +1 -1
  194. package/prebuilt-themes/default/slide-toggle.css +88 -37
  195. package/prebuilt-themes/default/slide-toggle.css.map +1 -1
  196. package/prebuilt-themes/default/slider.css +93 -52
  197. package/prebuilt-themes/default/slider.css.map +1 -1
  198. package/prebuilt-themes/default/stars.css +4 -4
  199. package/prebuilt-themes/default/stars.css.map +1 -1
  200. package/prebuilt-themes/default/statebox.css +5 -5
  201. package/prebuilt-themes/default/tabber.css +47 -16
  202. package/prebuilt-themes/default/tabber.css.map +1 -1
  203. package/prebuilt-themes/default/table.css +0 -8
  204. package/prebuilt-themes/default/table.css.map +1 -1
  205. package/public-api.d.ts +2 -0
  206. package/themes/_variables.scss +2 -1
  207. package/themes/default/_mixins.scss +5 -5
  208. package/themes/default/buttons/_button-mixins.scss +43 -33
  209. package/themes/default/buttons/button.scss +54 -29
  210. package/themes/default/buttons/fab.scss +47 -26
  211. package/themes/default/buttons/icon-button.scss +40 -17
  212. package/themes/default/calendar.scss +148 -58
  213. package/themes/default/checkbox-list.scss +47 -21
  214. package/themes/default/chips.scss +70 -39
  215. package/themes/default/color-display.scss +1 -1
  216. package/themes/default/core.scss +13 -1
  217. package/themes/default/dialog.scss +9 -2
  218. package/themes/default/form-field-frame.scss +9 -4
  219. package/themes/default/form-field.scss +64 -28
  220. package/themes/default/inputs/_shared.scss +30 -9
  221. package/themes/default/inputs/autocomplete-input.scss +69 -14
  222. package/themes/default/inputs/color-input.scss +2 -2
  223. package/themes/default/inputs/date-input.scss +54 -5
  224. package/themes/default/inputs/digit-input.scss +1 -1
  225. package/themes/default/inputs/file-input.scss +86 -23
  226. package/themes/default/inputs/hex-input.scss +46 -9
  227. package/themes/default/inputs/input.scss +39 -4
  228. package/themes/default/inputs/number-input.scss +55 -15
  229. package/themes/default/inputs/password-input.scss +72 -15
  230. package/themes/default/inputs/search-bar.scss +41 -5
  231. package/themes/default/kbd-shortcut.scss +10 -4
  232. package/themes/default/kbd.scss +26 -9
  233. package/themes/default/modal.scss +56 -22
  234. package/themes/default/radio.scss +47 -26
  235. package/themes/default/segment.scss +77 -67
  236. package/themes/default/select.scss +98 -42
  237. package/themes/default/slide-toggle.scss +134 -59
  238. package/themes/default/slider.scss +102 -65
  239. package/themes/default/statebox.scss +1 -1
  240. package/themes/default/tabber.scss +48 -13
  241. package/themes/default/table.scss +8 -8
  242. package/lib/tabber/tab/tab.defaults.d.ts +0 -6
  243. package/prebuilt-themes/default/calendar-OLD.css +0 -294
  244. package/prebuilt-themes/default/calendar-OLD.css.map +0 -1
  245. package/themes/default/calendar-OLD.scss +0 -183
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;
35
+ margin: var(--ard-chip-margin, 0);
9
36
  vertical-align: middle;
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
@@ -10,7 +10,7 @@
10
10
  border: 0.0625em solid transparent;
11
11
  }
12
12
  .ard-color-display-wrapper .ard-color-display-label {
13
- font-family: monospace;
13
+ font-family: var(--ard-font-family-mono);
14
14
  font-size: 1.15em;
15
15
  }
16
16
  .ard-color-display-wrapper.ard-appearance-rounded .ard-color-display {
package/prebuilt-themes/default/core.css CHANGED
@@ -27,14 +27,23 @@
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: 0 0.375rem;
44
+ --ard-form-field-padding-compact: 0 0.375rem;
45
+ --ard-rounded-corner-radius: 0.375rem;
46
+ --ard-grid-spacing-unit: 0.25rem;
38
47
  --ard-primary-50: 234, 235, 243;
39
48
  --ard-primary-100: 159, 167, 228;
40
49
  --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;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/dropdown-panel.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/dropdown-panel.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;EACE;;;AAEF;EACE;EACA,YCPG;EDQH;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAEF;EACE;;AAIF;EACE;;AAEF;EACE,YCIS;;ADAX;EACE;EACA;;AAIF;EACE;;AAEA;EACE","file":"dropdown-panel.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/dropdown-panel.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;EACE;;;AAEF;EACE;EACA,YCPG;EDQH;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAEF;EACE;;AAIF;EACE;;AAEF;EACE,YCKS;;ADDX;EACE;EACA;;AAIF;EACE;;AAEA;EACE","file":"dropdown-panel.css"}
package/prebuilt-themes/default/form-field-frame.css CHANGED
@@ -9,7 +9,7 @@
9
9
  position: relative;
10
10
  font-size: 1rem;
11
11
  line-height: 1.25em;
12
- font-family: "Roboto", sans-serif;
12
+ font-family: var(--ard-font-family);
13
13
  border-radius: var(--ard-variant-border-radius);
14
14
  background: var(--ard-appearance-background);
15
15
  border: var(--ard-appearance-border);
@@ -36,7 +36,7 @@
36
36
  padding-right: 0.375em;
37
37
  }
38
38
  .ard-form-field-frame.ard-compact {
39
- min-height: var(--ard-form-field-compact-height);
39
+ min-height: var(--ard-form-field-height-compact);
40
40
  font-size: 0.85rem;
41
41
  line-height: 1;
42
42
  }
@@ -98,4 +98,8 @@
98
98
  opacity: 4.5%;
99
99
  }
100
100
 
101
+ .ard-readonly .ard-form-field-frame:hover .ard-form-field-overlay {
102
+ opacity: 0;
103
+ }
104
+
101
105
  /*# sourceMappingURL=form-field-frame.css.map */
package/prebuilt-themes/default/form-field-frame.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/form-field-frame.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAGA;EACE;EACA,YCoCkB;EDnClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EE8DA;EF5BA;EACA;EACA;;AAlCA;EACE;EACA;;AAEA;EACE;;AAGJ;AAAA;EAEE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE,YCEwB;EDDxB;EACA;;AEAF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;AAOF;EAEE;;AAEF;EACE;;AAEF;EACE;;AFlCF;EACE,YCnDM;EDoDN;EACA,YACE;;AAKF;EACE;;AAIF;EACE;;;AAIN;EACE;EACA;;AAGE;EACE","file":"form-field-frame.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/form-field-frame.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAGA;EACE;EACA,YCqCkB;EDpClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EE8DA;EF5BA;EACA;EACA;;AAlCA;EACE;EACA;;AAEA;EACE;;AAGJ;AAAA;EAEE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE,YCGwB;EDFxB;EACA;;AEAF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;AAOF;EAEE;;AAEF;EACE;;AAEF;EACE;;AFlCF;EACE,YCnDM;EDoDN;EACA;;AAIA;EACE;;AAIF;EACE;;;AAIN;EACE;EACA;;AAGE;EACE;;;AAMF;EACE","file":"form-field-frame.css"}
package/prebuilt-themes/default/form-field.css CHANGED
@@ -1,3 +1,25 @@
1
+ :root {
2
+ --ard-form-field-label-padding: 0.25rem 0 0.125rem 0.125rem;
3
+ --ard-form-field-label-font-size: 0.9375rem;
4
+ --ard-form-field-label-font-weight: 500;
5
+ --ard-form-field-label-required-font-weight: 500;
6
+ --ard-form-field-label-required-font-size: 112.5%;
7
+ --ard-form-field-label-required-color: orangered;
8
+ --ard-form-field-label-optional-font-weight: 400;
9
+ --ard-form-field-label-optional-font-size: 0.8125rem;
10
+ --ard-form-field-label-optional-font-style: italic;
11
+ --ard-form-field-hint-padding: 0.125rem 0 0.25rem 0.125rem;
12
+ --ard-form-field-hint-font-size: 0.8125rem;
13
+ --ard-form-field-hint-line-height: 1.2;
14
+ --ard-form-field-hint-right-padding-left: 0.5rem;
15
+ --ard-form-field-hint-error-line-height: 1.2;
16
+ --ard-form-field-hint-error-gap: 0.375em;
17
+ --ard-form-field-label-disabled-opacity: 40%;
18
+ --ard-form-field-hint-disabled-opacity: 50%;
19
+ --ard-form-field-error-animation-duration: 0.25s;
20
+ --ard-horizontal-form-field-gap: 0.5rem;
21
+ }
22
+
1
23
  ard-form-field,
2
24
  ard-horizontal-form-field {
3
25
  display: block;
@@ -11,94 +33,101 @@ ard-horizontal-form-field {
11
33
  }
12
34
  .ard-form-field .ard-label,
13
35
  .ard-horizontal-form-field .ard-label {
14
- padding: 0.25rem 0 0.125rem 0.125rem;
15
- font-size: 0.9375rem;
16
- font-weight: 500;
36
+ padding: var(--ard-form-field-label-padding, 0.25rem 0 0.125rem 0.125rem);
37
+ font-size: var(--ard-form-field-label-font-size, 0.9375rem);
38
+ font-weight: var(--ard-form-field-label-font-weight, 500);
17
39
  }
18
40
  .ard-form-field .ard-label .ard-label__required .ard-label__required-optional-text,
19
41
  .ard-horizontal-form-field .ard-label .ard-label__required .ard-label__required-optional-text {
20
- font-weight: 500;
21
- color: orangered;
22
- font-size: 112.5%;
42
+ font-weight: var(--ard-form-field-label-required-font-weight, 500);
43
+ font-size: var(--ard-form-field-label-required-font-size, 112.5%);
44
+ color: var(--ard-form-field-label-required-color, orangered);
23
45
  line-height: 1;
24
46
  }
25
47
  .ard-form-field .ard-label .ard-label__optional .ard-label__required-optional-text,
26
48
  .ard-horizontal-form-field .ard-label .ard-label__optional .ard-label__required-optional-text {
27
- font-weight: 400;
28
- font-size: 0.8125rem;
29
- font-style: italic;
49
+ font-weight: var(--ard-form-field-label-optional-font-weight, 400);
50
+ font-size: var(--ard-form-field-label-optional-font-size, 0.8125rem);
51
+ color: var(--ard-form-field-label-optional-color, var(--ard-text2));
52
+ font-style: var(--ard-form-field-label-optional-font-style, italic);
30
53
  }
31
54
  .ard-form-field .ard-form-field__hints,
32
55
  .ard-horizontal-form-field .ard-form-field__hints {
33
- padding: 0.125rem 0 0.25rem 0.125rem;
34
- font-size: 0.8125rem;
35
- line-height: 1.1;
56
+ padding: var(--ard-form-field-hint-padding, 0.125rem 0 0.25rem 0.125rem);
57
+ font-size: var(--ard-form-field-hint-font-size, 0.8125rem);
58
+ line-height: var(--ard-form-field-hint-line-height, 1.1);
36
59
  }
37
60
  .ard-form-field .ard-form-field__hints.ard-form-field__reserve-hint-line,
38
61
  .ard-horizontal-form-field .ard-form-field__hints.ard-form-field__reserve-hint-line {
39
62
  box-sizing: content-box;
40
- min-height: 1.1em;
63
+ min-height: calc(var(--ard-form-field-hint-line-height, 1.1) * 1em);
41
64
  }
42
65
  .ard-form-field .ard-form-field__hints-right > *,
43
66
  .ard-form-field .ard-form-field__errors-right > *,
44
67
  .ard-horizontal-form-field .ard-form-field__hints-right > *,
45
68
  .ard-horizontal-form-field .ard-form-field__errors-right > * {
46
- padding-left: 0.5rem;
69
+ padding-left: var(--ard-form-field-hint-right-padding-left, 0.5rem);
47
70
  }
48
71
  .ard-form-field .ard-hint,
49
72
  .ard-form-field .ard-error,
50
73
  .ard-horizontal-form-field .ard-hint,
51
74
  .ard-horizontal-form-field .ard-error {
52
75
  font-size: 1em;
53
- line-height: 1.1;
76
+ line-height: var(--ard-form-field-hint-error-line-height, 1.2);
54
77
  display: inline-grid;
55
- min-height: 1.1em;
78
+ min-height: calc(var(--ard-form-field-hint-error-line-height, 1.2) * 1em);
56
79
  }
57
80
  .ard-form-field .ard-hint,
58
81
  .ard-horizontal-form-field .ard-hint {
59
- color: var(--ard-text2);
82
+ color: var(--ard-form-field-hint-color, var(--ard-text2));
60
83
  }
61
84
  .ard-form-field .ard-error:not(.ard-hint-error),
62
85
  .ard-form-field .ard-form-field__errors .ard-hint-error,
63
86
  .ard-horizontal-form-field .ard-error:not(.ard-hint-error),
64
87
  .ard-horizontal-form-field .ard-form-field__errors .ard-hint-error {
65
- color: rgb(var(--ard-danger-700));
88
+ color: var(--ard-form-field-error-color, rgb(var(--ard-danger-700)));
66
89
  overflow: hidden;
67
90
  }
68
91
  .ard-form-field .ard-error:not(.ard-hint-error),
69
92
  .ard-horizontal-form-field .ard-error:not(.ard-hint-error) {
70
- animation: errorAppear 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
93
+ animation: errorAppear var(--ard-form-field-error-animation-duration, 0.25s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
71
94
  }
72
- .ard-form-field .ard-form-field__default-hint, .ard-form-field .ard-form-field__default-error,
95
+ .ard-form-field .ard-form-field__default-hint,
96
+ .ard-form-field .ard-form-field__default-error,
73
97
  .ard-horizontal-form-field .ard-form-field__default-hint,
74
98
  .ard-horizontal-form-field .ard-form-field__default-error {
75
- gap: 0.375em;
99
+ gap: var(--ard-form-field-hint-error-gap, 0.375em);
76
100
  }
77
101
  .ard-form-field.ard-form-field__with-error .ard-label,
78
- .ard-horizontal-form-field.ard-form-field__with-error .ard-label {
79
- color: rgb(var(--ard-danger-700));
102
+ .ard-form-field.ard-form-field__with-error ard-label,
103
+ .ard-horizontal-form-field.ard-form-field__with-error .ard-label,
104
+ .ard-horizontal-form-field.ard-form-field__with-error ard-label {
105
+ color: var(--ard-form-field-error-color, rgb(var(--ard-danger-700)));
80
106
  }
81
107
  .ard-form-field.ard-form-field__is-success .ard-label,
82
- .ard-horizontal-form-field.ard-form-field__is-success .ard-label {
83
- color: rgb(var(--ard-success-700));
108
+ .ard-form-field.ard-form-field__is-success ard-label,
109
+ .ard-horizontal-form-field.ard-form-field__is-success .ard-label,
110
+ .ard-horizontal-form-field.ard-form-field__is-success ard-label {
111
+ color: var(--ard-form-field-success-color, rgb(var(--ard-success-700)));
84
112
  }
85
113
  .ard-form-field.ard-form-field__control-disabled .ard-label,
86
114
  .ard-horizontal-form-field.ard-form-field__control-disabled .ard-label {
87
- opacity: 40%;
115
+ opacity: var(--ard-form-field-label-disabled-opacity, 40%);
88
116
  }
89
117
  .ard-form-field.ard-form-field__control-disabled .ard-form-field__hints,
90
118
  .ard-horizontal-form-field.ard-form-field__control-disabled .ard-form-field__hints {
91
- opacity: 50%;
119
+ opacity: var(--ard-form-field-hint-disabled-opacity, 50%);
92
120
  }
93
121
 
94
122
  .ard-horizontal-form-field {
95
123
  align-items: flex-start;
96
124
  justify-content: stretch;
97
125
  flex-direction: row;
98
- gap: 0.5rem;
126
+ gap: var(--ard-horizontal-form-field-gap, 0.5rem);
99
127
  }
100
128
  .ard-horizontal-form-field .ard-form-field__label-container {
101
129
  width: var(--ard-horizontal-form-field-label-width, 12rem);
130
+ min-width: var(--ard-horizontal-form-field-label-width, 12rem);
102
131
  height: var(--ard-form-field-height);
103
132
  display: flex;
104
133
  align-items: center;
@@ -108,7 +137,11 @@ ard-horizontal-form-field {
108
137
  flex-grow: 1;
109
138
  }
110
139
  .ard-horizontal-form-field:has(.ard-form-field__input .ard-compact) .ard-form-field__label-container {
111
- height: var(--ard-form-field-compact-height);
140
+ height: var(--ard-form-field-height-compact);
141
+ }
142
+
143
+ ard-label {
144
+ display: flex;
112
145
  }
113
146
 
114
147
  @keyframes errorAppear {
package/prebuilt-themes/default/form-field.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/form-field.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAGE;AAAA;EACE;EACA;EACA;EACA;;AAIF;AAAA;EACE;EACA;EACA;;AAIN;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAKF;AAAA;AAAA;AAAA;EACE;;AAGJ;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AAEF;AAAA;EACE,OClDI;;ADoDN;AAAA;AAAA;AAAA;EAEE,OCkBQ;EDjBR;;AAEF;AAAA;EACE;;AAEF;AAAA;AAAA;EACE;;AAIA;AAAA;EACE,OCMM;;ADFR;AAAA;EACE,OC2BO;;ADvBT;AAAA;EACE;;AAEF;AAAA;EACE;;;AAIN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,QC1DgB;ED2DhB;EACA;EACA;;AAEF;EACE;;AAIA;EACE,QCpEsB;;;ADyE5B;EACE;IACE;;EAEF;IACE","file":"form-field.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/form-field.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAGE;AAAA;EACE;EACA;EACA;EACA;;AAIF;AAAA;EACE;EACA;EACA;EACA;;AAIN;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAKF;AAAA;AAAA;AAAA;EACE;;AAGJ;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AAEF;AAAA;EACE;;AAEF;AAAA;AAAA;AAAA;EAEE;EACA;;AAEF;AAAA;EACE;;AAEF;AAAA;AAAA;AAAA;EAEE;;AAIA;AAAA;AAAA;AAAA;EAEE;;AAIF;AAAA;AAAA;AAAA;EAEE;;AAIF;AAAA;EACE;;AAEF;AAAA;EACE;;;AAIN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,QCzFgB;ED0FhB;EACA;EACA;;AAEF;EACE;;AAIA;EACE,QCnGsB;;;ADwG5B;EACE;;;AAGF;EACE;IACE;;EAEF;IACE","file":"form-field.css"}