@i-cell/ids-styles 0.0.64 → 0.0.67

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 (13) hide show
  1. package/dist/accordion/accordion.css +44 -43
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +84 -79
  4. package/dist/autocomplete/autocomplete.css +158 -26
  5. package/dist/autocomplete/autocomplete.min.css +1 -1
  6. package/dist/autocomplete/autocomplete.plugin.js +138 -16
  7. package/dist/components.css +210 -69
  8. package/dist/components.min.css +1 -1
  9. package/dist/components.plugin.js +251 -102
  10. package/dist/notification/notification.css +8 -0
  11. package/dist/notification/notification.min.css +1 -1
  12. package/dist/notification/notification.plugin.js +29 -7
  13. package/package.json +2 -2
package/dist/components.plugin.js CHANGED
@@ -20,30 +20,31 @@ module.exports = function ComponentsPlugin() {
20
20
  borderColor: 'rgba(0,0,0,0)',
21
21
  },
22
22
  '.ids-accordion>.ids-accordion-controls': { display: 'flex', alignItems: 'flex-start', alignSelf: 'stretch' },
23
- '.ids-accordion>.ids-accordion-item': {
24
- display: 'flex',
23
+ '.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)': {
25
24
  width: '100%',
25
+ display: 'flex',
26
26
  flexDirection: 'column',
27
27
  alignItems: 'flex-start',
28
- flexShrink: 0,
28
+ alignSelf: 'stretch',
29
29
  },
30
- '.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary': {
30
+ '.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
31
31
  display: 'flex',
32
32
  alignItems: 'center',
33
33
  width: '100%',
34
34
  flex: '1 0 0',
35
35
  borderStyle: 'solid',
36
36
  cursor: 'pointer',
37
+ textAlign: 'left',
37
38
  },
38
- '.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
39
+ '.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
39
40
  { outlineOffset: '2px', outlineStyle: 'solid', zIndex: 1 },
40
- '.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
41
+ '.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title': {
41
42
  flex: '1 0 0',
42
43
  whiteSpace: 'nowrap',
43
44
  overflow: 'hidden',
44
45
  textOverflow: 'ellipsis',
45
46
  },
46
- '.ids-accordion>.ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary': {
47
+ '.ids-accordion>.ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
47
48
  pointerEvents: 'none',
48
49
  userSelect: 'none',
49
50
  },
@@ -67,26 +68,27 @@ module.exports = function ComponentsPlugin() {
67
68
  padding: 'var(--ids-comp-accordion-item-size-padding-y-compact) var(--ids-comp-accordion-item-size-padding-x-compact)',
68
69
  gap: 'var(--ids-comp-accordion-item-size-gap-compact)',
69
70
  },
70
- '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary': {
71
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
71
72
  height: 'var(--ids-comp-accordion-summary-size-height-compact)',
72
73
  padding: 'var(--ids-comp-accordion-summary-size-padding-y-compact) var(--ids-comp-accordion-summary-size-padding-x-compact)',
73
74
  gap: 'var(--ids-comp-accordion-summary-size-gap-compact)',
74
75
  borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-compact)',
75
76
  borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-compact)',
76
77
  },
77
- '.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':
78
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
78
79
  {
79
80
  outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-compact)',
80
81
  outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
81
82
  },
82
- '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
83
- fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-compact)',
84
- fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-compact)',
85
- fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-compact)',
86
- letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-compact)',
87
- lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-compact)',
88
- },
89
- '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
83
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title':
84
+ {
85
+ fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-compact)',
86
+ fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-compact)',
87
+ fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-compact)',
88
+ letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-compact)',
89
+ lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-compact)',
90
+ },
91
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
90
92
  fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-compact)',
91
93
  fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-compact)',
92
94
  lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-compact)',
@@ -113,7 +115,7 @@ module.exports = function ComponentsPlugin() {
113
115
  padding: 'var(--ids-comp-accordion-item-size-padding-y-comfortable) var(--ids-comp-accordion-item-size-padding-x-comfortable)',
114
116
  gap: 'var(--ids-comp-accordion-item-size-gap-comfortable)',
115
117
  },
116
- '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary': {
118
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
117
119
  height: 'var(--ids-comp-accordion-summary-size-height-comfortable)',
118
120
  padding:
119
121
  'var(--ids-comp-accordion-summary-size-padding-y-comfortable) var(--ids-comp-accordion-summary-size-padding-x-comfortable)',
@@ -121,19 +123,20 @@ module.exports = function ComponentsPlugin() {
121
123
  borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-comfortable)',
122
124
  borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-comfortable)',
123
125
  },
124
- '.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':
126
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
125
127
  {
126
128
  outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-comfortable)',
127
129
  outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
128
130
  },
129
- '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
130
- fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-comfortable)',
131
- fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-comfortable)',
132
- fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-comfortable)',
133
- letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-comfortable)',
134
- lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-comfortable)',
135
- },
136
- '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
131
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title':
132
+ {
133
+ fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-comfortable)',
134
+ fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-comfortable)',
135
+ fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-comfortable)',
136
+ letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-comfortable)',
137
+ lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-comfortable)',
138
+ },
139
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
137
140
  fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-comfortable)',
138
141
  fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-comfortable)',
139
142
  lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-comfortable)',
@@ -159,26 +162,27 @@ module.exports = function ComponentsPlugin() {
159
162
  padding: 'var(--ids-comp-accordion-item-size-padding-y-spacious) var(--ids-comp-accordion-item-size-padding-x-spacious)',
160
163
  gap: 'var(--ids-comp-accordion-item-size-gap-spacious)',
161
164
  },
162
- '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary': {
165
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
163
166
  height: 'var(--ids-comp-accordion-summary-size-height-spacious)',
164
167
  padding: 'var(--ids-comp-accordion-summary-size-padding-y-spacious) var(--ids-comp-accordion-summary-size-padding-x-spacious)',
165
168
  gap: 'var(--ids-comp-accordion-summary-size-gap-spacious)',
166
169
  borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-spacious)',
167
170
  borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-spacious)',
168
171
  },
169
- '.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':
172
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
170
173
  {
171
174
  outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-spacious)',
172
175
  outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
173
176
  },
174
- '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
175
- fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-spacious)',
176
- fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-spacious)',
177
- fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-spacious)',
178
- letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-spacious)',
179
- lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-spacious)',
180
- },
181
- '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
177
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title':
178
+ {
179
+ fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-spacious)',
180
+ fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-spacious)',
181
+ fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-spacious)',
182
+ letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-spacious)',
183
+ lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-spacious)',
184
+ },
185
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
182
186
  fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-spacious)',
183
187
  fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-spacious)',
184
188
  lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-spacious)',
@@ -203,26 +207,27 @@ module.exports = function ComponentsPlugin() {
203
207
  padding: 'var(--ids-comp-accordion-item-size-padding-y-dense) var(--ids-comp-accordion-item-size-padding-x-dense)',
204
208
  gap: 'var(--ids-comp-accordion-item-size-gap-dense)',
205
209
  },
206
- '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary': {
210
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
207
211
  height: 'var(--ids-comp-accordion-summary-size-height-dense)',
208
212
  padding: 'var(--ids-comp-accordion-summary-size-padding-y-dense) var(--ids-comp-accordion-summary-size-padding-x-dense)',
209
213
  gap: 'var(--ids-comp-accordion-summary-size-gap-dense)',
210
214
  borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-dense)',
211
215
  borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-dense)',
212
216
  },
213
- '.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':
217
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
214
218
  {
215
219
  outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-dense)',
216
220
  outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
217
221
  },
218
- '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
219
- fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-dense)',
220
- fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-dense)',
221
- fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-dense)',
222
- letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-dense)',
223
- lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-dense)',
224
- },
225
- '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
222
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title':
223
+ {
224
+ fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-dense)',
225
+ fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-dense)',
226
+ fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-dense)',
227
+ letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-dense)',
228
+ lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-dense)',
229
+ },
230
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
226
231
  fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-dense)',
227
232
  fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-dense)',
228
233
  lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-dense)',
@@ -237,96 +242,98 @@ module.exports = function ComponentsPlugin() {
237
242
  borderColor: 'var(--ids-comp-accordion-container-color-border-default)',
238
243
  backgroundColor: 'var(--ids-comp-accordion-container-color-bg-default)',
239
244
  },
240
- '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary': {
245
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
241
246
  background: 'var(--ids-comp-accordion-summary-text-color-bg-default)',
242
247
  borderColor: 'var(--ids-comp-accordion-summary-text-color-border-default)',
243
248
  color: 'var(--ids-comp-accordion-summary-text-color-fg-label-default)',
244
249
  },
245
- '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
250
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
246
251
  color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-default)',
247
252
  },
248
- '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:hover': {
253
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:hover': {
249
254
  background: 'var(--ids-comp-accordion-summary-text-color-bg-hovered)',
250
255
  borderColor: 'var(--ids-comp-accordion-summary-text-color-border-hovered)',
251
256
  color: 'var(--ids-comp-accordion-summary-text-color-fg-label-hovered)',
252
257
  },
253
- '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:hover>.ids-icon': {
258
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:hover>.ids-icon': {
254
259
  color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-hovered)',
255
260
  },
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':
261
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
257
262
  {
258
263
  background: 'var(--ids-comp-accordion-summary-text-color-bg-focused)',
259
264
  borderColor: 'var(--ids-comp-accordion-summary-text-color-border-focused)',
260
265
  color: 'var(--ids-comp-accordion-summary-text-color-fg-label-focused)',
261
266
  },
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':
267
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus>.ids-icon,.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible>.ids-icon':
263
268
  { 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': {
269
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:active': {
265
270
  background: 'var(--ids-comp-accordion-summary-text-color-bg-pressed)',
266
271
  borderColor: 'var(--ids-comp-accordion-summary-text-color-border-pressed)',
267
272
  color: 'var(--ids-comp-accordion-summary-text-color-fg-label-pressed)',
268
273
  },
269
- '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:active>.ids-icon': {
274
+ '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:active>.ids-icon': {
270
275
  color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-pressed)',
271
276
  },
272
- '.ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary': {
273
- background: 'var(--ids-comp-accordion-summary-text-color-bg-disabled)',
274
- borderColor: 'var(--ids-comp-accordion-summary-text-color-border-disabled)',
275
- color: 'var(--ids-comp-accordion-summary-text-color-fg-label-disabled)',
276
- },
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
- },
277
+ '.ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary':
278
+ {
279
+ background: 'var(--ids-comp-accordion-summary-text-color-bg-disabled)',
280
+ borderColor: 'var(--ids-comp-accordion-summary-text-color-border-disabled)',
281
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-label-disabled)',
282
+ },
283
+ '.ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon':
284
+ { color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-disabled)' },
280
285
  '.ids-accordion.ids-accordion-filled': {
281
286
  borderColor: 'var(--ids-comp-accordion-container-color-border-default)',
282
287
  backgroundColor: 'var(--ids-comp-accordion-container-color-bg-default)',
283
288
  },
284
- '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary': {
289
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
285
290
  background: 'var(--ids-comp-accordion-summary-filled-color-bg-default)',
286
291
  borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-default)',
287
292
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-default)',
288
293
  },
289
- '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
294
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
290
295
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-default)',
291
296
  },
292
- '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:hover': {
297
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:hover': {
293
298
  background: 'var(--ids-comp-accordion-summary-filled-color-bg-hovered)',
294
299
  borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-hovered)',
295
300
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-hovered)',
296
301
  },
297
- '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:hover>.ids-icon': {
302
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:hover>.ids-icon': {
298
303
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-hovered)',
299
304
  },
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':
305
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
301
306
  {
302
307
  background: 'var(--ids-comp-accordion-summary-filled-color-bg-focused)',
303
308
  borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-focused)',
304
309
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-focused)',
305
310
  },
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':
311
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus>.ids-icon,.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible>.ids-icon':
307
312
  { 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': {
313
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:active': {
309
314
  background: 'var(--ids-comp-accordion-summary-filled-color-bg-pressed)',
310
315
  borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-pressed)',
311
316
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-pressed)',
312
317
  },
313
- '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:active>.ids-icon': {
318
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:active>.ids-icon': {
314
319
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-pressed)',
315
320
  },
316
- '.ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary': {
317
- background: 'var(--ids-comp-accordion-summary-filled-color-bg-disabled)',
318
- borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-disabled)',
319
- color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-disabled)',
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
- },
321
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary':
322
+ {
323
+ background: 'var(--ids-comp-accordion-summary-filled-color-bg-disabled)',
324
+ borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-disabled)',
325
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-disabled)',
326
+ },
327
+ '.ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon':
328
+ { color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-disabled)' },
324
329
  '.ids-autocomplete': {
325
330
  boxSizing: 'border-box',
326
331
  borderWidth: '0',
327
332
  borderStyle: 'none',
328
333
  borderColor: 'rgba(0,0,0,0)',
329
334
  lineHeight: 1.5,
335
+ position: 'absolute',
336
+ right: '0',
330
337
  },
331
338
  '.ids-autocomplete::before,.ids-autocomplete::after,.ids-autocomplete *,.ids-autocomplete ::before,.ids-autocomplete ::after': {
332
339
  boxSizing: 'border-box',
@@ -334,11 +341,10 @@ module.exports = function ComponentsPlugin() {
334
341
  borderStyle: 'none',
335
342
  borderColor: 'rgba(0,0,0,0)',
336
343
  },
337
- '.ids-autocomplete-panel': { overflow: 'auto', width: '100%', padding: '8px', scrollbarWidth: 'thin' },
344
+ '.ids-autocomplete-panel': { display: 'grid', overflow: 'auto', width: '100%', scrollbarWidth: 'thin' },
338
345
  '.ids-autocomplete-overlay-panel': { width: '100%' },
339
346
  '.ids-autocomplete-suffix': { display: 'flex', alignItems: 'center' },
340
- '.ids-autocomplete-chip-list': { display: 'flex', flexWrap: 'wrap', gap: '4px', marginBottom: '4px' },
341
- '.ids-autocomplete-chip-list:not(:has(button:first-child))': { display: 'none' },
347
+ '.ids-autocomplete-chip-list': { display: 'contents' },
342
348
  '.ids-autocomplete-chip-list button[idsChip].ids-chip': { borderStyle: 'solid !important' },
343
349
  '.ids-autocomplete-chip-list button[idsChip].ids-chip>div.ids-chip__label': {
344
350
  textAlign: 'left',
@@ -349,32 +355,153 @@ module.exports = function ComponentsPlugin() {
349
355
  WebkitBoxOrient: 'vertical',
350
356
  WebkitLineClamp: '1',
351
357
  },
352
- '.ids-autocomplete-hint__wrapper': { padding: '8px 12px' },
353
358
  '.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix': { gap: 'var(--ids-comp-forms-input-size-icons-gap-compact)' },
359
+ '.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix>.ids-icon-button': {
360
+ height: 'var(--ids-comp-forms-input-icon-button-width-compact)',
361
+ width: 'var(--ids-comp-forms-input-icon-button-width-compact)',
362
+ },
363
+ '.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix>.ids-icon-button .ids-icon': {
364
+ fontFamily: 'var(--ids-comp-forms-input-icon-button-typography-font-family-compact)',
365
+ fontSize: 'var(--ids-comp-forms-input-icon-button-typography-font-size-compact)',
366
+ fontWeight: 'var(--ids-comp-forms-input-icon-button-typography-font-weight-compact)',
367
+ lineHeight: 'var(--ids-comp-forms-input-icon-button-typography-line-height-compact)',
368
+ },
369
+ '.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix>.ids-icon': {
370
+ fontFamily: 'var(--ids-comp-forms-input-icon-typography-font-family-compact)',
371
+ height: 'var(--ids-comp-forms-input-icon-width-compact)',
372
+ width: 'var(--ids-comp-forms-input-icon-width-compact)',
373
+ fontSize: 'var(--ids-comp-forms-input-icon-typography-font-size-compact)',
374
+ fontWeight: 'var(--ids-comp-forms-input-icon-typography-font-weight-compact)',
375
+ lineHeight: 'var(--ids-comp-forms-input-icon-typography-line-height-compact)',
376
+ },
377
+ '.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix .ids-spinner': {
378
+ width: 'var(--ids-comp-forms-input-size-spinner-compact)',
379
+ height: 'var(--ids-comp-forms-input-size-spinner-compact)',
380
+ },
381
+ '.ids-autocomplete-overlay-panel.ids-overlay-panel-compact .ids-autocomplete-panel': {
382
+ gap: 'var(--ids-comp-forms-list-item-size-gap-compact)',
383
+ padding: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)',
384
+ margin: 'calc(var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)*-1)',
385
+ },
386
+ '.ids-autocomplete-overlay-panel.ids-overlay-panel-compact .ids-autocomplete-panel .ids-autocomplete-hint__wrapper': {
387
+ padding: '0 var(--ids-comp-forms-list-item-hint-text-size-padding-x-compact)',
388
+ },
354
389
  '.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix': {
355
390
  gap: 'var(--ids-comp-forms-input-size-icons-gap-comfortable)',
356
391
  },
392
+ '.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix>.ids-icon-button': {
393
+ height: 'var(--ids-comp-forms-input-icon-button-width-comfortable)',
394
+ width: 'var(--ids-comp-forms-input-icon-button-width-comfortable)',
395
+ },
396
+ '.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix>.ids-icon-button .ids-icon': {
397
+ fontFamily: 'var(--ids-comp-forms-input-icon-button-typography-font-family-comfortable)',
398
+ fontSize: 'var(--ids-comp-forms-input-icon-button-typography-font-size-comfortable)',
399
+ fontWeight: 'var(--ids-comp-forms-input-icon-button-typography-font-weight-comfortable)',
400
+ lineHeight: 'var(--ids-comp-forms-input-icon-button-typography-line-height-comfortable)',
401
+ },
402
+ '.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix>.ids-icon': {
403
+ fontFamily: 'var(--ids-comp-forms-input-icon-typography-font-family-comfortable)',
404
+ height: 'var(--ids-comp-forms-input-icon-width-comfortable)',
405
+ width: 'var(--ids-comp-forms-input-icon-width-comfortable)',
406
+ fontSize: 'var(--ids-comp-forms-input-icon-typography-font-size-comfortable)',
407
+ fontWeight: 'var(--ids-comp-forms-input-icon-typography-font-weight-comfortable)',
408
+ lineHeight: 'var(--ids-comp-forms-input-icon-typography-line-height-comfortable)',
409
+ },
410
+ '.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix .ids-spinner': {
411
+ width: 'var(--ids-comp-forms-input-size-spinner-comfortable)',
412
+ height: 'var(--ids-comp-forms-input-size-spinner-comfortable)',
413
+ },
414
+ '.ids-autocomplete-overlay-panel.ids-overlay-panel-comfortable .ids-autocomplete-panel': {
415
+ gap: 'var(--ids-comp-forms-list-item-size-gap-comfortable)',
416
+ padding: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)',
417
+ margin: 'calc(var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)*-1)',
418
+ },
419
+ '.ids-autocomplete-overlay-panel.ids-overlay-panel-comfortable .ids-autocomplete-panel .ids-autocomplete-hint__wrapper': {
420
+ padding: '0 var(--ids-comp-forms-list-item-hint-text-size-padding-x-comfortable)',
421
+ },
357
422
  '.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix': {
358
423
  gap: 'var(--ids-comp-forms-input-size-icons-gap-spacious)',
359
424
  },
425
+ '.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix>.ids-icon-button': {
426
+ height: 'var(--ids-comp-forms-input-icon-button-width-spacious)',
427
+ width: 'var(--ids-comp-forms-input-icon-button-width-spacious)',
428
+ },
429
+ '.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix>.ids-icon-button .ids-icon': {
430
+ fontFamily: 'var(--ids-comp-forms-input-icon-button-typography-font-family-spacious)',
431
+ fontSize: 'var(--ids-comp-forms-input-icon-button-typography-font-size-spacious)',
432
+ fontWeight: 'var(--ids-comp-forms-input-icon-button-typography-font-weight-spacious)',
433
+ lineHeight: 'var(--ids-comp-forms-input-icon-button-typography-line-height-spacious)',
434
+ },
435
+ '.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix>.ids-icon': {
436
+ fontFamily: 'var(--ids-comp-forms-input-icon-typography-font-family-spacious)',
437
+ height: 'var(--ids-comp-forms-input-icon-width-spacious)',
438
+ width: 'var(--ids-comp-forms-input-icon-width-spacious)',
439
+ fontSize: 'var(--ids-comp-forms-input-icon-typography-font-size-spacious)',
440
+ fontWeight: 'var(--ids-comp-forms-input-icon-typography-font-weight-spacious)',
441
+ lineHeight: 'var(--ids-comp-forms-input-icon-typography-line-height-spacious)',
442
+ },
443
+ '.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix .ids-spinner': {
444
+ width: 'var(--ids-comp-forms-input-size-spinner-spacious)',
445
+ height: 'var(--ids-comp-forms-input-size-spinner-spacious)',
446
+ },
447
+ '.ids-autocomplete-overlay-panel.ids-overlay-panel-spacious .ids-autocomplete-panel': {
448
+ gap: 'var(--ids-comp-forms-list-item-size-gap-spacious)',
449
+ padding: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)',
450
+ margin: 'calc(var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)*-1)',
451
+ },
452
+ '.ids-autocomplete-overlay-panel.ids-overlay-panel-spacious .ids-autocomplete-panel .ids-autocomplete-hint__wrapper': {
453
+ padding: '0 var(--ids-comp-forms-list-item-hint-text-size-padding-x-spacious)',
454
+ },
360
455
  '.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix': { gap: 'var(--ids-comp-forms-input-size-icons-gap-dense)' },
361
- 'input[autocomplete]': { width: '100%', textOverflow: 'ellipsis' },
456
+ '.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix>.ids-icon-button': {
457
+ height: 'var(--ids-comp-forms-input-icon-button-width-dense)',
458
+ width: 'var(--ids-comp-forms-input-icon-button-width-dense)',
459
+ },
460
+ '.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix>.ids-icon-button .ids-icon': {
461
+ fontFamily: 'var(--ids-comp-forms-input-icon-button-typography-font-family-dense)',
462
+ fontSize: 'var(--ids-comp-forms-input-icon-button-typography-font-size-dense)',
463
+ fontWeight: 'var(--ids-comp-forms-input-icon-button-typography-font-weight-dense)',
464
+ lineHeight: 'var(--ids-comp-forms-input-icon-button-typography-line-height-dense)',
465
+ },
466
+ '.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix>.ids-icon': {
467
+ fontFamily: 'var(--ids-comp-forms-input-icon-typography-font-family-dense)',
468
+ height: 'var(--ids-comp-forms-input-icon-width-dense)',
469
+ width: 'var(--ids-comp-forms-input-icon-width-dense)',
470
+ fontSize: 'var(--ids-comp-forms-input-icon-typography-font-size-dense)',
471
+ fontWeight: 'var(--ids-comp-forms-input-icon-typography-font-weight-dense)',
472
+ lineHeight: 'var(--ids-comp-forms-input-icon-typography-line-height-dense)',
473
+ },
474
+ '.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix .ids-spinner': {
475
+ width: 'var(--ids-comp-forms-input-size-spinner-dense)',
476
+ height: 'var(--ids-comp-forms-input-size-spinner-dense)',
477
+ },
478
+ '.ids-autocomplete-overlay-panel.ids-overlay-panel-dense .ids-autocomplete-panel': {
479
+ gap: 'var(--ids-comp-forms-list-item-size-gap-dense)',
480
+ padding: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)',
481
+ margin: 'calc(var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)*-1)',
482
+ },
483
+ '.ids-autocomplete-overlay-panel.ids-overlay-panel-dense .ids-autocomplete-panel .ids-autocomplete-hint__wrapper': {
484
+ padding: '0 var(--ids-comp-forms-list-item-hint-text-size-padding-x-dense)',
485
+ },
486
+ 'input[autocomplete]': { width: '100%', textOverflow: 'ellipsis', minWidth: 'var(--ids-comp-forms-input-size-min-width-dense)' },
362
487
  '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete])':
363
- { width: '100%', display: 'inline-flex', alignItems: 'center' },
364
- '.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)':
365
- { display: 'grid', gridTemplateColumns: '1fr auto' },
366
- '.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]':
367
- { order: 3 },
368
- '.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':
369
- { order: 2, gridRow: 'span 2/span 1' },
488
+ { width: '100%', display: 'inline-flex', flexWrap: 'wrap', alignItems: 'center', position: 'relative' },
370
489
  '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-compact)':
371
- { columnGap: 'var(--ids-comp-forms-input-size-gap-compact)' },
490
+ { paddingRight: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-right-compact)' },
491
+ '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>.ids-autocomplete-chip-list~input[autocomplete]~.ids-autocomplete-compact)':
492
+ { gap: 'var(--ids-comp-forms-input-size-chip-input-gap-compact)' },
372
493
  '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-comfortable)':
373
- { columnGap: 'var(--ids-comp-forms-input-size-gap-comfortable)' },
494
+ { paddingRight: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-right-comfortable)' },
495
+ '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>.ids-autocomplete-chip-list~input[autocomplete]~.ids-autocomplete-comfortable)':
496
+ { gap: 'var(--ids-comp-forms-input-size-chip-input-gap-comfortable)' },
374
497
  '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-spacious)':
375
- { columnGap: 'var(--ids-comp-forms-input-size-gap-spacious)' },
498
+ { paddingRight: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-right-spacious)' },
499
+ '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>.ids-autocomplete-chip-list~input[autocomplete]~.ids-autocomplete-spacious)':
500
+ { gap: 'var(--ids-comp-forms-input-size-chip-input-gap-spacious)' },
376
501
  '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-dense)':
377
- { columnGap: 'var(--ids-comp-forms-input-size-gap-dense)' },
502
+ { paddingRight: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-right-dense)' },
503
+ '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>.ids-autocomplete-chip-list~input[autocomplete]~.ids-autocomplete-dense)':
504
+ { gap: 'var(--ids-comp-forms-input-size-chip-input-gap-dense)' },
378
505
  '.ids-avatar': {
379
506
  boxSizing: 'border-box',
380
507
  borderWidth: '0',
@@ -8304,7 +8431,10 @@ module.exports = function ComponentsPlugin() {
8304
8431
  borderLeftWidth: 'var(--ids-comp-notification-filled-container-size-border-left-width-compact)',
8305
8432
  },
8306
8433
  '.ids-notification.ids-notification-filled.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container':
8307
- { minWidth: 'var(--ids-comp-notification-filled-container-size-min-width-compact)' },
8434
+ {
8435
+ minWidth: 'var(--ids-comp-notification-filled-container-size-min-width-compact)',
8436
+ maxWidth: 'var(--ids-comp-notification-filled-container-size-max-width-compact)',
8437
+ },
8308
8438
  '.ids-notification.ids-notification-filled.ids-notification-comfortable>.ids-notification__content-wrapper': {
8309
8439
  gap: 'var(--ids-comp-notification-filled-container-size-gap-comfortable)',
8310
8440
  padding:
@@ -8316,7 +8446,10 @@ module.exports = function ComponentsPlugin() {
8316
8446
  borderLeftWidth: 'var(--ids-comp-notification-filled-container-size-border-left-width-comfortable)',
8317
8447
  },
8318
8448
  '.ids-notification.ids-notification-filled.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container':
8319
- { minWidth: 'var(--ids-comp-notification-filled-container-size-min-width-comfortable)' },
8449
+ {
8450
+ minWidth: 'var(--ids-comp-notification-filled-container-size-min-width-comfortable)',
8451
+ maxWidth: 'var(--ids-comp-notification-filled-container-size-max-width-comfortable)',
8452
+ },
8320
8453
  '.ids-notification.ids-notification-filled.ids-notification-spacious>.ids-notification__content-wrapper': {
8321
8454
  gap: 'var(--ids-comp-notification-filled-container-size-gap-spacious)',
8322
8455
  padding:
@@ -8328,7 +8461,10 @@ module.exports = function ComponentsPlugin() {
8328
8461
  borderLeftWidth: 'var(--ids-comp-notification-filled-container-size-border-left-width-spacious)',
8329
8462
  },
8330
8463
  '.ids-notification.ids-notification-filled.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container':
8331
- { minWidth: 'var(--ids-comp-notification-filled-container-size-min-width-spacious)' },
8464
+ {
8465
+ minWidth: 'var(--ids-comp-notification-filled-container-size-min-width-spacious)',
8466
+ maxWidth: 'var(--ids-comp-notification-filled-container-size-max-width-spacious)',
8467
+ },
8332
8468
  '.ids-notification.ids-notification-filled.ids-notification-dense>.ids-notification__content-wrapper': {
8333
8469
  gap: 'var(--ids-comp-notification-filled-container-size-gap-dense)',
8334
8470
  padding:
@@ -8341,6 +8477,7 @@ module.exports = function ComponentsPlugin() {
8341
8477
  },
8342
8478
  '.ids-notification.ids-notification-filled.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container': {
8343
8479
  minWidth: 'var(--ids-comp-notification-filled-container-size-min-width-dense)',
8480
+ maxWidth: 'var(--ids-comp-notification-filled-container-size-max-width-dense)',
8344
8481
  },
8345
8482
  '.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper': {
8346
8483
  borderColor: 'var(--ids-comp-notification-outlined-color-border-error-default)',
@@ -8423,7 +8560,10 @@ module.exports = function ComponentsPlugin() {
8423
8560
  borderLeftWidth: 'var(--ids-comp-notification-outlined-container-size-border-left-width-compact)',
8424
8561
  },
8425
8562
  '.ids-notification.ids-notification-outlined.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container':
8426
- { minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-compact)' },
8563
+ {
8564
+ minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-compact)',
8565
+ maxWidth: 'var(--ids-comp-notification-outlined-container-size-max-width-compact)',
8566
+ },
8427
8567
  '.ids-notification.ids-notification-outlined.ids-notification-comfortable>.ids-notification__content-wrapper': {
8428
8568
  gap: 'var(--ids-comp-notification-outlined-container-size-gap-comfortable)',
8429
8569
  padding:
@@ -8435,7 +8575,10 @@ module.exports = function ComponentsPlugin() {
8435
8575
  borderLeftWidth: 'var(--ids-comp-notification-outlined-container-size-border-left-width-comfortable)',
8436
8576
  },
8437
8577
  '.ids-notification.ids-notification-outlined.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container':
8438
- { minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-comfortable)' },
8578
+ {
8579
+ minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-comfortable)',
8580
+ maxWidth: 'var(--ids-comp-notification-outlined-container-size-max-width-comfortable)',
8581
+ },
8439
8582
  '.ids-notification.ids-notification-outlined.ids-notification-spacious>.ids-notification__content-wrapper': {
8440
8583
  gap: 'var(--ids-comp-notification-outlined-container-size-gap-spacious)',
8441
8584
  padding:
@@ -8447,7 +8590,10 @@ module.exports = function ComponentsPlugin() {
8447
8590
  borderLeftWidth: 'var(--ids-comp-notification-outlined-container-size-border-left-width-spacious)',
8448
8591
  },
8449
8592
  '.ids-notification.ids-notification-outlined.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container':
8450
- { minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-spacious)' },
8593
+ {
8594
+ minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-spacious)',
8595
+ maxWidth: 'var(--ids-comp-notification-outlined-container-size-max-width-spacious)',
8596
+ },
8451
8597
  '.ids-notification.ids-notification-outlined.ids-notification-dense>.ids-notification__content-wrapper': {
8452
8598
  gap: 'var(--ids-comp-notification-outlined-container-size-gap-dense)',
8453
8599
  padding:
@@ -8459,7 +8605,10 @@ module.exports = function ComponentsPlugin() {
8459
8605
  borderLeftWidth: 'var(--ids-comp-notification-outlined-container-size-border-left-width-dense)',
8460
8606
  },
8461
8607
  '.ids-notification.ids-notification-outlined.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container':
8462
- { minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-dense)' },
8608
+ {
8609
+ minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-dense)',
8610
+ maxWidth: 'var(--ids-comp-notification-outlined-container-size-max-width-dense)',
8611
+ },
8463
8612
  '.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__leading-element': {
8464
8613
  paddingLeft: 'var(--ids-comp-notification-icon-size-padding-left-compact)',
8465
8614
  paddingRight: 'var(--ids-comp-notification-icon-size-padding-right-compact)',