@spectrum-web-components/accordion 1.7.0 → 1.8.0

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 (29) hide show
  1. package/README.md +244 -232
  2. package/package.json +6 -6
  3. package/sp-accordion-item.d.ts +11 -0
  4. package/sp-accordion-item.dev.js.map +2 -2
  5. package/sp-accordion-item.js.map +2 -2
  6. package/sp-accordion.d.ts +11 -0
  7. package/sp-accordion.dev.js.map +2 -2
  8. package/sp-accordion.js.map +2 -2
  9. package/src/Accordion.d.ts +11 -0
  10. package/src/Accordion.dev.js.map +1 -1
  11. package/src/Accordion.js.map +1 -1
  12. package/src/AccordionItem.d.ts +11 -0
  13. package/src/AccordionItem.dev.js.map +1 -1
  14. package/src/AccordionItem.js.map +1 -1
  15. package/src/accordion-item-overrides.css.dev.js.map +1 -1
  16. package/src/accordion-item-overrides.css.js.map +1 -1
  17. package/src/accordion-item.css.dev.js.map +1 -1
  18. package/src/accordion-item.css.js.map +1 -1
  19. package/src/accordion-overrides.css.dev.js.map +1 -1
  20. package/src/accordion-overrides.css.js.map +1 -1
  21. package/src/accordion.css.dev.js.map +1 -1
  22. package/src/accordion.css.js.map +1 -1
  23. package/src/index.d.ts +11 -0
  24. package/src/index.dev.js.map +1 -1
  25. package/src/index.js.map +1 -1
  26. package/src/spectrum-accordion-item.css.dev.js.map +1 -1
  27. package/src/spectrum-accordion-item.css.js.map +1 -1
  28. package/src/spectrum-accordion.css.dev.js.map +1 -1
  29. package/src/spectrum-accordion.css.js.map +1 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
- ## Description
1
+ ## Overview
2
2
 
3
- The `<sp-accordion>` element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a time, depending on the configuration. This list of items is defined by child [`<sp-accordion-item>`](./components/accordion-item) elements that are targetted to the default slot of their `<sp-accordion>` parent.
3
+ The `<sp-accordion>` element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a time, depending on the configuration. This list of items is defined by child [`<sp-accordion-item>`](../accordion-item/) elements that are targeted to the default slot of their `<sp-accordion>` parent.
4
4
 
5
5
  ### Usage
6
6
 
@@ -25,57 +25,41 @@ When looking to leverage the `Accordion` and `AccordionItem` base class as a typ
25
25
  import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
26
26
  ```
27
27
 
28
- ## Example
28
+ ### Anatomy
29
29
 
30
- ```html
31
- <sp-accordion>
32
- <sp-accordion-item label="Heading 1">
33
- <div>Item 1</div>
34
- </sp-accordion-item>
35
- <sp-accordion-item disabled label="Heading 2">
36
- <div>Item 2</div>
37
- </sp-accordion-item>
38
- <sp-accordion-item label="Heading 3">
39
- <div>Item 3</div>
40
- </sp-accordion-item>
41
- <sp-accordion-item label="Heading 4">
42
- <div>Item 4</div>
43
- </sp-accordion-item>
44
- <sp-accordion-item label="Heading 5">
45
- <div>Item 5</div>
46
- </sp-accordion-item>
47
- <sp-accordion-item label="Heading 6">
48
- <div>Item 6</div>
49
- </sp-accordion-item>
50
- </sp-accordion>
51
- ```
30
+ The accordion consists of several key parts:
52
31
 
53
- ## Allow Multiple
32
+ - A container element that manages the accordion behavior
33
+ - Individual accordion items that can be expanded or collapsed
34
+ - Each item has a header with a label and chevron icon
35
+ - Content that is revealed when an item is expanded
54
36
 
55
37
  ```html
56
- <sp-accordion allow-multiple>
57
- <sp-accordion-item label="Heading 1">
58
- <div>Item 1</div>
59
- </sp-accordion-item>
60
- <sp-accordion-item disabled label="Heading 2">
61
- <div>Item 2</div>
62
- </sp-accordion-item>
63
- <sp-accordion-item label="Heading 3">
64
- <div>Item 3</div>
65
- </sp-accordion-item>
66
- <sp-accordion-item label="Heading 4">
67
- <div>Item 4</div>
68
- </sp-accordion-item>
69
- <sp-accordion-item label="Heading 5">
70
- <div>Item 5</div>
71
- </sp-accordion-item>
72
- <sp-accordion-item label="Heading 6">
73
- <div>Item 6</div>
38
+ <sp-accordion>
39
+ <sp-accordion-item label="Bellows">
40
+ <div>
41
+ The bellows is the expandable section in the middle of the
42
+ accordion.
43
+ </div>
44
+ </sp-accordion-item>
45
+ <sp-accordion-item disabled label="Treble">
46
+ <div>
47
+ The treble section of the accordion is the right-hand section for
48
+ playing melodies.
49
+ </div>
50
+ </sp-accordion-item>
51
+ <sp-accordion-item label="Bass">
52
+ <div>
53
+ The bass section of the accordion is the left-hand section for
54
+ playing accompaniment.
55
+ </div>
74
56
  </sp-accordion-item>
75
57
  </sp-accordion>
76
58
  ```
77
59
 
78
- ## Sizes
60
+ ### Options
61
+
62
+ #### Sizes
79
63
 
80
64
  <sp-tabs selected="m" auto label="Size Attribute Options">
81
65
  <sp-tab value="s">Small</sp-tab>
@@ -83,17 +67,30 @@ import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
83
67
 
84
68
  ```html
85
69
  <sp-accordion size="s">
86
- <sp-accordion-item label="Heading 1">
87
- <div>Item 1</div>
88
- </sp-accordion-item>
89
- <sp-accordion-item disabled label="Heading 2">
90
- <div>Item 2</div>
91
- </sp-accordion-item>
92
- <sp-accordion-item label="Heading 3">
93
- <div>Item 3</div>
94
- </sp-accordion-item>
95
- <sp-accordion-item label="Heading 4">
96
- <div>Item 4</div>
70
+ <sp-accordion-item label="Key Accordion">
71
+ <div>
72
+ A key accordion, or a chromatic piano accordion, includes a keyboard
73
+ for the right hand.
74
+ </div>
75
+ </sp-accordion-item>
76
+ <sp-accordion-item disabled label="Button Accordion">
77
+ <div>
78
+ A button accoridon, or a chromatic accordion, has buttons instead of
79
+ keys.
80
+ </div>
81
+ </sp-accordion-item>
82
+ <sp-accordion-item label="Diatonic Accordion">
83
+ <div>
84
+ Produces two different tones or notes depending on whether the
85
+ bellows is pulled or pushed.
86
+ </div>
87
+ </sp-accordion-item>
88
+ <sp-accordion-item label="Concertina">
89
+ <div>
90
+ A concertina has buttons on both sides and each button makes two
91
+ different notes or tones depending on whether the bellows is pulled
92
+ or pushed.
93
+ </div>
97
94
  </sp-accordion-item>
98
95
  </sp-accordion>
99
96
  ```
@@ -104,17 +101,30 @@ import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
104
101
 
105
102
  ```html
106
103
  <sp-accordion size="m">
107
- <sp-accordion-item label="Heading 1">
108
- <div>Item 1</div>
109
- </sp-accordion-item>
110
- <sp-accordion-item disabled label="Heading 2">
111
- <div>Item 2</div>
112
- </sp-accordion-item>
113
- <sp-accordion-item label="Heading 3">
114
- <div>Item 3</div>
115
- </sp-accordion-item>
116
- <sp-accordion-item label="Heading 4">
117
- <div>Item 4</div>
104
+ <sp-accordion-item label="Key Accordion">
105
+ <div>
106
+ A key accordion, or a chromatic piano accordion, includes a keyboard
107
+ for the right hand.
108
+ </div>
109
+ </sp-accordion-item>
110
+ <sp-accordion-item disabled label="Button Accordion">
111
+ <div>
112
+ A button accoridon, or a chromatic accordion, has buttons instead of
113
+ keys.
114
+ </div>
115
+ </sp-accordion-item>
116
+ <sp-accordion-item label="Diatonic Accordion">
117
+ <div>
118
+ Produces two different tones or notes depending on whether the
119
+ bellows is pulled or pushed.
120
+ </div>
121
+ </sp-accordion-item>
122
+ <sp-accordion-item label="Concertina">
123
+ <div>
124
+ A concertina has buttons on both sides and each button makes two
125
+ different notes or tones depending on whether the bellows is pulled
126
+ or pushed.
127
+ </div>
118
128
  </sp-accordion-item>
119
129
  </sp-accordion>
120
130
  ```
@@ -125,17 +135,30 @@ import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
125
135
 
126
136
  ```html
127
137
  <sp-accordion size="l">
128
- <sp-accordion-item label="Heading 1">
129
- <div>Item 1</div>
130
- </sp-accordion-item>
131
- <sp-accordion-item disabled label="Heading 2">
132
- <div>Item 2</div>
133
- </sp-accordion-item>
134
- <sp-accordion-item label="Heading 3">
135
- <div>Item 3</div>
136
- </sp-accordion-item>
137
- <sp-accordion-item label="Heading 4">
138
- <div>Item 4</div>
138
+ <sp-accordion-item label="Key Accordion">
139
+ <div>
140
+ A key accordion, or a chromatic piano accordion, includes a keyboard
141
+ for the right hand.
142
+ </div>
143
+ </sp-accordion-item>
144
+ <sp-accordion-item disabled label="Button Accordion">
145
+ <div>
146
+ A button accoridon, or a chromatic accordion, has buttons instead of
147
+ keys.
148
+ </div>
149
+ </sp-accordion-item>
150
+ <sp-accordion-item label="Diatonic Accordion">
151
+ <div>
152
+ Produces two different tones or notes depending on whether the
153
+ bellows is pulled or pushed.
154
+ </div>
155
+ </sp-accordion-item>
156
+ <sp-accordion-item label="Concertina">
157
+ <div>
158
+ A concertina has buttons on both sides and each button makes two
159
+ different notes or tones depending on whether the bellows is pulled
160
+ or pushed.
161
+ </div>
139
162
  </sp-accordion-item>
140
163
  </sp-accordion>
141
164
  ```
@@ -146,17 +169,30 @@ import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
146
169
 
147
170
  ```html
148
171
  <sp-accordion size="xl">
149
- <sp-accordion-item label="Heading 1">
150
- <div>Item 1</div>
151
- </sp-accordion-item>
152
- <sp-accordion-item disabled label="Heading 2">
153
- <div>Item 2</div>
154
- </sp-accordion-item>
155
- <sp-accordion-item label="Heading 3">
156
- <div>Item 3</div>
157
- </sp-accordion-item>
158
- <sp-accordion-item label="Heading 4">
159
- <div>Item 4</div>
172
+ <sp-accordion-item label="Key Accordion">
173
+ <div>
174
+ A key accordion, or a chromatic piano accordion, includes a keyboard
175
+ for the right hand.
176
+ </div>
177
+ </sp-accordion-item>
178
+ <sp-accordion-item disabled label="Button Accordion">
179
+ <div>
180
+ A button accoridon, or a chromatic accordion, has buttons instead of
181
+ keys.
182
+ </div>
183
+ </sp-accordion-item>
184
+ <sp-accordion-item label="Diatonic Accordion">
185
+ <div>
186
+ Produces two different tones or notes depending on whether the
187
+ bellows is pulled or pushed.
188
+ </div>
189
+ </sp-accordion-item>
190
+ <sp-accordion-item label="Concertina">
191
+ <div>
192
+ A concertina has buttons on both sides and each button makes two
193
+ different notes or tones depending on whether the bellows is pulled
194
+ or pushed.
195
+ </div>
160
196
  </sp-accordion-item>
161
197
  </sp-accordion>
162
198
  ```
@@ -164,184 +200,160 @@ import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
164
200
  </sp-tab-panel>
165
201
  </sp-tabs>
166
202
 
167
- ## Density
203
+ #### Density
168
204
 
169
205
  The `density` property, when applied, accepts the values of `compact` or `spacious`.
170
206
 
171
- ### Compact
172
-
173
- <sp-tabs selected="m" auto label="Size Attribute Options">
174
- <sp-tab value="s">Small</sp-tab>
175
- <sp-tab-panel value="s">
207
+ <sp-tabs selected="compact" auto label="Density Attribute Options">
208
+ <sp-tab value="compact">Compact</sp-tab>
209
+ <sp-tab-panel value="compact">
176
210
 
177
211
  ```html
178
- <sp-accordion density="compact" size="s">
179
- <sp-accordion-item label="Heading 1">
180
- <div>Item 1</div>
181
- </sp-accordion-item>
182
- <sp-accordion-item disabled label="Heading 2">
183
- <div>Item 2</div>
184
- </sp-accordion-item>
185
- <sp-accordion-item label="Heading 3">
186
- <div>Item 3</div>
187
- </sp-accordion-item>
188
- <sp-accordion-item label="Heading 4">
189
- <div>Item 4</div>
190
- </sp-accordion-item>
191
- </sp-accordion>
212
+ <div
213
+ style="
214
+ display: grid;
215
+ grid-gap: 20px;
216
+ grid-template-columns: 1fr 1fr"
217
+ >
218
+ <sp-accordion density="compact" size="s">
219
+ <sp-accordion-item label="Compact Density">
220
+ <div>This accordion is compact.</div>
221
+ </sp-accordion-item>
222
+ <sp-accordion-item label="Small Size">
223
+ <div>This accordion is also small.</div>
224
+ </sp-accordion-item>
225
+ </sp-accordion>
226
+ <sp-accordion density="compact" size="m">
227
+ <sp-accordion-item label="Compact Density">
228
+ <div>This accordion is compact.</div>
229
+ </sp-accordion-item>
230
+ <sp-accordion-item label="Medium Size">
231
+ <div>This accordion is also medium.</div>
232
+ </sp-accordion-item>
233
+ </sp-accordion>
234
+ <sp-accordion density="compact" size="l">
235
+ <sp-accordion-item label="Compact Density">
236
+ <div>This accordion is compact.</div>
237
+ </sp-accordion-item>
238
+ <sp-accordion-item label="Large Size">
239
+ <div>This accordion is also large.</div>
240
+ </sp-accordion-item>
241
+ </sp-accordion>
242
+ <sp-accordion density="compact" size="xl">
243
+ <sp-accordion-item label="Compact Density">
244
+ <div>This accordion is compact.</div>
245
+ </sp-accordion-item>
246
+ <sp-accordion-item label="Extra Large Size">
247
+ <div>This accordion is also extra large.</div>
248
+ </sp-accordion-item>
249
+ </sp-accordion>
250
+ </div>
192
251
  ```
193
252
 
194
253
  </sp-tab-panel>
195
- <sp-tab value="m">Medium</sp-tab>
196
- <sp-tab-panel value="m">
254
+ <sp-tab value="spacious">Spacious</sp-tab>
255
+ <sp-tab-panel value="spacious">
197
256
 
198
257
  ```html
199
- <sp-accordion density="compact" size="m">
200
- <sp-accordion-item label="Heading 1">
201
- <div>Item 1</div>
202
- </sp-accordion-item>
203
- <sp-accordion-item disabled label="Heading 2">
204
- <div>Item 2</div>
205
- </sp-accordion-item>
206
- <sp-accordion-item label="Heading 3">
207
- <div>Item 3</div>
208
- </sp-accordion-item>
209
- <sp-accordion-item label="Heading 4">
210
- <div>Item 4</div>
211
- </sp-accordion-item>
212
- </sp-accordion>
258
+ <div
259
+ style="
260
+ display: grid;
261
+ grid-gap: 20px;
262
+ grid-template-columns: 1fr 1fr"
263
+ >
264
+ <sp-accordion density="spacious" size="s">
265
+ <sp-accordion-item label="Spacious Density">
266
+ <div>This accordion is spacious.</div>
267
+ </sp-accordion-item>
268
+ <sp-accordion-item label="Small Size">
269
+ <div>This accordion is also small.</div>
270
+ </sp-accordion-item>
271
+ </sp-accordion>
272
+ <sp-accordion density="spacious" size="m">
273
+ <sp-accordion-item label="Spacious Density">
274
+ <div>This accordion is spacious.</div>
275
+ </sp-accordion-item>
276
+ <sp-accordion-item label="Medium Size">
277
+ <div>This accordion is also medium.</div>
278
+ </sp-accordion-item>
279
+ </sp-accordion>
280
+ <sp-accordion density="spacious" size="l">
281
+ <sp-accordion-item label="Spacious Density">
282
+ <div>This accordion is spacious.</div>
283
+ </sp-accordion-item>
284
+ <sp-accordion-item label="Large Size">
285
+ <div>This accordion is also large.</div>
286
+ </sp-accordion-item>
287
+ </sp-accordion>
288
+ <sp-accordion density="spacious" size="xl">
289
+ <sp-accordion-item label="Spacious Density">
290
+ <div>This accordion is spacious.</div>
291
+ </sp-accordion-item>
292
+ <sp-accordion-item label="Extra Large Size">
293
+ <div>This accordion is also extra large.</div>
294
+ </sp-accordion-item>
295
+ </sp-accordion>
296
+ </div>
213
297
  ```
214
298
 
215
299
  </sp-tab-panel>
216
- <sp-tab value="l">Large</sp-tab>
217
- <sp-tab-panel value="l">
300
+ </sp-tabs>
218
301
 
219
- ```html
220
- <sp-accordion density="compact" size="l">
221
- <sp-accordion-item label="Heading 1">
222
- <div>Item 1</div>
223
- </sp-accordion-item>
224
- <sp-accordion-item disabled label="Heading 2">
225
- <div>Item 2</div>
226
- </sp-accordion-item>
227
- <sp-accordion-item label="Heading 3">
228
- <div>Item 3</div>
229
- </sp-accordion-item>
230
- <sp-accordion-item label="Heading 4">
231
- <div>Item 4</div>
232
- </sp-accordion-item>
233
- </sp-accordion>
234
- ```
302
+ ### States
235
303
 
236
- </sp-tab-panel>
237
- <sp-tab value="xl">Extra Large</sp-tab>
238
- <sp-tab-panel value="xl">
304
+ #### Allow Multiple
305
+
306
+ By default, only one accordion item can be expanded at a time. Use the `allow-multiple` attribute to allow multiple items to be expanded simultaneously.
239
307
 
240
308
  ```html
241
- <sp-accordion density="compact" size="xl">
242
- <sp-accordion-item label="Heading 1">
243
- <div>Item 1</div>
244
- </sp-accordion-item>
245
- <sp-accordion-item disabled label="Heading 2">
246
- <div>Item 2</div>
309
+ <sp-accordion allow-multiple>
310
+ <sp-accordion-item label="Kermit">
311
+ <div>Kermit is a frog.</div>
247
312
  </sp-accordion-item>
248
- <sp-accordion-item label="Heading 3">
249
- <div>Item 3</div>
313
+ <sp-accordion-item label="Fozzie">
314
+ <div>Fozzie is a bear.</div>
250
315
  </sp-accordion-item>
251
- <sp-accordion-item label="Heading 4">
252
- <div>Item 4</div>
316
+ <sp-accordion-item label="Miss Piggy">
317
+ <div>Miss Piggy is a pig.</div>
253
318
  </sp-accordion-item>
254
319
  </sp-accordion>
255
320
  ```
256
321
 
257
- </sp-tab-panel>
258
- </sp-tabs>
259
-
260
- ### Spacious
322
+ #### Disabled
261
323
 
262
- <sp-tabs selected="m" auto label="Size Attribute Options">
263
- <sp-tab value="s">Small</sp-tab>
264
- <sp-tab-panel value="s">
324
+ Individual accordion items can be disabled using the `disabled` attribute. Disabled items cannot be expanded or collapsed.
265
325
 
266
326
  ```html
267
- <sp-accordion density="spacious" size="s">
268
- <sp-accordion-item label="Heading 1">
269
- <div>Item 1</div>
270
- </sp-accordion-item>
271
- <sp-accordion-item disabled label="Heading 2">
272
- <div>Item 2</div>
327
+ <sp-accordion>
328
+ <sp-accordion-item label="Apples">
329
+ <div>
330
+ We have some of the most popular varieties include Red Delicious,
331
+ Gala, Granny Smith, Honeycrisp, and Fuji.
332
+ </div>
273
333
  </sp-accordion-item>
274
- <sp-accordion-item label="Heading 3">
275
- <div>Item 3</div>
334
+ <sp-accordion-item disabled label="Bananas">
335
+ <div>We have the Gros Michel.</div>
276
336
  </sp-accordion-item>
277
- <sp-accordion-item label="Heading 4">
278
- <div>Item 4</div>
337
+ <sp-accordion-item label="Oranges">
338
+ <div>We have Mandarins, Seville Oranges, and Clementines.</div>
279
339
  </sp-accordion-item>
280
340
  </sp-accordion>
281
341
  ```
282
342
 
283
- </sp-tab-panel>
284
- <sp-tab value="m">Medium</sp-tab>
285
- <sp-tab-panel value="m">
343
+ ### Accessibility
286
344
 
287
- ```html
288
- <sp-accordion density="spacious" size="m">
289
- <sp-accordion-item label="Heading 1">
290
- <div>Item 1</div>
291
- </sp-accordion-item>
292
- <sp-accordion-item disabled label="Heading 2">
293
- <div>Item 2</div>
294
- </sp-accordion-item>
295
- <sp-accordion-item label="Heading 3">
296
- <div>Item 3</div>
297
- </sp-accordion-item>
298
- <sp-accordion-item label="Heading 4">
299
- <div>Item 4</div>
300
- </sp-accordion-item>
301
- </sp-accordion>
302
- ```
345
+ The accordion component provides proper ARIA attributes and keyboard navigation:
303
346
 
304
- </sp-tab-panel>
305
- <sp-tab value="l">Large</sp-tab>
306
- <sp-tab-panel value="l">
347
+ - Each accordion item header has `aria-expanded` to indicate its current state
348
+ - The header button has `aria-controls` pointing to the content region
349
+ - The content region has `role="region"` and `aria-labelledby` pointing to the header
350
+ - Disabled items have `aria-disabled="true"` applied
351
+ - The accordion supports keyboard navigation with arrow keys and <kbd>Enter</kbd>/<kbd>Space</kbd> for activation
307
352
 
308
- ```html
309
- <sp-accordion density="spacious" size="l">
310
- <sp-accordion-item label="Heading 1">
311
- <div>Item 1</div>
312
- </sp-accordion-item>
313
- <sp-accordion-item disabled label="Heading 2">
314
- <div>Item 2</div>
315
- </sp-accordion-item>
316
- <sp-accordion-item label="Heading 3">
317
- <div>Item 3</div>
318
- </sp-accordion-item>
319
- <sp-accordion-item label="Heading 4">
320
- <div>Item 4</div>
321
- </sp-accordion-item>
322
- </sp-accordion>
323
- ```
353
+ #### Include descriptive labels
324
354
 
325
- </sp-tab-panel>
326
- <sp-tab value="xl">Extra Large</sp-tab>
327
- <sp-tab-panel value="xl">
355
+ Each accordion item should have a clear, descriptive label that indicates what content will be revealed when expanded.
328
356
 
329
- ```html
330
- <sp-accordion density="spacious" size="xl">
331
- <sp-accordion-item label="Heading 1">
332
- <div>Item 1</div>
333
- </sp-accordion-item>
334
- <sp-accordion-item disabled label="Heading 2">
335
- <div>Item 2</div>
336
- </sp-accordion-item>
337
- <sp-accordion-item label="Heading 3">
338
- <div>Item 3</div>
339
- </sp-accordion-item>
340
- <sp-accordion-item label="Heading 4">
341
- <div>Item 4</div>
342
- </sp-accordion-item>
343
- </sp-accordion>
344
- ```
357
+ #### Use appropriate content
345
358
 
346
- </sp-tab-panel>
347
- </sp-tabs>
359
+ Accordion content should be related to the header label and provide additional information or functionality that users can access when needed.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/accordion",
3
- "version": "1.7.0",
3
+ "version": "1.8.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -74,11 +74,11 @@
74
74
  "css"
75
75
  ],
76
76
  "dependencies": {
77
- "@spectrum-web-components/base": "1.7.0",
78
- "@spectrum-web-components/icon": "1.7.0",
79
- "@spectrum-web-components/icons-ui": "1.7.0",
80
- "@spectrum-web-components/reactive-controllers": "1.7.0",
81
- "@spectrum-web-components/shared": "1.7.0"
77
+ "@spectrum-web-components/base": "1.8.0",
78
+ "@spectrum-web-components/icon": "1.8.0",
79
+ "@spectrum-web-components/icons-ui": "1.8.0",
80
+ "@spectrum-web-components/reactive-controllers": "1.8.0",
81
+ "@spectrum-web-components/shared": "1.8.0"
82
82
  },
83
83
  "types": "./src/index.d.ts",
84
84
  "customElements": "custom-elements.json",
package/sp-accordion-item.d.ts CHANGED
@@ -1,3 +1,14 @@
1
+ /**
2
+ * Copyright 2025 Adobe. All rights reserved.
3
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
+ * you may not use this file except in compliance with the License. You may obtain a copy
5
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
6
+ *
7
+ * Unless required by applicable law or agreed to in writing, software distributed under
8
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
+ * OF ANY KIND, either express or implied. See the License for the specific language
10
+ * governing permissions and limitations under the License.
11
+ */
1
12
  import { AccordionItem } from './src/AccordionItem.js';
2
13
  declare global {
3
14
  interface HTMLElementTagNameMap {
package/sp-accordion-item.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["sp-accordion-item.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { AccordionItem } from './src/AccordionItem.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-accordion-item', AccordionItem);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-accordion-item': AccordionItem;\n }\n}\n"],
5
- "mappings": ";AAWA,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAE9B,cAAc,qBAAqB,aAAa;",
4
+ "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { AccordionItem } from './src/AccordionItem.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-accordion-item', AccordionItem);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-accordion-item': AccordionItem;\n }\n}\n"],
5
+ "mappings": ";AAYA,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAE9B,cAAc,qBAAqB,aAAa;",
6
6
  "names": []
7
7
  }
package/sp-accordion-item.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["sp-accordion-item.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { AccordionItem } from './src/AccordionItem.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-accordion-item', AccordionItem);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-accordion-item': AccordionItem;\n }\n}\n"],
5
- "mappings": "aAWA,OAAS,iBAAAA,MAAqB,yBAC9B,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,oBAAqBD,CAAa",
4
+ "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { AccordionItem } from './src/AccordionItem.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-accordion-item', AccordionItem);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-accordion-item': AccordionItem;\n }\n}\n"],
5
+ "mappings": "aAYA,OAAS,iBAAAA,MAAqB,yBAC9B,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,oBAAqBD,CAAa",
6
6
  "names": ["AccordionItem", "defineElement"]
7
7
  }
package/sp-accordion.d.ts CHANGED
@@ -1,3 +1,14 @@
1
+ /**
2
+ * Copyright 2025 Adobe. All rights reserved.
3
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
+ * you may not use this file except in compliance with the License. You may obtain a copy
5
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
6
+ *
7
+ * Unless required by applicable law or agreed to in writing, software distributed under
8
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
+ * OF ANY KIND, either express or implied. See the License for the specific language
10
+ * governing permissions and limitations under the License.
11
+ */
1
12
  import { Accordion } from './src/Accordion.js';
2
13
  declare global {
3
14
  interface HTMLElementTagNameMap {