@i-cell/ids-styles 0.0.62 → 0.0.63

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 (7) hide show
  1. package/dist/autocomplete/autocomplete.css +69 -20
  2. package/dist/autocomplete/autocomplete.min.css +1 -1
  3. package/dist/autocomplete/autocomplete.plugin.js +38 -20
  4. package/dist/components.css +69 -20
  5. package/dist/components.min.css +1 -1
  6. package/dist/components.plugin.js +41 -23
  7. package/package.json +2 -2
package/dist/autocomplete/autocomplete.css CHANGED
@@ -4,8 +4,6 @@
4
4
  border-style: none;
5
5
  border-color: transparent;
6
6
  line-height: 1.5;
7
- display: inline-flex;
8
- align-items: center;
9
7
  }
10
8
  .ids-autocomplete::before, .ids-autocomplete::after, .ids-autocomplete *, .ids-autocomplete ::before, .ids-autocomplete ::after {
11
9
  box-sizing: border-box;
@@ -13,35 +11,86 @@
13
11
  border-style: none;
14
12
  border-color: transparent;
15
13
  }
16
- .ids-autocomplete > input {
17
- text-overflow: ellipsis;
14
+ .ids-autocomplete-panel {
15
+ overflow: auto;
16
+ width: 100%;
17
+ padding: 8px;
18
+ scrollbar-width: thin;
19
+ }
20
+ .ids-autocomplete-overlay-panel {
21
+ width: 100%;
18
22
  }
19
- .ids-autocomplete > ids-overlay-panel {
23
+ .ids-autocomplete-suffix {
24
+ display: flex;
25
+ align-items: center;
26
+ }
27
+ .ids-autocomplete-chip-list {
28
+ display: flex;
29
+ flex-wrap: wrap;
30
+ gap: 4px;
31
+ margin-bottom: 4px;
32
+ }
33
+ .ids-autocomplete-chip-list:not(:has(button:first-child)) {
20
34
  display: none;
21
35
  }
22
- .ids-autocomplete.ids-autocomplete-compact {
23
- gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-compact);
36
+ .ids-autocomplete-chip-list button[idsChip].ids-chip {
37
+ border-style: solid !important;
24
38
  }
25
- .ids-autocomplete.ids-autocomplete-comfortable {
26
- gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-comfortable);
39
+ .ids-autocomplete-chip-list button[idsChip].ids-chip > div.ids-chip__label {
40
+ text-align: left;
41
+ word-break: break-all;
42
+ overflow: hidden;
43
+ display: -webkit-box;
44
+ line-clamp: 1;
45
+ -webkit-box-orient: vertical;
46
+ -webkit-line-clamp: 1;
27
47
  }
28
- .ids-autocomplete.ids-autocomplete-spacious {
29
- gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-spacious);
48
+ .ids-autocomplete-hint__wrapper {
49
+ padding: 8px 12px;
30
50
  }
31
- .ids-autocomplete.ids-autocomplete-dense {
32
- gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-dense);
51
+ .ids-autocomplete.ids-autocomplete-compact > .ids-autocomplete-suffix {
52
+ gap: var(--ids-comp-forms-input-size-icons-gap-compact);
33
53
  }
34
-
35
- .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(.ids-autocomplete) {
36
- overflow-x: visible;
54
+ .ids-autocomplete.ids-autocomplete-comfortable > .ids-autocomplete-suffix {
55
+ gap: var(--ids-comp-forms-input-size-icons-gap-comfortable);
56
+ }
57
+ .ids-autocomplete.ids-autocomplete-spacious > .ids-autocomplete-suffix {
58
+ gap: var(--ids-comp-forms-input-size-icons-gap-spacious);
59
+ }
60
+ .ids-autocomplete.ids-autocomplete-dense > .ids-autocomplete-suffix {
61
+ gap: var(--ids-comp-forms-input-size-icons-gap-dense);
37
62
  }
38
63
 
39
- .ids-overlay-panel__autocomplete-panel {
64
+ input[autocomplete] {
40
65
  width: 100%;
66
+ text-overflow: ellipsis;
41
67
  }
42
- .ids-overlay-panel__autocomplete-panel .ids-overlay-panel__autocomplete-message > .ids-option {
68
+
69
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete]) {
43
70
  width: 100%;
71
+ display: inline-flex;
72
+ align-items: center;
73
+ }
74
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete]):has(.ids-autocomplete-chip-list > button:first-child) {
75
+ display: grid;
76
+ grid-template-columns: 1fr auto;
77
+ }
78
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete]):has(.ids-autocomplete-chip-list > button:first-child) > input[autocomplete] {
79
+ order: 3;
80
+ }
81
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete]):has(.ids-autocomplete-chip-list > button:first-child) > .ids-autocomplete {
82
+ order: 2;
83
+ grid-row: span 2/span 1;
84
+ }
85
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete] ~ .ids-autocomplete-compact) {
86
+ column-gap: var(--ids-comp-forms-input-size-gap-compact);
87
+ }
88
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete] ~ .ids-autocomplete-comfortable) {
89
+ column-gap: var(--ids-comp-forms-input-size-gap-comfortable);
90
+ }
91
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete] ~ .ids-autocomplete-spacious) {
92
+ column-gap: var(--ids-comp-forms-input-size-gap-spacious);
44
93
  }
45
- .ids-overlay-panel__autocomplete-panel .ids-overlay-panel__autocomplete-message > .ids-option:is([disabled]) {
46
- outline-style: none;
94
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete] ~ .ids-autocomplete-dense) {
95
+ column-gap: var(--ids-comp-forms-input-size-gap-dense);
47
96
  }
package/dist/autocomplete/autocomplete.min.css CHANGED
@@ -1 +1 @@
1
- .ids-autocomplete{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5;display:inline-flex;align-items:center}.ids-autocomplete::before,.ids-autocomplete::after,.ids-autocomplete *,.ids-autocomplete ::before,.ids-autocomplete ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-autocomplete>input{text-overflow:ellipsis}.ids-autocomplete>ids-overlay-panel{display:none}.ids-autocomplete.ids-autocomplete-compact{gap:var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-compact)}.ids-autocomplete.ids-autocomplete-comfortable{gap:var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-comfortable)}.ids-autocomplete.ids-autocomplete-spacious{gap:var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-spacious)}.ids-autocomplete.ids-autocomplete-dense{gap:var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-dense)}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(.ids-autocomplete){overflow-x:visible}.ids-overlay-panel__autocomplete-panel{width:100%}.ids-overlay-panel__autocomplete-panel .ids-overlay-panel__autocomplete-message>.ids-option{width:100%}.ids-overlay-panel__autocomplete-panel .ids-overlay-panel__autocomplete-message>.ids-option:is([disabled]){outline-style:none}
1
+ .ids-autocomplete{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5}.ids-autocomplete::before,.ids-autocomplete::after,.ids-autocomplete *,.ids-autocomplete ::before,.ids-autocomplete ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-autocomplete-panel{overflow:auto;width:100%;padding:8px;scrollbar-width:thin}.ids-autocomplete-overlay-panel{width:100%}.ids-autocomplete-suffix{display:flex;align-items:center}.ids-autocomplete-chip-list{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}.ids-autocomplete-chip-list:not(:has(button:first-child)){display:none}.ids-autocomplete-chip-list button[idsChip].ids-chip{border-style:solid !important}.ids-autocomplete-chip-list button[idsChip].ids-chip>div.ids-chip__label{text-align:left;word-break:break-all;overflow:hidden;display:-webkit-box;line-clamp:1;-webkit-box-orient:vertical;-webkit-line-clamp:1}.ids-autocomplete-hint__wrapper{padding:8px 12px}.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix{gap:var(--ids-comp-forms-input-size-icons-gap-compact)}.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix{gap:var(--ids-comp-forms-input-size-icons-gap-comfortable)}.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix{gap:var(--ids-comp-forms-input-size-icons-gap-spacious)}.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix{gap:var(--ids-comp-forms-input-size-icons-gap-dense)}input[autocomplete]{width:100%;text-overflow:ellipsis}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]){width:100%;display:inline-flex;align-items:center}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]):has(.ids-autocomplete-chip-list>button:first-child){display:grid;grid-template-columns:1fr auto}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]):has(.ids-autocomplete-chip-list>button:first-child)>input[autocomplete]{order:3}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]):has(.ids-autocomplete-chip-list>button:first-child)>.ids-autocomplete{order:2;grid-row:span 2/span 1}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-compact){column-gap:var(--ids-comp-forms-input-size-gap-compact)}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-comfortable){column-gap:var(--ids-comp-forms-input-size-gap-comfortable)}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-spacious){column-gap:var(--ids-comp-forms-input-size-gap-spacious)}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-dense){column-gap:var(--ids-comp-forms-input-size-gap-dense)}
package/dist/autocomplete/autocomplete.plugin.js CHANGED
@@ -8,8 +8,6 @@ module.exports = function AutocompletePlugin() {
8
8
  borderStyle: 'none',
9
9
  borderColor: 'rgba(0,0,0,0)',
10
10
  lineHeight: 1.5,
11
- display: 'inline-flex',
12
- alignItems: 'center',
13
11
  },
14
12
  '.ids-autocomplete::before,.ids-autocomplete::after,.ids-autocomplete *,.ids-autocomplete ::before,.ids-autocomplete ::after': {
15
13
  boxSizing: 'border-box',
@@ -17,27 +15,47 @@ module.exports = function AutocompletePlugin() {
17
15
  borderStyle: 'none',
18
16
  borderColor: 'rgba(0,0,0,0)',
19
17
  },
20
- '.ids-autocomplete>input': { textOverflow: 'ellipsis' },
21
- '.ids-autocomplete>ids-overlay-panel': { display: 'none' },
22
- '.ids-autocomplete.ids-autocomplete-compact': {
23
- gap: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-compact)',
18
+ '.ids-autocomplete-panel': { overflow: 'auto', width: '100%', padding: '8px', scrollbarWidth: 'thin' },
19
+ '.ids-autocomplete-overlay-panel': { width: '100%' },
20
+ '.ids-autocomplete-suffix': { display: 'flex', alignItems: 'center' },
21
+ '.ids-autocomplete-chip-list': { display: 'flex', flexWrap: 'wrap', gap: '4px', marginBottom: '4px' },
22
+ '.ids-autocomplete-chip-list:not(:has(button:first-child))': { display: 'none' },
23
+ '.ids-autocomplete-chip-list button[idsChip].ids-chip': { borderStyle: 'solid !important' },
24
+ '.ids-autocomplete-chip-list button[idsChip].ids-chip>div.ids-chip__label': {
25
+ textAlign: 'left',
26
+ wordBreak: 'break-all',
27
+ overflow: 'hidden',
28
+ display: '-webkit-box',
29
+ lineClamp: 1,
30
+ WebkitBoxOrient: 'vertical',
31
+ WebkitLineClamp: '1',
24
32
  },
25
- '.ids-autocomplete.ids-autocomplete-comfortable': {
26
- gap: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-comfortable)',
33
+ '.ids-autocomplete-hint__wrapper': { padding: '8px 12px' },
34
+ '.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix': { gap: 'var(--ids-comp-forms-input-size-icons-gap-compact)' },
35
+ '.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix': {
36
+ gap: 'var(--ids-comp-forms-input-size-icons-gap-comfortable)',
27
37
  },
28
- '.ids-autocomplete.ids-autocomplete-spacious': {
29
- gap: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-spacious)',
30
- },
31
- '.ids-autocomplete.ids-autocomplete-dense': {
32
- gap: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-dense)',
33
- },
34
- '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(.ids-autocomplete)':
35
- { overflowX: 'visible' },
36
- '.ids-overlay-panel__autocomplete-panel': { width: '100%' },
37
- '.ids-overlay-panel__autocomplete-panel .ids-overlay-panel__autocomplete-message>.ids-option': { width: '100%' },
38
- '.ids-overlay-panel__autocomplete-panel .ids-overlay-panel__autocomplete-message>.ids-option:is([disabled])': {
39
- outlineStyle: 'none',
38
+ '.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix': {
39
+ gap: 'var(--ids-comp-forms-input-size-icons-gap-spacious)',
40
40
  },
41
+ '.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix': { gap: 'var(--ids-comp-forms-input-size-icons-gap-dense)' },
42
+ 'input[autocomplete]': { width: '100%', textOverflow: 'ellipsis' },
43
+ '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete])':
44
+ { width: '100%', display: 'inline-flex', alignItems: 'center' },
45
+ '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]):has(.ids-autocomplete-chip-list>button:first-child)':
46
+ { display: 'grid', gridTemplateColumns: '1fr auto' },
47
+ '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]):has(.ids-autocomplete-chip-list>button:first-child)>input[autocomplete]':
48
+ { order: 3 },
49
+ '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]):has(.ids-autocomplete-chip-list>button:first-child)>.ids-autocomplete':
50
+ { order: 2, gridRow: 'span 2/span 1' },
51
+ '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-compact)':
52
+ { columnGap: 'var(--ids-comp-forms-input-size-gap-compact)' },
53
+ '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-comfortable)':
54
+ { columnGap: 'var(--ids-comp-forms-input-size-gap-comfortable)' },
55
+ '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-spacious)':
56
+ { columnGap: 'var(--ids-comp-forms-input-size-gap-spacious)' },
57
+ '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-dense)':
58
+ { columnGap: 'var(--ids-comp-forms-input-size-gap-dense)' },
41
59
  };
42
60
 
43
61
  addComponents(cssObj);
package/dist/components.css CHANGED
@@ -324,8 +324,6 @@
324
324
  border-style: none;
325
325
  border-color: transparent;
326
326
  line-height: 1.5;
327
- display: inline-flex;
328
- align-items: center;
329
327
  }
330
328
  .ids-autocomplete::before, .ids-autocomplete::after, .ids-autocomplete *, .ids-autocomplete ::before, .ids-autocomplete ::after {
331
329
  box-sizing: border-box;
@@ -333,37 +331,88 @@
333
331
  border-style: none;
334
332
  border-color: transparent;
335
333
  }
336
- .ids-autocomplete > input {
337
- text-overflow: ellipsis;
334
+ .ids-autocomplete-panel {
335
+ overflow: auto;
336
+ width: 100%;
337
+ padding: 8px;
338
+ scrollbar-width: thin;
339
+ }
340
+ .ids-autocomplete-overlay-panel {
341
+ width: 100%;
342
+ }
343
+ .ids-autocomplete-suffix {
344
+ display: flex;
345
+ align-items: center;
338
346
  }
339
- .ids-autocomplete > ids-overlay-panel {
347
+ .ids-autocomplete-chip-list {
348
+ display: flex;
349
+ flex-wrap: wrap;
350
+ gap: 4px;
351
+ margin-bottom: 4px;
352
+ }
353
+ .ids-autocomplete-chip-list:not(:has(button:first-child)) {
340
354
  display: none;
341
355
  }
342
- .ids-autocomplete.ids-autocomplete-compact {
343
- gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-compact);
356
+ .ids-autocomplete-chip-list button[idsChip].ids-chip {
357
+ border-style: solid !important;
344
358
  }
345
- .ids-autocomplete.ids-autocomplete-comfortable {
346
- gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-comfortable);
359
+ .ids-autocomplete-chip-list button[idsChip].ids-chip > div.ids-chip__label {
360
+ text-align: left;
361
+ word-break: break-all;
362
+ overflow: hidden;
363
+ display: -webkit-box;
364
+ line-clamp: 1;
365
+ -webkit-box-orient: vertical;
366
+ -webkit-line-clamp: 1;
347
367
  }
348
- .ids-autocomplete.ids-autocomplete-spacious {
349
- gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-spacious);
368
+ .ids-autocomplete-hint__wrapper {
369
+ padding: 8px 12px;
350
370
  }
351
- .ids-autocomplete.ids-autocomplete-dense {
352
- gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-dense);
371
+ .ids-autocomplete.ids-autocomplete-compact > .ids-autocomplete-suffix {
372
+ gap: var(--ids-comp-forms-input-size-icons-gap-compact);
353
373
  }
354
-
355
- .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(.ids-autocomplete) {
356
- overflow-x: visible;
374
+ .ids-autocomplete.ids-autocomplete-comfortable > .ids-autocomplete-suffix {
375
+ gap: var(--ids-comp-forms-input-size-icons-gap-comfortable);
376
+ }
377
+ .ids-autocomplete.ids-autocomplete-spacious > .ids-autocomplete-suffix {
378
+ gap: var(--ids-comp-forms-input-size-icons-gap-spacious);
379
+ }
380
+ .ids-autocomplete.ids-autocomplete-dense > .ids-autocomplete-suffix {
381
+ gap: var(--ids-comp-forms-input-size-icons-gap-dense);
357
382
  }
358
383
 
359
- .ids-overlay-panel__autocomplete-panel {
384
+ input[autocomplete] {
360
385
  width: 100%;
386
+ text-overflow: ellipsis;
361
387
  }
362
- .ids-overlay-panel__autocomplete-panel .ids-overlay-panel__autocomplete-message > .ids-option {
388
+
389
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete]) {
363
390
  width: 100%;
391
+ display: inline-flex;
392
+ align-items: center;
364
393
  }
365
- .ids-overlay-panel__autocomplete-panel .ids-overlay-panel__autocomplete-message > .ids-option:is([disabled]) {
366
- outline-style: none;
394
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete]):has(.ids-autocomplete-chip-list > button:first-child) {
395
+ display: grid;
396
+ grid-template-columns: 1fr auto;
397
+ }
398
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete]):has(.ids-autocomplete-chip-list > button:first-child) > input[autocomplete] {
399
+ order: 3;
400
+ }
401
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete]):has(.ids-autocomplete-chip-list > button:first-child) > .ids-autocomplete {
402
+ order: 2;
403
+ grid-row: span 2/span 1;
404
+ }
405
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete] ~ .ids-autocomplete-compact) {
406
+ column-gap: var(--ids-comp-forms-input-size-gap-compact);
407
+ }
408
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete] ~ .ids-autocomplete-comfortable) {
409
+ column-gap: var(--ids-comp-forms-input-size-gap-comfortable);
410
+ }
411
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete] ~ .ids-autocomplete-spacious) {
412
+ column-gap: var(--ids-comp-forms-input-size-gap-spacious);
413
+ }
414
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete] ~ .ids-autocomplete-dense) {
415
+ column-gap: var(--ids-comp-forms-input-size-gap-dense);
367
416
  }
368
417
 
369
418
  .ids-avatar {