@ardium-ui/ui 5.0.0-alpha.75 → 5.0.0-alpha.77

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 (132) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +106 -106
  2. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/prebuilt-themes/default/badge.css +234 -234
  5. package/prebuilt-themes/default/badge.css.map +1 -1
  6. package/prebuilt-themes/default/buttons/button.css +324 -324
  7. package/prebuilt-themes/default/buttons/button.css.map +1 -1
  8. package/prebuilt-themes/default/buttons/fab.css +317 -319
  9. package/prebuilt-themes/default/buttons/fab.css.map +1 -1
  10. package/prebuilt-themes/default/buttons/icon-button.css +299 -300
  11. package/prebuilt-themes/default/buttons/icon-button.css.map +1 -1
  12. package/prebuilt-themes/default/calendar.css +390 -391
  13. package/prebuilt-themes/default/calendar.css.map +1 -1
  14. package/prebuilt-themes/default/card.css +151 -159
  15. package/prebuilt-themes/default/card.css.map +1 -1
  16. package/prebuilt-themes/default/checkbox-list.css +89 -88
  17. package/prebuilt-themes/default/checkbox-list.css.map +1 -1
  18. package/prebuilt-themes/default/checkbox.css +349 -349
  19. package/prebuilt-themes/default/checkbox.css.map +1 -1
  20. package/prebuilt-themes/default/chips.css +412 -412
  21. package/prebuilt-themes/default/chips.css.map +1 -1
  22. package/prebuilt-themes/default/color-display.css +34 -33
  23. package/prebuilt-themes/default/color-display.css.map +1 -1
  24. package/prebuilt-themes/default/color-picker.css +105 -103
  25. package/prebuilt-themes/default/color-picker.css.map +1 -1
  26. package/prebuilt-themes/default/core.css +108 -106
  27. package/prebuilt-themes/default/core.css.map +1 -1
  28. package/prebuilt-themes/default/dialog.css +19 -20
  29. package/prebuilt-themes/default/dialog.css.map +1 -1
  30. package/prebuilt-themes/default/divider.css +84 -83
  31. package/prebuilt-themes/default/divider.css.map +1 -1
  32. package/prebuilt-themes/default/dropdown-panel.css +42 -42
  33. package/prebuilt-themes/default/dropdown-panel.css.map +1 -1
  34. package/prebuilt-themes/default/file-drop-area.css +329 -329
  35. package/prebuilt-themes/default/file-drop-area.css.map +1 -1
  36. package/prebuilt-themes/default/form-field-frame.css +102 -102
  37. package/prebuilt-themes/default/form-field-frame.css.map +1 -1
  38. package/prebuilt-themes/default/form-field.css +148 -151
  39. package/prebuilt-themes/default/form-field.css.map +1 -1
  40. package/prebuilt-themes/default/inputs/autocomplete-input.css +183 -183
  41. package/prebuilt-themes/default/inputs/autocomplete-input.css.map +1 -1
  42. package/prebuilt-themes/default/inputs/color-input.css +99 -98
  43. package/prebuilt-themes/default/inputs/color-input.css.map +1 -1
  44. package/prebuilt-themes/default/inputs/date-input.css +134 -135
  45. package/prebuilt-themes/default/inputs/date-input.css.map +1 -1
  46. package/prebuilt-themes/default/inputs/digit-input.css +120 -122
  47. package/prebuilt-themes/default/inputs/digit-input.css.map +1 -1
  48. package/prebuilt-themes/default/inputs/file-input.css +385 -387
  49. package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
  50. package/prebuilt-themes/default/inputs/hex-input.css +150 -149
  51. package/prebuilt-themes/default/inputs/hex-input.css.map +1 -1
  52. package/prebuilt-themes/default/inputs/input.css +137 -136
  53. package/prebuilt-themes/default/inputs/input.css.map +1 -1
  54. package/prebuilt-themes/default/inputs/number-input.css +213 -214
  55. package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
  56. package/prebuilt-themes/default/inputs/password-input.css +120 -120
  57. package/prebuilt-themes/default/inputs/password-input.css.map +1 -1
  58. package/prebuilt-themes/default/kbd-shortcut.css +14 -13
  59. package/prebuilt-themes/default/kbd-shortcut.css.map +1 -1
  60. package/prebuilt-themes/default/kbd.css +26 -25
  61. package/prebuilt-themes/default/kbd.css.map +1 -1
  62. package/prebuilt-themes/default/modal.css +96 -95
  63. package/prebuilt-themes/default/modal.css.map +1 -1
  64. package/prebuilt-themes/default/progress-bar.css +250 -235
  65. package/prebuilt-themes/default/progress-bar.css.map +1 -1
  66. package/prebuilt-themes/default/progress-circle.css +178 -177
  67. package/prebuilt-themes/default/progress-circle.css.map +1 -1
  68. package/prebuilt-themes/default/radio.css +246 -248
  69. package/prebuilt-themes/default/radio.css.map +1 -1
  70. package/prebuilt-themes/default/segment.css +432 -431
  71. package/prebuilt-themes/default/segment.css.map +1 -1
  72. package/prebuilt-themes/default/select.css +302 -304
  73. package/prebuilt-themes/default/select.css.map +1 -1
  74. package/prebuilt-themes/default/slide-toggle.css +319 -319
  75. package/prebuilt-themes/default/slide-toggle.css.map +1 -1
  76. package/prebuilt-themes/default/slider.css +399 -399
  77. package/prebuilt-themes/default/slider.css.map +1 -1
  78. package/prebuilt-themes/default/snackbar.css +185 -185
  79. package/prebuilt-themes/default/snackbar.css.map +1 -1
  80. package/prebuilt-themes/default/spinner.css +161 -161
  81. package/prebuilt-themes/default/spinner.css.map +1 -1
  82. package/prebuilt-themes/default/stars.css +271 -275
  83. package/prebuilt-themes/default/stars.css.map +1 -1
  84. package/prebuilt-themes/default/tabber.css +250 -250
  85. package/prebuilt-themes/default/tabber.css.map +1 -1
  86. package/prebuilt-themes/default/table-pagination.css +57 -57
  87. package/prebuilt-themes/default/table-pagination.css.map +1 -1
  88. package/prebuilt-themes/default/table.css +464 -463
  89. package/prebuilt-themes/default/table.css.map +1 -1
  90. package/themes/default/badge.scss +112 -110
  91. package/themes/default/buttons/button.scss +91 -89
  92. package/themes/default/buttons/fab.scss +80 -76
  93. package/themes/default/buttons/icon-button.scss +73 -71
  94. package/themes/default/calendar.scss +246 -242
  95. package/themes/default/card.scss +161 -159
  96. package/themes/default/checkbox-list.scss +85 -83
  97. package/themes/default/checkbox.scss +68 -66
  98. package/themes/default/chips.scss +202 -195
  99. package/themes/default/color-display.scss +40 -38
  100. package/themes/default/color-picker.scss +95 -93
  101. package/themes/default/core.scss +124 -121
  102. package/themes/default/dialog.scss +21 -19
  103. package/themes/default/divider.scss +92 -90
  104. package/themes/default/dropdown-panel.scss +49 -47
  105. package/themes/default/file-drop-area.scss +197 -195
  106. package/themes/default/form-field-frame.scss +69 -67
  107. package/themes/default/form-field.scss +135 -133
  108. package/themes/default/inputs/autocomplete-input.scss +99 -97
  109. package/themes/default/inputs/color-input.scss +34 -32
  110. package/themes/default/inputs/date-input.scss +88 -86
  111. package/themes/default/inputs/digit-input.scss +103 -101
  112. package/themes/default/inputs/file-input.scss +158 -156
  113. package/themes/default/inputs/hex-input.scss +66 -64
  114. package/themes/default/inputs/input.scss +52 -50
  115. package/themes/default/inputs/number-input.scss +162 -160
  116. package/themes/default/inputs/password-input.scss +99 -97
  117. package/themes/default/kbd-shortcut.scss +15 -13
  118. package/themes/default/kbd.scss +34 -32
  119. package/themes/default/modal.scss +106 -104
  120. package/themes/default/progress-bar.scss +126 -102
  121. package/themes/default/progress-circle.scss +50 -48
  122. package/themes/default/radio.scss +110 -108
  123. package/themes/default/segment.scss +282 -277
  124. package/themes/default/select.scss +255 -253
  125. package/themes/default/slide-toggle.scss +173 -171
  126. package/themes/default/slider.scss +223 -217
  127. package/themes/default/snackbar.scss +49 -47
  128. package/themes/default/spinner.scss +23 -21
  129. package/themes/default/stars.scss +95 -93
  130. package/themes/default/tabber.scss +105 -103
  131. package/themes/default/table-pagination.scss +60 -59
  132. package/themes/default/table.scss +375 -373
package/prebuilt-themes/default/chips.css CHANGED
@@ -1,415 +1,415 @@
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-focus-overlay-opacity: 0%;
23
- --ard-chip-outlined-selected-focus-visible-overlay-opacity: 17%;
24
- --ard-chip-outlined-selected-active-overlay-opacity: 22%;
25
- --ard-chip-transition: 0.15s ease;
26
- --ard-chip-disabled-opacity: 60%;
27
- --ard-chip-disabled-selected-opacity: 40%;
28
- }
29
-
30
- .ard-chip-wrapper {
31
- border-radius: var(--ard-variant-border-radius);
32
- font-family: var(--ard-font-family);
33
- color: var(--ard-text2);
34
- background: var(--ard-bg);
35
- border-radius: var(--ard-variant-border-radius);
36
- padding: 0;
37
- margin: var(--ard-chip-margin, 0);
38
- vertical-align: center;
39
- display: flex;
40
- align-items: center;
41
- font-size: var(--ard-chip-font-size, 0.875rem);
42
- position: relative;
43
- outline: none;
44
- user-select: none;
45
- overflow: hidden;
46
- height: var(--ard-chip-height, 2rem);
47
- }
48
- .ard-chip-wrapper.ard-color-none {
49
- --ard-cmpcl--bg: var(--ard-bg);
50
- --ard-cmpcl--bg-colored: var(--ard-bg-alt);
51
- --ard-cmpcl--bg-colored-light: var(--ard-detail-light);
52
- --ard-cmpcl--bg-header: var(--ard-bg-filled);
53
- --ard-cmpcl--bg-colored-verylight: var(--ard-bg-darker);
54
- --ard-cmpcl--on-bg: var(--ard-text);
55
- --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
56
- --ard-cmpcl--on-bg-colored-light: var(--ard-text);
57
- --ard-cmpcl--border: var(--ard-text);
58
- --ard-cmpcl--border-light: var(--ard-text2);
59
- --ard-cmpcl--content: var(--ard-text);
60
- --ard-cmpcl--content-light: var(--ard-text-alt);
61
- --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
62
- --ard-cmpcl--overlay: var(--ard-overlay);
63
- --ard-cmpcl--overlay-colored: var(--ard-overlay);
64
- --ard-cmpcl--overlay-colored-light: var(--ard-text-alt);
65
- }
66
- .ard-chip-wrapper.ard-color-primary {
67
- --ard-cmpcl--bg: rgb(var(--ard-primary-500));
68
- --ard-cmpcl--bg-colored: rgb(var(--ard-primary-500));
69
- --ard-cmpcl--bg-colored-light: rgb(var(--ard-primary-100));
70
- --ard-cmpcl--bg-header: rgb(var(--ard-primary-100));
71
- --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-primary-50));
72
- --ard-cmpcl--on-bg: var(--ard-text-alt);
73
- --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
74
- --ard-cmpcl--on-bg-colored-light: var(--ard-text);
75
- --ard-cmpcl--border: rgb(var(--ard-primary-300));
76
- --ard-cmpcl--border-light: rgb(var(--ard-primary-100));
77
- --ard-cmpcl--content: rgb(var(--ard-primary-700));
78
- --ard-cmpcl--content-light: rgb(var(--ard-primary-300));
79
- --ard-cmpcl--overlay-rgb: var(--ard-primary-500);
80
- --ard-cmpcl--overlay: var(--ard-overlay);
81
- --ard-cmpcl--overlay-colored: rgb(var(--ard-primary-700));
82
- --ard-cmpcl--overlay-colored-light: rgb(var(--ard-primary-100));
83
- }
84
- .ard-chip-wrapper.ard-color-secondary {
85
- --ard-cmpcl--bg: rgb(var(--ard-secondary-500));
86
- --ard-cmpcl--bg-colored: rgb(var(--ard-secondary-500));
87
- --ard-cmpcl--bg-colored-light: rgb(var(--ard-secondary-50));
88
- --ard-cmpcl--bg-header: rgb(var(--ard-secondary-50));
89
- --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-secondary-50));
90
- --ard-cmpcl--on-bg: var(--ard-text-alt);
91
- --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
92
- --ard-cmpcl--on-bg-colored-light: var(--ard-text);
93
- --ard-cmpcl--border: rgb(var(--ard-secondary-300));
94
- --ard-cmpcl--border-light: rgb(var(--ard-secondary-100));
95
- --ard-cmpcl--content: rgb(var(--ard-secondary-700));
96
- --ard-cmpcl--content-light: rgb(var(--ard-secondary-300));
97
- --ard-cmpcl--overlay-rgb: var(--ard-secondary-500);
98
- --ard-cmpcl--overlay: var(--ard-overlay);
99
- --ard-cmpcl--overlay-colored: rgb(var(--ard-secondary-700));
100
- --ard-cmpcl--overlay-colored-light: rgb(var(--ard-secondary-100));
101
- }
102
- .ard-chip-wrapper.ard-color-warn {
103
- --ard-cmpcl--bg: rgb(var(--ard-warn-500));
104
- --ard-cmpcl--bg-colored: rgb(var(--ard-warn-500));
105
- --ard-cmpcl--bg-colored-light: rgb(var(--ard-warn-50));
106
- --ard-cmpcl--bg-header: rgb(var(--ard-warn-50));
107
- --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-warn-50));
108
- --ard-cmpcl--on-bg: var(--ard-text-alt);
109
- --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
110
- --ard-cmpcl--on-bg-colored-light: var(--ard-text);
111
- --ard-cmpcl--border: rgb(var(--ard-warn-300));
112
- --ard-cmpcl--border-light: rgb(var(--ard-warn-100));
113
- --ard-cmpcl--content: rgb(var(--ard-warn-700));
114
- --ard-cmpcl--content-light: rgb(var(--ard-warn-100));
115
- --ard-cmpcl--overlay-rgb: var(--ard-warn-500);
116
- --ard-cmpcl--overlay: var(--ard-overlay);
117
- --ard-cmpcl--overlay-colored: rgb(var(--ard-warn-700));
118
- --ard-cmpcl--overlay-colored-light: rgb(var(--ard-warn-100));
119
- }
120
- .ard-chip-wrapper.ard-color-danger {
121
- --ard-cmpcl--bg: rgb(var(--ard-danger-700));
122
- --ard-cmpcl--bg-colored: rgb(var(--ard-danger-700));
123
- --ard-cmpcl--bg-colored-light: rgb(var(--ard-danger-100));
124
- --ard-cmpcl--bg-header: rgb(var(--ard-danger-100));
125
- --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-danger-50));
126
- --ard-cmpcl--on-bg: var(--ard-text-alt);
127
- --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
128
- --ard-cmpcl--on-bg-colored-light: var(--ard-text);
129
- --ard-cmpcl--border: rgb(var(--ard-danger-300));
130
- --ard-cmpcl--border-light: rgb(var(--ard-danger-100));
131
- --ard-cmpcl--content: rgb(var(--ard-danger-900));
132
- --ard-cmpcl--content-light: rgb(var(--ard-danger-500));
133
- --ard-cmpcl--overlay-rgb: var(--ard-danger-700);
134
- --ard-cmpcl--overlay: var(--ard-overlay);
135
- --ard-cmpcl--overlay-colored: rgb(var(--ard-danger-700));
136
- --ard-cmpcl--overlay-colored-light: rgb(var(--ard-danger-300));
137
- }
138
- .ard-chip-wrapper.ard-color-success {
139
- --ard-cmpcl--bg: rgb(var(--ard-success-700));
140
- --ard-cmpcl--bg-colored: rgb(var(--ard-success-700));
141
- --ard-cmpcl--bg-colored-light: rgb(var(--ard-success-50));
142
- --ard-cmpcl--bg-header: rgb(var(--ard-success-50));
143
- --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-success-50));
144
- --ard-cmpcl--on-bg: var(--ard-text-alt);
145
- --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
146
- --ard-cmpcl--on-bg-colored-light: var(--ard-text);
147
- --ard-cmpcl--border: rgb(var(--ard-success-300));
148
- --ard-cmpcl--border-light: rgb(var(--ard-success-100));
149
- --ard-cmpcl--content: rgb(var(--ard-success-900));
150
- --ard-cmpcl--content-light: rgb(var(--ard-success-300));
151
- --ard-cmpcl--overlay-rgb: var(--ard-success-700);
152
- --ard-cmpcl--overlay: var(--ard-overlay);
153
- --ard-cmpcl--overlay-colored: rgb(var(--ard-success-700));
154
- --ard-cmpcl--overlay-colored-light: rgb(var(--ard-success-300));
155
- }
156
- .ard-chip-wrapper.ard-color-info {
157
- --ard-cmpcl--bg: rgb(var(--ard-info-500));
158
- --ard-cmpcl--bg-colored: rgb(var(--ard-info-500));
159
- --ard-cmpcl--bg-colored-light: rgb(var(--ard-info-50));
160
- --ard-cmpcl--bg-header: rgb(var(--ard-info-50));
161
- --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-info-50));
162
- --ard-cmpcl--on-bg: var(--ard-text-alt);
163
- --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
164
- --ard-cmpcl--on-bg-colored-light: var(--ard-text);
165
- --ard-cmpcl--border: rgb(var(--ard-info-300));
166
- --ard-cmpcl--border-light: rgb(var(--ard-info-100));
167
- --ard-cmpcl--content: rgb(var(--ard-info-700));
168
- --ard-cmpcl--content-light: rgb(var(--ard-info-300));
169
- --ard-cmpcl--overlay-rgb: var(--ard-info-500);
170
- --ard-cmpcl--overlay: var(--ard-overlay);
171
- --ard-cmpcl--overlay-colored: rgb(var(--ard-info-700));
172
- --ard-cmpcl--overlay-colored-light: rgb(var(--ard-info-100));
173
- }
174
- .ard-chip-wrapper.ard-color-currentColor {
175
- --ard-cmpcl--bg: var(--ard-bg);
176
- --ard-cmpcl--bg-colored: currentColor;
177
- --ard-cmpcl--on-bg: currentColor;
178
- --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
179
- --ard-cmpcl--border: currentColor;
180
- --ard-cmpcl--border-light: currentColor;
181
- --ard-cmpcl--content: currentColor;
182
- --ard-cmpcl--content-light: currentColor;
183
- --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
184
- --ard-cmpcl--overlay: var(--ard-overlay);
185
- --ard-cmpcl--overlay-colored: currentColor;
186
- --ard-cmpcl--overlay-colored-light: currentColor;
187
- }
188
- .ard-chip-wrapper ard-clear-button {
189
- height: var(--ard-clear-button-size);
190
- width: var(--ard-clear-button-size);
191
- position: relative;
192
- }
193
- .ard-chip-wrapper .ard-clear-btn-wrapper {
194
- cursor: pointer;
195
- font-size: medium;
196
- color: var(--ard-detail);
197
- width: var(--ard-clear-button-size);
198
- height: var(--ard-clear-button-size);
199
- line-height: 1em;
200
- border-radius: 999px;
201
- border: none;
202
- padding: 0;
203
- background: transparent;
204
- position: absolute;
205
- left: 50%;
206
- top: 50%;
207
- transform: translate(-50%, -50%);
208
- outline: none;
209
- color: inherit;
210
- }
211
- .ard-chip-wrapper .ard-clear-btn-wrapper .ard-hitbox {
212
- position: absolute;
213
- left: -1px;
214
- right: -1px;
215
- top: -1px;
216
- bottom: -1px;
217
- }
218
- .ard-chip-wrapper .ard-clear-btn-wrapper .ard-focus-overlay {
219
- position: absolute;
220
- top: calc(-1 * 1px);
221
- bottom: calc(-1 * 1px);
222
- left: calc(-1 * 1px);
223
- right: calc(-1 * 1px);
224
- opacity: 0;
225
- border-radius: inherit;
226
- pointer-events: none;
227
- transition: opacity 0.2s ease;
228
- background: currentColor;
229
- }
230
- .ard-chip-wrapper .ard-clear-btn-wrapper .ard-clear-btn {
231
- position: absolute;
232
- left: 50%;
233
- top: 50%;
234
- transform: translate(-50%, -50%);
235
- }
236
- .ard-chip-wrapper .ard-clear-btn-wrapper .ard-clear-btn::before {
237
- content: "close";
238
- font-family: "Material Symbols Outlined";
239
- font-size: 1.5em;
240
- font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
241
- font-size: 70%;
242
- }
243
- .ard-chip-wrapper .ard-clear-btn-wrapper:hover .ard-focus-overlay {
244
- opacity: 5%;
245
- }
246
- .ard-chip-wrapper .ard-clear-btn-wrapper:focus .ard-focus-overlay {
247
- opacity: 8%;
248
- }
249
- .ard-chip-wrapper .ard-clear-btn-wrapper:active .ard-focus-overlay {
250
- opacity: 15%;
251
- }
252
- .ard-chip-wrapper.ard-variant-rounded, .ard-chip-wrapper.ard-variant-semirounded {
253
- --ard-variant-border-radius: 8px;
254
- }
255
- .ard-chip-wrapper.ard-variant-pill {
256
- --ard-variant-border-radius: 9999px;
257
- }
258
- .ard-chip-wrapper.ard-variant-sharp {
259
- --ard-variant-border-radius: 0;
260
- }
261
- .ard-chip-wrapper > .ard-chip-content-wrapper {
262
- padding: var(--ard-chip-padding, 0 0.75rem);
263
- }
264
- .ard-chip-wrapper > .ard-focus-overlay {
265
- position: absolute;
266
- top: calc(-1 * 0px);
267
- bottom: calc(-1 * 0px);
268
- left: calc(-1 * 0px);
269
- right: calc(-1 * 0px);
270
- opacity: 0;
271
- border-radius: inherit;
272
- pointer-events: none;
273
- transition: opacity 0.2s ease;
274
- background: var(--ard-overlay);
275
- border-radius: 0;
276
- }
277
- .ard-chip-wrapper.ard-chip-selectable {
278
- cursor: pointer;
279
- display: flex;
280
- align-items: center;
281
- }
282
- .ard-chip-wrapper.ard-chip-selectable:hover > .ard-focus-overlay, .ard-chip-wrapper.ard-chip-selectable:focus > .ard-focus-overlay {
283
- opacity: var(--ard-chip-selectable-hover-overlay-opacity, 7.5%);
284
- }
285
- .ard-chip-wrapper.ard-chip-selectable:active > .ard-focus-overlay {
286
- opacity: var(--ard-chip-selectable-active-overlay-opacity, 20%);
287
- }
288
- .ard-chip-wrapper.ard-chip-selectable .ard-chip-selection-icon {
289
- font-family: "Material Symbols Outlined";
290
- font-size: 1.5em;
291
- font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
292
- }
293
- .ard-chip-wrapper.ard-chip-selectable .ard-chip-selection-icon::after {
294
- content: "\e876";
295
- }
296
- .ard-chip-wrapper.ard-appearance-filled, .ard-chip-wrapper.ard-appearance-filled-strong {
297
- border: 1px solid transparent;
298
- }
299
- .ard-chip-wrapper.ard-appearance-filled.ard-chip-selectable, .ard-chip-wrapper.ard-appearance-filled-strong.ard-chip-selectable {
300
- background-color: var(--ard-chip-filled-unselected-background, var(--ard-bg-filled));
301
- color: var(--ard-chip-filled-unselected-color, var(--ard-text2));
302
- 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);
303
- }
304
- .ard-chip-wrapper.ard-appearance-filled.ard-chip-selectable.ard-chip-selected, .ard-chip-wrapper.ard-appearance-filled-strong.ard-chip-selectable.ard-chip-selected {
305
- color: var(--ard-cmpcl--on-bg-colored);
306
- background: var(--ard-cmpcl--bg-colored);
307
- }
308
- .ard-chip-wrapper.ard-appearance-filled {
309
- background: var(--ard-cmpcl--bg-colored-light);
310
- color: var(--ard-cmpcl--on-bg-colored-light);
311
- }
312
- .ard-chip-wrapper.ard-appearance-filled-strong {
313
- background: var(--ard-cmpcl--bg-colored);
314
- color: var(--ard-cmpcl--on-bg-colored);
315
- }
316
- .ard-chip-wrapper.ard-appearance-outlined, .ard-chip-wrapper.ard-appearance-outlined-strong {
317
- background: transparent;
318
- color: var(--ard-cmpcl--content);
319
- border: 1px solid var(--ard-cmpcl--bg-colored);
320
- border-radius: var(--ard-variant-border-radius);
321
- font-weight: 600;
322
- }
323
- .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable {
324
- transition: color var(--ard-chip-transition, 0.15s ease), border-color var(--ard-chip-transition, 0.15s ease);
325
- }
326
- .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 {
327
- opacity: 0;
328
- background: var(--ard-cmpcl--bg-colored);
329
- }
330
- .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 {
331
- opacity: var(--ard-chip-outlined-hover-overlay-opacity, 4%);
332
- }
333
- .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 {
334
- opacity: var(--ard-chip-outlined-active-overlay-opacity, 10%);
335
- }
336
- .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 {
337
- color: var(--ard-cmpcl--content);
338
- border-color: var(--ard-cmpcl--content);
339
- }
340
- .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 {
341
- opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
342
- }
343
- .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected:hover > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected:hover > .ard-focus-overlay {
344
- opacity: var(--ard-chip-outlined-selected-hover-overlay-opacity, 17%);
345
- }
346
- .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:focus > .ard-focus-overlay {
347
- opacity: var(--ard-chip-outlined-selected-focus-overlay-opacity, 0%);
348
- }
349
- .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected:focus-visible > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected:focus-visible > .ard-focus-overlay {
350
- opacity: var(--ard-chip-outlined-selected-focus-visible-overlay-opacity, 17%);
351
- }
352
- .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 {
353
- opacity: var(--ard-chip-outlined-selected-active-overlay-opacity, 22%);
354
- }
355
- .ard-chip-wrapper.ard-appearance-outlined-strong > .ard-focus-overlay {
356
- opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
357
- background: var(--ard-cmpcl--bg-colored);
358
- }
359
- .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable {
360
- color: var(--ard-chip-outlined-strong-selectable-color, var(--ard-text2));
361
- border: 1px solid var(--ard-chip-outlined-strong-selectable-border-color, var(--ard-detail-light));
362
- }
363
- .ard-chip-wrapper.ard-chip-align-left {
364
- flex-direction: row;
365
- padding-left: var(--ard-chip-padding-align-left, 0.125rem);
366
- }
367
- .ard-chip-wrapper.ard-chip-align-left .ard-chip-selection-icon {
368
- padding-left: var(--ard-chip-selection-icon-padding, 0.5rem);
369
- margin-right: var(--ard-chip-selection-icon-margin, -0.125rem);
370
- }
371
- .ard-chip-wrapper.ard-chip-align-left.ard-chip-deletable {
372
- padding-left: var(--ard-chip-padding-align-left-deletable, 0.25rem);
373
- }
374
- .ard-chip-wrapper.ard-chip-align-left.ard-chip-deletable .ard-chip-content-wrapper {
375
- padding-left: var(--ard-chip-content-wrapper-padding, 0.5rem);
376
- }
377
- .ard-chip-wrapper.ard-chip-align-right {
378
- flex-direction: row-reverse;
379
- padding-right: var(--ard-chip-padding-align-right, 0.125rem);
380
- }
381
- .ard-chip-wrapper.ard-chip-align-right .ard-chip-selection-icon {
382
- padding-right: var(--ard-chip-selection-icon-padding, 0.5rem);
383
- margin-left: var(--ard-chip-selection-icon-margin, -0.125rem);
384
- }
385
- .ard-chip-wrapper.ard-chip-align-right.ard-chip-deletable {
386
- padding-right: var(--ard-chip-padding-align-right-deletable, 0.25rem);
387
- }
388
- .ard-chip-wrapper.ard-chip-align-right.ard-chip-deletable .ard-chip-content-wrapper {
389
- padding-right: var(--ard-chip-content-wrapper-padding, 0.5rem);
390
- }
391
- .ard-chip-wrapper.ard-compact {
392
- height: var(--ard-chip-height-compact, 1.4375rem);
393
- font-size: var(--ard-chip-font-size-compact, 0.8125rem);
394
- }
395
- .ard-chip-wrapper.ard-compact > .ard-chip-content-wrapper {
396
- padding: var(--ard-chip-padding-compact, 0 0.5625rem);
397
- }
398
- .ard-chip-wrapper.ard-compact.ard-chip-align-left .ard-chip-selection-icon {
399
- padding-left: var(--ard-chip-selection-icon-padding-compact, 0.25rem);
400
- margin-right: var(--ard-chip-selection-icon-margin-compact, -0.25rem);
401
- }
402
- .ard-chip-wrapper.ard-compact.ard-chip-align-right .ard-chip-selection-icon {
403
- padding-right: var(--ard-chip-selection-icon-padding-compact, 0.25rem);
404
- margin-left: var(--ard-chip-selection-icon-margin-compact, -0.25rem);
405
- }
406
-
407
- .ard-disabled .ard-chip-wrapper {
408
- pointer-events: none;
409
- opacity: var(--ard-chip-disabled-opacity, 60%);
410
- }
411
- .ard-disabled .ard-chip-wrapper.ard-chip-selected {
412
- opacity: var(--ard-chip-disabled-selected-opacity, 40%);
1
+ @layer ard-theme {
2
+ :root {
3
+ --ard-chip-margin: 0;
4
+ --ard-chip-height: 2rem;
5
+ --ard-chip-height-compact: 1.4375rem;
6
+ --ard-chip-padding: 0 0.75rem;
7
+ --ard-chip-padding-compact: 0 0.5625rem;
8
+ --ard-chip-padding-align-left: 0.125rem;
9
+ --ard-chip-padding-align-left-deletable: 0.25rem;
10
+ --ard-chip-padding-align-right: 0.125rem;
11
+ --ard-chip-padding-align-right-deletable: 0.25rem;
12
+ --ard-chip-selection-icon-padding: 0.5rem;
13
+ --ard-chip-selection-icon-margin: -0.125rem;
14
+ --ard-chip-selection-icon-padding-compact: 0.25rem;
15
+ --ard-chip-selection-icon-margin-compact: -0.25rem;
16
+ --ard-chip-content-wrapper-padding: 0.5rem;
17
+ --ard-chip-selectable-hover-overlay-opacity: 7.5%;
18
+ --ard-chip-selectable-active-overlay-opacity: 20%;
19
+ --ard-chip-outlined-hover-overlay-opacity: 4%;
20
+ --ard-chip-outlined-active-overlay-opacity: 10%;
21
+ --ard-chip-outlined-selected-overlay-opacity: 12%;
22
+ --ard-chip-outlined-selected-hover-overlay-opacity: 17%;
23
+ --ard-chip-outlined-selected-focus-overlay-opacity: 0%;
24
+ --ard-chip-outlined-selected-focus-visible-overlay-opacity: 17%;
25
+ --ard-chip-outlined-selected-active-overlay-opacity: 22%;
26
+ --ard-chip-transition: 0.15s ease;
27
+ --ard-chip-disabled-opacity: 60%;
28
+ --ard-chip-disabled-selected-opacity: 40%;
29
+ }
30
+ .ard-chip-wrapper {
31
+ border-radius: var(--ard-variant-border-radius);
32
+ font-family: var(--ard-font-family);
33
+ color: var(--ard-text2);
34
+ background: var(--ard-bg);
35
+ border-radius: var(--ard-variant-border-radius);
36
+ padding: 0;
37
+ margin: var(--ard-chip-margin, 0);
38
+ vertical-align: center;
39
+ display: flex;
40
+ align-items: center;
41
+ font-size: var(--ard-chip-font-size, 0.875rem);
42
+ position: relative;
43
+ outline: none;
44
+ user-select: none;
45
+ overflow: hidden;
46
+ height: var(--ard-chip-height, 2rem);
47
+ }
48
+ .ard-chip-wrapper.ard-color-none {
49
+ --ard-cmpcl--bg: var(--ard-bg);
50
+ --ard-cmpcl--bg-colored: var(--ard-bg-alt);
51
+ --ard-cmpcl--bg-colored-light: var(--ard-detail-light);
52
+ --ard-cmpcl--bg-header: var(--ard-bg-filled);
53
+ --ard-cmpcl--bg-colored-verylight: var(--ard-bg-darker);
54
+ --ard-cmpcl--on-bg: var(--ard-text);
55
+ --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
56
+ --ard-cmpcl--on-bg-colored-light: var(--ard-text);
57
+ --ard-cmpcl--border: var(--ard-text);
58
+ --ard-cmpcl--border-light: var(--ard-text2);
59
+ --ard-cmpcl--content: var(--ard-text);
60
+ --ard-cmpcl--content-light: var(--ard-text-alt);
61
+ --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
62
+ --ard-cmpcl--overlay: var(--ard-overlay);
63
+ --ard-cmpcl--overlay-colored: var(--ard-overlay);
64
+ --ard-cmpcl--overlay-colored-light: var(--ard-text-alt);
65
+ }
66
+ .ard-chip-wrapper.ard-color-primary {
67
+ --ard-cmpcl--bg: rgb(var(--ard-primary-500));
68
+ --ard-cmpcl--bg-colored: rgb(var(--ard-primary-500));
69
+ --ard-cmpcl--bg-colored-light: rgb(var(--ard-primary-100));
70
+ --ard-cmpcl--bg-header: rgb(var(--ard-primary-100));
71
+ --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-primary-50));
72
+ --ard-cmpcl--on-bg: var(--ard-text-alt);
73
+ --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
74
+ --ard-cmpcl--on-bg-colored-light: var(--ard-text);
75
+ --ard-cmpcl--border: rgb(var(--ard-primary-300));
76
+ --ard-cmpcl--border-light: rgb(var(--ard-primary-100));
77
+ --ard-cmpcl--content: rgb(var(--ard-primary-700));
78
+ --ard-cmpcl--content-light: rgb(var(--ard-primary-300));
79
+ --ard-cmpcl--overlay-rgb: var(--ard-primary-500);
80
+ --ard-cmpcl--overlay: var(--ard-overlay);
81
+ --ard-cmpcl--overlay-colored: rgb(var(--ard-primary-700));
82
+ --ard-cmpcl--overlay-colored-light: rgb(var(--ard-primary-100));
83
+ }
84
+ .ard-chip-wrapper.ard-color-secondary {
85
+ --ard-cmpcl--bg: rgb(var(--ard-secondary-500));
86
+ --ard-cmpcl--bg-colored: rgb(var(--ard-secondary-500));
87
+ --ard-cmpcl--bg-colored-light: rgb(var(--ard-secondary-50));
88
+ --ard-cmpcl--bg-header: rgb(var(--ard-secondary-50));
89
+ --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-secondary-50));
90
+ --ard-cmpcl--on-bg: var(--ard-text-alt);
91
+ --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
92
+ --ard-cmpcl--on-bg-colored-light: var(--ard-text);
93
+ --ard-cmpcl--border: rgb(var(--ard-secondary-300));
94
+ --ard-cmpcl--border-light: rgb(var(--ard-secondary-100));
95
+ --ard-cmpcl--content: rgb(var(--ard-secondary-700));
96
+ --ard-cmpcl--content-light: rgb(var(--ard-secondary-300));
97
+ --ard-cmpcl--overlay-rgb: var(--ard-secondary-500);
98
+ --ard-cmpcl--overlay: var(--ard-overlay);
99
+ --ard-cmpcl--overlay-colored: rgb(var(--ard-secondary-700));
100
+ --ard-cmpcl--overlay-colored-light: rgb(var(--ard-secondary-100));
101
+ }
102
+ .ard-chip-wrapper.ard-color-warn {
103
+ --ard-cmpcl--bg: rgb(var(--ard-warn-500));
104
+ --ard-cmpcl--bg-colored: rgb(var(--ard-warn-500));
105
+ --ard-cmpcl--bg-colored-light: rgb(var(--ard-warn-50));
106
+ --ard-cmpcl--bg-header: rgb(var(--ard-warn-50));
107
+ --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-warn-50));
108
+ --ard-cmpcl--on-bg: var(--ard-text-alt);
109
+ --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
110
+ --ard-cmpcl--on-bg-colored-light: var(--ard-text);
111
+ --ard-cmpcl--border: rgb(var(--ard-warn-300));
112
+ --ard-cmpcl--border-light: rgb(var(--ard-warn-100));
113
+ --ard-cmpcl--content: rgb(var(--ard-warn-700));
114
+ --ard-cmpcl--content-light: rgb(var(--ard-warn-100));
115
+ --ard-cmpcl--overlay-rgb: var(--ard-warn-500);
116
+ --ard-cmpcl--overlay: var(--ard-overlay);
117
+ --ard-cmpcl--overlay-colored: rgb(var(--ard-warn-700));
118
+ --ard-cmpcl--overlay-colored-light: rgb(var(--ard-warn-100));
119
+ }
120
+ .ard-chip-wrapper.ard-color-danger {
121
+ --ard-cmpcl--bg: rgb(var(--ard-danger-700));
122
+ --ard-cmpcl--bg-colored: rgb(var(--ard-danger-700));
123
+ --ard-cmpcl--bg-colored-light: rgb(var(--ard-danger-100));
124
+ --ard-cmpcl--bg-header: rgb(var(--ard-danger-100));
125
+ --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-danger-50));
126
+ --ard-cmpcl--on-bg: var(--ard-text-alt);
127
+ --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
128
+ --ard-cmpcl--on-bg-colored-light: var(--ard-text);
129
+ --ard-cmpcl--border: rgb(var(--ard-danger-300));
130
+ --ard-cmpcl--border-light: rgb(var(--ard-danger-100));
131
+ --ard-cmpcl--content: rgb(var(--ard-danger-900));
132
+ --ard-cmpcl--content-light: rgb(var(--ard-danger-500));
133
+ --ard-cmpcl--overlay-rgb: var(--ard-danger-700);
134
+ --ard-cmpcl--overlay: var(--ard-overlay);
135
+ --ard-cmpcl--overlay-colored: rgb(var(--ard-danger-700));
136
+ --ard-cmpcl--overlay-colored-light: rgb(var(--ard-danger-300));
137
+ }
138
+ .ard-chip-wrapper.ard-color-success {
139
+ --ard-cmpcl--bg: rgb(var(--ard-success-700));
140
+ --ard-cmpcl--bg-colored: rgb(var(--ard-success-700));
141
+ --ard-cmpcl--bg-colored-light: rgb(var(--ard-success-50));
142
+ --ard-cmpcl--bg-header: rgb(var(--ard-success-50));
143
+ --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-success-50));
144
+ --ard-cmpcl--on-bg: var(--ard-text-alt);
145
+ --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
146
+ --ard-cmpcl--on-bg-colored-light: var(--ard-text);
147
+ --ard-cmpcl--border: rgb(var(--ard-success-300));
148
+ --ard-cmpcl--border-light: rgb(var(--ard-success-100));
149
+ --ard-cmpcl--content: rgb(var(--ard-success-900));
150
+ --ard-cmpcl--content-light: rgb(var(--ard-success-300));
151
+ --ard-cmpcl--overlay-rgb: var(--ard-success-700);
152
+ --ard-cmpcl--overlay: var(--ard-overlay);
153
+ --ard-cmpcl--overlay-colored: rgb(var(--ard-success-700));
154
+ --ard-cmpcl--overlay-colored-light: rgb(var(--ard-success-300));
155
+ }
156
+ .ard-chip-wrapper.ard-color-info {
157
+ --ard-cmpcl--bg: rgb(var(--ard-info-500));
158
+ --ard-cmpcl--bg-colored: rgb(var(--ard-info-500));
159
+ --ard-cmpcl--bg-colored-light: rgb(var(--ard-info-50));
160
+ --ard-cmpcl--bg-header: rgb(var(--ard-info-50));
161
+ --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-info-50));
162
+ --ard-cmpcl--on-bg: var(--ard-text-alt);
163
+ --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
164
+ --ard-cmpcl--on-bg-colored-light: var(--ard-text);
165
+ --ard-cmpcl--border: rgb(var(--ard-info-300));
166
+ --ard-cmpcl--border-light: rgb(var(--ard-info-100));
167
+ --ard-cmpcl--content: rgb(var(--ard-info-700));
168
+ --ard-cmpcl--content-light: rgb(var(--ard-info-300));
169
+ --ard-cmpcl--overlay-rgb: var(--ard-info-500);
170
+ --ard-cmpcl--overlay: var(--ard-overlay);
171
+ --ard-cmpcl--overlay-colored: rgb(var(--ard-info-700));
172
+ --ard-cmpcl--overlay-colored-light: rgb(var(--ard-info-100));
173
+ }
174
+ .ard-chip-wrapper.ard-color-currentColor {
175
+ --ard-cmpcl--bg: var(--ard-bg);
176
+ --ard-cmpcl--bg-colored: currentColor;
177
+ --ard-cmpcl--on-bg: currentColor;
178
+ --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
179
+ --ard-cmpcl--border: currentColor;
180
+ --ard-cmpcl--border-light: currentColor;
181
+ --ard-cmpcl--content: currentColor;
182
+ --ard-cmpcl--content-light: currentColor;
183
+ --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
184
+ --ard-cmpcl--overlay: var(--ard-overlay);
185
+ --ard-cmpcl--overlay-colored: currentColor;
186
+ --ard-cmpcl--overlay-colored-light: currentColor;
187
+ }
188
+ .ard-chip-wrapper ard-clear-button {
189
+ height: var(--ard-clear-button-size);
190
+ width: var(--ard-clear-button-size);
191
+ position: relative;
192
+ }
193
+ .ard-chip-wrapper .ard-clear-btn-wrapper {
194
+ cursor: pointer;
195
+ font-size: medium;
196
+ color: var(--ard-detail);
197
+ width: var(--ard-clear-button-size);
198
+ height: var(--ard-clear-button-size);
199
+ line-height: 1em;
200
+ border-radius: 999px;
201
+ border: none;
202
+ padding: 0;
203
+ background: transparent;
204
+ position: absolute;
205
+ left: 50%;
206
+ top: 50%;
207
+ transform: translate(-50%, -50%);
208
+ outline: none;
209
+ color: inherit;
210
+ }
211
+ .ard-chip-wrapper .ard-clear-btn-wrapper .ard-hitbox {
212
+ position: absolute;
213
+ left: -1px;
214
+ right: -1px;
215
+ top: -1px;
216
+ bottom: -1px;
217
+ }
218
+ .ard-chip-wrapper .ard-clear-btn-wrapper .ard-focus-overlay {
219
+ position: absolute;
220
+ top: calc(-1 * 1px);
221
+ bottom: calc(-1 * 1px);
222
+ left: calc(-1 * 1px);
223
+ right: calc(-1 * 1px);
224
+ opacity: 0;
225
+ border-radius: inherit;
226
+ pointer-events: none;
227
+ transition: opacity 0.2s ease;
228
+ background: currentColor;
229
+ }
230
+ .ard-chip-wrapper .ard-clear-btn-wrapper .ard-clear-btn {
231
+ position: absolute;
232
+ left: 50%;
233
+ top: 50%;
234
+ transform: translate(-50%, -50%);
235
+ }
236
+ .ard-chip-wrapper .ard-clear-btn-wrapper .ard-clear-btn::before {
237
+ content: "close";
238
+ font-family: "Material Symbols Outlined";
239
+ font-size: 1.5em;
240
+ font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
241
+ font-size: 70%;
242
+ }
243
+ .ard-chip-wrapper .ard-clear-btn-wrapper:hover .ard-focus-overlay {
244
+ opacity: 5%;
245
+ }
246
+ .ard-chip-wrapper .ard-clear-btn-wrapper:focus .ard-focus-overlay {
247
+ opacity: 8%;
248
+ }
249
+ .ard-chip-wrapper .ard-clear-btn-wrapper:active .ard-focus-overlay {
250
+ opacity: 15%;
251
+ }
252
+ .ard-chip-wrapper.ard-variant-rounded, .ard-chip-wrapper.ard-variant-semirounded {
253
+ --ard-variant-border-radius: 8px;
254
+ }
255
+ .ard-chip-wrapper.ard-variant-pill {
256
+ --ard-variant-border-radius: 9999px;
257
+ }
258
+ .ard-chip-wrapper.ard-variant-sharp {
259
+ --ard-variant-border-radius: 0;
260
+ }
261
+ .ard-chip-wrapper > .ard-chip-content-wrapper {
262
+ padding: var(--ard-chip-padding, 0 0.75rem);
263
+ }
264
+ .ard-chip-wrapper > .ard-focus-overlay {
265
+ position: absolute;
266
+ top: calc(-1 * 0px);
267
+ bottom: calc(-1 * 0px);
268
+ left: calc(-1 * 0px);
269
+ right: calc(-1 * 0px);
270
+ opacity: 0;
271
+ border-radius: inherit;
272
+ pointer-events: none;
273
+ transition: opacity 0.2s ease;
274
+ background: var(--ard-overlay);
275
+ border-radius: 0;
276
+ }
277
+ .ard-chip-wrapper.ard-chip-selectable {
278
+ cursor: pointer;
279
+ display: flex;
280
+ align-items: center;
281
+ }
282
+ .ard-chip-wrapper.ard-chip-selectable:hover > .ard-focus-overlay, .ard-chip-wrapper.ard-chip-selectable:focus > .ard-focus-overlay {
283
+ opacity: var(--ard-chip-selectable-hover-overlay-opacity, 7.5%);
284
+ }
285
+ .ard-chip-wrapper.ard-chip-selectable:active > .ard-focus-overlay {
286
+ opacity: var(--ard-chip-selectable-active-overlay-opacity, 20%);
287
+ }
288
+ .ard-chip-wrapper.ard-chip-selectable .ard-chip-selection-icon {
289
+ font-family: "Material Symbols Outlined";
290
+ font-size: 1.5em;
291
+ font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
292
+ }
293
+ .ard-chip-wrapper.ard-chip-selectable .ard-chip-selection-icon::after {
294
+ content: "\e876";
295
+ }
296
+ .ard-chip-wrapper.ard-appearance-filled, .ard-chip-wrapper.ard-appearance-filled-strong {
297
+ border: 1px solid transparent;
298
+ }
299
+ .ard-chip-wrapper.ard-appearance-filled.ard-chip-selectable, .ard-chip-wrapper.ard-appearance-filled-strong.ard-chip-selectable {
300
+ background-color: var(--ard-chip-filled-unselected-background, var(--ard-bg-filled));
301
+ color: var(--ard-chip-filled-unselected-color, var(--ard-text2));
302
+ 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);
303
+ }
304
+ .ard-chip-wrapper.ard-appearance-filled.ard-chip-selectable.ard-chip-selected, .ard-chip-wrapper.ard-appearance-filled-strong.ard-chip-selectable.ard-chip-selected {
305
+ color: var(--ard-cmpcl--on-bg-colored);
306
+ background: var(--ard-cmpcl--bg-colored);
307
+ }
308
+ .ard-chip-wrapper.ard-appearance-filled {
309
+ background: var(--ard-cmpcl--bg-colored-light);
310
+ color: var(--ard-cmpcl--on-bg-colored-light);
311
+ }
312
+ .ard-chip-wrapper.ard-appearance-filled-strong {
313
+ background: var(--ard-cmpcl--bg-colored);
314
+ color: var(--ard-cmpcl--on-bg-colored);
315
+ }
316
+ .ard-chip-wrapper.ard-appearance-outlined, .ard-chip-wrapper.ard-appearance-outlined-strong {
317
+ background: transparent;
318
+ color: var(--ard-cmpcl--content);
319
+ border: 1px solid var(--ard-cmpcl--bg-colored);
320
+ border-radius: var(--ard-variant-border-radius);
321
+ font-weight: 600;
322
+ }
323
+ .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable {
324
+ transition: color var(--ard-chip-transition, 0.15s ease), border-color var(--ard-chip-transition, 0.15s ease);
325
+ }
326
+ .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 {
327
+ opacity: 0;
328
+ background: var(--ard-cmpcl--bg-colored);
329
+ }
330
+ .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 {
331
+ opacity: var(--ard-chip-outlined-hover-overlay-opacity, 4%);
332
+ }
333
+ .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 {
334
+ opacity: var(--ard-chip-outlined-active-overlay-opacity, 10%);
335
+ }
336
+ .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 {
337
+ color: var(--ard-cmpcl--content);
338
+ border-color: var(--ard-cmpcl--content);
339
+ }
340
+ .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 {
341
+ opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
342
+ }
343
+ .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected:hover > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected:hover > .ard-focus-overlay {
344
+ opacity: var(--ard-chip-outlined-selected-hover-overlay-opacity, 17%);
345
+ }
346
+ .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:focus > .ard-focus-overlay {
347
+ opacity: var(--ard-chip-outlined-selected-focus-overlay-opacity, 0%);
348
+ }
349
+ .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected:focus-visible > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected:focus-visible > .ard-focus-overlay {
350
+ opacity: var(--ard-chip-outlined-selected-focus-visible-overlay-opacity, 17%);
351
+ }
352
+ .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 {
353
+ opacity: var(--ard-chip-outlined-selected-active-overlay-opacity, 22%);
354
+ }
355
+ .ard-chip-wrapper.ard-appearance-outlined-strong > .ard-focus-overlay {
356
+ opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
357
+ background: var(--ard-cmpcl--bg-colored);
358
+ }
359
+ .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable {
360
+ color: var(--ard-chip-outlined-strong-selectable-color, var(--ard-text2));
361
+ border: 1px solid var(--ard-chip-outlined-strong-selectable-border-color, var(--ard-detail-light));
362
+ }
363
+ .ard-chip-wrapper.ard-chip-align-left {
364
+ flex-direction: row;
365
+ padding-left: var(--ard-chip-padding-align-left, 0.125rem);
366
+ }
367
+ .ard-chip-wrapper.ard-chip-align-left .ard-chip-selection-icon {
368
+ padding-left: var(--ard-chip-selection-icon-padding, 0.5rem);
369
+ margin-right: var(--ard-chip-selection-icon-margin, -0.125rem);
370
+ }
371
+ .ard-chip-wrapper.ard-chip-align-left.ard-chip-deletable {
372
+ padding-left: var(--ard-chip-padding-align-left-deletable, 0.25rem);
373
+ }
374
+ .ard-chip-wrapper.ard-chip-align-left.ard-chip-deletable .ard-chip-content-wrapper {
375
+ padding-left: var(--ard-chip-content-wrapper-padding, 0.5rem);
376
+ }
377
+ .ard-chip-wrapper.ard-chip-align-right {
378
+ flex-direction: row-reverse;
379
+ padding-right: var(--ard-chip-padding-align-right, 0.125rem);
380
+ }
381
+ .ard-chip-wrapper.ard-chip-align-right .ard-chip-selection-icon {
382
+ padding-right: var(--ard-chip-selection-icon-padding, 0.5rem);
383
+ margin-left: var(--ard-chip-selection-icon-margin, -0.125rem);
384
+ }
385
+ .ard-chip-wrapper.ard-chip-align-right.ard-chip-deletable {
386
+ padding-right: var(--ard-chip-padding-align-right-deletable, 0.25rem);
387
+ }
388
+ .ard-chip-wrapper.ard-chip-align-right.ard-chip-deletable .ard-chip-content-wrapper {
389
+ padding-right: var(--ard-chip-content-wrapper-padding, 0.5rem);
390
+ }
391
+ .ard-chip-wrapper.ard-compact {
392
+ height: var(--ard-chip-height-compact, 1.4375rem);
393
+ font-size: var(--ard-chip-font-size-compact, 0.8125rem);
394
+ }
395
+ .ard-chip-wrapper.ard-compact > .ard-chip-content-wrapper {
396
+ padding: var(--ard-chip-padding-compact, 0 0.5625rem);
397
+ }
398
+ .ard-chip-wrapper.ard-compact.ard-chip-align-left .ard-chip-selection-icon {
399
+ padding-left: var(--ard-chip-selection-icon-padding-compact, 0.25rem);
400
+ margin-right: var(--ard-chip-selection-icon-margin-compact, -0.25rem);
401
+ }
402
+ .ard-chip-wrapper.ard-compact.ard-chip-align-right .ard-chip-selection-icon {
403
+ padding-right: var(--ard-chip-selection-icon-padding-compact, 0.25rem);
404
+ margin-left: var(--ard-chip-selection-icon-margin-compact, -0.25rem);
405
+ }
406
+ .ard-disabled .ard-chip-wrapper {
407
+ pointer-events: none;
408
+ opacity: var(--ard-chip-disabled-opacity, 60%);
409
+ }
410
+ .ard-disabled .ard-chip-wrapper.ard-chip-selected {
411
+ opacity: var(--ard-chip-disabled-selected-opacity, 40%);
412
+ }
413
413
  }
414
414
 
415
415
  /*# sourceMappingURL=chips.css.map */