@spectrum-web-components/accordion 0.0.0-20241209155954

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 (58) hide show
  1. package/README.md +347 -0
  2. package/package.json +86 -0
  3. package/sp-accordion-item.d.ts +6 -0
  4. package/sp-accordion-item.dev.js +5 -0
  5. package/sp-accordion-item.dev.js.map +7 -0
  6. package/sp-accordion-item.js +2 -0
  7. package/sp-accordion-item.js.map +7 -0
  8. package/sp-accordion.d.ts +6 -0
  9. package/sp-accordion.dev.js +5 -0
  10. package/sp-accordion.dev.js.map +7 -0
  11. package/sp-accordion.js +2 -0
  12. package/sp-accordion.js.map +7 -0
  13. package/src/Accordion.d.ts +31 -0
  14. package/src/Accordion.dev.js +94 -0
  15. package/src/Accordion.dev.js.map +7 -0
  16. package/src/Accordion.js +7 -0
  17. package/src/Accordion.js.map +7 -0
  18. package/src/AccordionItem.d.ts +25 -0
  19. package/src/AccordionItem.dev.js +133 -0
  20. package/src/AccordionItem.dev.js.map +7 -0
  21. package/src/AccordionItem.js +46 -0
  22. package/src/AccordionItem.js.map +7 -0
  23. package/src/accordion-item-overrides.css.d.ts +2 -0
  24. package/src/accordion-item-overrides.css.dev.js +7 -0
  25. package/src/accordion-item-overrides.css.dev.js.map +7 -0
  26. package/src/accordion-item-overrides.css.js +4 -0
  27. package/src/accordion-item-overrides.css.js.map +7 -0
  28. package/src/accordion-item.css.d.ts +2 -0
  29. package/src/accordion-item.css.dev.js +7 -0
  30. package/src/accordion-item.css.dev.js.map +7 -0
  31. package/src/accordion-item.css.js +4 -0
  32. package/src/accordion-item.css.js.map +7 -0
  33. package/src/accordion-overrides.css.d.ts +2 -0
  34. package/src/accordion-overrides.css.dev.js +7 -0
  35. package/src/accordion-overrides.css.dev.js.map +7 -0
  36. package/src/accordion-overrides.css.js +4 -0
  37. package/src/accordion-overrides.css.js.map +7 -0
  38. package/src/accordion.css.d.ts +2 -0
  39. package/src/accordion.css.dev.js +7 -0
  40. package/src/accordion.css.dev.js.map +7 -0
  41. package/src/accordion.css.js +4 -0
  42. package/src/accordion.css.js.map +7 -0
  43. package/src/index.d.ts +2 -0
  44. package/src/index.dev.js +4 -0
  45. package/src/index.dev.js.map +7 -0
  46. package/src/index.js +2 -0
  47. package/src/index.js.map +7 -0
  48. package/src/spectrum-accordion-item.css.d.ts +2 -0
  49. package/src/spectrum-accordion-item.css.dev.js +7 -0
  50. package/src/spectrum-accordion-item.css.dev.js.map +7 -0
  51. package/src/spectrum-accordion-item.css.js +4 -0
  52. package/src/spectrum-accordion-item.css.js.map +7 -0
  53. package/src/spectrum-accordion.css.d.ts +2 -0
  54. package/src/spectrum-accordion.css.dev.js +7 -0
  55. package/src/spectrum-accordion.css.dev.js.map +7 -0
  56. package/src/spectrum-accordion.css.js +4 -0
  57. package/src/spectrum-accordion.css.js.map +7 -0
  58. package/src/spectrum-config.js +163 -0
package/README.md ADDED
@@ -0,0 +1,347 @@
1
+ ## Description
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.
4
+
5
+ ### Usage
6
+
7
+ [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/accordion?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/accordion)
8
+ [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/accordion?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/accordion)
9
+ [![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/Muvuvbd79YCP9tcdtnsW/src/index.ts)
10
+
11
+ ```bash
12
+ yarn add @spectrum-web-components/accordion
13
+ ```
14
+
15
+ Import the side effectful registration of `<sp-accordion>` and `<sp-accordion-item>` via:
16
+
17
+ ```js
18
+ import '@spectrum-web-components/accordion/sp-accordion.js';
19
+ import '@spectrum-web-components/accordion/sp-accordion-item.js';
20
+ ```
21
+
22
+ When looking to leverage the `Accordion` and `AccordionItem` base class as a type and/or for extension purposes, do so via:
23
+
24
+ ```js
25
+ import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
26
+ ```
27
+
28
+ ## Example
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
+ ```
52
+
53
+ ## Allow Multiple
54
+
55
+ ```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>
74
+ </sp-accordion-item>
75
+ </sp-accordion>
76
+ ```
77
+
78
+ ## Sizes
79
+
80
+ <sp-tabs selected="m" auto label="Size Attribute Options">
81
+ <sp-tab value="s">Small</sp-tab>
82
+ <sp-tab-panel value="s">
83
+
84
+ ```html
85
+ <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>
97
+ </sp-accordion-item>
98
+ </sp-accordion>
99
+ ```
100
+
101
+ </sp-tab-panel>
102
+ <sp-tab value="m">Medium</sp-tab>
103
+ <sp-tab-panel value="m">
104
+
105
+ ```html
106
+ <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>
118
+ </sp-accordion-item>
119
+ </sp-accordion>
120
+ ```
121
+
122
+ </sp-tab-panel>
123
+ <sp-tab value="l">Large</sp-tab>
124
+ <sp-tab-panel value="l">
125
+
126
+ ```html
127
+ <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>
139
+ </sp-accordion-item>
140
+ </sp-accordion>
141
+ ```
142
+
143
+ </sp-tab-panel>
144
+ <sp-tab value="xl">Extra Large</sp-tab>
145
+ <sp-tab-panel value="xl">
146
+
147
+ ```html
148
+ <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>
160
+ </sp-accordion-item>
161
+ </sp-accordion>
162
+ ```
163
+
164
+ </sp-tab-panel>
165
+ </sp-tabs>
166
+
167
+ ## Density
168
+
169
+ The `density` property, when applied, accepts the values of `compact` or `spacious`.
170
+
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">
176
+
177
+ ```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>
192
+ ```
193
+
194
+ </sp-tab-panel>
195
+ <sp-tab value="m">Medium</sp-tab>
196
+ <sp-tab-panel value="m">
197
+
198
+ ```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>
213
+ ```
214
+
215
+ </sp-tab-panel>
216
+ <sp-tab value="l">Large</sp-tab>
217
+ <sp-tab-panel value="l">
218
+
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
+ ```
235
+
236
+ </sp-tab-panel>
237
+ <sp-tab value="xl">Extra Large</sp-tab>
238
+ <sp-tab-panel value="xl">
239
+
240
+ ```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>
247
+ </sp-accordion-item>
248
+ <sp-accordion-item label="Heading 3">
249
+ <div>Item 3</div>
250
+ </sp-accordion-item>
251
+ <sp-accordion-item label="Heading 4">
252
+ <div>Item 4</div>
253
+ </sp-accordion-item>
254
+ </sp-accordion>
255
+ ```
256
+
257
+ </sp-tab-panel>
258
+ </sp-tabs>
259
+
260
+ ### Spacious
261
+
262
+ <sp-tabs selected="m" auto label="Size Attribute Options">
263
+ <sp-tab value="s">Small</sp-tab>
264
+ <sp-tab-panel value="s">
265
+
266
+ ```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>
273
+ </sp-accordion-item>
274
+ <sp-accordion-item label="Heading 3">
275
+ <div>Item 3</div>
276
+ </sp-accordion-item>
277
+ <sp-accordion-item label="Heading 4">
278
+ <div>Item 4</div>
279
+ </sp-accordion-item>
280
+ </sp-accordion>
281
+ ```
282
+
283
+ </sp-tab-panel>
284
+ <sp-tab value="m">Medium</sp-tab>
285
+ <sp-tab-panel value="m">
286
+
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
+ ```
303
+
304
+ </sp-tab-panel>
305
+ <sp-tab value="l">Large</sp-tab>
306
+ <sp-tab-panel value="l">
307
+
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
+ ```
324
+
325
+ </sp-tab-panel>
326
+ <sp-tab value="xl">Extra Large</sp-tab>
327
+ <sp-tab-panel value="xl">
328
+
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
+ ```
345
+
346
+ </sp-tab-panel>
347
+ </sp-tabs>
package/package.json ADDED
@@ -0,0 +1,86 @@
1
+ {
2
+ "name": "@spectrum-web-components/accordion",
3
+ "version": "0.0.0-20241209155954",
4
+ "publishConfig": {
5
+ "access": "public"
6
+ },
7
+ "description": "",
8
+ "license": "Apache-2.0",
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "https://github.com/adobe/spectrum-web-components.git",
12
+ "directory": "packages/accordion"
13
+ },
14
+ "author": "",
15
+ "homepage": "https://opensource.adobe.com/spectrum-web-components/components/accordion",
16
+ "bugs": {
17
+ "url": "https://github.com/adobe/spectrum-web-components/issues"
18
+ },
19
+ "main": "./src/index.js",
20
+ "module": "./src/index.js",
21
+ "type": "module",
22
+ "exports": {
23
+ ".": {
24
+ "development": "./src/index.dev.js",
25
+ "default": "./src/index.js"
26
+ },
27
+ "./package.json": "./package.json",
28
+ "./src/Accordion.js": {
29
+ "development": "./src/Accordion.dev.js",
30
+ "default": "./src/Accordion.js"
31
+ },
32
+ "./src/AccordionItem.js": {
33
+ "development": "./src/AccordionItem.dev.js",
34
+ "default": "./src/AccordionItem.js"
35
+ },
36
+ "./src/accordion-item-overrides.css.js": "./src/accordion-item-overrides.css.js",
37
+ "./src/accordion-item.css.js": "./src/accordion-item.css.js",
38
+ "./src/accordion-overrides.css.js": "./src/accordion-overrides.css.js",
39
+ "./src/accordion.css.js": "./src/accordion.css.js",
40
+ "./src/index.js": {
41
+ "development": "./src/index.dev.js",
42
+ "default": "./src/index.js"
43
+ },
44
+ "./sp-accordion.js": {
45
+ "development": "./sp-accordion.dev.js",
46
+ "default": "./sp-accordion.js"
47
+ },
48
+ "./sp-accordion-item.js": {
49
+ "development": "./sp-accordion-item.dev.js",
50
+ "default": "./sp-accordion-item.js"
51
+ }
52
+ },
53
+ "scripts": {
54
+ "test": "karma start --coverage"
55
+ },
56
+ "files": [
57
+ "**/*.d.ts",
58
+ "**/*.js",
59
+ "**/*.js.map",
60
+ "custom-elements.json",
61
+ "!stories/",
62
+ "!test/"
63
+ ],
64
+ "keywords": [
65
+ "spectrum css",
66
+ "web components",
67
+ "lit-element",
68
+ "lit-html"
69
+ ],
70
+ "dependencies": {
71
+ "@spectrum-web-components/base": "0.0.0-20241209155954",
72
+ "@spectrum-web-components/icon": "0.0.0-20241209155954",
73
+ "@spectrum-web-components/icons-ui": "0.0.0-20241209155954",
74
+ "@spectrum-web-components/reactive-controllers": "0.0.0-20241209155954",
75
+ "@spectrum-web-components/shared": "0.0.0-20241209155954"
76
+ },
77
+ "devDependencies": {
78
+ "@spectrum-css/accordion": "^6.0.0-s2-foundations.16"
79
+ },
80
+ "types": "./src/index.d.ts",
81
+ "customElements": "custom-elements.json",
82
+ "sideEffects": [
83
+ "./sp-*.js",
84
+ "./**/*.dev.js"
85
+ ]
86
+ }
package/sp-accordion-item.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { AccordionItem } from './src/AccordionItem.js';
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ 'sp-accordion-item': AccordionItem;
5
+ }
6
+ }
package/sp-accordion-item.dev.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ import { AccordionItem } from "./src/AccordionItem.dev.js";
3
+ import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
4
+ defineElement("sp-accordion-item", AccordionItem);
5
+ //# sourceMappingURL=sp-accordion-item.dev.js.map
package/sp-accordion-item.dev.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 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;",
6
+ "names": []
7
+ }
package/sp-accordion-item.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";import{AccordionItem as e}from"./src/AccordionItem.js";import{defineElement as o}from"@spectrum-web-components/base/src/define-element.js";o("sp-accordion-item",e);
2
+ //# sourceMappingURL=sp-accordion-item.js.map
package/sp-accordion-item.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 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",
6
+ "names": ["AccordionItem", "defineElement"]
7
+ }
package/sp-accordion.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { Accordion } from './src/Accordion.js';
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ 'sp-accordion': Accordion;
5
+ }
6
+ }
package/sp-accordion.dev.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ import { Accordion } from "./src/Accordion.dev.js";
3
+ import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
4
+ defineElement("sp-accordion", Accordion);
5
+ //# sourceMappingURL=sp-accordion.dev.js.map
package/sp-accordion.dev.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["sp-accordion.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 { Accordion } from './src/Accordion.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-accordion', Accordion);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-accordion': Accordion;\n }\n}\n"],
5
+ "mappings": ";AAWA,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAE9B,cAAc,gBAAgB,SAAS;",
6
+ "names": []
7
+ }
package/sp-accordion.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";import{Accordion as o}from"./src/Accordion.js";import{defineElement as e}from"@spectrum-web-components/base/src/define-element.js";e("sp-accordion",o);
2
+ //# sourceMappingURL=sp-accordion.js.map
package/sp-accordion.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["sp-accordion.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 { Accordion } from './src/Accordion.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-accordion', Accordion);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-accordion': Accordion;\n }\n}\n"],
5
+ "mappings": "aAWA,OAAS,aAAAA,MAAiB,qBAC1B,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,eAAgBD,CAAS",
6
+ "names": ["Accordion", "defineElement"]
7
+ }
package/src/Accordion.d.ts ADDED
@@ -0,0 +1,31 @@
1
+ import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
2
+ import { FocusGroupController } from '@spectrum-web-components/reactive-controllers/src/FocusGroup.js';
3
+ import { AccordionItem } from './AccordionItem.js';
4
+ declare const Accordion_base: typeof SpectrumElement & {
5
+ new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
6
+ prototype: import("@spectrum-web-components/base").SizedElementInterface;
7
+ };
8
+ /**
9
+ * @element sp-accordion
10
+ * @slot - The sp-accordion-item children to display.
11
+ */
12
+ export declare class Accordion extends Accordion_base {
13
+ static get styles(): CSSResultArray;
14
+ /**
15
+ * Allows multiple accordion items to be opened at the same time
16
+ */
17
+ allowMultiple: boolean;
18
+ /**
19
+ * Sets the spacing between the content to borders of an accordion item
20
+ */
21
+ density?: 'compact' | 'spacious';
22
+ private defaultNodes;
23
+ private get items();
24
+ focusGroupController: FocusGroupController<AccordionItem>;
25
+ focus(): void;
26
+ private onToggle;
27
+ private handleSlotchange;
28
+ protected updated(changed: PropertyValues<this>): void;
29
+ protected render(): TemplateResult;
30
+ }
31
+ export {};
package/src/Accordion.dev.js ADDED
@@ -0,0 +1,94 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __decorateClass = (decorators, target, key, kind) => {
5
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
6
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
7
+ if (decorator = decorators[i])
8
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
9
+ if (kind && result) __defProp(target, key, result);
10
+ return result;
11
+ };
12
+ import {
13
+ html,
14
+ SizedMixin,
15
+ SpectrumElement
16
+ } from "@spectrum-web-components/base";
17
+ import {
18
+ property,
19
+ queryAssignedNodes
20
+ } from "@spectrum-web-components/base/src/decorators.js";
21
+ import { FocusGroupController } from "@spectrum-web-components/reactive-controllers/src/FocusGroup.js";
22
+ import styles from "./accordion.css.js";
23
+ export class Accordion extends SizedMixin(SpectrumElement, {
24
+ noDefaultSize: true
25
+ }) {
26
+ constructor() {
27
+ super(...arguments);
28
+ this.allowMultiple = false;
29
+ this.focusGroupController = new FocusGroupController(this, {
30
+ direction: "vertical",
31
+ elements: () => this.items,
32
+ isFocusableElement: (el) => !el.disabled
33
+ });
34
+ }
35
+ static get styles() {
36
+ return [styles];
37
+ }
38
+ get items() {
39
+ return [...this.defaultNodes || []].filter(
40
+ (node) => typeof node.tagName !== "undefined"
41
+ );
42
+ }
43
+ focus() {
44
+ this.focusGroupController.focus();
45
+ }
46
+ async onToggle(event) {
47
+ const target = event.target;
48
+ await 0;
49
+ if (this.allowMultiple || event.defaultPrevented) {
50
+ return;
51
+ }
52
+ const items = [...this.items];
53
+ if (items && !items.length) {
54
+ return;
55
+ }
56
+ items.forEach((item) => {
57
+ if (item !== target) {
58
+ item.open = false;
59
+ }
60
+ });
61
+ }
62
+ handleSlotchange() {
63
+ this.focusGroupController.clearElementCache();
64
+ this.items.forEach((item) => {
65
+ item.size = this.size;
66
+ });
67
+ }
68
+ updated(changed) {
69
+ super.updated(changed);
70
+ if (changed.has("size") && (!!changed.get("size") || this.size !== "m")) {
71
+ this.items.forEach((item) => {
72
+ item.size = this.size;
73
+ });
74
+ }
75
+ }
76
+ render() {
77
+ return html`
78
+ <slot
79
+ @slotchange=${this.handleSlotchange}
80
+ @sp-accordion-item-toggle=${this.onToggle}
81
+ ></slot>
82
+ `;
83
+ }
84
+ }
85
+ __decorateClass([
86
+ property({ type: Boolean, reflect: true, attribute: "allow-multiple" })
87
+ ], Accordion.prototype, "allowMultiple", 2);
88
+ __decorateClass([
89
+ property({ type: String, reflect: true })
90
+ ], Accordion.prototype, "density", 2);
91
+ __decorateClass([
92
+ queryAssignedNodes()
93
+ ], Accordion.prototype, "defaultNodes", 2);
94
+ //# sourceMappingURL=Accordion.dev.js.map
package/src/Accordion.dev.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["Accordion.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*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n queryAssignedNodes,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusGroupController } from '@spectrum-web-components/reactive-controllers/src/FocusGroup.js';\n\nimport { AccordionItem } from './AccordionItem.dev.js'\n\nimport styles from './accordion.css.js';\n\n/**\n * @element sp-accordion\n * @slot - The sp-accordion-item children to display.\n */\nexport class Accordion extends SizedMixin(SpectrumElement, {\n noDefaultSize: true,\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Allows multiple accordion items to be opened at the same time\n */\n @property({ type: Boolean, reflect: true, attribute: 'allow-multiple' })\n public allowMultiple = false;\n\n /**\n * Sets the spacing between the content to borders of an accordion item\n */\n @property({ type: String, reflect: true })\n public density?: 'compact' | 'spacious';\n\n @queryAssignedNodes()\n private defaultNodes!: NodeListOf<AccordionItem>;\n\n private get items(): AccordionItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== 'undefined'\n ) as AccordionItem[];\n }\n\n focusGroupController = new FocusGroupController<AccordionItem>(this, {\n direction: 'vertical',\n elements: () => this.items,\n isFocusableElement: (el: AccordionItem) => !el.disabled,\n });\n\n public override focus(): void {\n this.focusGroupController.focus();\n }\n\n private async onToggle(event: Event): Promise<void> {\n const target = event.target as AccordionItem;\n // Let the event pass through the DOM so that it can be\n // prevented from the outside if a user so desires.\n await 0;\n if (this.allowMultiple || event.defaultPrevented) {\n // No toggling when `allowMultiple` or the user prevents it.\n return;\n }\n const items = [...this.items] as AccordionItem[];\n /* c8 ignore next 3 */\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach((item) => {\n if (item !== target) {\n // Close all the items that didn't dispatch the event.\n item.open = false;\n }\n });\n }\n\n private handleSlotchange(): void {\n this.focusGroupController.clearElementCache();\n this.items.forEach((item) => {\n item.size = this.size;\n });\n }\n\n protected override updated(changed: PropertyValues<this>): void {\n super.updated(changed);\n if (\n changed.has('size') &&\n (!!changed.get('size') || this.size !== 'm')\n ) {\n this.items.forEach((item) => {\n item.size = this.size;\n });\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot\n @slotchange=${this.handleSlotchange}\n @sp-accordion-item-toggle=${this.onToggle}\n ></slot>\n `;\n }\n}\n"],
5
+ "mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EAEA;AAAA,EACA;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,4BAA4B;AAIrC,OAAO,YAAY;AAMZ,aAAM,kBAAkB,WAAW,iBAAiB;AAAA,EACvD,eAAe;AACnB,CAAC,EAAE;AAAA,EAFI;AAAA;AAWH,SAAO,gBAAgB;AAiBvB,gCAAuB,IAAI,qBAAoC,MAAM;AAAA,MACjE,WAAW;AAAA,MACX,UAAU,MAAM,KAAK;AAAA,MACrB,oBAAoB,CAAC,OAAsB,CAAC,GAAG;AAAA,IACnD,CAAC;AAAA;AAAA,EA7BD,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAiBA,IAAY,QAAyB;AACjC,WAAO,CAAC,GAAI,KAAK,gBAAgB,CAAC,CAAE,EAAE;AAAA,MAClC,CAAC,SAAsB,OAAO,KAAK,YAAY;AAAA,IACnD;AAAA,EACJ;AAAA,EAQgB,QAAc;AAC1B,SAAK,qBAAqB,MAAM;AAAA,EACpC;AAAA,EAEA,MAAc,SAAS,OAA6B;AAChD,UAAM,SAAS,MAAM;AAGrB,UAAM;AACN,QAAI,KAAK,iBAAiB,MAAM,kBAAkB;AAE9C;AAAA,IACJ;AACA,UAAM,QAAQ,CAAC,GAAG,KAAK,KAAK;AAE5B,QAAI,SAAS,CAAC,MAAM,QAAQ;AAExB;AAAA,IACJ;AACA,UAAM,QAAQ,CAAC,SAAS;AACpB,UAAI,SAAS,QAAQ;AAEjB,aAAK,OAAO;AAAA,MAChB;AAAA,IACJ,CAAC;AAAA,EACL;AAAA,EAEQ,mBAAyB;AAC7B,SAAK,qBAAqB,kBAAkB;AAC5C,SAAK,MAAM,QAAQ,CAAC,SAAS;AACzB,WAAK,OAAO,KAAK;AAAA,IACrB,CAAC;AAAA,EACL;AAAA,EAEmB,QAAQ,SAAqC;AAC5D,UAAM,QAAQ,OAAO;AACrB,QACI,QAAQ,IAAI,MAAM,MACjB,CAAC,CAAC,QAAQ,IAAI,MAAM,KAAK,KAAK,SAAS,MAC1C;AACE,WAAK,MAAM,QAAQ,CAAC,SAAS;AACzB,aAAK,OAAO,KAAK;AAAA,MACrB,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA;AAAA,8BAEe,KAAK,gBAAgB;AAAA,4CACP,KAAK,QAAQ;AAAA;AAAA;AAAA,EAGrD;AACJ;AA7EW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GAV9D,UAWF;AAMA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAhBhC,UAiBF;AAGC;AAAA,EADP,mBAAmB;AAAA,GAnBX,UAoBD;",
6
+ "names": []
7
+ }
package/src/Accordion.js ADDED
@@ -0,0 +1,7 @@
1
+ "use strict";var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var s=(l,i,e,o)=>{for(var t=o>1?void 0:o?u(i,e):i,r=l.length-1,a;r>=0;r--)(a=l[r])&&(t=(o?a(i,e,t):a(t))||t);return o&&t&&n(i,e,t),t};import{html as p,SizedMixin as d,SpectrumElement as m}from"@spectrum-web-components/base";import{property as c,queryAssignedNodes as f}from"@spectrum-web-components/base/src/decorators.js";import{FocusGroupController as h}from"@spectrum-web-components/reactive-controllers/src/FocusGroup.js";import g from"./accordion.css.js";export class Accordion extends d(m,{noDefaultSize:!0}){constructor(){super(...arguments);this.allowMultiple=!1;this.focusGroupController=new h(this,{direction:"vertical",elements:()=>this.items,isFocusableElement:e=>!e.disabled})}static get styles(){return[g]}get items(){return[...this.defaultNodes||[]].filter(e=>typeof e.tagName!="undefined")}focus(){this.focusGroupController.focus()}async onToggle(e){const o=e.target;if(await 0,this.allowMultiple||e.defaultPrevented)return;const t=[...this.items];t&&!t.length||t.forEach(r=>{r!==o&&(r.open=!1)})}handleSlotchange(){this.focusGroupController.clearElementCache(),this.items.forEach(e=>{e.size=this.size})}updated(e){super.updated(e),e.has("size")&&(e.get("size")||this.size!=="m")&&this.items.forEach(o=>{o.size=this.size})}render(){return p`
2
+ <slot
3
+ @slotchange=${this.handleSlotchange}
4
+ @sp-accordion-item-toggle=${this.onToggle}
5
+ ></slot>
6
+ `}}s([c({type:Boolean,reflect:!0,attribute:"allow-multiple"})],Accordion.prototype,"allowMultiple",2),s([c({type:String,reflect:!0})],Accordion.prototype,"density",2),s([f()],Accordion.prototype,"defaultNodes",2);
7
+ //# sourceMappingURL=Accordion.js.map