@i-cell/ids-styles 0.0.66 → 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 (10) 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/components.css +52 -43
  5. package/dist/components.min.css +1 -1
  6. package/dist/components.plugin.js +113 -86
  7. package/dist/notification/notification.css +8 -0
  8. package/dist/notification/notification.min.css +1 -1
  9. package/dist/notification/notification.plugin.js +29 -7
  10. package/package.json +1 -1
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,90 +242,90 @@ 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',
@@ -8426,7 +8431,10 @@ module.exports = function ComponentsPlugin() {
8426
8431
  borderLeftWidth: 'var(--ids-comp-notification-filled-container-size-border-left-width-compact)',
8427
8432
  },
8428
8433
  '.ids-notification.ids-notification-filled.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container':
8429
- { 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
+ },
8430
8438
  '.ids-notification.ids-notification-filled.ids-notification-comfortable>.ids-notification__content-wrapper': {
8431
8439
  gap: 'var(--ids-comp-notification-filled-container-size-gap-comfortable)',
8432
8440
  padding:
@@ -8438,7 +8446,10 @@ module.exports = function ComponentsPlugin() {
8438
8446
  borderLeftWidth: 'var(--ids-comp-notification-filled-container-size-border-left-width-comfortable)',
8439
8447
  },
8440
8448
  '.ids-notification.ids-notification-filled.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container':
8441
- { 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
+ },
8442
8453
  '.ids-notification.ids-notification-filled.ids-notification-spacious>.ids-notification__content-wrapper': {
8443
8454
  gap: 'var(--ids-comp-notification-filled-container-size-gap-spacious)',
8444
8455
  padding:
@@ -8450,7 +8461,10 @@ module.exports = function ComponentsPlugin() {
8450
8461
  borderLeftWidth: 'var(--ids-comp-notification-filled-container-size-border-left-width-spacious)',
8451
8462
  },
8452
8463
  '.ids-notification.ids-notification-filled.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container':
8453
- { 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
+ },
8454
8468
  '.ids-notification.ids-notification-filled.ids-notification-dense>.ids-notification__content-wrapper': {
8455
8469
  gap: 'var(--ids-comp-notification-filled-container-size-gap-dense)',
8456
8470
  padding:
@@ -8463,6 +8477,7 @@ module.exports = function ComponentsPlugin() {
8463
8477
  },
8464
8478
  '.ids-notification.ids-notification-filled.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container': {
8465
8479
  minWidth: 'var(--ids-comp-notification-filled-container-size-min-width-dense)',
8480
+ maxWidth: 'var(--ids-comp-notification-filled-container-size-max-width-dense)',
8466
8481
  },
8467
8482
  '.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper': {
8468
8483
  borderColor: 'var(--ids-comp-notification-outlined-color-border-error-default)',
@@ -8545,7 +8560,10 @@ module.exports = function ComponentsPlugin() {
8545
8560
  borderLeftWidth: 'var(--ids-comp-notification-outlined-container-size-border-left-width-compact)',
8546
8561
  },
8547
8562
  '.ids-notification.ids-notification-outlined.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container':
8548
- { 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
+ },
8549
8567
  '.ids-notification.ids-notification-outlined.ids-notification-comfortable>.ids-notification__content-wrapper': {
8550
8568
  gap: 'var(--ids-comp-notification-outlined-container-size-gap-comfortable)',
8551
8569
  padding:
@@ -8557,7 +8575,10 @@ module.exports = function ComponentsPlugin() {
8557
8575
  borderLeftWidth: 'var(--ids-comp-notification-outlined-container-size-border-left-width-comfortable)',
8558
8576
  },
8559
8577
  '.ids-notification.ids-notification-outlined.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container':
8560
- { 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
+ },
8561
8582
  '.ids-notification.ids-notification-outlined.ids-notification-spacious>.ids-notification__content-wrapper': {
8562
8583
  gap: 'var(--ids-comp-notification-outlined-container-size-gap-spacious)',
8563
8584
  padding:
@@ -8569,7 +8590,10 @@ module.exports = function ComponentsPlugin() {
8569
8590
  borderLeftWidth: 'var(--ids-comp-notification-outlined-container-size-border-left-width-spacious)',
8570
8591
  },
8571
8592
  '.ids-notification.ids-notification-outlined.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container':
8572
- { 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
+ },
8573
8597
  '.ids-notification.ids-notification-outlined.ids-notification-dense>.ids-notification__content-wrapper': {
8574
8598
  gap: 'var(--ids-comp-notification-outlined-container-size-gap-dense)',
8575
8599
  padding:
@@ -8581,7 +8605,10 @@ module.exports = function ComponentsPlugin() {
8581
8605
  borderLeftWidth: 'var(--ids-comp-notification-outlined-container-size-border-left-width-dense)',
8582
8606
  },
8583
8607
  '.ids-notification.ids-notification-outlined.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container':
8584
- { 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
+ },
8585
8612
  '.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__leading-element': {
8586
8613
  paddingLeft: 'var(--ids-comp-notification-icon-size-padding-left-compact)',
8587
8614
  paddingRight: 'var(--ids-comp-notification-icon-size-padding-right-compact)',
package/dist/notification/notification.css CHANGED
@@ -159,6 +159,7 @@
159
159
  }
160
160
  .ids-notification.ids-notification-filled.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
161
161
  min-width: var(--ids-comp-notification-filled-container-size-min-width-compact);
162
+ max-width: var(--ids-comp-notification-filled-container-size-max-width-compact);
162
163
  }
163
164
  .ids-notification.ids-notification-filled.ids-notification-comfortable > .ids-notification__content-wrapper {
164
165
  gap: var(--ids-comp-notification-filled-container-size-gap-comfortable);
@@ -171,6 +172,7 @@
171
172
  }
172
173
  .ids-notification.ids-notification-filled.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
173
174
  min-width: var(--ids-comp-notification-filled-container-size-min-width-comfortable);
175
+ max-width: var(--ids-comp-notification-filled-container-size-max-width-comfortable);
174
176
  }
175
177
  .ids-notification.ids-notification-filled.ids-notification-spacious > .ids-notification__content-wrapper {
176
178
  gap: var(--ids-comp-notification-filled-container-size-gap-spacious);
@@ -183,6 +185,7 @@
183
185
  }
184
186
  .ids-notification.ids-notification-filled.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
185
187
  min-width: var(--ids-comp-notification-filled-container-size-min-width-spacious);
188
+ max-width: var(--ids-comp-notification-filled-container-size-max-width-spacious);
186
189
  }
187
190
  .ids-notification.ids-notification-filled.ids-notification-dense > .ids-notification__content-wrapper {
188
191
  gap: var(--ids-comp-notification-filled-container-size-gap-dense);
@@ -195,6 +198,7 @@
195
198
  }
196
199
  .ids-notification.ids-notification-filled.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
197
200
  min-width: var(--ids-comp-notification-filled-container-size-min-width-dense);
201
+ max-width: var(--ids-comp-notification-filled-container-size-max-width-dense);
198
202
  }
199
203
  .ids-notification.ids-notification-outlined.ids-notification-error > .ids-notification__content-wrapper {
200
204
  border-color: var(--ids-comp-notification-outlined-color-border-error-default);
@@ -298,6 +302,7 @@
298
302
  }
299
303
  .ids-notification.ids-notification-outlined.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
300
304
  min-width: var(--ids-comp-notification-outlined-container-size-min-width-compact);
305
+ max-width: var(--ids-comp-notification-outlined-container-size-max-width-compact);
301
306
  }
302
307
  .ids-notification.ids-notification-outlined.ids-notification-comfortable > .ids-notification__content-wrapper {
303
308
  gap: var(--ids-comp-notification-outlined-container-size-gap-comfortable);
@@ -310,6 +315,7 @@
310
315
  }
311
316
  .ids-notification.ids-notification-outlined.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
312
317
  min-width: var(--ids-comp-notification-outlined-container-size-min-width-comfortable);
318
+ max-width: var(--ids-comp-notification-outlined-container-size-max-width-comfortable);
313
319
  }
314
320
  .ids-notification.ids-notification-outlined.ids-notification-spacious > .ids-notification__content-wrapper {
315
321
  gap: var(--ids-comp-notification-outlined-container-size-gap-spacious);
@@ -322,6 +328,7 @@
322
328
  }
323
329
  .ids-notification.ids-notification-outlined.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
324
330
  min-width: var(--ids-comp-notification-outlined-container-size-min-width-spacious);
331
+ max-width: var(--ids-comp-notification-outlined-container-size-max-width-spacious);
325
332
  }
326
333
  .ids-notification.ids-notification-outlined.ids-notification-dense > .ids-notification__content-wrapper {
327
334
  gap: var(--ids-comp-notification-outlined-container-size-gap-dense);
@@ -334,6 +341,7 @@
334
341
  }
335
342
  .ids-notification.ids-notification-outlined.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
336
343
  min-width: var(--ids-comp-notification-outlined-container-size-min-width-dense);
344
+ max-width: var(--ids-comp-notification-outlined-container-size-max-width-dense);
337
345
  }
338
346
  .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__leading-element {
339
347
  padding-left: var(--ids-comp-notification-icon-size-padding-left-compact);