@ardium-ui/ui 5.0.0-alpha.2 → 5.0.0-alpha.21

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 (99) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +387 -133
  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 +2 -1
  6. package/lib/_internal/selectable-list-component.d.ts +4 -3
  7. package/lib/badge/badge.directive.d.ts +3 -2
  8. package/lib/buttons/_button-base.d.ts +4 -3
  9. package/lib/buttons/button/button.component.d.ts +2 -1
  10. package/lib/buttons/icon-button/icon-button.component.d.ts +4 -3
  11. package/lib/calendar/calendar.component.d.ts +5 -4
  12. package/lib/calendar/views/years-view/years-view.component.d.ts +1 -2
  13. package/lib/checkbox-list/checkbox-list.component.d.ts +9 -6
  14. package/lib/checkbox-list/checkbox-list.directives.d.ts +7 -0
  15. package/lib/checkbox-list/checkbox-list.module.d.ts +1 -1
  16. package/lib/chip/chip.component.d.ts +2 -1
  17. package/lib/chip/deletable-chip/deletable-chip.component.d.ts +2 -1
  18. package/lib/chip/selectable-chip/selectable-chip.component.d.ts +3 -2
  19. package/lib/dialog/dialog.component.d.ts +8 -7
  20. package/lib/divider/divider.component.d.ts +2 -1
  21. package/lib/dropdown-panel/dropdown-panel.component.d.ts +2 -1
  22. package/lib/file-inputs/file-input/file-input.component.d.ts +2 -1
  23. package/lib/file-inputs/file-input-base.d.ts +4 -4
  24. package/lib/form-field/error/error.directive.d.ts +5 -1
  25. package/lib/form-field/form-field-base.d.ts +9 -3
  26. package/lib/form-field/form-field-native-inputs.d.ts +3 -2
  27. package/lib/form-field/form-field.component.d.ts +1 -1
  28. package/lib/form-field/form-field.module.d.ts +5 -4
  29. package/lib/form-field/hint/hint.directive.d.ts +3 -2
  30. package/lib/form-field/hint-error/hint-error.component.d.ts +6 -0
  31. package/lib/form-field/hint-error/hint-error.directive.d.ts +9 -0
  32. package/lib/form-field/horizontal-form-field.component.d.ts +1 -1
  33. package/lib/form-field/index.d.ts +4 -0
  34. package/lib/form-field/label/label.component.d.ts +3 -2
  35. package/lib/form-field-frame/form-field-frame.component.d.ts +4 -3
  36. package/lib/icon/icon.component.d.ts +2 -1
  37. package/lib/inputs/_simple-input-base.d.ts +4 -2
  38. package/lib/inputs/autocomplete-input/autocomplete-input.component.d.ts +3 -2
  39. package/lib/inputs/date-input/date-input.component.d.ts +11 -9
  40. package/lib/inputs/date-input/date-input.defaults.d.ts +2 -0
  41. package/lib/inputs/digit-input/digit-input.component.d.ts +4 -3
  42. package/lib/inputs/hex-input/hex-input.component.d.ts +5 -3
  43. package/lib/inputs/number-input/number-input.component.d.ts +8 -7
  44. package/lib/inputs/number-input/number-input.defaults.d.ts +1 -0
  45. package/lib/inputs/password-input/password-input.component.d.ts +4 -3
  46. package/lib/kbd/kbd.component.d.ts +2 -1
  47. package/lib/kbd-shortcut/kbd-shortcut.component.d.ts +2 -1
  48. package/lib/modal/modal.component.d.ts +6 -5
  49. package/lib/option/option.component.d.ts +2 -1
  50. package/lib/progress-bar/progress-bar.component.d.ts +4 -3
  51. package/lib/progress-circle/progress-circle.component.d.ts +5 -4
  52. package/lib/segment/segment.component.d.ts +6 -5
  53. package/lib/select/select.component.d.ts +27 -19
  54. package/lib/select/select.defaults.d.ts +7 -0
  55. package/lib/select/select.utils.d.ts +2 -0
  56. package/lib/slider/abstract-slider.d.ts +8 -7
  57. package/lib/star/rating-display/rating-display.component.d.ts +2 -1
  58. package/lib/star/rating-input/rating-input.component.d.ts +2 -1
  59. package/lib/tabber/index.d.ts +2 -0
  60. package/lib/tabber/tab/tab.component.d.ts +13 -7
  61. package/lib/tabber/tabber.component.d.ts +26 -9
  62. package/lib/tabber/tabber.directives.d.ts +9 -0
  63. package/lib/tabber/tabber.module.d.ts +3 -2
  64. package/lib/tabber/tabber.types.d.ts +5 -0
  65. package/lib/table/table.component.d.ts +16 -15
  66. package/lib/table-pagination/table-pagination.component.d.ts +4 -3
  67. package/lib/text-list/text-list.component.d.ts +2 -1
  68. package/package.json +1 -1
  69. package/prebuilt-themes/default/checkbox-list.css +44 -18
  70. package/prebuilt-themes/default/checkbox-list.css.map +1 -1
  71. package/prebuilt-themes/default/chips.css +9 -4
  72. package/prebuilt-themes/default/chips.css.map +1 -1
  73. package/prebuilt-themes/default/core.css +6 -0
  74. package/prebuilt-themes/default/core.css.map +1 -1
  75. package/prebuilt-themes/default/form-field-frame.css +6 -2
  76. package/prebuilt-themes/default/form-field-frame.css.map +1 -1
  77. package/prebuilt-themes/default/form-field.css +35 -13
  78. package/prebuilt-themes/default/form-field.css.map +1 -1
  79. package/prebuilt-themes/default/inputs/digit-input.css.map +1 -1
  80. package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
  81. package/prebuilt-themes/default/inputs/input.css +0 -1
  82. package/prebuilt-themes/default/inputs/input.css.map +1 -1
  83. package/prebuilt-themes/default/inputs/number-input.css +36 -13
  84. package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
  85. package/prebuilt-themes/default/modal.css +2 -1
  86. package/prebuilt-themes/default/modal.css.map +1 -1
  87. package/prebuilt-themes/default/radio.css +5 -3
  88. package/prebuilt-themes/default/radio.css.map +1 -1
  89. package/prebuilt-themes/default/stars.css.map +1 -1
  90. package/themes/_variables.scss +2 -0
  91. package/themes/default/checkbox-list.scss +47 -21
  92. package/themes/default/chips.scss +11 -11
  93. package/themes/default/core.scss +6 -0
  94. package/themes/default/form-field-frame.scss +10 -5
  95. package/themes/default/form-field.scss +27 -12
  96. package/themes/default/inputs/input.scss +0 -1
  97. package/themes/default/inputs/number-input.scss +37 -14
  98. package/themes/default/modal.scss +2 -1
  99. package/themes/default/radio.scss +5 -3
@@ -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;;AAIF;AAAA;EACE;;AAGJ;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AAEF;AAAA;EACE,OCjDI;;ADmDN;AAAA;EACE,OCkBQ;EDjBR;EACA;;AAIA;AAAA;EACE,OCWM;;ADPR;AAAA;EACE,OCgCO;;AD5BT;AAAA;EACE;;AAEF;AAAA;EACE;;;AAIN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIA;EACE;;;AAKN;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":"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;AAAA;EAEE;;AAIA;AAAA;AAAA;AAAA;EAEE,OCIM;;ADAR;AAAA;AAAA;AAAA;EAEE,OCwBO;;ADpBT;AAAA;EACE;;AAEF;AAAA;EACE;;;AAIN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,QC9DgB;ED+DhB;EACA;EACA;;AAEF;EACE;;AAIA;EACE,QCxEsB;;;AD6E5B;EACE;;;AAGF;EACE;IACE;;EAEF;IACE","file":"form-field.css"}
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/digit-input.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAIA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAEF;EAEE;EACA;;ACsBA;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;ADjDF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA,OE7BC;EF8BD,aE5BE;EF6BF;EACA;EACA;EACA,YACE;;AAGF;EACE,OErCA;EFsCA;;AAGF;EACE;;AAGJ;EACE;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EACE;;AAEA;EACE;;AAMJ;EACE,cEwBO;;AFpBT;EACE,kBEbK;EFcL,cERM;;AFYV;EACE;;AAEF;EACE;;AAEF;EACE;;;AAIF;EACE;EACA","file":"digit-input.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/digit-input.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAIA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAEF;EAEE;EACA;;ACsBA;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;ADjDF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA,OE7BC;EF8BD,aE5BE;EF6BF;EACA;EACA;EACA,YACE;;AAGF;EACE,OErCA;EFsCA;;AAGF;EACE;;AAGJ;EACE;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EACE;;AAEA;EACE;;AAMJ;EACE,cE0BO;;AFtBT;EACE,kBEXK;EFYL,cENM;;AFUV;EACE;;AAEF;EACE;;AAEF;EACE;;;AAIF;EACE;EACA","file":"digit-input.css"}
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/file-input.scss","../../../../../projects/ui/src/themes/default/_coloring.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACKE;EACE;;;AAGJ;EDLE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECDA;EACA;EACA;EACA;EACA;EACA;;AChBA;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;;AFrHF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AC1BF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EErCF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EF8BI,YGlDI;EHmDJ;;AAGA;EACE;;AAIF;EACE;;AAIF;EACE;;AAIF;EACE;;AIpEN;EACE,QDkCgB;ECjChB,ODiCgB;EChChB;;AAGF;EACE;EACA;EACA,ODGK;ECFL,ODyBgB;ECxBhB,QDwBgB;ECvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EFvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EEgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EF7CN;EACA;EACA,yBACE;EE4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;AJWN;EACE;;AAEF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;;AAEF;EACE;EACA;EACA;;;AAGJ;EACE;;;AAIE;AAAA;EAEE,OG1BM","file":"file-input.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/file-input.scss","../../../../../projects/ui/src/themes/default/_coloring.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACKE;EACE;;;AAGJ;EDLE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECDA;EACA;EACA;EACA;EACA;EACA;;AChBA;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;;AFrHF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AC1BF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EErCF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EF8BI,YGlDI;EHmDJ;;AAGA;EACE;;AAIF;EACE;;AAIF;EACE;;AAIF;EACE;;AIpEN;EACE,QDkCgB;ECjChB,ODiCgB;EChChB;;AAGF;EACE;EACA;EACA,ODGK;ECFL,ODyBgB;ECxBhB,QDwBgB;ECvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EFvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EEgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EF7CN;EACA;EACA,yBACE;EE4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;AJWN;EACE;;AAEF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;;AAEF;EACE;EACA;EACA;;;AAGJ;EACE;;;AAIE;AAAA;EAEE,OGxBM","file":"file-input.css"}
@@ -13,7 +13,6 @@
13
13
  font-size: 1rem;
14
14
  line-height: 1.25em;
15
15
  padding: 0 0.375rem;
16
- min-width: 10rem;
17
16
  max-width: 100%;
18
17
  }
19
18
  .ard-input .ard-input-container {
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/input.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACEA;EDEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECTA;EACA;EACA;;ADSA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AE3CF;EACE,QCkCgB;EDjChB,OCiCgB;EDhChB;;AAGF;EACE;EACA;EACA,OCGK;EDFL,OCyBgB;EDxBhB,QCwBgB;EDvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EEvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EE7CN;EACA;EACA,yBACE;EF4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE","file":"input.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/input.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACEA;EDEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECTA;EACA;;ADUA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AE3CF;EACE,QCkCgB;EDjChB,OCiCgB;EDhChB;;AAGF;EACE;EACA;EACA,OCGK;EDFL,OCyBgB;EDxBhB,QCwBgB;EDvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EEvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EE7CN;EACA;EACA,yBACE;EF4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE","file":"input.css"}
@@ -1,11 +1,19 @@
1
1
  /**
2
2
  * Should be applied to the first element in the component's template.
3
3
  */
4
- ard-number-input {
5
- width: 9.5rem;
4
+ :root {
5
+ --ard-number-input-width: 9.5rem;
6
+ --ard-number-input-height: var(--ard-form-field-height);
7
+ --ard-number-input-height-compact: var(--ard-form-field-height-compact);
8
+ --ard-number-input-font-size: var(--ard-form-field-font-size);
9
+ --ard-number-input-font-size-compact: var(--ard-form-field-font-size-compact);
10
+ --ard-number-input-padding: var(--ard-form-field-padding);
11
+ --ard-number-input-padding-compact: var(--ard-form-field-padding-compact);
12
+ --ard-number-input-rounded-border-radius: 8px;
6
13
  }
7
- ard-number-input:not(:has(.ard-quick-change-button)) {
8
- width: 6rem;
14
+
15
+ ard-number-input {
16
+ width: var(--ard-number-input-width, 9.5rem);
9
17
  }
10
18
 
11
19
  .ard-number-input {
@@ -19,10 +27,11 @@ ard-number-input:not(:has(.ard-quick-change-button)) {
19
27
  box-sizing: border-box;
20
28
  font-size: 1rem;
21
29
  line-height: 1.25em;
22
- min-height: 2.1875rem;
23
- height: 2.1875rem;
30
+ min-height: var(--ard-form-field-height, var(--ard-number-input-height, 2.3125rem));
31
+ height: var(--ard-form-field-height, var(--ard-number-input-height, 2.3125rem));
24
32
  gap: 0;
25
33
  width: 100%;
34
+ font-size: var(--ard-number-input-font-size, var(--ard-form-field-font-size, 1rem));
26
35
  }
27
36
  .ard-number-input .ard-input-container {
28
37
  flex-grow: 1;
@@ -85,12 +94,17 @@ ard-number-input:not(:has(.ard-quick-change-button)) {
85
94
  .ard-number-input .ard-input-container {
86
95
  height: 100%;
87
96
  max-width: 100%;
97
+ padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
88
98
  }
89
99
  .ard-number-input .ard-input-container > input {
90
100
  width: 100%;
91
101
  }
102
+ .ard-number-input .ard-placeholder {
103
+ padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
104
+ }
92
105
  .ard-number-input .ard-quick-change-button {
93
106
  position: relative;
107
+ min-width: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
94
108
  }
95
109
  .ard-number-input .ard-quick-change-button .ard-button {
96
110
  height: 100%;
@@ -119,10 +133,10 @@ ard-number-input:not(:has(.ard-quick-change-button)) {
119
133
  border-bottom-left-radius: 0;
120
134
  }
121
135
  .ard-number-input.ard-variant-rounded {
122
- border-radius: 8px;
136
+ border-radius: var(--ard-number-input-rounded-border-radius, 8px);
123
137
  }
124
138
  .ard-number-input.ard-variant-rounded.ard-quick-change-false .ard-input-container {
125
- border-radius: 8px;
139
+ border-radius: var(--ard-number-input-rounded-border-radius, 8px);
126
140
  }
127
141
  .ard-number-input.ard-variant-sharp {
128
142
  border-radius: 0;
@@ -132,8 +146,8 @@ ard-number-input:not(:has(.ard-quick-change-button)) {
132
146
  }
133
147
  .ard-number-input.ard-variant-pill .ard-button {
134
148
  border-radius: 9999px !important;
135
- height: 30px;
136
- width: 30px;
149
+ width: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
150
+ height: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
137
151
  margin: 0 2px;
138
152
  }
139
153
  .ard-number-input.ard-variant-pill.ard-quick-change-false .ard-input-container {
@@ -153,9 +167,18 @@ ard-number-input:not(:has(.ard-quick-change-button)) {
153
167
  border: var(--ard-appearance-border);
154
168
  }
155
169
  .ard-number-input.ard-compact {
156
- min-height: 1.6875rem;
157
- height: 1.6875rem;
158
- font-size: 0.925rem;
170
+ min-height: var(--ard-form-field-height-compact, var(--ard-number-input-height-compact, 1.6875rem));
171
+ height: var(--ard-form-field-height-compact, var(--ard-number-input-height-compact, 1.6875rem));
172
+ font-size: var(--ard-number-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.9375rem));
173
+ }
174
+ .ard-number-input.ard-compact .ard-input-container {
175
+ padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
176
+ }
177
+ .ard-number-input.ard-compact .ard-placeholder {
178
+ padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
179
+ }
180
+ .ard-number-input.ard-compact .ard-quick-change-button {
181
+ min-width: var(--ard-form-field-height-compact, var(--ard-number-input-height-compact, 1.6875rem));
159
182
  }
160
183
 
161
184
  .ard-disabled > .ard-number-input {
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/number-input.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACEA;EACE;;AAEA;EACE;;;AAIJ;EDNE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECAA;EACA;EACA;EACA;;ADDA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AELF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;ADnDF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;;AAEA;EACE;EACA;;AAGJ;EACE;;AAEA;EACE;EACA;;AAMN;EACE;;AAGE;EACE;;AAIN;EACE;;AAEF;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIA;EACE;;AAQJ;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAIF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EAMA,YE3HG;;AFuHH;EACE","file":"number-input.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/number-input.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EDbE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECOA;EACA;EACA;EACA;EACA;;ADTA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AELF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;AD3CF;EACE;EACA;EACA;;AAEA;EACE;;AAGJ;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;;AAEA;EACE;EACA;;AAGJ;EACE;;AAEA;EACE;EACA;;AAMN;EACE;;AAGE;EACE;;AAIN;EACE;;AAEF;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIA;EACE;;AAQJ;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;;;AAMJ;EACE;EACA;EAMA,YElJG;;AF8IH;EACE","file":"number-input.css"}
@@ -13,8 +13,9 @@
13
13
  .ard-modal .ard-modal-panel {
14
14
  padding: 1.25rem;
15
15
  padding-top: 1rem;
16
- background: var(--ard-bg);
17
16
  max-width: calc(100vw - 4rem);
17
+ max-height: calc(100vh - 4rem);
18
+ background: var(--ard-bg);
18
19
  position: relative;
19
20
  display: flex;
20
21
  flex-direction: column;
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/modal.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,YCcoB;;ADZtB;EACE;EACA;EACA,YCjBC;EDkBD;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;;AAIF;EACE;;AAIN;EACE;EACA;EACA;;AAEA;EACE;EACA,OCxCC;EDyCD;EACA;;AAEF;EACE;EACA;EACA;;AAKF;EACE,YC1BW;;AD+Bb;EACE;;AAIF;EACE;;AAMF;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA","file":"modal.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/modal.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,YCcoB;;ADZtB;EACE;EACA;EACA;EACA;EACA,YCnBC;EDoBD;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;;AAIF;EACE;;AAIN;EACE;EACA;EACA;;AAEA;EACE;EACA,OCzCC;ED0CD;EACA;;AAEF;EACE;EACA;EACA;;AAKF;EACE,YC3BW;;ADgCb;EACE;;AAIF;EACE;;AAMF;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA","file":"modal.css"}
@@ -13,7 +13,8 @@ ard-radio {
13
13
  outline: none;
14
14
  font-size: 1em;
15
15
  display: flex;
16
- gap: 0.375em;
16
+ align-items: center;
17
+ gap: 0.75rem;
17
18
  padding: 0;
18
19
  width: 100%;
19
20
  }
@@ -153,7 +154,8 @@ ard-radio {
153
154
  .ard-radio > .ard-radio-circles {
154
155
  position: relative;
155
156
  width: 1.25em;
156
- height: 1.25em;
157
+ min-width: 1.25em;
158
+ aspect-ratio: 1;
157
159
  }
158
160
  .ard-radio > .ard-radio-circles > .ard-radio-outer-circle {
159
161
  position: absolute;
@@ -161,7 +163,7 @@ ard-radio {
161
163
  right: 0;
162
164
  top: 0;
163
165
  bottom: 0;
164
- border: 2px solid var(--ard-detail);
166
+ border: 0.125em solid var(--ard-detail);
165
167
  border-radius: 9999px;
166
168
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
167
169
  }
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/radio.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;;;AAGF;EACE;EACA;EACA;;;AAGF;EAGE;EACA;EACA;EACA;EACA;EACA;;ACpBA;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;;AD7GF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EEtCF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EF+BI;EACA,kBGpDI;EHsDJ,YACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAOF;EACE;;AAEF;EACE;;AAEF;EACE;;AAMF;EACE;;AAMF;EACE;;;AAON;EACE;EACA;EACA","file":"radio.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/radio.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;;;AAGF;EACE;EACA;EACA;;;AAGF;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;ACrBA;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;;AD5GF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EExCF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFiCI;EACA,kBGtDI;EHwDJ,YACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAOF;EACE;;AAEF;EACE;;AAEF;EACE;;AAMF;EACE;;AAMF;EACE;;;AAON;EACE;EACA;EACA","file":"radio.css"}
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/stars.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAIA;AAAA;AAAA;AAAA;EAKE;;ACNA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AD3HF;AAAA;AAAA;AAAA;EACE,OE8BG;;;AF3BP;EACE;EACA;EACA;EACA;;;AAEF;AAAA;EAEE;EACA;;;AAEF;EACE;;AAEA;EACE;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EGzCA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EHkCE;EACA;EACA;EACA;EACA;EACA;EACA;;AGrCF;EACE;EAEA,YACE;;AAMF;EACE;;AH+BF;EACE;;AAIF;EACE;;;AAMJ;AAAA;EAEE;EACA","file":"stars.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/stars.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAIA;AAAA;AAAA;AAAA;EAKE;;ACNA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AD3HF;AAAA;AAAA;AAAA;EACE,OEgCG;;;AF7BP;EACE;EACA;EACA;EACA;;;AAEF;AAAA;EAEE;EACA;;;AAEF;EACE;;AAEA;EACE;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EGzCA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EHkCE;EACA;EACA;EACA;EACA;EACA;EACA;;AGrCF;EACE;EAEA,YACE;;AAMF;EACE;;AH+BF;EACE;;AAIF;EACE;;;AAMJ;AAAA;EAEE;EACA","file":"stars.css"}
@@ -39,6 +39,8 @@ $timing-fn: cubic-bezier(0.4, 0, 0.2, 1);
39
39
 
40
40
  $clear-button-size: var(--ard-clear-button-size);
41
41
  $dropdown-button-size: var(--ard-dropdown-button-size);
42
+ $form-field-height: var(--ard-form-field-height);
43
+ $form-field-compact-height: var(--ard-form-field-height-compact);
42
44
 
43
45
  $gold: var(--ard-gold);
44
46
 
@@ -1,22 +1,47 @@
1
1
  @use './mixins' as CM;
2
2
  @use '../variables' as ARD;
3
3
 
4
+ :root {
5
+ --ard-checkbox-list-padding: 0.375rem 0;
6
+ --ard-checkbox-list-item-hover-opacity: 5%;
7
+ --ard-checkbox-list-item-active-opacity: 15%;
8
+ --ard-checkbox-list-item-height: 3rem;
9
+ --ard-checkbox-list-item-height-compact: 2rem;
10
+ --ard-checkbox-list-checkbox-min-width: 1.25rem;
11
+ --ard-checkbox-list-checkbox-padding: 0.625rem;
12
+ --ard-checkbox-list-item-padding: 0 0.5rem 0 0;
13
+ --ard-checkbox-list-gap: 0;
14
+ --ard-checkbox-list-gap-compact: 0;
15
+ --ard-checkbox-list-item-gap: 0.5rem;
16
+ --ard-checkbox-list-item-gap-compact: 0.325rem;
17
+ --ard-checkbox-list-disabled-opacity: 50%;
18
+ }
19
+
4
20
  .ard-checkbox-list {
5
21
  display: flex;
6
22
  flex-direction: column;
23
+ padding: var(--ard-checkbox-list-padding, 0.375rem 0);
24
+ gap: var(--ard-checkbox-list-gap, 0);
7
25
 
8
26
  .ard-checkbox-list__item {
9
27
  display: flex;
10
28
  align-items: center;
11
- gap: 0.5rem;
12
- padding: 0 1rem;
29
+ justify-content: stretch;
30
+ gap: var(--ard-checkbox-list-item-gap, 0.5rem);
31
+ padding: var(--ard-checkbox-list-item-padding, 0 0.5rem 0 0);
13
32
  position: relative;
14
33
  cursor: pointer;
15
- height: 3rem;
34
+ height: max-content;
35
+ min-height: var(--ard-checkbox-list-item-height, 3rem);
16
36
 
17
37
  > label {
18
38
  pointer-events: none;
19
39
  user-select: none;
40
+ flex-grow: 1;
41
+ padding: 0;
42
+ min-height: var(--ard-checkbox-list-item-height, 3rem);
43
+ display: flex;
44
+ align-items: center;
20
45
  }
21
46
  > .ard-focus-overlay {
22
47
  @include CM.focus-overlay();
@@ -24,16 +49,17 @@
24
49
  }
25
50
  &.ard-item-highlighted {
26
51
  > .ard-focus-overlay {
27
- opacity: 5%;
52
+ opacity: var(--ard-checkbox-list-item-hover-opacity, 5%);
28
53
  }
29
54
  }
30
55
  &:active {
31
56
  > .ard-focus-overlay {
32
- opacity: 15%;
57
+ opacity: var(--ard-checkbox-list-item-active-opacity, 15%);
33
58
  }
34
59
  }
35
60
  ard-checkbox {
36
- padding: 0.625rem;
61
+ padding: var(--ard-checkbox-list-checkbox-padding, 0.625rem);
62
+ min-width: var(--ard-checkbox-list-checkbox-min-width, 1.25rem);
37
63
 
38
64
  .ard-checkbox {
39
65
  .ard-focus-overlay {
@@ -45,39 +71,39 @@
45
71
  pointer-events: none;
46
72
 
47
73
  > label {
48
- opacity: 50%;
74
+ opacity: var(--ard-checkbox-list-disabled-opacity, 50%);
49
75
  }
50
76
  }
51
77
  }
52
78
  &.ard-compact {
79
+ gap: var(--ard-checkbox-list-gap-compact, 0);
80
+
53
81
  .ard-checkbox-list__item {
54
- gap: 0.325rem;
55
- height: 2rem;
82
+ gap: var(--ard-checkbox-list-item-gap-compact, 0.325rem);
83
+ height: var(--ard-checkbox-list-item-height-compact, 2rem);
56
84
  }
57
85
  }
58
86
  //! ALIGN TYPES
59
87
  &.ard-align-left-clumped,
60
- &.ard-align-left-split {
61
- .ard-checkbox-list__item {
62
- flex-direction: row;
63
- }
64
- }
65
- &.ard-align-right-clumped,
66
88
  &.ard-align-right-split {
67
89
  .ard-checkbox-list__item {
68
- flex-direction: row-reverse;
90
+ label {
91
+ justify-content: flex-start;
92
+ }
69
93
  }
70
94
  }
71
- &.ard-align-left-clumped,
95
+ &.ard-align-left-split,
72
96
  &.ard-align-right-clumped {
73
97
  .ard-checkbox-list__item {
74
- justify-content: flex-start;
98
+ label {
99
+ justify-content: flex-end;
100
+ }
75
101
  }
76
102
  }
77
- &.ard-align-left-split,
78
- &.ard-align-right-split {
103
+ &.ard-align-right-split,
104
+ &.ard-align-right-clumped {
79
105
  .ard-checkbox-list__item {
80
- justify-content: space-between;
106
+ flex-direction: row-reverse;
81
107
  }
82
108
  }
83
109
  }
@@ -68,10 +68,7 @@
68
68
  &.ard-chip-selectable {
69
69
  background-color: ARD.$bg-f;
70
70
  color: ARD.$text2;
71
- transition:
72
- color 0.15s ease,
73
- border-color 0.15s ease,
74
- background-color 0.15s ease;
71
+ transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
75
72
 
76
73
  &.ard-chip-selected {
77
74
  color: var(--ard-cmpcl--on-bg-colored);
@@ -88,9 +85,7 @@
88
85
  font-weight: 600;
89
86
 
90
87
  &.ard-chip-selectable {
91
- transition:
92
- color 0.15s ease,
93
- border-color 0.15s ease;
88
+ transition: color 0.15s ease, border-color 0.15s ease;
94
89
 
95
90
  > .ard-focus-overlay {
96
91
  opacity: 0;
@@ -110,19 +105,20 @@
110
105
 
111
106
  &.ard-chip-selected {
112
107
  color: var(--ard-cmpcl--content);
108
+ border-color: var(--ard-cmpcl--content);
113
109
 
114
110
  > .ard-focus-overlay {
115
- opacity: 7.5%;
111
+ opacity: 12%;
116
112
  }
117
113
  &:hover,
118
114
  &:focus {
119
115
  > .ard-focus-overlay {
120
- opacity: 15%;
116
+ opacity: 17%;
121
117
  }
122
118
  }
123
119
  &:active {
124
120
  > .ard-focus-overlay {
125
- opacity: 20%;
121
+ opacity: 22%;
126
122
  }
127
123
  }
128
124
  }
@@ -130,9 +126,13 @@
130
126
  }
131
127
  &.ard-appearance-outlined-strong {
132
128
  > .ard-focus-overlay {
133
- opacity: 7.5%;
129
+ opacity: 12%;
134
130
  background: var(--ard-cmpcl--bg-colored);
135
131
  }
132
+ &.ard-chip-selectable {
133
+ color: var(--ard-text2);
134
+ border: 1px solid var(--ard-detail-light);
135
+ }
136
136
  }
137
137
 
138
138
  //! alignments
@@ -38,6 +38,12 @@
38
38
 
39
39
  --ard-clear-button-size: 0.9rem;
40
40
  --ard-dropdown-button-size: 0.4rem;
41
+ --ard-form-field-height: 2.3125rem;
42
+ --ard-form-field-height-compact: 1.6875rem;
43
+ --ard-form-field-font-size: 1rem;
44
+ --ard-form-field-font-size-compact: 1rem;
45
+ --ard-form-field-padding: 0 0.375rem;
46
+ --ard-form-field-padding-compact: 0 0.375rem;
41
47
 
42
48
  --ard-primary-50: 234, 235, 243;
43
49
  --ard-primary-100: 159, 167, 228;
@@ -3,7 +3,7 @@
3
3
 
4
4
  .ard-form-field-frame {
5
5
  box-sizing: border-box;
6
- min-height: 2.3125rem;
6
+ min-height: ARD.$form-field-height;
7
7
  height: max-content;
8
8
  max-width: 100%;
9
9
  display: flex;
@@ -38,7 +38,7 @@
38
38
 
39
39
  //! compact
40
40
  &.ard-compact {
41
- min-height: 1.6875rem;
41
+ min-height: ARD.$form-field-compact-height;
42
42
  font-size: 0.85rem;
43
43
  line-height: 1;
44
44
  }
@@ -53,9 +53,7 @@
53
53
  .ard-form-field-overlay {
54
54
  background: ARD.$overlay;
55
55
  opacity: 0;
56
- transition:
57
- opacity 0.15s ARD.$timing-fn,
58
- background-color 0.15s ARD.$timing-fn;
56
+ transition: opacity 0.15s ARD.$timing-fn, background-color 0.15s ARD.$timing-fn;
59
57
  }
60
58
 
61
59
  &:hover {
@@ -79,3 +77,10 @@
79
77
  }
80
78
  }
81
79
  }
80
+ .ard-readonly .ard-form-field-frame {
81
+ &:hover {
82
+ .ard-form-field-overlay {
83
+ opacity: 0;
84
+ }
85
+ }
86
+ }
@@ -42,34 +42,44 @@ ard-horizontal-form-field {
42
42
  min-height: 1.1em;
43
43
  }
44
44
  }
45
- .ard-form-field__hints-right {
45
+ .ard-form-field__hints-right,
46
+ .ard-form-field__errors-right {
46
47
  > * {
47
- padding-left: 0.25rem;
48
+ padding-left: 0.5rem;
48
49
  }
49
50
  }
50
51
  .ard-hint,
51
52
  .ard-error {
52
53
  font-size: 1em;
53
- line-height: 1.1;
54
- display: block;
55
- height: 1.1em;
54
+ line-height: 1.2;
55
+ display: inline-grid;
56
+ min-height: 1.2em;
56
57
  }
57
58
  .ard-hint {
58
59
  color: ARD.$text2;
59
60
  }
60
- .ard-error {
61
+ .ard-error:not(.ard-hint-error),
62
+ .ard-form-field__errors .ard-hint-error {
61
63
  color: ARD.$danger700;
62
64
  overflow: hidden;
65
+ }
66
+ .ard-error:not(.ard-hint-error) {
63
67
  animation: errorAppear 0.25s ARD.$timing-fn forwards;
64
68
  }
69
+ .ard-form-field__default-hint,
70
+ .ard-form-field__default-error {
71
+ gap: 0.375em;
72
+ }
65
73
 
66
74
  &.ard-form-field__with-error {
67
- .ard-label {
75
+ .ard-label,
76
+ ard-label {
68
77
  color: ARD.$danger700;
69
78
  }
70
79
  }
71
80
  &.ard-form-field__is-success {
72
- .ard-label {
81
+ .ard-label,
82
+ ard-label {
73
83
  color: ARD.$success700;
74
84
  }
75
85
  }
@@ -90,7 +100,8 @@ ard-horizontal-form-field {
90
100
 
91
101
  .ard-form-field__label-container {
92
102
  width: var(--ard-horizontal-form-field-label-width, 12rem);
93
- height: 2.3125rem;
103
+ min-width: var(--ard-horizontal-form-field-label-width, 12rem);
104
+ height: ARD.$form-field-height;
94
105
  display: flex;
95
106
  align-items: center;
96
107
  justify-content: var(--ard-horizontal-form-field-label-align, flex-start);
@@ -101,16 +112,20 @@ ard-horizontal-form-field {
101
112
 
102
113
  &:has(.ard-form-field__input .ard-compact) {
103
114
  .ard-form-field__label-container {
104
- height: 1.5625rem;
115
+ height: ARD.$form-field-compact-height;
105
116
  }
106
117
  }
107
118
  }
108
119
 
120
+ ard-label {
121
+ display: flex;
122
+ }
123
+
109
124
  @keyframes errorAppear {
110
125
  from {
111
- height: 0;
126
+ grid-template-rows: 0fr;
112
127
  }
113
128
  to {
114
- height: 1.1em;
129
+ grid-template-rows: 1fr;
115
130
  }
116
131
  }
@@ -5,7 +5,6 @@
5
5
  .ard-input {
6
6
  @include inputMixin.genericInput();
7
7
  padding: 0 0.375rem;
8
- min-width: 10rem;
9
8
  max-width: 100%;
10
9
 
11
10
  @include CB.clearButton();