@ardium-ui/ui 5.0.0-alpha.23 → 5.0.0-alpha.24

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 (8) hide show
  1. package/package.json +1 -1
  2. package/prebuilt-themes/default/buttons/button.css +1 -1
  3. package/prebuilt-themes/default/buttons/fab.css +1 -1
  4. package/prebuilt-themes/default/buttons/icon-button.css +1 -1
  5. package/prebuilt-themes/default/select.css +77 -37
  6. package/prebuilt-themes/default/select.css.map +1 -1
  7. package/themes/default/buttons/_button-mixins.scss +1 -1
  8. package/themes/default/select.scss +83 -39
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ardium-ui/ui",
3
- "version": "5.0.0-alpha.23",
3
+ "version": "5.0.0-alpha.24",
4
4
  "peerDependencies": {
5
5
  "@angular/common": ">=18.0.0",
6
6
  "@angular/core": ">=18.0.0",
package/prebuilt-themes/default/buttons/button.css CHANGED
@@ -253,7 +253,7 @@ ard-button {
253
253
  .ard-button.ard-appearance-flat, .ard-button.ard-appearance-raised-strong {
254
254
  background: var(--ard-cmpcl--bg);
255
255
  color: var(--ard-cmpcl--on-bg);
256
- border: none;
256
+ border: 1px solid var(--ard-cmpcl--bg);
257
257
  }
258
258
  .ard-button.ard-appearance-flat .ard-focus-overlay, .ard-button.ard-appearance-raised-strong .ard-focus-overlay {
259
259
  background: var(--ard-cmpcl--on-bg);
package/prebuilt-themes/default/buttons/fab.css CHANGED
@@ -245,7 +245,7 @@ ard-fab {
245
245
  .ard-fab.ard-appearance-flat, .ard-fab.ard-appearance-raised-strong {
246
246
  background: var(--ard-cmpcl--bg);
247
247
  color: var(--ard-cmpcl--on-bg);
248
- border: none;
248
+ border: 1px solid var(--ard-cmpcl--bg);
249
249
  }
250
250
  .ard-fab.ard-appearance-flat .ard-focus-overlay, .ard-fab.ard-appearance-raised-strong .ard-focus-overlay {
251
251
  background: var(--ard-cmpcl--on-bg);
package/prebuilt-themes/default/buttons/icon-button.css CHANGED
@@ -250,7 +250,7 @@ ard-icon-button {
250
250
  .ard-icon-button.ard-appearance-flat, .ard-icon-button.ard-appearance-raised-strong {
251
251
  background: var(--ard-cmpcl--bg);
252
252
  color: var(--ard-cmpcl--on-bg);
253
- border: none;
253
+ border: 1px solid var(--ard-cmpcl--bg);
254
254
  }
255
255
  .ard-icon-button.ard-appearance-flat .ard-focus-overlay, .ard-icon-button.ard-appearance-raised-strong .ard-focus-overlay {
256
256
  background: var(--ard-cmpcl--on-bg);
package/prebuilt-themes/default/select.css CHANGED
@@ -1,14 +1,54 @@
1
+ :root {
2
+ --ard-select-height: var(--ard-form-field-height, 2.3125rem);
3
+ --ard-select-height-compact: var(--ard-form-field-height-compact, 1.6875rem);
4
+ --ard-select-gap: 0.625rem;
5
+ --ard-select-gap-compact: 0.5rem;
6
+ --ard-select-controls-gap: 0.625rem;
7
+ --ard-select-controls-gap-compact: 0.5rem;
8
+ --ard-select-padding: 0 1em 0 0.375em;
9
+ --ard-select-padding-compact: 0 0.625em 0 0.375em;
10
+ --ard-select-font-size: var(--ard-form-field-font-size, 1rem);
11
+ --ard-select-font-size-compact: var(--ard-form-field-font-size-compact, 0.875rem);
12
+ --ard-select-text-color: var(--ard-text, rgba(0, 0, 0, 100%));
13
+ --ard-select-placeholder-color: var(--ard-text3, rgba(0, 0, 0, 75%));
14
+ --ard-select-search-min-width: 10ch;
15
+ --ard-select-dropdown-arrow-color: var(--ard-detail, rgba(0, 0, 0, 60%));
16
+ --ard-select-multiselect-padding: 0.25em 0;
17
+ --ard-select-multiselect-chip-gap: 0.375rem;
18
+ --ard-select-dropdown-width: max-content;
19
+ --ard-select-dropdown-max-width: max(25em, 100%);
20
+ --ard-select-dropdown-min-width: 100%;
21
+ --ard-select-dropdown-max-height: 15em;
22
+ --ard-select-dropdown-font-size: var(--ard-select-font-size, var(--ard-form-field-font-size, 1rem));
23
+ --ard-select-dropdown-font-size-compact: var(--ard-select-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
24
+ --ard-select-dropdown-padding: 0.375em 0.625em;
25
+ --ard-select-dropdown-gap: 0;
26
+ --ard-select-dropdown-optgroup-label-font-size: 0.875em;
27
+ --ard-select-dropdown-optgroup-label-font-weight: 600;
28
+ --ard-select-dropdown-optgroup-label-letter-spacing: 0.25px;
29
+ --ard-select-dropdown-optgroup-label-padding: 0.375em 0.625em 0.0625em 0.625em;
30
+ --ard-select-dropdown-option-padding: 0.375em 0.625em;
31
+ --ard-select-dropdown-option-text-color: var(--ard-text2, rgba(0, 0, 0, 87%));
32
+ --ard-select-dropdown-option-highlight-bg: var(--ard-darken-overlay-light, rgba(0, 0, 0, 5%));
33
+ --ard-select-dropdown-option-selected-font-weight: 500;
34
+ --ard-select-dropdown-option-selected-bg: var(--ard-darken-overlay-medium, rgba(0, 0, 0, 10%));
35
+ --ard-select-dropdown-option-disabled-opacity: 50%;
36
+ --ard-select-dropdown-add-custom-gap: 0.375rem;
37
+ --ard-select-dropdown-add-custom-label-font-size: 85%;
38
+ }
39
+
1
40
  .ard-select {
2
41
  box-sizing: border-box;
3
42
  width: 100%;
4
- min-height: 100%;
43
+ min-height: var(--ard-select-height, var(--ard-form-field-height, 2.3125rem));
5
44
  display: grid;
6
45
  align-items: center;
7
46
  grid-template-columns: 1fr max-content;
8
- gap: 0.625em;
9
- padding: 0 1em 0 0.375em;
47
+ gap: var(--ard-select-gap, 0.625rem);
48
+ padding: var(--ard-select-padding, 0 1em 0 0.375em);
10
49
  font-family: var(--ard-font-family);
11
- font-size: 1rem;
50
+ font-size: var(--ard-select-font-size, 1rem);
51
+ color: var(--ard-select-text-color, var(--ard-text, rgb(0, 0, 0)));
12
52
  }
13
53
  .ard-select ard-clear-button {
14
54
  height: var(--ard-clear-button-size);
@@ -74,15 +114,12 @@
74
114
  .ard-select .ard-clear-btn-wrapper:active .ard-focus-overlay {
75
115
  opacity: 15%;
76
116
  }
77
- .ard-select.ard-variant-pill {
78
- padding-left: 0.8125em;
79
- }
80
117
  .ard-select .ard-select-value-container {
81
118
  position: relative;
82
119
  height: 2em;
83
120
  display: flex;
84
121
  align-items: center;
85
- font-size: 1em;
122
+ font-size: var(--ard-select-font-size, 1rem);
86
123
  text-size-adjust: 100%;
87
124
  flex-grow: 1;
88
125
  overflow: hidden;
@@ -90,7 +127,7 @@
90
127
  .ard-select .ard-select-value-container .ard-placeholder {
91
128
  font: inherit;
92
129
  position: absolute;
93
- color: var(--ard-text3);
130
+ color: var(--ard-select-placeholder-color, rgba(0, 0, 0, 0.75));
94
131
  white-space: nowrap;
95
132
  overflow: hidden;
96
133
  text-overflow: ellipsis;
@@ -115,7 +152,7 @@
115
152
  .ard-select .ard-select-controls {
116
153
  display: flex;
117
154
  align-items: center;
118
- gap: 0.625em;
155
+ gap: var(--ard-select-controls-gap, 0.625rem);
119
156
  width: max-content;
120
157
  }
121
158
  .ard-select.ard-singleselect .ard-value {
@@ -141,10 +178,10 @@
141
178
  .ard-select.ard-multiselect .ard-select-value-container {
142
179
  height: max-content;
143
180
  min-height: 1.5625em;
144
- padding: 0.25em 0;
181
+ padding: var(--ard-select-multiselect-padding, 0.25em 0);
145
182
  box-sizing: border-box;
146
183
  flex-wrap: wrap;
147
- gap: 0.375em;
184
+ gap: var(--ard-select-multiselect-chip-gap, 0.375rem);
148
185
  justify-content: stretch;
149
186
  }
150
187
  .ard-select.ard-multiselect .ard-select-value-container .ard-chip-wrapper {
@@ -153,10 +190,10 @@
153
190
  .ard-select.ard-multiselect .ard-search-input {
154
191
  flex-grow: 1;
155
192
  width: unset !important;
156
- min-width: 10ch;
193
+ min-width: var(--ard-select-search-min-width, 10ch);
157
194
  }
158
195
  .ard-select.ard-multiselect .ard-search-input input {
159
- width: 10ch !important;
196
+ width: var(--ard-select-search-min-width, 10ch) !important;
160
197
  }
161
198
  .ard-select.ard-multiselect .ard-chip-wrapper {
162
199
  margin: 0;
@@ -173,17 +210,20 @@
173
210
  .ard-select .ard-dropdown-arrow-wrapper .ard-dropdown-arrow {
174
211
  border: calc(var(--ard-dropdown-button-size) / 2) solid transparent;
175
212
  position: relative;
176
- border-bottom-color: var(--ard-detail);
177
- border-right-color: var(--ard-detail);
213
+ border-bottom-color: var(--ard-select-dropdown-arrow-color, var(--ard-detail));
214
+ border-right-color: var(--ard-select-dropdown-arrow-color, var(--ard-detail));
178
215
  transform: rotate(45deg) translate(-17.67771%, -17.67771%);
179
216
  }
180
217
  .ard-select.ard-dropdown-open .ard-dropdown-arrow {
181
218
  transform: rotate(45deg) translate(17.67771%, 17.67771%) scaleX(-1) scaleY(-1);
182
219
  }
183
220
  .ard-select.ard-compact {
184
- font-size: 0.85rem;
185
- height: 1.5625rem;
186
- padding-right: 0.625em;
221
+ font-size: var(--ard-select-font-size-compact, 0.875rem);
222
+ height: var(--ard-select-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
223
+ padding: var(--ard-select-padding-compact, 0 0.625em 0 0.375em);
224
+ }
225
+ .ard-select.ard-compact .ard-select-controls {
226
+ gap: var(--ard-select-controls-gap-compact, 0.5rem);
187
227
  }
188
228
  .ard-select.ard-compact .ard-dropdown-arrow-wrapper .ard-dropdown-arrow {
189
229
  border-width: calc(var(--ard-dropdown-button-size) / 2.4);
@@ -191,14 +231,14 @@
191
231
 
192
232
  .ard-select-dropdown-panel {
193
233
  right: 0;
194
- width: max-content;
195
- max-width: max(25em, 100%);
196
- min-width: 100%;
197
- font-size: 1rem;
234
+ width: var(--ard-select-dropdown-width, max-content);
235
+ max-width: var(--ard-select-dropdown-max-width, max(25em, 100%));
236
+ min-width: var(--ard-select-dropdown-min-width, 100%);
237
+ font-size: var(--ard-select-dropdown-font-size, var(--ard-form-field-font-size, 1rem));
198
238
  }
199
239
  .ard-select-dropdown-panel .ard-dropdown-panel-content {
200
- padding: 0.375em 0;
201
- max-height: 15em;
240
+ padding: var(--ard-select-dropdown-padding, 0.375em 0.625em);
241
+ max-height: var(--ard-select-dropdown-max-height, 15em);
202
242
  overflow: hidden auto;
203
243
  }
204
244
  .ard-select-dropdown-panel .ard-optgroup {
@@ -210,26 +250,26 @@
210
250
  cursor: default;
211
251
  }
212
252
  .ard-select-dropdown-panel .ard-optgroup-label {
213
- font-size: 0.875em;
214
- font-weight: 600;
253
+ font-size: var(--ard-select-dropdown-optgroup-label-font-size, 0.875em);
254
+ font-weight: var(--ard-select-dropdown-optgroup-label-font-weight, 600);
215
255
  letter-spacing: 0.25px;
216
- padding: 0.375em 0.625em 0.0625em 0.625em;
256
+ padding: var(--ard-select-dropdown-optgroup-label-padding, 0.375em 0.625em 0.0625em 0.625em);
217
257
  }
218
258
  .ard-select-dropdown-panel .ard-option {
219
- padding: 0.375em 0.625em;
220
- color: var(--ard-text2);
259
+ padding: var(--ard-select-dropdown-option-padding, 0.375em 0.625em);
260
+ color: var(--ard-select-dropdown-option-text-color, var(--ard-text2, rgba(0, 0, 0, 0.87)));
221
261
  cursor: pointer;
222
262
  }
223
263
  .ard-select-dropdown-panel .ard-option.ard-option-highlighted {
224
- background: var(--ard-darken-overlay-light);
264
+ background: var(--ard-select-dropdown-option-highlight-bg, var(--ard-darken-overlay-light));
225
265
  }
226
266
  .ard-select-dropdown-panel .ard-option.ard-option-selected {
227
- font-weight: 500;
228
- background: var(--ard-darken-overlay-medium);
267
+ font-weight: var(--ard-select-dropdown-option-selected-font-weight, 500);
268
+ background: var(--ard-select-dropdown-option-selected-bg, var(--ard-darken-overlay-medium));
229
269
  }
230
270
  .ard-select-dropdown-panel .ard-option.ard-option-disabled {
231
271
  pointer-events: none;
232
- opacity: 50%;
272
+ opacity: var(--ard-select-dropdown-option-disabled-opacity, 50%);
233
273
  }
234
274
  .ard-select-dropdown-panel hr.ard-divider {
235
275
  width: calc(100% - 1.25em);
@@ -243,13 +283,13 @@
243
283
  .ard-select-dropdown-panel .ard-add-custom {
244
284
  display: flex;
245
285
  align-items: flex-end;
246
- gap: 0.375rem;
286
+ gap: var(--ard-select-dropdown-add-custom-gap, 0.375rem);
247
287
  }
248
288
  .ard-select-dropdown-panel .ard-add-custom .ard-add-custom-label {
249
- font-size: 85%;
289
+ font-size: var(--ard-select-dropdown-add-custom-label-font-size, 85%);
250
290
  }
251
291
  .ard-select-dropdown-panel > .ard-compact {
252
- font-size: 0.85rem;
292
+ font-size: var(--ard-select-dropdown-font-size-compact, 0.85rem);
253
293
  }
254
294
 
255
295
  .ard-simple-spinner {
package/prebuilt-themes/default/select.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/select.scss","../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACVA;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;;ADjDN;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,OE5BE;EF6BF;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIN;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIN;EACE;;AAEF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGJ;EACE;EACA;EACA;;AAEA;EACE;;AAGJ;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,qBEtHG;EFuHH,oBEvHG;EFwHH;;AAGJ;EACE;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA,OElLI;EFmLJ;;AAEA;EACE,YElKiB;;AFqKnB;EACE;EACA,YExKkB;;AF2KpB;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAGF;IACE","file":"select.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/select.scss","../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACxDA;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;;ADHN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIN;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIN;EACE;;AAEF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGJ;EACE;EACA;EACA;;AAEA;EACE;;AAGJ;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGJ;EACE;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAGF;IACE","file":"select.css"}
package/themes/default/buttons/_button-mixins.scss CHANGED
@@ -109,7 +109,7 @@
109
109
  &.ard-appearance-raised-strong {
110
110
  background: var(--ard-cmpcl--bg);
111
111
  color: var(--ard-cmpcl--on-bg);
112
- border: none;
112
+ border: 1px solid var(--ard-cmpcl--bg);
113
113
 
114
114
  .ard-focus-overlay {
115
115
  background: var(--ard-cmpcl--on-bg);
package/themes/default/select.scss CHANGED
@@ -2,32 +2,73 @@
2
2
  @use './mixins' as defaultMixins;
3
3
  @use '../variables' as ARD;
4
4
 
5
+ :root {
6
+ --ard-select-height: var(--ard-form-field-height, 2.3125rem);
7
+ --ard-select-height-compact: var(--ard-form-field-height-compact, 1.6875rem);
8
+ --ard-select-gap: 0.625rem;
9
+ --ard-select-gap-compact: 0.5rem;
10
+ --ard-select-controls-gap: 0.625rem;
11
+ --ard-select-controls-gap-compact: 0.5rem;
12
+ --ard-select-padding: 0 1em 0 0.375em;
13
+ --ard-select-padding-compact: 0 0.625em 0 0.375em;
14
+
15
+ --ard-select-font-size: var(--ard-form-field-font-size, 1rem);
16
+ --ard-select-font-size-compact: var(--ard-form-field-font-size-compact, 0.875rem);
17
+ --ard-select-text-color: var(--ard-text, rgba(0, 0, 0, 100%));
18
+ --ard-select-placeholder-color: var(--ard-text3, rgba(0, 0, 0, 75%));
19
+ --ard-select-search-min-width: 10ch;
20
+ --ard-select-dropdown-arrow-color: var(--ard-detail, rgba(0, 0, 0, 60%));
21
+
22
+ --ard-select-multiselect-padding: 0.25em 0;
23
+ --ard-select-multiselect-chip-gap: 0.375rem;
24
+
25
+ --ard-select-dropdown-width: max-content;
26
+ --ard-select-dropdown-max-width: max(25em, 100%);
27
+ --ard-select-dropdown-min-width: 100%;
28
+ --ard-select-dropdown-max-height: 15em;
29
+ --ard-select-dropdown-font-size: var(--ard-select-font-size, var(--ard-form-field-font-size, 1rem));
30
+ --ard-select-dropdown-font-size-compact: var(--ard-select-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
31
+ --ard-select-dropdown-padding: 0.375em 0.625em;
32
+ --ard-select-dropdown-gap: 0;
33
+
34
+ --ard-select-dropdown-optgroup-label-font-size: 0.875em;
35
+ --ard-select-dropdown-optgroup-label-font-weight: 600;
36
+ --ard-select-dropdown-optgroup-label-letter-spacing: 0.25px;
37
+ --ard-select-dropdown-optgroup-label-padding: 0.375em 0.625em 0.0625em 0.625em;
38
+
39
+ --ard-select-dropdown-option-padding: 0.375em 0.625em;
40
+ --ard-select-dropdown-option-text-color: var(--ard-text2, rgba(0, 0, 0, 87%));
41
+ --ard-select-dropdown-option-highlight-bg: var(--ard-darken-overlay-light, rgba(0, 0, 0, 5%));
42
+ --ard-select-dropdown-option-selected-font-weight: 500;
43
+ --ard-select-dropdown-option-selected-bg: var(--ard-darken-overlay-medium, rgba(0, 0, 0, 10%));
44
+ --ard-select-dropdown-option-disabled-opacity: 50%;
45
+
46
+ --ard-select-dropdown-add-custom-gap: 0.375rem;
47
+ --ard-select-dropdown-add-custom-label-font-size: 85%;
48
+ }
49
+
5
50
  .ard-select {
6
51
  box-sizing: border-box;
7
52
  width: 100%;
8
- min-height: 100%;
53
+ min-height: var(--ard-select-height, var(--ard-form-field-height, 2.3125rem));
9
54
  display: grid;
10
55
  align-items: center;
11
56
  grid-template-columns: 1fr max-content;
12
- gap: 0.625em;
13
- padding: 0 1em 0 0.375em;
57
+ gap: var(--ard-select-gap, 0.625rem);
58
+ padding: var(--ard-select-padding, 0 1em 0 0.375em);
14
59
  font-family: var(--ard-font-family);
15
- font-size: 1rem;
60
+ font-size: var(--ard-select-font-size, 1rem);
61
+ color: var(--ard-select-text-color, var(--ard-text, rgba(0, 0, 0, 100%)));
16
62
 
17
63
  @include CB.clearButton();
18
64
 
19
- //! variants
20
- &.ard-variant-pill {
21
- padding-left: 0.8125em;
22
- }
23
-
24
65
  //! value container
25
66
  .ard-select-value-container {
26
67
  position: relative;
27
68
  height: 2em;
28
69
  display: flex;
29
70
  align-items: center;
30
- font-size: 1em;
71
+ font-size: var(--ard-select-font-size, 1rem);
31
72
  text-size-adjust: 100%;
32
73
  flex-grow: 1;
33
74
  overflow: hidden;
@@ -35,7 +76,7 @@
35
76
  .ard-placeholder {
36
77
  font: inherit;
37
78
  position: absolute;
38
- color: ARD.$text3;
79
+ color: var(--ard-select-placeholder-color, rgba(0, 0, 0, 75%));
39
80
  white-space: nowrap;
40
81
  overflow: hidden;
41
82
  text-overflow: ellipsis;
@@ -63,7 +104,7 @@
63
104
  .ard-select-controls {
64
105
  display: flex;
65
106
  align-items: center;
66
- gap: 0.625em;
107
+ gap: var(--ard-select-controls-gap, 0.625rem);
67
108
  width: max-content;
68
109
  }
69
110
  //! single/multiselect
@@ -96,10 +137,10 @@
96
137
  .ard-select-value-container {
97
138
  height: max-content;
98
139
  min-height: 1.5625em;
99
- padding: 0.25em 0;
140
+ padding: var(--ard-select-multiselect-padding, 0.25em 0);
100
141
  box-sizing: border-box;
101
142
  flex-wrap: wrap;
102
- gap: 0.375em;
143
+ gap: var(--ard-select-multiselect-chip-gap, 0.375rem);
103
144
  justify-content: stretch;
104
145
 
105
146
  .ard-chip-wrapper {
@@ -109,10 +150,10 @@
109
150
  .ard-search-input {
110
151
  flex-grow: 1;
111
152
  width: unset !important;
112
- min-width: 10ch;
153
+ min-width: var(--ard-select-search-min-width, 10ch);
113
154
 
114
155
  input {
115
- width: 10ch !important;
156
+ width: var(--ard-select-search-min-width, 10ch) !important;
116
157
  }
117
158
  }
118
159
  .ard-chip-wrapper {
@@ -132,8 +173,8 @@
132
173
  .ard-dropdown-arrow {
133
174
  border: calc(ARD.$dropdown-button-size / 2) solid transparent;
134
175
  position: relative;
135
- border-bottom-color: ARD.$detail;
136
- border-right-color: ARD.$detail;
176
+ border-bottom-color: var(--ard-select-dropdown-arrow-color, ARD.$detail);
177
+ border-right-color: var(--ard-select-dropdown-arrow-color, ARD.$detail);
137
178
  transform: rotate(45deg) translate(-17.67771%, -17.67771%);
138
179
  }
139
180
  }
@@ -143,10 +184,13 @@
143
184
 
144
185
  //! compact
145
186
  &.ard-compact {
146
- font-size: 0.85rem;
147
- height: 1.5625rem;
148
- padding-right: 0.625em;
187
+ font-size: var(--ard-select-font-size-compact, 0.875rem);
188
+ height: var(--ard-select-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
189
+ padding: var(--ard-select-padding-compact, 0 0.625em 0 0.375em);
149
190
 
191
+ .ard-select-controls {
192
+ gap: var(--ard-select-controls-gap-compact, 0.5rem);
193
+ }
150
194
  .ard-dropdown-arrow-wrapper .ard-dropdown-arrow {
151
195
  border-width: calc(ARD.$dropdown-button-size / 2.4);
152
196
  }
@@ -156,14 +200,14 @@
156
200
  //! optgroups & options, divider
157
201
  .ard-select-dropdown-panel {
158
202
  right: 0;
159
- width: max-content;
160
- max-width: max(25em, 100%);
161
- min-width: 100%;
162
- font-size: 1rem;
203
+ width: var(--ard-select-dropdown-width, max-content);
204
+ max-width: var(--ard-select-dropdown-max-width, max(25em, 100%));
205
+ min-width: var(--ard-select-dropdown-min-width, 100%);
206
+ font-size: var(--ard-select-dropdown-font-size, var(--ard-form-field-font-size, 1rem));
163
207
 
164
208
  .ard-dropdown-panel-content {
165
- padding: 0.375em 0;
166
- max-height: 15em;
209
+ padding: var(--ard-select-dropdown-padding, 0.375em 0.625em);
210
+ max-height: var(--ard-select-dropdown-max-height, 15em);
167
211
  overflow: hidden auto;
168
212
  }
169
213
  .ard-optgroup {
@@ -176,29 +220,29 @@
176
220
  }
177
221
 
178
222
  .ard-optgroup-label {
179
- font-size: 0.875em;
180
- font-weight: 600;
223
+ font-size: var(--ard-select-dropdown-optgroup-label-font-size, 0.875em);
224
+ font-weight: var(--ard-select-dropdown-optgroup-label-font-weight, 600);
181
225
  letter-spacing: 0.25px;
182
- padding: 0.375em 0.625em 0.0625em 0.625em;
226
+ padding: var(--ard-select-dropdown-optgroup-label-padding, 0.375em 0.625em 0.0625em 0.625em);
183
227
  }
184
228
 
185
229
  .ard-option {
186
- padding: 0.375em 0.625em;
187
- color: ARD.$text2;
230
+ padding: var(--ard-select-dropdown-option-padding, 0.375em 0.625em);
231
+ color: var(--ard-select-dropdown-option-text-color, var(--ard-text2, rgba(0, 0, 0, 87%)));
188
232
  cursor: pointer;
189
233
 
190
234
  &.ard-option-highlighted {
191
- background: ARD.$darken-overlay-light;
235
+ background: var(--ard-select-dropdown-option-highlight-bg, ARD.$darken-overlay-light);
192
236
  }
193
237
 
194
238
  &.ard-option-selected {
195
- font-weight: 500;
196
- background: ARD.$darken-overlay-medium;
239
+ font-weight: var(--ard-select-dropdown-option-selected-font-weight, 500);
240
+ background: var(--ard-select-dropdown-option-selected-bg, ARD.$darken-overlay-medium);
197
241
  }
198
242
 
199
243
  &.ard-option-disabled {
200
244
  pointer-events: none;
201
- opacity: 50%;
245
+ opacity: var(--ard-select-dropdown-option-disabled-opacity, 50%);
202
246
  }
203
247
  }
204
248
  //divider
@@ -216,16 +260,16 @@
216
260
  .ard-add-custom {
217
261
  display: flex;
218
262
  align-items: flex-end;
219
- gap: 0.375rem;
263
+ gap: var(--ard-select-dropdown-add-custom-gap, 0.375rem);
220
264
 
221
265
  .ard-add-custom-label {
222
- font-size: 85%;
266
+ font-size: var(--ard-select-dropdown-add-custom-label-font-size, 85%);
223
267
  }
224
268
  }
225
269
 
226
270
  //! compact
227
271
  > .ard-compact {
228
- font-size: 0.85rem;
272
+ font-size: var(--ard-select-dropdown-font-size-compact, 0.85rem);
229
273
  }
230
274
  }
231
275