@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.css CHANGED
@@ -21,33 +21,34 @@
21
21
  align-items: flex-start;
22
22
  align-self: stretch;
23
23
  }
24
- .ids-accordion > .ids-accordion-item {
25
- display: flex;
24
+ .ids-accordion > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) {
26
25
  width: 100%;
26
+ display: flex;
27
27
  flex-direction: column;
28
28
  align-items: flex-start;
29
- flex-shrink: 0;
29
+ align-self: stretch;
30
30
  }
31
- .ids-accordion > .ids-accordion-item > .ids-accordion-item-summary {
31
+ .ids-accordion > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary {
32
32
  display: flex;
33
33
  align-items: center;
34
34
  width: 100%;
35
35
  flex: 1 0 0;
36
36
  border-style: solid;
37
37
  cursor: pointer;
38
+ text-align: left;
38
39
  }
39
- .ids-accordion > .ids-accordion-item > .ids-accordion-item-summary:focus, .ids-accordion > .ids-accordion-item > .ids-accordion-item-summary:focus-visible {
40
+ .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 {
40
41
  outline-offset: 2px;
41
42
  outline-style: solid;
42
43
  z-index: 1;
43
44
  }
44
- .ids-accordion > .ids-accordion-item > .ids-accordion-item-summary > .ids-accordion-item-title {
45
+ .ids-accordion > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-accordion-item-title {
45
46
  flex: 1 0 0;
46
47
  white-space: nowrap;
47
48
  overflow: hidden;
48
49
  text-overflow: ellipsis;
49
50
  }
50
- .ids-accordion > .ids-accordion-item.ids-accordion-item-disabled > .ids-accordion-item-summary {
51
+ .ids-accordion > .ids-accordion-item.ids-accordion-item-disabled > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary {
51
52
  pointer-events: none;
52
53
  user-select: none;
53
54
  }
@@ -71,25 +72,25 @@
71
72
  padding: var(--ids-comp-accordion-item-size-padding-y-compact) var(--ids-comp-accordion-item-size-padding-x-compact);
72
73
  gap: var(--ids-comp-accordion-item-size-gap-compact);
73
74
  }
74
- .ids-accordion.ids-accordion-compact > .ids-accordion-item > .ids-accordion-item-summary {
75
+ .ids-accordion.ids-accordion-compact > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary {
75
76
  height: var(--ids-comp-accordion-summary-size-height-compact);
76
77
  padding: var(--ids-comp-accordion-summary-size-padding-y-compact) var(--ids-comp-accordion-summary-size-padding-x-compact);
77
78
  gap: var(--ids-comp-accordion-summary-size-gap-compact);
78
79
  border-radius: var(--ids-comp-accordion-summary-size-border-radius-compact);
79
80
  border-width: var(--ids-comp-accordion-summary-size-border-width-compact);
80
81
  }
81
- .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 {
82
+ .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 {
82
83
  outline-width: var(--ids-comp-accordion-summary-focused-outline-size-outline-compact);
83
84
  outline-color: var(--ids-comp-accordion-summary-focused-outline-color-dark-focused);
84
85
  }
85
- .ids-accordion.ids-accordion-compact > .ids-accordion-item > .ids-accordion-item-summary > .ids-accordion-item-title {
86
+ .ids-accordion.ids-accordion-compact > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-accordion-item-title {
86
87
  font-family: var(--ids-comp-accordion-summary-typography-font-family-compact);
87
88
  font-size: var(--ids-comp-accordion-summary-typography-font-size-compact);
88
89
  font-weight: var(--ids-comp-accordion-summary-typography-font-weight-compact);
89
90
  letter-spacing: var(--ids-comp-accordion-summary-typography-letter-spacing-compact);
90
91
  line-height: var(--ids-comp-accordion-summary-typography-line-height-compact);
91
92
  }
92
- .ids-accordion.ids-accordion-compact > .ids-accordion-item > .ids-accordion-item-summary > .ids-icon {
93
+ .ids-accordion.ids-accordion-compact > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-icon {
93
94
  font-size: var(--ids-comp-accordion-summary-icon-typography-font-size-compact);
94
95
  font-weight: var(--ids-comp-accordion-summary-icon-typography-font-weight-compact);
95
96
  line-height: var(--ids-comp-accordion-summary-icon-typography-line-height-compact);
@@ -114,25 +115,25 @@
114
115
  padding: var(--ids-comp-accordion-item-size-padding-y-comfortable) var(--ids-comp-accordion-item-size-padding-x-comfortable);
115
116
  gap: var(--ids-comp-accordion-item-size-gap-comfortable);
116
117
  }
117
- .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 {
118
119
  height: var(--ids-comp-accordion-summary-size-height-comfortable);
119
120
  padding: var(--ids-comp-accordion-summary-size-padding-y-comfortable) var(--ids-comp-accordion-summary-size-padding-x-comfortable);
120
121
  gap: var(--ids-comp-accordion-summary-size-gap-comfortable);
121
122
  border-radius: var(--ids-comp-accordion-summary-size-border-radius-comfortable);
122
123
  border-width: var(--ids-comp-accordion-summary-size-border-width-comfortable);
123
124
  }
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 {
125
+ .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
126
  outline-width: var(--ids-comp-accordion-summary-focused-outline-size-outline-comfortable);
126
127
  outline-color: var(--ids-comp-accordion-summary-focused-outline-color-dark-focused);
127
128
  }
128
- .ids-accordion.ids-accordion-comfortable > .ids-accordion-item > .ids-accordion-item-summary > .ids-accordion-item-title {
129
+ .ids-accordion.ids-accordion-comfortable > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-accordion-item-title {
129
130
  font-family: var(--ids-comp-accordion-summary-typography-font-family-comfortable);
130
131
  font-size: var(--ids-comp-accordion-summary-typography-font-size-comfortable);
131
132
  font-weight: var(--ids-comp-accordion-summary-typography-font-weight-comfortable);
132
133
  letter-spacing: var(--ids-comp-accordion-summary-typography-letter-spacing-comfortable);
133
134
  line-height: var(--ids-comp-accordion-summary-typography-line-height-comfortable);
134
135
  }
135
- .ids-accordion.ids-accordion-comfortable > .ids-accordion-item > .ids-accordion-item-summary > .ids-icon {
136
+ .ids-accordion.ids-accordion-comfortable > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-icon {
136
137
  font-size: var(--ids-comp-accordion-summary-icon-typography-font-size-comfortable);
137
138
  font-weight: var(--ids-comp-accordion-summary-icon-typography-font-weight-comfortable);
138
139
  line-height: var(--ids-comp-accordion-summary-icon-typography-line-height-comfortable);
@@ -157,25 +158,25 @@
157
158
  padding: var(--ids-comp-accordion-item-size-padding-y-spacious) var(--ids-comp-accordion-item-size-padding-x-spacious);
158
159
  gap: var(--ids-comp-accordion-item-size-gap-spacious);
159
160
  }
160
- .ids-accordion.ids-accordion-spacious > .ids-accordion-item > .ids-accordion-item-summary {
161
+ .ids-accordion.ids-accordion-spacious > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary {
161
162
  height: var(--ids-comp-accordion-summary-size-height-spacious);
162
163
  padding: var(--ids-comp-accordion-summary-size-padding-y-spacious) var(--ids-comp-accordion-summary-size-padding-x-spacious);
163
164
  gap: var(--ids-comp-accordion-summary-size-gap-spacious);
164
165
  border-radius: var(--ids-comp-accordion-summary-size-border-radius-spacious);
165
166
  border-width: var(--ids-comp-accordion-summary-size-border-width-spacious);
166
167
  }
167
- .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 {
168
+ .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 {
168
169
  outline-width: var(--ids-comp-accordion-summary-focused-outline-size-outline-spacious);
169
170
  outline-color: var(--ids-comp-accordion-summary-focused-outline-color-dark-focused);
170
171
  }
171
- .ids-accordion.ids-accordion-spacious > .ids-accordion-item > .ids-accordion-item-summary > .ids-accordion-item-title {
172
+ .ids-accordion.ids-accordion-spacious > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-accordion-item-title {
172
173
  font-family: var(--ids-comp-accordion-summary-typography-font-family-spacious);
173
174
  font-size: var(--ids-comp-accordion-summary-typography-font-size-spacious);
174
175
  font-weight: var(--ids-comp-accordion-summary-typography-font-weight-spacious);
175
176
  letter-spacing: var(--ids-comp-accordion-summary-typography-letter-spacing-spacious);
176
177
  line-height: var(--ids-comp-accordion-summary-typography-line-height-spacious);
177
178
  }
178
- .ids-accordion.ids-accordion-spacious > .ids-accordion-item > .ids-accordion-item-summary > .ids-icon {
179
+ .ids-accordion.ids-accordion-spacious > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-icon {
179
180
  font-size: var(--ids-comp-accordion-summary-icon-typography-font-size-spacious);
180
181
  font-weight: var(--ids-comp-accordion-summary-icon-typography-font-weight-spacious);
181
182
  line-height: var(--ids-comp-accordion-summary-icon-typography-line-height-spacious);
@@ -200,25 +201,25 @@
200
201
  padding: var(--ids-comp-accordion-item-size-padding-y-dense) var(--ids-comp-accordion-item-size-padding-x-dense);
201
202
  gap: var(--ids-comp-accordion-item-size-gap-dense);
202
203
  }
203
- .ids-accordion.ids-accordion-dense > .ids-accordion-item > .ids-accordion-item-summary {
204
+ .ids-accordion.ids-accordion-dense > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary {
204
205
  height: var(--ids-comp-accordion-summary-size-height-dense);
205
206
  padding: var(--ids-comp-accordion-summary-size-padding-y-dense) var(--ids-comp-accordion-summary-size-padding-x-dense);
206
207
  gap: var(--ids-comp-accordion-summary-size-gap-dense);
207
208
  border-radius: var(--ids-comp-accordion-summary-size-border-radius-dense);
208
209
  border-width: var(--ids-comp-accordion-summary-size-border-width-dense);
209
210
  }
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
+ .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 {
211
212
  outline-width: var(--ids-comp-accordion-summary-focused-outline-size-outline-dense);
212
213
  outline-color: var(--ids-comp-accordion-summary-focused-outline-color-dark-focused);
213
214
  }
214
- .ids-accordion.ids-accordion-dense > .ids-accordion-item > .ids-accordion-item-summary > .ids-accordion-item-title {
215
+ .ids-accordion.ids-accordion-dense > .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-accordion-item-title {
215
216
  font-family: var(--ids-comp-accordion-summary-typography-font-family-dense);
216
217
  font-size: var(--ids-comp-accordion-summary-typography-font-size-dense);
217
218
  font-weight: var(--ids-comp-accordion-summary-typography-font-weight-dense);
218
219
  letter-spacing: var(--ids-comp-accordion-summary-typography-letter-spacing-dense);
219
220
  line-height: var(--ids-comp-accordion-summary-typography-line-height-dense);
220
221
  }
221
- .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-icon {
222
223
  font-size: var(--ids-comp-accordion-summary-icon-typography-font-size-dense);
223
224
  font-weight: var(--ids-comp-accordion-summary-icon-typography-font-weight-dense);
224
225
  line-height: var(--ids-comp-accordion-summary-icon-typography-line-height-dense);
@@ -233,88 +234,88 @@
233
234
  border-color: var(--ids-comp-accordion-container-color-border-default);
234
235
  background-color: var(--ids-comp-accordion-container-color-bg-default);
235
236
  }
236
- .ids-accordion.ids-accordion-text .ids-accordion-item > .ids-accordion-item-summary {
237
+ .ids-accordion.ids-accordion-text .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary {
237
238
  background: var(--ids-comp-accordion-summary-text-color-bg-default);
238
239
  border-color: var(--ids-comp-accordion-summary-text-color-border-default);
239
240
  color: var(--ids-comp-accordion-summary-text-color-fg-label-default);
240
241
  }
241
- .ids-accordion.ids-accordion-text .ids-accordion-item > .ids-accordion-item-summary > .ids-icon {
242
+ .ids-accordion.ids-accordion-text .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-icon {
242
243
  color: var(--ids-comp-accordion-summary-text-color-fg-icon-default);
243
244
  }
244
- .ids-accordion.ids-accordion-text .ids-accordion-item > .ids-accordion-item-summary:hover {
245
+ .ids-accordion.ids-accordion-text .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary:hover {
245
246
  background: var(--ids-comp-accordion-summary-text-color-bg-hovered);
246
247
  border-color: var(--ids-comp-accordion-summary-text-color-border-hovered);
247
248
  color: var(--ids-comp-accordion-summary-text-color-fg-label-hovered);
248
249
  }
249
- .ids-accordion.ids-accordion-text .ids-accordion-item > .ids-accordion-item-summary:hover > .ids-icon {
250
+ .ids-accordion.ids-accordion-text .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary:hover > .ids-icon {
250
251
  color: var(--ids-comp-accordion-summary-text-color-fg-icon-hovered);
251
252
  }
252
- .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 {
253
+ .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 {
253
254
  background: var(--ids-comp-accordion-summary-text-color-bg-focused);
254
255
  border-color: var(--ids-comp-accordion-summary-text-color-border-focused);
255
256
  color: var(--ids-comp-accordion-summary-text-color-fg-label-focused);
256
257
  }
257
- .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 {
258
+ .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 {
258
259
  color: var(--ids-comp-accordion-summary-text-color-fg-icon-focused);
259
260
  }
260
- .ids-accordion.ids-accordion-text .ids-accordion-item > .ids-accordion-item-summary:active {
261
+ .ids-accordion.ids-accordion-text .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary:active {
261
262
  background: var(--ids-comp-accordion-summary-text-color-bg-pressed);
262
263
  border-color: var(--ids-comp-accordion-summary-text-color-border-pressed);
263
264
  color: var(--ids-comp-accordion-summary-text-color-fg-label-pressed);
264
265
  }
265
- .ids-accordion.ids-accordion-text .ids-accordion-item > .ids-accordion-item-summary:active > .ids-icon {
266
+ .ids-accordion.ids-accordion-text .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary:active > .ids-icon {
266
267
  color: var(--ids-comp-accordion-summary-text-color-fg-icon-pressed);
267
268
  }
268
- .ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled > .ids-accordion-item-summary {
269
+ .ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary {
269
270
  background: var(--ids-comp-accordion-summary-text-color-bg-disabled);
270
271
  border-color: var(--ids-comp-accordion-summary-text-color-border-disabled);
271
272
  color: var(--ids-comp-accordion-summary-text-color-fg-label-disabled);
272
273
  }
273
- .ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled > .ids-accordion-item-summary > .ids-icon {
274
+ .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 {
274
275
  color: var(--ids-comp-accordion-summary-text-color-fg-icon-disabled);
275
276
  }
276
277
  .ids-accordion.ids-accordion-filled {
277
278
  border-color: var(--ids-comp-accordion-container-color-border-default);
278
279
  background-color: var(--ids-comp-accordion-container-color-bg-default);
279
280
  }
280
- .ids-accordion.ids-accordion-filled .ids-accordion-item > .ids-accordion-item-summary {
281
+ .ids-accordion.ids-accordion-filled .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary {
281
282
  background: var(--ids-comp-accordion-summary-filled-color-bg-default);
282
283
  border-color: var(--ids-comp-accordion-summary-filled-color-border-default);
283
284
  color: var(--ids-comp-accordion-summary-filled-color-fg-label-default);
284
285
  }
285
- .ids-accordion.ids-accordion-filled .ids-accordion-item > .ids-accordion-item-summary > .ids-icon {
286
+ .ids-accordion.ids-accordion-filled .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary > .ids-icon {
286
287
  color: var(--ids-comp-accordion-summary-filled-color-fg-icon-default);
287
288
  }
288
- .ids-accordion.ids-accordion-filled .ids-accordion-item > .ids-accordion-item-summary:hover {
289
+ .ids-accordion.ids-accordion-filled .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary:hover {
289
290
  background: var(--ids-comp-accordion-summary-filled-color-bg-hovered);
290
291
  border-color: var(--ids-comp-accordion-summary-filled-color-border-hovered);
291
292
  color: var(--ids-comp-accordion-summary-filled-color-fg-label-hovered);
292
293
  }
293
- .ids-accordion.ids-accordion-filled .ids-accordion-item > .ids-accordion-item-summary:hover > .ids-icon {
294
+ .ids-accordion.ids-accordion-filled .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary:hover > .ids-icon {
294
295
  color: var(--ids-comp-accordion-summary-filled-color-fg-icon-hovered);
295
296
  }
296
- .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 {
297
+ .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 {
297
298
  background: var(--ids-comp-accordion-summary-filled-color-bg-focused);
298
299
  border-color: var(--ids-comp-accordion-summary-filled-color-border-focused);
299
300
  color: var(--ids-comp-accordion-summary-filled-color-fg-label-focused);
300
301
  }
301
- .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 {
302
+ .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 {
302
303
  color: var(--ids-comp-accordion-summary-filled-color-fg-icon-focused);
303
304
  }
304
- .ids-accordion.ids-accordion-filled .ids-accordion-item > .ids-accordion-item-summary:active {
305
+ .ids-accordion.ids-accordion-filled .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary:active {
305
306
  background: var(--ids-comp-accordion-summary-filled-color-bg-pressed);
306
307
  border-color: var(--ids-comp-accordion-summary-filled-color-border-pressed);
307
308
  color: var(--ids-comp-accordion-summary-filled-color-fg-label-pressed);
308
309
  }
309
- .ids-accordion.ids-accordion-filled .ids-accordion-item > .ids-accordion-item-summary:active > .ids-icon {
310
+ .ids-accordion.ids-accordion-filled .ids-accordion-item > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary:active > .ids-icon {
310
311
  color: var(--ids-comp-accordion-summary-filled-color-fg-icon-pressed);
311
312
  }
312
- .ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled > .ids-accordion-item-summary {
313
+ .ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled > :is(h1, h2, h3, h4, h5, h6) > .ids-accordion-item-summary {
313
314
  background: var(--ids-comp-accordion-summary-filled-color-bg-disabled);
314
315
  border-color: var(--ids-comp-accordion-summary-filled-color-border-disabled);
315
316
  color: var(--ids-comp-accordion-summary-filled-color-fg-label-disabled);
316
317
  }
317
- .ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled > .ids-accordion-item-summary > .ids-icon {
318
+ .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 {
318
319
  color: var(--ids-comp-accordion-summary-filled-color-fg-icon-disabled);
319
320
  }
320
321
 
@@ -9342,6 +9343,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9342
9343
  }
9343
9344
  .ids-notification.ids-notification-filled.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
9344
9345
  min-width: var(--ids-comp-notification-filled-container-size-min-width-compact);
9346
+ max-width: var(--ids-comp-notification-filled-container-size-max-width-compact);
9345
9347
  }
9346
9348
  .ids-notification.ids-notification-filled.ids-notification-comfortable > .ids-notification__content-wrapper {
9347
9349
  gap: var(--ids-comp-notification-filled-container-size-gap-comfortable);
@@ -9354,6 +9356,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9354
9356
  }
9355
9357
  .ids-notification.ids-notification-filled.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
9356
9358
  min-width: var(--ids-comp-notification-filled-container-size-min-width-comfortable);
9359
+ max-width: var(--ids-comp-notification-filled-container-size-max-width-comfortable);
9357
9360
  }
9358
9361
  .ids-notification.ids-notification-filled.ids-notification-spacious > .ids-notification__content-wrapper {
9359
9362
  gap: var(--ids-comp-notification-filled-container-size-gap-spacious);
@@ -9366,6 +9369,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9366
9369
  }
9367
9370
  .ids-notification.ids-notification-filled.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
9368
9371
  min-width: var(--ids-comp-notification-filled-container-size-min-width-spacious);
9372
+ max-width: var(--ids-comp-notification-filled-container-size-max-width-spacious);
9369
9373
  }
9370
9374
  .ids-notification.ids-notification-filled.ids-notification-dense > .ids-notification__content-wrapper {
9371
9375
  gap: var(--ids-comp-notification-filled-container-size-gap-dense);
@@ -9378,6 +9382,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9378
9382
  }
9379
9383
  .ids-notification.ids-notification-filled.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
9380
9384
  min-width: var(--ids-comp-notification-filled-container-size-min-width-dense);
9385
+ max-width: var(--ids-comp-notification-filled-container-size-max-width-dense);
9381
9386
  }
9382
9387
  .ids-notification.ids-notification-outlined.ids-notification-error > .ids-notification__content-wrapper {
9383
9388
  border-color: var(--ids-comp-notification-outlined-color-border-error-default);
@@ -9481,6 +9486,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9481
9486
  }
9482
9487
  .ids-notification.ids-notification-outlined.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
9483
9488
  min-width: var(--ids-comp-notification-outlined-container-size-min-width-compact);
9489
+ max-width: var(--ids-comp-notification-outlined-container-size-max-width-compact);
9484
9490
  }
9485
9491
  .ids-notification.ids-notification-outlined.ids-notification-comfortable > .ids-notification__content-wrapper {
9486
9492
  gap: var(--ids-comp-notification-outlined-container-size-gap-comfortable);
@@ -9493,6 +9499,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9493
9499
  }
9494
9500
  .ids-notification.ids-notification-outlined.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
9495
9501
  min-width: var(--ids-comp-notification-outlined-container-size-min-width-comfortable);
9502
+ max-width: var(--ids-comp-notification-outlined-container-size-max-width-comfortable);
9496
9503
  }
9497
9504
  .ids-notification.ids-notification-outlined.ids-notification-spacious > .ids-notification__content-wrapper {
9498
9505
  gap: var(--ids-comp-notification-outlined-container-size-gap-spacious);
@@ -9505,6 +9512,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9505
9512
  }
9506
9513
  .ids-notification.ids-notification-outlined.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
9507
9514
  min-width: var(--ids-comp-notification-outlined-container-size-min-width-spacious);
9515
+ max-width: var(--ids-comp-notification-outlined-container-size-max-width-spacious);
9508
9516
  }
9509
9517
  .ids-notification.ids-notification-outlined.ids-notification-dense > .ids-notification__content-wrapper {
9510
9518
  gap: var(--ids-comp-notification-outlined-container-size-gap-dense);
@@ -9517,6 +9525,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9517
9525
  }
9518
9526
  .ids-notification.ids-notification-outlined.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
9519
9527
  min-width: var(--ids-comp-notification-outlined-container-size-min-width-dense);
9528
+ max-width: var(--ids-comp-notification-outlined-container-size-max-width-dense);
9520
9529
  }
9521
9530
  .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__leading-element {
9522
9531
  padding-left: var(--ids-comp-notification-icon-size-padding-left-compact);