@i-cell/ids-styles 0.0.15-beta.9 → 0.0.15

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 (76) hide show
  1. package/dist/accordion/accordion.css +184 -45
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +194 -55
  4. package/dist/avatar/avatar.css +23 -11
  5. package/dist/avatar/avatar.min.css +1 -1
  6. package/dist/avatar/avatar.plugin.js +23 -12
  7. package/dist/button/button.css +788 -656
  8. package/dist/button/button.min.css +1 -1
  9. package/dist/button/button.plugin.js +792 -693
  10. package/dist/card/card.css +61 -35
  11. package/dist/card/card.min.css +1 -1
  12. package/dist/card/card.plugin.js +181 -126
  13. package/dist/checkbox/checkbox.css +57 -29
  14. package/dist/checkbox/checkbox.min.css +1 -1
  15. package/dist/checkbox/checkbox.plugin.js +78 -53
  16. package/dist/checkbox/pseudo-checkbox.css +53 -25
  17. package/dist/checkbox/pseudo-checkbox.min.css +1 -1
  18. package/dist/checkbox/pseudo-checkbox.plugin.js +72 -43
  19. package/dist/components.css +2284 -1615
  20. package/dist/components.min.css +1 -1
  21. package/dist/components.plugin.js +2619 -1969
  22. package/dist/dialog/dialog.css +12 -1
  23. package/dist/dialog/dialog.min.css +1 -1
  24. package/dist/dialog/dialog.plugin.js +11 -4
  25. package/dist/divider/divider.css +0 -3
  26. package/dist/divider/divider.min.css +1 -1
  27. package/dist/divider/divider.plugin.js +1 -1
  28. package/dist/form-elements/form-field/form-field.css +84 -60
  29. package/dist/form-elements/form-field/form-field.min.css +1 -1
  30. package/dist/form-elements/form-field/form-field.plugin.js +84 -60
  31. package/dist/form-elements/message/message.css +21 -12
  32. package/dist/form-elements/message/message.min.css +1 -1
  33. package/dist/form-elements/message/message.plugin.js +21 -4
  34. package/dist/icon/icon.css +3 -2
  35. package/dist/icon/icon.min.css +1 -1
  36. package/dist/icon/icon.plugin.js +3 -2
  37. package/dist/icon-button/icon-button.css +133 -82
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +256 -182
  40. package/dist/menu-item/menu-item.css +184 -0
  41. package/dist/menu-item/menu-item.min.css +1 -0
  42. package/dist/menu-item/menu-item.plugin.js +181 -0
  43. package/dist/option/option.css +13 -0
  44. package/dist/option/option.min.css +1 -1
  45. package/dist/option/option.plugin.js +13 -1
  46. package/dist/overlay-panel/overlay-panel.css +125 -0
  47. package/dist/overlay-panel/overlay-panel.min.css +1 -0
  48. package/dist/overlay-panel/overlay-panel.plugin.js +125 -0
  49. package/dist/paginator/paginator.css +133 -23
  50. package/dist/paginator/paginator.min.css +1 -1
  51. package/dist/paginator/paginator.plugin.js +113 -41
  52. package/dist/radio/radio.css +49 -49
  53. package/dist/radio/radio.min.css +1 -1
  54. package/dist/radio/radio.plugin.js +56 -61
  55. package/dist/segmented-control/segmented-control-toggle.css +37 -25
  56. package/dist/segmented-control/segmented-control-toggle.min.css +1 -1
  57. package/dist/segmented-control/segmented-control-toggle.plugin.js +46 -45
  58. package/dist/segmented-control/segmented-control.css +37 -25
  59. package/dist/segmented-control/segmented-control.min.css +1 -1
  60. package/dist/segmented-control/segmented-control.plugin.js +87 -75
  61. package/dist/snackbar/snackbar.css +12 -0
  62. package/dist/snackbar/snackbar.min.css +1 -1
  63. package/dist/snackbar/snackbar.plugin.js +28 -4
  64. package/dist/switch/switch.css +44 -56
  65. package/dist/switch/switch.min.css +1 -1
  66. package/dist/switch/switch.plugin.js +55 -74
  67. package/dist/tag/tag.css +230 -199
  68. package/dist/tag/tag.min.css +1 -1
  69. package/dist/tag/tag.plugin.js +228 -195
  70. package/package.json +4 -4
  71. package/dist/action-item/action-item.css +0 -185
  72. package/dist/action-item/action-item.min.css +0 -1
  73. package/dist/action-item/action-item.plugin.js +0 -176
  74. package/dist/action-panel/action-panel.css +0 -91
  75. package/dist/action-panel/action-panel.min.css +0 -1
  76. package/dist/action-panel/action-panel.plugin.js +0 -91
package/dist/accordion/accordion.plugin.js CHANGED
@@ -2,186 +2,325 @@
2
2
  module.exports = function AccordionPlugin() {
3
3
  return function ({ addComponents }) {
4
4
  const cssObj = {
5
- '.ids-accordion': {
5
+ '.ids-accordion': { display: 'flex', width: '100%', flexDirection: 'column', alignItems: 'flex-start' },
6
+ '.ids-accordion>.ids-accordion-controls': { display: 'flex', alignItems: 'flex-start', alignSelf: 'stretch' },
7
+ '.ids-accordion>.ids-accordion-item': {
6
8
  display: 'flex',
9
+ width: '100%',
7
10
  flexDirection: 'column',
8
11
  alignItems: 'flex-start',
9
- width: '100%',
10
- background: 'var(--ids-comp-accordion-item-color-bg-default)',
12
+ flexShrink: 0,
11
13
  },
12
- '.ids-accordion>.ids-accordion-summary': {
14
+ '.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary': {
13
15
  display: 'flex',
14
16
  alignItems: 'center',
15
17
  width: '100%',
16
- boxSizing: 'border-box',
17
- borderStyle: 'solid',
18
- cursor: 'pointer',
19
- },
20
- '.ids-accordion>.ids-accordion-summary:focus': {
21
- outlineOffset: '2px',
22
- outlineStyle: 'solid',
23
- outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline)',
24
- outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
25
- },
26
- '.ids-theme-dark .ids-accordion>.ids-accordion-summary:focus': {
27
- outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-light-focused)',
18
+ flex: '1 0 0',
28
19
  },
29
- '.ids-accordion>.ids-accordion-summary>.ids-accordion-title': {
20
+ '.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
30
21
  flex: '1 0 0',
22
+ whiteSpace: 'nowrap',
31
23
  overflow: 'hidden',
32
24
  textOverflow: 'ellipsis',
33
- fontStyle: 'normal',
34
25
  },
35
- '.ids-accordion.ids-accordion-disabled>.ids-accordion-summary': { pointerEvents: 'none', userSelect: 'none' },
36
- '.ids-accordion>.ids-accordion-content': {
26
+ '.ids-accordion>.ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary': {
27
+ pointerEvents: 'none',
28
+ userSelect: 'none',
29
+ },
30
+ '.ids-accordion>.ids-accordion-item>.ids-accordion-item-content': {
37
31
  display: 'flex',
38
32
  flexDirection: 'column',
39
- background: 'var(--ids-comp-accordion-details-color-bg-default)',
33
+ alignItems: 'flex-start',
34
+ alignSelf: 'stretch',
40
35
  },
41
36
  '.ids-accordion.ids-accordion-compact': {
37
+ padding: 'var(--ids-comp-accordion-container-size-padding-y-compact) var(--ids-comp-accordion-container-size-padding-x-compact)',
38
+ gap: 'var(--ids-comp-accordion-container-size-gap-compact)',
39
+ borderRadius: 'var(--ids-comp-accordion-container-size-border-radius-compact)',
40
+ borderWidth: 'var(--ids-comp-accordion-container-size-border-width-compact)',
41
+ borderStyle: 'solid',
42
+ },
43
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-controls': {
44
+ padding: 'var(--ids-comp-accordion-controls-size-padding-y-compact) var(--ids-comp-accordion-controls-size-padding-x-compact)',
45
+ gap: 'var(--ids-comp-accordion-controls-size-gap-compact)',
46
+ },
47
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-item': {
42
48
  padding: 'var(--ids-comp-accordion-item-size-padding-y-compact) var(--ids-comp-accordion-item-size-padding-x-compact)',
43
49
  gap: 'var(--ids-comp-accordion-item-size-gap-compact)',
44
- borderRadius: 'var(--ids-comp-accordion-item-size-border-radius-compact)',
45
50
  },
46
- '.ids-accordion.ids-accordion-compact>.ids-accordion-summary': {
51
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary': {
47
52
  height: 'var(--ids-comp-accordion-summary-size-height-compact)',
48
53
  padding: 'var(--ids-comp-accordion-summary-size-padding-y-compact) var(--ids-comp-accordion-summary-size-padding-x-compact)',
49
54
  gap: 'var(--ids-comp-accordion-summary-size-gap-compact)',
50
55
  borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-compact)',
51
56
  borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-compact)',
57
+ borderStyle: 'solid',
52
58
  },
53
- '.ids-accordion.ids-accordion-compact>.ids-accordion-summary>.ids-accordion-title': {
59
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
60
+ {
61
+ outlineOffset: '2px',
62
+ outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-compact)',
63
+ outlineStyle: 'solid',
64
+ outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
65
+ zIndex: 1,
66
+ },
67
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
54
68
  fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-compact)',
55
69
  fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-compact)',
56
70
  fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-compact)',
57
71
  letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-compact)',
58
72
  lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-compact)',
59
73
  },
60
- '.ids-accordion.ids-accordion-compact>.ids-accordion-content': {
74
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
75
+ fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-compact)',
76
+ fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-compact)',
77
+ lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-compact)',
78
+ width: 'var(--ids-comp-accordion-summary-size-icon-compact)',
79
+ height: 'var(--ids-comp-accordion-summary-size-icon-compact)',
80
+ },
81
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-content': {
61
82
  padding: 'var(--ids-comp-accordion-details-size-padding-y-compact) var(--ids-comp-accordion-details-size-padding-x-compact)',
62
83
  gap: 'var(--ids-comp-accordion-details-size-gap-compact)',
63
84
  },
64
85
  '.ids-accordion.ids-accordion-comfortable': {
86
+ padding:
87
+ 'var(--ids-comp-accordion-container-size-padding-y-comfortable) var(--ids-comp-accordion-container-size-padding-x-comfortable)',
88
+ gap: 'var(--ids-comp-accordion-container-size-gap-comfortable)',
89
+ borderRadius: 'var(--ids-comp-accordion-container-size-border-radius-comfortable)',
90
+ borderWidth: 'var(--ids-comp-accordion-container-size-border-width-comfortable)',
91
+ borderStyle: 'solid',
92
+ },
93
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-controls': {
94
+ padding:
95
+ 'var(--ids-comp-accordion-controls-size-padding-y-comfortable) var(--ids-comp-accordion-controls-size-padding-x-comfortable)',
96
+ gap: 'var(--ids-comp-accordion-controls-size-gap-comfortable)',
97
+ },
98
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item': {
65
99
  padding: 'var(--ids-comp-accordion-item-size-padding-y-comfortable) var(--ids-comp-accordion-item-size-padding-x-comfortable)',
66
100
  gap: 'var(--ids-comp-accordion-item-size-gap-comfortable)',
67
- borderRadius: 'var(--ids-comp-accordion-item-size-border-radius-comfortable)',
68
101
  },
69
- '.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary': {
102
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary': {
70
103
  height: 'var(--ids-comp-accordion-summary-size-height-comfortable)',
71
104
  padding:
72
105
  'var(--ids-comp-accordion-summary-size-padding-y-comfortable) var(--ids-comp-accordion-summary-size-padding-x-comfortable)',
73
106
  gap: 'var(--ids-comp-accordion-summary-size-gap-comfortable)',
74
107
  borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-comfortable)',
75
108
  borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-comfortable)',
109
+ borderStyle: 'solid',
76
110
  },
77
- '.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary>.ids-accordion-title': {
111
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
112
+ {
113
+ outlineOffset: '2px',
114
+ outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-comfortable)',
115
+ outlineStyle: 'solid',
116
+ outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
117
+ zIndex: 1,
118
+ },
119
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
78
120
  fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-comfortable)',
79
121
  fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-comfortable)',
80
122
  fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-comfortable)',
81
123
  letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-comfortable)',
82
124
  lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-comfortable)',
83
125
  },
84
- '.ids-accordion.ids-accordion-comfortable>.ids-accordion-content': {
126
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
127
+ fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-comfortable)',
128
+ fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-comfortable)',
129
+ lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-comfortable)',
130
+ width: 'var(--ids-comp-accordion-summary-size-icon-comfortable)',
131
+ height: 'var(--ids-comp-accordion-summary-size-icon-comfortable)',
132
+ },
133
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-content': {
85
134
  padding:
86
135
  'var(--ids-comp-accordion-details-size-padding-y-comfortable) var(--ids-comp-accordion-details-size-padding-x-comfortable)',
87
136
  gap: 'var(--ids-comp-accordion-details-size-gap-comfortable)',
88
137
  },
89
138
  '.ids-accordion.ids-accordion-spacious': {
139
+ padding: 'var(--ids-comp-accordion-container-size-padding-y-spacious) var(--ids-comp-accordion-container-size-padding-x-spacious)',
140
+ gap: 'var(--ids-comp-accordion-container-size-gap-spacious)',
141
+ borderRadius: 'var(--ids-comp-accordion-container-size-border-radius-spacious)',
142
+ borderWidth: 'var(--ids-comp-accordion-container-size-border-width-spacious)',
143
+ borderStyle: 'solid',
144
+ },
145
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-controls': {
146
+ padding: 'var(--ids-comp-accordion-controls-size-padding-y-spacious) var(--ids-comp-accordion-controls-size-padding-x-spacious)',
147
+ gap: 'var(--ids-comp-accordion-controls-size-gap-spacious)',
148
+ },
149
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-item': {
90
150
  padding: 'var(--ids-comp-accordion-item-size-padding-y-spacious) var(--ids-comp-accordion-item-size-padding-x-spacious)',
91
151
  gap: 'var(--ids-comp-accordion-item-size-gap-spacious)',
92
- borderRadius: 'var(--ids-comp-accordion-item-size-border-radius-spacious)',
93
152
  },
94
- '.ids-accordion.ids-accordion-spacious>.ids-accordion-summary': {
153
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary': {
95
154
  height: 'var(--ids-comp-accordion-summary-size-height-spacious)',
96
155
  padding: 'var(--ids-comp-accordion-summary-size-padding-y-spacious) var(--ids-comp-accordion-summary-size-padding-x-spacious)',
97
156
  gap: 'var(--ids-comp-accordion-summary-size-gap-spacious)',
98
157
  borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-spacious)',
99
158
  borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-spacious)',
159
+ borderStyle: 'solid',
100
160
  },
101
- '.ids-accordion.ids-accordion-spacious>.ids-accordion-summary>.ids-accordion-title': {
161
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
162
+ {
163
+ outlineOffset: '2px',
164
+ outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-spacious)',
165
+ outlineStyle: 'solid',
166
+ outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
167
+ zIndex: 1,
168
+ },
169
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
102
170
  fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-spacious)',
103
171
  fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-spacious)',
104
172
  fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-spacious)',
105
173
  letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-spacious)',
106
174
  lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-spacious)',
107
175
  },
108
- '.ids-accordion.ids-accordion-spacious>.ids-accordion-content': {
176
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
177
+ fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-spacious)',
178
+ fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-spacious)',
179
+ lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-spacious)',
180
+ width: 'var(--ids-comp-accordion-summary-size-icon-spacious)',
181
+ height: 'var(--ids-comp-accordion-summary-size-icon-spacious)',
182
+ },
183
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-content': {
109
184
  padding: 'var(--ids-comp-accordion-details-size-padding-y-spacious) var(--ids-comp-accordion-details-size-padding-x-spacious)',
110
185
  gap: 'var(--ids-comp-accordion-details-size-gap-spacious)',
111
186
  },
112
187
  '.ids-accordion.ids-accordion-dense': {
188
+ padding: 'var(--ids-comp-accordion-container-size-padding-y-dense) var(--ids-comp-accordion-container-size-padding-x-dense)',
189
+ gap: 'var(--ids-comp-accordion-container-size-gap-dense)',
190
+ borderRadius: 'var(--ids-comp-accordion-container-size-border-radius-dense)',
191
+ borderWidth: 'var(--ids-comp-accordion-container-size-border-width-dense)',
192
+ borderStyle: 'solid',
193
+ },
194
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-controls': {
195
+ padding: 'var(--ids-comp-accordion-controls-size-padding-y-dense) var(--ids-comp-accordion-controls-size-padding-x-dense)',
196
+ gap: 'var(--ids-comp-accordion-controls-size-gap-dense)',
197
+ },
198
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-item': {
113
199
  padding: 'var(--ids-comp-accordion-item-size-padding-y-dense) var(--ids-comp-accordion-item-size-padding-x-dense)',
114
200
  gap: 'var(--ids-comp-accordion-item-size-gap-dense)',
115
- borderRadius: 'var(--ids-comp-accordion-item-size-border-radius-dense)',
116
201
  },
117
- '.ids-accordion.ids-accordion-dense>.ids-accordion-summary': {
202
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary': {
118
203
  height: 'var(--ids-comp-accordion-summary-size-height-dense)',
119
204
  padding: 'var(--ids-comp-accordion-summary-size-padding-y-dense) var(--ids-comp-accordion-summary-size-padding-x-dense)',
120
205
  gap: 'var(--ids-comp-accordion-summary-size-gap-dense)',
121
206
  borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-dense)',
122
207
  borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-dense)',
208
+ borderStyle: 'solid',
123
209
  },
124
- '.ids-accordion.ids-accordion-dense>.ids-accordion-summary>.ids-accordion-title': {
210
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
211
+ {
212
+ outlineOffset: '2px',
213
+ outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-dense)',
214
+ outlineStyle: 'solid',
215
+ outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
216
+ zIndex: 1,
217
+ },
218
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
125
219
  fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-dense)',
126
220
  fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-dense)',
127
221
  fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-dense)',
128
222
  letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-dense)',
129
223
  lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-dense)',
130
224
  },
131
- '.ids-accordion.ids-accordion-dense>.ids-accordion-content': {
225
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
226
+ fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-dense)',
227
+ fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-dense)',
228
+ lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-dense)',
229
+ width: 'var(--ids-comp-accordion-summary-size-icon-dense)',
230
+ height: 'var(--ids-comp-accordion-summary-size-icon-dense)',
231
+ },
232
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-content': {
132
233
  padding: 'var(--ids-comp-accordion-details-size-padding-y-dense) var(--ids-comp-accordion-details-size-padding-x-dense)',
133
234
  gap: 'var(--ids-comp-accordion-details-size-gap-dense)',
134
235
  },
135
- '.ids-accordion.ids-accordion-text>.ids-accordion-summary': {
236
+ '.ids-accordion.ids-accordion-text': {
237
+ borderColor: 'var(--ids-comp-accordion-container-color-border-default)',
238
+ backgroundColor: 'var(--ids-comp-accordion-container-color-bg-default)',
239
+ },
240
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary': {
136
241
  background: 'var(--ids-comp-accordion-summary-text-color-bg-default)',
137
242
  borderColor: 'var(--ids-comp-accordion-summary-text-color-border-default)',
138
243
  color: 'var(--ids-comp-accordion-summary-text-color-fg-label-default)',
139
244
  },
140
- '.ids-accordion.ids-accordion-text>.ids-accordion-summary:hover': {
245
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
246
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-default)',
247
+ },
248
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:hover': {
141
249
  background: 'var(--ids-comp-accordion-summary-text-color-bg-hovered)',
142
250
  borderColor: 'var(--ids-comp-accordion-summary-text-color-border-hovered)',
143
251
  color: 'var(--ids-comp-accordion-summary-text-color-fg-label-hovered)',
144
252
  },
145
- '.ids-accordion.ids-accordion-text>.ids-accordion-summary:focus': {
146
- background: 'var(--ids-comp-accordion-summary-text-color-bg-focused)',
147
- borderColor: 'var(--ids-comp-accordion-summary-text-color-border-focused)',
148
- color: 'var(--ids-comp-accordion-summary-text-color-fg-label-focused)',
149
- },
150
- '.ids-accordion.ids-accordion-text>.ids-accordion-summary:active': {
253
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:hover>.ids-icon': {
254
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-hovered)',
255
+ },
256
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:focus-visible':
257
+ {
258
+ background: 'var(--ids-comp-accordion-summary-text-color-bg-focused)',
259
+ borderColor: 'var(--ids-comp-accordion-summary-text-color-border-focused)',
260
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-label-focused)',
261
+ },
262
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:focus>.ids-icon,.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:focus-visible>.ids-icon':
263
+ { color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-focused)' },
264
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:active': {
151
265
  background: 'var(--ids-comp-accordion-summary-text-color-bg-pressed)',
152
266
  borderColor: 'var(--ids-comp-accordion-summary-text-color-border-pressed)',
153
267
  color: 'var(--ids-comp-accordion-summary-text-color-fg-label-pressed)',
154
268
  },
155
- '.ids-accordion.ids-accordion-text.ids-accordion-disabled>.ids-accordion-summary': {
269
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:active>.ids-icon': {
270
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-pressed)',
271
+ },
272
+ '.ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary': {
156
273
  background: 'var(--ids-comp-accordion-summary-text-color-bg-disabled)',
157
274
  borderColor: 'var(--ids-comp-accordion-summary-text-color-border-disabled)',
158
275
  color: 'var(--ids-comp-accordion-summary-text-color-fg-label-disabled)',
159
276
  },
160
- '.ids-accordion.ids-accordion-filled>.ids-accordion-summary': {
277
+ '.ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary>.ids-icon': {
278
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-disabled)',
279
+ },
280
+ '.ids-accordion.ids-accordion-filled': {
281
+ borderColor: 'var(--ids-comp-accordion-container-color-border-default)',
282
+ backgroundColor: 'var(--ids-comp-accordion-container-color-bg-default)',
283
+ },
284
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary': {
161
285
  background: 'var(--ids-comp-accordion-summary-filled-color-bg-default)',
162
286
  borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-default)',
163
287
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-default)',
164
288
  },
165
- '.ids-accordion.ids-accordion-filled>.ids-accordion-summary:hover': {
289
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
290
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-default)',
291
+ },
292
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:hover': {
166
293
  background: 'var(--ids-comp-accordion-summary-filled-color-bg-hovered)',
167
294
  borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-hovered)',
168
295
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-hovered)',
169
296
  },
170
- '.ids-accordion.ids-accordion-filled>.ids-accordion-summary:focus': {
171
- background: 'var(--ids-comp-accordion-summary-filled-color-bg-focused)',
172
- borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-focused)',
173
- color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-focused)',
174
- },
175
- '.ids-accordion.ids-accordion-filled>.ids-accordion-summary:active': {
297
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:hover>.ids-icon': {
298
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-hovered)',
299
+ },
300
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:focus-visible':
301
+ {
302
+ background: 'var(--ids-comp-accordion-summary-filled-color-bg-focused)',
303
+ borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-focused)',
304
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-focused)',
305
+ },
306
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:focus>.ids-icon,.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:focus-visible>.ids-icon':
307
+ { color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-focused)' },
308
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:active': {
176
309
  background: 'var(--ids-comp-accordion-summary-filled-color-bg-pressed)',
177
310
  borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-pressed)',
178
311
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-pressed)',
179
312
  },
180
- '.ids-accordion.ids-accordion-filled.ids-accordion-disabled>.ids-accordion-summary': {
313
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:active>.ids-icon': {
314
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-pressed)',
315
+ },
316
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary': {
181
317
  background: 'var(--ids-comp-accordion-summary-filled-color-bg-disabled)',
182
318
  borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-disabled)',
183
319
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-disabled)',
184
320
  },
321
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary>.ids-icon': {
322
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-disabled)',
323
+ },
185
324
  };
186
325
 
187
326
  addComponents(cssObj);
package/dist/avatar/avatar.css CHANGED
@@ -27,14 +27,9 @@
27
27
  vertical-align: middle;
28
28
  max-width: none;
29
29
  }
30
- .ids-avatar:focus {
30
+ .ids-avatar:focus, .ids-avatar:focus-visible {
31
31
  outline-offset: 2px;
32
32
  outline-style: solid;
33
- outline-width: var(--ids-comp-avatar-focused-outline-size-outline);
34
- outline-color: var(--ids-comp-avatar-focused-outline-color-dark-focused);
35
- }
36
- .ids-avatar:focus.ids-avatar-light {
37
- outline-color: var(--ids-comp-avatar-focused-outline-color-light-focused);
38
33
  }
39
34
  .ids-avatar:active {
40
35
  outline: none;
@@ -52,6 +47,9 @@
52
47
  letter-spacing: var(--ids-comp-avatar-initials-typography-letter-spacing-compact);
53
48
  line-height: var(--ids-comp-avatar-initials-typography-line-height-compact);
54
49
  }
50
+ .ids-avatar.ids-avatar-compact:focus, .ids-avatar.ids-avatar-compact:focus-visible {
51
+ outline-width: var(--ids-comp-avatar-focused-outline-size-outline);
52
+ }
55
53
  .ids-avatar.ids-avatar-compact:has(.ids-avatar-image) {
56
54
  padding: 0;
57
55
  }
@@ -72,6 +70,9 @@
72
70
  letter-spacing: var(--ids-comp-avatar-initials-typography-letter-spacing-comfortable);
73
71
  line-height: var(--ids-comp-avatar-initials-typography-line-height-comfortable);
74
72
  }
73
+ .ids-avatar.ids-avatar-comfortable:focus, .ids-avatar.ids-avatar-comfortable:focus-visible {
74
+ outline-width: var(--ids-comp-avatar-focused-outline-size-outline);
75
+ }
75
76
  .ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image) {
76
77
  padding: 0;
77
78
  }
@@ -92,6 +93,9 @@
92
93
  letter-spacing: var(--ids-comp-avatar-initials-typography-letter-spacing-spacious);
93
94
  line-height: var(--ids-comp-avatar-initials-typography-line-height-spacious);
94
95
  }
96
+ .ids-avatar.ids-avatar-spacious:focus, .ids-avatar.ids-avatar-spacious:focus-visible {
97
+ outline-width: var(--ids-comp-avatar-focused-outline-size-outline);
98
+ }
95
99
  .ids-avatar.ids-avatar-spacious:has(.ids-avatar-image) {
96
100
  padding: 0;
97
101
  }
@@ -112,6 +116,9 @@
112
116
  letter-spacing: var(--ids-comp-avatar-initials-typography-letter-spacing-dense);
113
117
  line-height: var(--ids-comp-avatar-initials-typography-line-height-dense);
114
118
  }
119
+ .ids-avatar.ids-avatar-dense:focus, .ids-avatar.ids-avatar-dense:focus-visible {
120
+ outline-width: var(--ids-comp-avatar-focused-outline-size-outline);
121
+ }
115
122
  .ids-avatar.ids-avatar-dense:has(.ids-avatar-image) {
116
123
  padding: 0;
117
124
  }
@@ -128,9 +135,10 @@
128
135
  background: var(--ids-comp-avatar-color-bg-primary-hovered);
129
136
  border-color: var(--ids-comp-avatar-color-border-primary-hovered);
130
137
  }
131
- .ids-avatar.ids-avatar-primary:focus {
138
+ .ids-avatar.ids-avatar-primary:focus, .ids-avatar.ids-avatar-primary:focus-visible {
132
139
  background: var(--ids-comp-avatar-color-bg-primary-focused);
133
140
  border-color: var(--ids-comp-avatar-color-border-primary-focused);
141
+ outline-color: var(--ids-comp-avatar-focused-outline-color-dark-focused);
134
142
  }
135
143
  .ids-avatar.ids-avatar-primary:active {
136
144
  background: var(--ids-comp-avatar-color-bg-primary-pressed);
@@ -148,9 +156,10 @@
148
156
  background: var(--ids-comp-avatar-color-bg-secondary-hovered);
149
157
  border-color: var(--ids-comp-avatar-color-border-secondary-hovered);
150
158
  }
151
- .ids-avatar.ids-avatar-secondary:focus {
159
+ .ids-avatar.ids-avatar-secondary:focus, .ids-avatar.ids-avatar-secondary:focus-visible {
152
160
  background: var(--ids-comp-avatar-color-bg-secondary-focused);
153
161
  border-color: var(--ids-comp-avatar-color-border-secondary-focused);
162
+ outline-color: var(--ids-comp-avatar-focused-outline-color-dark-focused);
154
163
  }
155
164
  .ids-avatar.ids-avatar-secondary:active {
156
165
  background: var(--ids-comp-avatar-color-bg-secondary-pressed);
@@ -168,9 +177,10 @@
168
177
  background: var(--ids-comp-avatar-color-bg-light-hovered);
169
178
  border-color: var(--ids-comp-avatar-color-border-light-hovered);
170
179
  }
171
- .ids-avatar.ids-avatar-light:focus {
180
+ .ids-avatar.ids-avatar-light:focus, .ids-avatar.ids-avatar-light:focus-visible {
172
181
  background: var(--ids-comp-avatar-color-bg-light-focused);
173
182
  border-color: var(--ids-comp-avatar-color-border-light-focused);
183
+ outline-color: var(--ids-comp-avatar-focused-outline-color-light-focused);
174
184
  }
175
185
  .ids-avatar.ids-avatar-light:active {
176
186
  background: var(--ids-comp-avatar-color-bg-light-pressed);
@@ -188,9 +198,10 @@
188
198
  background: var(--ids-comp-avatar-color-bg-dark-hovered);
189
199
  border-color: var(--ids-comp-avatar-color-border-dark-hovered);
190
200
  }
191
- .ids-avatar.ids-avatar-dark:focus {
201
+ .ids-avatar.ids-avatar-dark:focus, .ids-avatar.ids-avatar-dark:focus-visible {
192
202
  background: var(--ids-comp-avatar-color-bg-dark-focused);
193
203
  border-color: var(--ids-comp-avatar-color-border-dark-focused);
204
+ outline-color: var(--ids-comp-avatar-focused-outline-color-dark-focused);
194
205
  }
195
206
  .ids-avatar.ids-avatar-dark:active {
196
207
  background: var(--ids-comp-avatar-color-bg-dark-pressed);
@@ -208,9 +219,10 @@
208
219
  background: var(--ids-comp-avatar-color-bg-surface-hovered);
209
220
  border-color: var(--ids-comp-avatar-color-border-surface-hovered);
210
221
  }
211
- .ids-avatar.ids-avatar-surface:focus {
222
+ .ids-avatar.ids-avatar-surface:focus, .ids-avatar.ids-avatar-surface:focus-visible {
212
223
  background: var(--ids-comp-avatar-color-bg-surface-focused);
213
224
  border-color: var(--ids-comp-avatar-color-border-surface-focused);
225
+ outline-color: var(--ids-comp-avatar-focused-outline-color-dark-focused);
214
226
  }
215
227
  .ids-avatar.ids-avatar-surface:active {
216
228
  background: var(--ids-comp-avatar-color-bg-surface-pressed);
package/dist/avatar/avatar.min.css CHANGED
@@ -1 +1 @@
1
- .ids-avatar{display:flex;font-style:normal;text-align:center;align-items:center;flex-direction:column;justify-content:center;border-style:solid}.ids-avatar:not(:disabled){cursor:pointer}.ids-avatar:disabled{cursor:not-allowed}.ids-avatar .ids-avatar-icon{gap:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:100%}.ids-avatar .ids-avatar-image{border-radius:50%;vertical-align:middle;max-width:none}.ids-avatar:focus{outline-offset:2px;outline-style:solid;outline-width:var(--ids-comp-avatar-focused-outline-size-outline);outline-color:var(--ids-comp-avatar-focused-outline-color-dark-focused)}.ids-avatar:focus.ids-avatar-light{outline-color:var(--ids-comp-avatar-focused-outline-color-light-focused)}.ids-avatar:active{outline:none}.ids-avatar.ids-avatar-compact{width:var(--ids-comp-avatar-size-height-compact);height:var(--ids-comp-avatar-size-width-compact);gap:var(--ids-comp-avatar-size-gap-compact);border-radius:var(--ids-comp-avatar-size-border-radius-compact);padding:var(--ids-comp-avatar-size-padding-y-compact) var(--ids-comp-avatar-size-padding-x-compact);border:var(--ids-comp-avatar-size-border-compact);font-family:var(--ids-comp-avatar-initials-typography-font-family-compact);font-size:var(--ids-comp-avatar-initials-typography-font-size-compact);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-compact);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-compact);line-height:var(--ids-comp-avatar-initials-typography-line-height-compact)}.ids-avatar.ids-avatar-compact:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-compact .ids-avatar-image{width:var(--ids-comp-avatar-size-width-compact);height:var(--ids-comp-avatar-size-height-compact)}.ids-avatar.ids-avatar-comfortable{width:var(--ids-comp-avatar-size-height-comfortable);height:var(--ids-comp-avatar-size-width-comfortable);gap:var(--ids-comp-avatar-size-gap-comfortable);border-radius:var(--ids-comp-avatar-size-border-radius-comfortable);padding:var(--ids-comp-avatar-size-padding-y-comfortable) var(--ids-comp-avatar-size-padding-x-comfortable);border:var(--ids-comp-avatar-size-border-comfortable);font-family:var(--ids-comp-avatar-initials-typography-font-family-comfortable);font-size:var(--ids-comp-avatar-initials-typography-font-size-comfortable);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-comfortable);line-height:var(--ids-comp-avatar-initials-typography-line-height-comfortable)}.ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-comfortable .ids-avatar-image{width:var(--ids-comp-avatar-size-width-comfortable);height:var(--ids-comp-avatar-size-height-comfortable)}.ids-avatar.ids-avatar-spacious{width:var(--ids-comp-avatar-size-height-spacious);height:var(--ids-comp-avatar-size-width-spacious);gap:var(--ids-comp-avatar-size-gap-spacious);border-radius:var(--ids-comp-avatar-size-border-radius-spacious);padding:var(--ids-comp-avatar-size-padding-y-spacious) var(--ids-comp-avatar-size-padding-x-spacious);border:var(--ids-comp-avatar-size-border-spacious);font-family:var(--ids-comp-avatar-initials-typography-font-family-spacious);font-size:var(--ids-comp-avatar-initials-typography-font-size-spacious);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-spacious);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-spacious);line-height:var(--ids-comp-avatar-initials-typography-line-height-spacious)}.ids-avatar.ids-avatar-spacious:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-spacious .ids-avatar-image{width:var(--ids-comp-avatar-size-width-spacious);height:var(--ids-comp-avatar-size-height-spacious)}.ids-avatar.ids-avatar-dense{width:var(--ids-comp-avatar-size-height-dense);height:var(--ids-comp-avatar-size-width-dense);gap:var(--ids-comp-avatar-size-gap-dense);border-radius:var(--ids-comp-avatar-size-border-radius-dense);padding:var(--ids-comp-avatar-size-padding-y-dense) var(--ids-comp-avatar-size-padding-x-dense);border:var(--ids-comp-avatar-size-border-dense);font-family:var(--ids-comp-avatar-initials-typography-font-family-dense);font-size:var(--ids-comp-avatar-initials-typography-font-size-dense);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-dense);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-dense);line-height:var(--ids-comp-avatar-initials-typography-line-height-dense)}.ids-avatar.ids-avatar-dense:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-dense .ids-avatar-image{width:var(--ids-comp-avatar-size-width-dense);height:var(--ids-comp-avatar-size-height-dense)}.ids-avatar.ids-avatar-primary{color:var(--ids-comp-avatar-color-fg-primary-default);background:var(--ids-comp-avatar-color-bg-primary-default);border-color:var(--ids-comp-avatar-color-border-primary-default)}.ids-avatar.ids-avatar-primary:hover{background:var(--ids-comp-avatar-color-bg-primary-hovered);border-color:var(--ids-comp-avatar-color-border-primary-hovered)}.ids-avatar.ids-avatar-primary:focus{background:var(--ids-comp-avatar-color-bg-primary-focused);border-color:var(--ids-comp-avatar-color-border-primary-focused)}.ids-avatar.ids-avatar-primary:active{background:var(--ids-comp-avatar-color-bg-primary-pressed);border-color:var(--ids-comp-avatar-color-border-primary-pressed)}.ids-avatar.ids-avatar-primary .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-primary-default)}.ids-avatar.ids-avatar-secondary{color:var(--ids-comp-avatar-color-fg-secondary-default);background:var(--ids-comp-avatar-color-bg-secondary-default);border-color:var(--ids-comp-avatar-color-border-secondary-default)}.ids-avatar.ids-avatar-secondary:hover{background:var(--ids-comp-avatar-color-bg-secondary-hovered);border-color:var(--ids-comp-avatar-color-border-secondary-hovered)}.ids-avatar.ids-avatar-secondary:focus{background:var(--ids-comp-avatar-color-bg-secondary-focused);border-color:var(--ids-comp-avatar-color-border-secondary-focused)}.ids-avatar.ids-avatar-secondary:active{background:var(--ids-comp-avatar-color-bg-secondary-pressed);border-color:var(--ids-comp-avatar-color-border-secondary-pressed)}.ids-avatar.ids-avatar-secondary .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-secondary-default)}.ids-avatar.ids-avatar-light{color:var(--ids-comp-avatar-color-fg-light-default);background:var(--ids-comp-avatar-color-bg-light-default);border-color:var(--ids-comp-avatar-color-border-light-default)}.ids-avatar.ids-avatar-light:hover{background:var(--ids-comp-avatar-color-bg-light-hovered);border-color:var(--ids-comp-avatar-color-border-light-hovered)}.ids-avatar.ids-avatar-light:focus{background:var(--ids-comp-avatar-color-bg-light-focused);border-color:var(--ids-comp-avatar-color-border-light-focused)}.ids-avatar.ids-avatar-light:active{background:var(--ids-comp-avatar-color-bg-light-pressed);border-color:var(--ids-comp-avatar-color-border-light-pressed)}.ids-avatar.ids-avatar-light .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-light-default)}.ids-avatar.ids-avatar-dark{color:var(--ids-comp-avatar-color-fg-dark-default);background:var(--ids-comp-avatar-color-bg-dark-default);border-color:var(--ids-comp-avatar-color-border-dark-default)}.ids-avatar.ids-avatar-dark:hover{background:var(--ids-comp-avatar-color-bg-dark-hovered);border-color:var(--ids-comp-avatar-color-border-dark-hovered)}.ids-avatar.ids-avatar-dark:focus{background:var(--ids-comp-avatar-color-bg-dark-focused);border-color:var(--ids-comp-avatar-color-border-dark-focused)}.ids-avatar.ids-avatar-dark:active{background:var(--ids-comp-avatar-color-bg-dark-pressed);border-color:var(--ids-comp-avatar-color-border-dark-pressed)}.ids-avatar.ids-avatar-dark .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-dark-default)}.ids-avatar.ids-avatar-surface{color:var(--ids-comp-avatar-color-fg-surface-default);background:var(--ids-comp-avatar-color-bg-surface-default);border-color:var(--ids-comp-avatar-color-border-surface-default)}.ids-avatar.ids-avatar-surface:hover{background:var(--ids-comp-avatar-color-bg-surface-hovered);border-color:var(--ids-comp-avatar-color-border-surface-hovered)}.ids-avatar.ids-avatar-surface:focus{background:var(--ids-comp-avatar-color-bg-surface-focused);border-color:var(--ids-comp-avatar-color-border-surface-focused)}.ids-avatar.ids-avatar-surface:active{background:var(--ids-comp-avatar-color-bg-surface-pressed);border-color:var(--ids-comp-avatar-color-border-surface-pressed)}.ids-avatar.ids-avatar-surface .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-surface-default)}
1
+ .ids-avatar{display:flex;font-style:normal;text-align:center;align-items:center;flex-direction:column;justify-content:center;border-style:solid}.ids-avatar:not(:disabled){cursor:pointer}.ids-avatar:disabled{cursor:not-allowed}.ids-avatar .ids-avatar-icon{gap:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:100%}.ids-avatar .ids-avatar-image{border-radius:50%;vertical-align:middle;max-width:none}.ids-avatar:focus,.ids-avatar:focus-visible{outline-offset:2px;outline-style:solid}.ids-avatar:active{outline:none}.ids-avatar.ids-avatar-compact{width:var(--ids-comp-avatar-size-height-compact);height:var(--ids-comp-avatar-size-width-compact);gap:var(--ids-comp-avatar-size-gap-compact);border-radius:var(--ids-comp-avatar-size-border-radius-compact);padding:var(--ids-comp-avatar-size-padding-y-compact) var(--ids-comp-avatar-size-padding-x-compact);border:var(--ids-comp-avatar-size-border-compact);font-family:var(--ids-comp-avatar-initials-typography-font-family-compact);font-size:var(--ids-comp-avatar-initials-typography-font-size-compact);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-compact);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-compact);line-height:var(--ids-comp-avatar-initials-typography-line-height-compact)}.ids-avatar.ids-avatar-compact:focus,.ids-avatar.ids-avatar-compact:focus-visible{outline-width:var(--ids-comp-avatar-focused-outline-size-outline)}.ids-avatar.ids-avatar-compact:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-compact .ids-avatar-image{width:var(--ids-comp-avatar-size-width-compact);height:var(--ids-comp-avatar-size-height-compact)}.ids-avatar.ids-avatar-comfortable{width:var(--ids-comp-avatar-size-height-comfortable);height:var(--ids-comp-avatar-size-width-comfortable);gap:var(--ids-comp-avatar-size-gap-comfortable);border-radius:var(--ids-comp-avatar-size-border-radius-comfortable);padding:var(--ids-comp-avatar-size-padding-y-comfortable) var(--ids-comp-avatar-size-padding-x-comfortable);border:var(--ids-comp-avatar-size-border-comfortable);font-family:var(--ids-comp-avatar-initials-typography-font-family-comfortable);font-size:var(--ids-comp-avatar-initials-typography-font-size-comfortable);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-comfortable);line-height:var(--ids-comp-avatar-initials-typography-line-height-comfortable)}.ids-avatar.ids-avatar-comfortable:focus,.ids-avatar.ids-avatar-comfortable:focus-visible{outline-width:var(--ids-comp-avatar-focused-outline-size-outline)}.ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-comfortable .ids-avatar-image{width:var(--ids-comp-avatar-size-width-comfortable);height:var(--ids-comp-avatar-size-height-comfortable)}.ids-avatar.ids-avatar-spacious{width:var(--ids-comp-avatar-size-height-spacious);height:var(--ids-comp-avatar-size-width-spacious);gap:var(--ids-comp-avatar-size-gap-spacious);border-radius:var(--ids-comp-avatar-size-border-radius-spacious);padding:var(--ids-comp-avatar-size-padding-y-spacious) var(--ids-comp-avatar-size-padding-x-spacious);border:var(--ids-comp-avatar-size-border-spacious);font-family:var(--ids-comp-avatar-initials-typography-font-family-spacious);font-size:var(--ids-comp-avatar-initials-typography-font-size-spacious);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-spacious);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-spacious);line-height:var(--ids-comp-avatar-initials-typography-line-height-spacious)}.ids-avatar.ids-avatar-spacious:focus,.ids-avatar.ids-avatar-spacious:focus-visible{outline-width:var(--ids-comp-avatar-focused-outline-size-outline)}.ids-avatar.ids-avatar-spacious:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-spacious .ids-avatar-image{width:var(--ids-comp-avatar-size-width-spacious);height:var(--ids-comp-avatar-size-height-spacious)}.ids-avatar.ids-avatar-dense{width:var(--ids-comp-avatar-size-height-dense);height:var(--ids-comp-avatar-size-width-dense);gap:var(--ids-comp-avatar-size-gap-dense);border-radius:var(--ids-comp-avatar-size-border-radius-dense);padding:var(--ids-comp-avatar-size-padding-y-dense) var(--ids-comp-avatar-size-padding-x-dense);border:var(--ids-comp-avatar-size-border-dense);font-family:var(--ids-comp-avatar-initials-typography-font-family-dense);font-size:var(--ids-comp-avatar-initials-typography-font-size-dense);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-dense);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-dense);line-height:var(--ids-comp-avatar-initials-typography-line-height-dense)}.ids-avatar.ids-avatar-dense:focus,.ids-avatar.ids-avatar-dense:focus-visible{outline-width:var(--ids-comp-avatar-focused-outline-size-outline)}.ids-avatar.ids-avatar-dense:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-dense .ids-avatar-image{width:var(--ids-comp-avatar-size-width-dense);height:var(--ids-comp-avatar-size-height-dense)}.ids-avatar.ids-avatar-primary{color:var(--ids-comp-avatar-color-fg-primary-default);background:var(--ids-comp-avatar-color-bg-primary-default);border-color:var(--ids-comp-avatar-color-border-primary-default)}.ids-avatar.ids-avatar-primary:hover{background:var(--ids-comp-avatar-color-bg-primary-hovered);border-color:var(--ids-comp-avatar-color-border-primary-hovered)}.ids-avatar.ids-avatar-primary:focus,.ids-avatar.ids-avatar-primary:focus-visible{background:var(--ids-comp-avatar-color-bg-primary-focused);border-color:var(--ids-comp-avatar-color-border-primary-focused);outline-color:var(--ids-comp-avatar-focused-outline-color-dark-focused)}.ids-avatar.ids-avatar-primary:active{background:var(--ids-comp-avatar-color-bg-primary-pressed);border-color:var(--ids-comp-avatar-color-border-primary-pressed)}.ids-avatar.ids-avatar-primary .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-primary-default)}.ids-avatar.ids-avatar-secondary{color:var(--ids-comp-avatar-color-fg-secondary-default);background:var(--ids-comp-avatar-color-bg-secondary-default);border-color:var(--ids-comp-avatar-color-border-secondary-default)}.ids-avatar.ids-avatar-secondary:hover{background:var(--ids-comp-avatar-color-bg-secondary-hovered);border-color:var(--ids-comp-avatar-color-border-secondary-hovered)}.ids-avatar.ids-avatar-secondary:focus,.ids-avatar.ids-avatar-secondary:focus-visible{background:var(--ids-comp-avatar-color-bg-secondary-focused);border-color:var(--ids-comp-avatar-color-border-secondary-focused);outline-color:var(--ids-comp-avatar-focused-outline-color-dark-focused)}.ids-avatar.ids-avatar-secondary:active{background:var(--ids-comp-avatar-color-bg-secondary-pressed);border-color:var(--ids-comp-avatar-color-border-secondary-pressed)}.ids-avatar.ids-avatar-secondary .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-secondary-default)}.ids-avatar.ids-avatar-light{color:var(--ids-comp-avatar-color-fg-light-default);background:var(--ids-comp-avatar-color-bg-light-default);border-color:var(--ids-comp-avatar-color-border-light-default)}.ids-avatar.ids-avatar-light:hover{background:var(--ids-comp-avatar-color-bg-light-hovered);border-color:var(--ids-comp-avatar-color-border-light-hovered)}.ids-avatar.ids-avatar-light:focus,.ids-avatar.ids-avatar-light:focus-visible{background:var(--ids-comp-avatar-color-bg-light-focused);border-color:var(--ids-comp-avatar-color-border-light-focused);outline-color:var(--ids-comp-avatar-focused-outline-color-light-focused)}.ids-avatar.ids-avatar-light:active{background:var(--ids-comp-avatar-color-bg-light-pressed);border-color:var(--ids-comp-avatar-color-border-light-pressed)}.ids-avatar.ids-avatar-light .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-light-default)}.ids-avatar.ids-avatar-dark{color:var(--ids-comp-avatar-color-fg-dark-default);background:var(--ids-comp-avatar-color-bg-dark-default);border-color:var(--ids-comp-avatar-color-border-dark-default)}.ids-avatar.ids-avatar-dark:hover{background:var(--ids-comp-avatar-color-bg-dark-hovered);border-color:var(--ids-comp-avatar-color-border-dark-hovered)}.ids-avatar.ids-avatar-dark:focus,.ids-avatar.ids-avatar-dark:focus-visible{background:var(--ids-comp-avatar-color-bg-dark-focused);border-color:var(--ids-comp-avatar-color-border-dark-focused);outline-color:var(--ids-comp-avatar-focused-outline-color-dark-focused)}.ids-avatar.ids-avatar-dark:active{background:var(--ids-comp-avatar-color-bg-dark-pressed);border-color:var(--ids-comp-avatar-color-border-dark-pressed)}.ids-avatar.ids-avatar-dark .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-dark-default)}.ids-avatar.ids-avatar-surface{color:var(--ids-comp-avatar-color-fg-surface-default);background:var(--ids-comp-avatar-color-bg-surface-default);border-color:var(--ids-comp-avatar-color-border-surface-default)}.ids-avatar.ids-avatar-surface:hover{background:var(--ids-comp-avatar-color-bg-surface-hovered);border-color:var(--ids-comp-avatar-color-border-surface-hovered)}.ids-avatar.ids-avatar-surface:focus,.ids-avatar.ids-avatar-surface:focus-visible{background:var(--ids-comp-avatar-color-bg-surface-focused);border-color:var(--ids-comp-avatar-color-border-surface-focused);outline-color:var(--ids-comp-avatar-focused-outline-color-dark-focused)}.ids-avatar.ids-avatar-surface:active{background:var(--ids-comp-avatar-color-bg-surface-pressed);border-color:var(--ids-comp-avatar-color-border-surface-pressed)}.ids-avatar.ids-avatar-surface .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-surface-default)}