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

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 +176 -195
  5. package/dist/avatar/avatar.min.css +1 -1
  6. package/dist/avatar/avatar.plugin.js +168 -170
  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 +2434 -1796
  20. package/dist/components.min.css +1 -1
  21. package/dist/components.plugin.js +2763 -2126
  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);