@i-cell/ids-styles 0.0.61 → 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 (10) 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 +98 -21
  5. package/dist/components.min.css +1 -1
  6. package/dist/components.plugin.js +70 -24
  7. package/dist/paginator/paginator.css +29 -1
  8. package/dist/paginator/paginator.min.css +1 -1
  9. package/dist/paginator/paginator.plugin.js +29 -1
  10. 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 {
@@ -9939,7 +9988,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9939
9988
  justify-content: center;
9940
9989
  align-items: center;
9941
9990
  font-style: normal;
9942
- border-style: none;
9991
+ border-style: solid;
9943
9992
  }
9944
9993
  .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:focus, .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:focus-visible {
9945
9994
  outline-offset: 2px;
@@ -9983,6 +10032,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9983
10032
  .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button {
9984
10033
  height: var(--ids-comp-paginator-page-links-size-height-compact);
9985
10034
  min-width: var(--ids-comp-paginator-page-links-size-min-width-compact);
10035
+ border-width: var(--ids-comp-paginator-page-links-size-border-width-compact);
9986
10036
  padding: var(--ids-comp-paginator-page-links-size-padding-y-compact) var(--ids-comp-paginator-page-links-size-padding-x-compact);
9987
10037
  font-family: var(--ids-comp-paginator-page-links-label-typography-font-family-compact);
9988
10038
  font-size: var(--ids-comp-paginator-page-links-label-typography-font-size-compact);
@@ -10031,6 +10081,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10031
10081
  .ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button {
10032
10082
  height: var(--ids-comp-paginator-page-links-size-height-comfortable);
10033
10083
  min-width: var(--ids-comp-paginator-page-links-size-min-width-comfortable);
10084
+ border-width: var(--ids-comp-paginator-page-links-size-border-width-comfortable);
10034
10085
  padding: var(--ids-comp-paginator-page-links-size-padding-y-comfortable) var(--ids-comp-paginator-page-links-size-padding-x-comfortable);
10035
10086
  font-family: var(--ids-comp-paginator-page-links-label-typography-font-family-comfortable);
10036
10087
  font-size: var(--ids-comp-paginator-page-links-label-typography-font-size-comfortable);
@@ -10079,6 +10130,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10079
10130
  .ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button {
10080
10131
  height: var(--ids-comp-paginator-page-links-size-height-spacious);
10081
10132
  min-width: var(--ids-comp-paginator-page-links-size-min-width-spacious);
10133
+ border-width: var(--ids-comp-paginator-page-links-size-border-width-spacious);
10082
10134
  padding: var(--ids-comp-paginator-page-links-size-padding-y-spacious) var(--ids-comp-paginator-page-links-size-padding-x-spacious);
10083
10135
  font-family: var(--ids-comp-paginator-page-links-label-typography-font-family-spacious);
10084
10136
  font-size: var(--ids-comp-paginator-page-links-label-typography-font-size-spacious);
@@ -10127,6 +10179,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10127
10179
  .ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button {
10128
10180
  height: var(--ids-comp-paginator-page-links-size-height-dense);
10129
10181
  min-width: var(--ids-comp-paginator-page-links-size-min-width-dense);
10182
+ border-width: var(--ids-comp-paginator-page-links-size-border-width-dense);
10130
10183
  padding: var(--ids-comp-paginator-page-links-size-padding-y-dense) var(--ids-comp-paginator-page-links-size-padding-x-dense);
10131
10184
  font-family: var(--ids-comp-paginator-page-links-label-typography-font-family-dense);
10132
10185
  font-size: var(--ids-comp-paginator-page-links-label-typography-font-size-dense);
@@ -10175,26 +10228,32 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10175
10228
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain {
10176
10229
  background: var(--ids-comp-paginator-page-links-plain-color-bg-primary-default);
10177
10230
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-default);
10231
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-primary-default);
10178
10232
  }
10179
10233
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled) {
10180
10234
  background: var(--ids-comp-paginator-page-links-plain-color-bg-primary-active);
10181
10235
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-active);
10236
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-primary-active);
10182
10237
  }
10183
10238
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus, .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus-visible {
10184
10239
  background: var(--ids-comp-paginator-page-links-plain-color-bg-primary-focused);
10185
10240
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-focused);
10241
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-primary-focused);
10186
10242
  }
10187
10243
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover {
10188
10244
  background: var(--ids-comp-paginator-page-links-plain-color-bg-primary-hovered);
10189
10245
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-hovered);
10246
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-primary-hovered);
10190
10247
  }
10191
10248
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active {
10192
10249
  background: var(--ids-comp-paginator-page-links-plain-color-bg-primary-pressed);
10193
10250
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-pressed);
10251
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-primary-pressed);
10194
10252
  }
10195
10253
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled {
10196
10254
  background: var(--ids-comp-paginator-page-links-plain-color-bg-primary-disabled);
10197
10255
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-disabled);
10256
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-primary-disabled);
10198
10257
  }
10199
10258
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow {
10200
10259
  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
@@ -10226,26 +10285,32 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10226
10285
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain {
10227
10286
  background: var(--ids-comp-paginator-page-links-plain-color-bg-secondary-default);
10228
10287
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-default);
10288
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-secondary-default);
10229
10289
  }
10230
10290
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled) {
10231
10291
  background: var(--ids-comp-paginator-page-links-plain-color-bg-secondary-active);
10232
10292
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-active);
10293
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-secondary-active);
10233
10294
  }
10234
10295
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus, .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus-visible {
10235
10296
  background: var(--ids-comp-paginator-page-links-plain-color-bg-secondary-focused);
10236
10297
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-focused);
10298
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-secondary-focused);
10237
10299
  }
10238
10300
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover {
10239
10301
  background: var(--ids-comp-paginator-page-links-plain-color-bg-secondary-hovered);
10240
10302
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-hovered);
10303
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-secondary-hovered);
10241
10304
  }
10242
10305
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active {
10243
10306
  background: var(--ids-comp-paginator-page-links-plain-color-bg-secondary-pressed);
10244
10307
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-pressed);
10308
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-secondary-pressed);
10245
10309
  }
10246
10310
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled {
10247
10311
  background: var(--ids-comp-paginator-page-links-plain-color-bg-secondary-disabled);
10248
10312
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-disabled);
10313
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-secondary-disabled);
10249
10314
  }
10250
10315
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow {
10251
10316
  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
@@ -10277,26 +10342,32 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10277
10342
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain {
10278
10343
  background: var(--ids-comp-paginator-page-links-plain-color-bg-light-default);
10279
10344
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-light-default);
10345
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-light-default);
10280
10346
  }
10281
10347
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled) {
10282
10348
  background: var(--ids-comp-paginator-page-links-plain-color-bg-light-active);
10283
10349
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-light-active);
10350
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-light-active);
10284
10351
  }
10285
10352
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus, .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus-visible {
10286
10353
  background: var(--ids-comp-paginator-page-links-plain-color-bg-light-focused);
10287
10354
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-light-focused);
10355
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-light-focused);
10288
10356
  }
10289
10357
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover {
10290
10358
  background: var(--ids-comp-paginator-page-links-plain-color-bg-light-hovered);
10291
10359
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-light-hovered);
10360
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-light-hovered);
10292
10361
  }
10293
10362
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active {
10294
10363
  background: var(--ids-comp-paginator-page-links-plain-color-bg-light-pressed);
10295
10364
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-light-pressed);
10365
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-light-pressed);
10296
10366
  }
10297
10367
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled {
10298
10368
  background: var(--ids-comp-paginator-page-links-plain-color-bg-light-disabled);
10299
10369
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-light-disabled);
10370
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-light-disabled);
10300
10371
  }
10301
10372
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow {
10302
10373
  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
@@ -10328,26 +10399,32 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10328
10399
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain {
10329
10400
  background: var(--ids-comp-paginator-page-links-plain-color-bg-surface-default);
10330
10401
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-default);
10402
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-surface-default);
10331
10403
  }
10332
10404
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled) {
10333
10405
  background: var(--ids-comp-paginator-page-links-plain-color-bg-surface-active);
10334
10406
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-active);
10407
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-surface-active);
10335
10408
  }
10336
10409
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus, .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus-visible {
10337
10410
  background: var(--ids-comp-paginator-page-links-plain-color-bg-surface-focused);
10338
10411
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-focused);
10412
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-surface-focused);
10339
10413
  }
10340
10414
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover {
10341
10415
  background: var(--ids-comp-paginator-page-links-plain-color-bg-surface-hovered);
10342
10416
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-hovered);
10417
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-surface-hovered);
10343
10418
  }
10344
10419
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active {
10345
10420
  background: var(--ids-comp-paginator-page-links-plain-color-bg-surface-pressed);
10346
10421
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-pressed);
10422
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-surface-pressed);
10347
10423
  }
10348
10424
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled {
10349
10425
  background: var(--ids-comp-paginator-page-links-plain-color-bg-surface-disabled);
10350
10426
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-disabled);
10427
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-surface-disabled);
10351
10428
  }
10352
10429
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow {
10353
10430
  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);