@aurodesignsystem/auro-accordion 6.1.0 → 6.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +2 -7
  2. package/README.md +135 -84
  3. package/custom-elements.json +1009 -644
  4. package/demo/api.js +2 -0
  5. package/demo/api.md +311 -233
  6. package/demo/api.min.js +16 -3
  7. package/demo/auro-accordion.min.js +40 -39
  8. package/demo/index.md +16 -11
  9. package/dist/{auro-accordion-Dlfg1ee3.js → auro-accordion-BmwXsHxz.js} +4 -4
  10. package/dist/index.d.ts +247 -125
  11. package/dist/index.js +1 -1
  12. package/dist/registered.js +1 -1
  13. package/package.json +16 -11
package/demo/api.md CHANGED
@@ -3,54 +3,71 @@
3
3
 
4
4
  # auro-accordion
5
5
 
6
- Auro-accordion provides users a way to have collapsible content on a page.
7
- Use auro-accordion-group if you want to have auto closing accordion components when others are selected.
6
+ The `auro-accordion` element provides users a way to have collapsible content on a page.
8
7
 
9
8
  ### Properties & Attributes
10
9
 
11
- | Properties | Attributes | Type | Default | Description |
12
- | --- | --- | --- | --- | --- |
13
- expanded | expanded | boolean | false | If set, the accordion is expanded.
14
- alignRight | alignRight | boolean | | If set, the trigger content will align right.
15
- emphasis | emphasis | boolean | | If set, emphasis styles will be applied to the auro-accordions.
16
- grouped | grouped | boolean | | Attribute will be set on accordion when it appears in an accordion group.
17
- chevron | chevron | string | | Sets chevron variant option. Possible values are: `none`, `right`.
18
- variant | variant | string | | Sets accordion variant option. Possible values are: `sm`, `lg`.
19
- disabled | disabled | boolean | | If set, the accordion is disabled and have reduced opacity.
20
-
10
+ | Properties | Attributes | Modifiers | Type | Default | Description |
11
+ | ---------- | ---------- | --------- | ----------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- |
12
+ | alignRight | alignRight | | boolean | | If set, the trigger content will align right. |
13
+ | chevron | chevron | | `none` \| `right` | | Sets chevron variant option. |
14
+ | disabled | disabled | | boolean | | If set, the accordion is disabled and have reduced opacity. |
15
+ | emphasis | emphasis | | boolean | | If set, emphasis styles will be applied to the auro-accordion. This feature is best used on the auro-accordion-group component. |
16
+ | expanded | expanded | | boolean | `false` | If set, the accordion is expanded. |
17
+ | grouped | grouped | | boolean | | Attribute will be set on accordion when it appears in an accordion group. |
18
+ | variant | variant | | `sm` \| `lg` | | Sets accordion variant option. |
19
+
21
20
  ### Methods
22
21
 
23
- | Name | Parameters | Return | Description |
24
- | --- | --- | --- | --- |
25
- register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser.
26
- toggle | None | | Toggles the visibility of the accordion content.
27
-
22
+ | Name | Parameters | Return | Description |
23
+ | -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
24
+ | register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
25
+ | toggle | None | | Toggles the visibility of the accordion content. |
26
+
28
27
  ### Events
29
28
 
30
- | Name | Description |
31
- | --- | --- |
32
- toggleExpanded | Notifies that the accordion has been expanded or closed.
33
-
29
+ | Name | Description |
30
+ | -------------- | -------------------------------------------------------- |
31
+ | toggleExpanded | Notifies that the accordion has been expanded or closed. |
32
+
34
33
  ### Slots
35
34
 
36
- | Name | Description |
37
- | --- | --- |
38
- (default) | Default slot for the accordion content.
39
- trigger | Defines the content of the trigger element.
40
-
35
+ | Name | Description |
36
+ | --------- | ------------------------------------------- |
37
+ | (default) | Default slot for the accordion content. |
38
+ | trigger | Defines the content of the trigger element. |
39
+
41
40
  ### CSS Shadow Parts
42
41
 
43
- | Name | Description |
44
- | --- | --- |
45
- accordion | Apply CSS to Accordion wrapper.
46
- trigger | Apply CSS to trigger element.
47
- chevron | Apply CSS to chevron icon.
48
- content | Apply CSS to the accordion content.
42
+ | Name | Description |
43
+ | --------- | ----------------------------------- |
44
+ | accordion | Apply CSS to Accordion wrapper. |
45
+ | chevron | Apply CSS to chevron icon. |
46
+ | content | Apply CSS to the accordion content. |
47
+ | trigger | Apply CSS to trigger element. |
48
+
49
+ # auro-accordion-group
50
+
51
+ The `auro-accordion-group` element allows users to group accordions together and give them an auto closing functionality when others are selected.
52
+
53
+ ### Properties & Attributes
54
+
55
+ | Properties | Attributes | Modifiers | Type | Default | Description |
56
+ | ---------- | ---------- | --------- | ------------ | ------- | ----------------------------------------------------------------------------------- |
57
+ | disabled | disabled | | boolean | | If set, the whole accordion inside the group are disabled and have reduced opacity. |
58
+ | emphasis | emphasis | | boolean | | If set, emphasis styles will be applied to the auro-accordions. |
59
+ | variant | variant | | `sm` \| `lg` | | Sets accordion variant option. |
60
+
61
+ ### Methods
62
+
63
+ | Name | Parameters | Return | Description |
64
+ | -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
65
+ | register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
49
66
  <!-- AURO-GENERATED-CONTENT:END -->
50
67
 
51
- ## Accordion API Examples
68
+ # auro-accordion
52
69
 
53
- ### Basic
70
+ ## Basic
54
71
 
55
72
  <div class="exampleWrapper">
56
73
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
@@ -71,90 +88,11 @@ content | Apply CSS to the accordion content.
71
88
  </p>
72
89
  </auro-accordion>
73
90
  <!-- AURO-GENERATED-CONTENT:END -->
74
- </div>
91
+ </div>
75
92
  <auro-accordion alignRight>
76
93
  <span slot="trigger">See code</span>
77
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
78
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
79
-
80
- ```html
81
- <auro-accordion>
82
- <span slot="trigger">Trigger</span>
83
- <p>
84
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
85
- </p>
86
- <p>
87
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
88
- </p>
89
- <p>
90
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
91
- </p>
92
- <p>
93
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
94
- </p>
95
- </auro-accordion>
96
- ```
97
- <!-- AURO-GENERATED-CONTENT:END -->
98
- </auro-accordion>
99
- <div class="exampleWrapper">
100
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordionGroup.html) -->
101
- <!-- The below content is automatically added from ./../apiExamples/accordionGroup.html -->
102
- <auro-accordion-group>
103
- <auro-accordion>
104
- <span slot="trigger">Trigger</span>
105
- <p>
106
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
107
- </p>
108
- <p>
109
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
110
- </p>
111
- <p>
112
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
113
- </p>
114
- <p>
115
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
116
- </p>
117
- </auro-accordion>
118
- <auro-accordion>
119
- <span slot="trigger">Trigger</span>
120
- <p>
121
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
122
- </p>
123
- <p>
124
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
125
- </p>
126
- <p>
127
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
128
- </p>
129
- <p>
130
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
131
- </p>
132
- </auro-accordion>
133
- <auro-accordion>
134
- <span slot="trigger">Trigger</span>
135
- <p>
136
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
137
- </p>
138
- <p>
139
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
140
- </p>
141
- <p>
142
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
143
- </p>
144
- <p>
145
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
146
- </p>
147
- </auro-accordion>
148
- </auro-accordion-group>
149
- <!-- AURO-GENERATED-CONTENT:END -->
150
- </div>
151
- <auro-accordion alignRight>
152
- <span slot="trigger">See code</span>
153
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordionGroup.html) -->
154
- <!-- The below code snippet is automatically added from ./../apiExamples/accordionGroup.html -->
155
-
156
- ```html
157
- <auro-accordion-group>
94
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
95
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
158
96
  <auro-accordion>
159
97
  <span slot="trigger">Trigger</span>
160
98
  <p>
@@ -170,7 +108,19 @@ content | Apply CSS to the accordion content.
170
108
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
171
109
  </p>
172
110
  </auro-accordion>
173
- <auro-accordion>
111
+ <!-- AURO-GENERATED-CONTENT:END -->
112
+ </auro-accordion>
113
+
114
+ ## Property & Attribute Examples
115
+
116
+ ### Align Trigger Right
117
+
118
+ Using the `alignRight` attribute will cause the trigger to align to the right edge of the accordion container.
119
+
120
+ <div class="exampleWrapper">
121
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/align-right.html) -->
122
+ <!-- The below content is automatically added from ./../apiExamples/align-right.html -->
123
+ <auro-accordion alignRight>
174
124
  <span slot="trigger">Trigger</span>
175
125
  <p>
176
126
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -185,7 +135,41 @@ content | Apply CSS to the accordion content.
185
135
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
186
136
  </p>
187
137
  </auro-accordion>
188
- <auro-accordion>
138
+ <!-- AURO-GENERATED-CONTENT:END -->
139
+ </div>
140
+ <auro-accordion alignRight>
141
+ <span slot="trigger">See code</span>
142
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/align-right.html) -->
143
+ <!-- The below code snippet is automatically added from ./../apiExamples/align-right.html -->
144
+
145
+ ```html
146
+ <auro-accordion alignRight>
147
+ <span slot="trigger">Trigger</span>
148
+ <p>
149
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
150
+ </p>
151
+ <p>
152
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
153
+ </p>
154
+ <p>
155
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
156
+ </p>
157
+ <p>
158
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
159
+ </p>
160
+ </auro-accordion>
161
+ ```
162
+ <!-- AURO-GENERATED-CONTENT:END -->
163
+ </auro-accordion>
164
+
165
+ ### Chevron Right
166
+
167
+ Using the `chevron="right"` will cause the chevron to appear on the right side of the accordion label.
168
+
169
+ <div class="exampleWrapper">
170
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevron-right.html) -->
171
+ <!-- The below content is automatically added from ./../apiExamples/chevron-right.html -->
172
+ <auro-accordion chevron="right">
189
173
  <span slot="trigger">Trigger</span>
190
174
  <p>
191
175
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -200,20 +184,40 @@ content | Apply CSS to the accordion content.
200
184
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
201
185
  </p>
202
186
  </auro-accordion>
203
- </auro-accordion-group>
187
+ <!-- AURO-GENERATED-CONTENT:END -->
188
+ </div>
189
+ <auro-accordion alignRight>
190
+ <span slot="trigger">See code</span>
191
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevron-right.html) -->
192
+ <!-- The below code snippet is automatically added from ./../apiExamples/chevron-right.html -->
193
+
194
+ ```html
195
+ <auro-accordion chevron="right">
196
+ <span slot="trigger">Trigger</span>
197
+ <p>
198
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
199
+ </p>
200
+ <p>
201
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
202
+ </p>
203
+ <p>
204
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
205
+ </p>
206
+ <p>
207
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
208
+ </p>
209
+ </auro-accordion>
204
210
  ```
205
211
  <!-- AURO-GENERATED-CONTENT:END -->
206
212
  </auro-accordion>
207
213
 
208
- ### Accordion Attribute Examples
209
-
210
- #### No Chevron
214
+ ### No Chevron
211
215
 
212
216
  The chevron icon within the trigger of the `auro-accordion` will not render when `chevron="none"` is present on the element.
213
217
 
214
218
  <div class="exampleWrapper">
215
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevronNone.html) -->
216
- <!-- The below content is automatically added from ./../apiExamples/chevronNone.html -->
219
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevron-none.html) -->
220
+ <!-- The below content is automatically added from ./../apiExamples/chevron-none.html -->
217
221
  <auro-accordion chevron="none">
218
222
  <span slot="trigger">Trigger</span>
219
223
  <p>
@@ -230,11 +234,11 @@ The chevron icon within the trigger of the `auro-accordion` will not render when
230
234
  </p>
231
235
  </auro-accordion>
232
236
  <!-- AURO-GENERATED-CONTENT:END -->
233
- </div>
237
+ </div>
234
238
  <auro-accordion alignRight>
235
239
  <span slot="trigger">See code</span>
236
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevronNone.html) -->
237
- <!-- The below code snippet is automatically added from ./../apiExamples/chevronNone.html -->
240
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevron-none.html) -->
241
+ <!-- The below code snippet is automatically added from ./../apiExamples/chevron-none.html -->
238
242
 
239
243
  ```html
240
244
  <auro-accordion chevron="none">
@@ -256,14 +260,14 @@ The chevron icon within the trigger of the `auro-accordion` will not render when
256
260
  <!-- AURO-GENERATED-CONTENT:END -->
257
261
  </auro-accordion>
258
262
 
259
- #### Chevron Right
263
+ ### Disabled
260
264
 
261
- Using the `chevron="right"` will cause the chevron to appear on the right side of the accordion label.
265
+ Use the `disabled` attribute to disable the expand/collapse function and reduce the opacity of the element.
262
266
 
263
267
  <div class="exampleWrapper">
264
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevronRight.html) -->
265
- <!-- The below content is automatically added from ./../apiExamples/chevronRight.html -->
266
- <auro-accordion chevron="right">
268
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
269
+ <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
270
+ <auro-accordion disabled>
267
271
  <span slot="trigger">Trigger</span>
268
272
  <p>
269
273
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -279,14 +283,14 @@ Using the `chevron="right"` will cause the chevron to appear on the right side o
279
283
  </p>
280
284
  </auro-accordion>
281
285
  <!-- AURO-GENERATED-CONTENT:END -->
282
- </div>
283
- <auro-accordion alignRight chevron>
286
+ </div>
287
+ <auro-accordion alignRight>
284
288
  <span slot="trigger">See code</span>
285
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevronRight.html) -->
286
- <!-- The below code snippet is automatically added from ./../apiExamples/chevronRight.html -->
289
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
290
+ <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
287
291
 
288
292
  ```html
289
- <auro-accordion chevron="right">
293
+ <auro-accordion disabled>
290
294
  <span slot="trigger">Trigger</span>
291
295
  <p>
292
296
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -305,14 +309,16 @@ Using the `chevron="right"` will cause the chevron to appear on the right side o
305
309
  <!-- AURO-GENERATED-CONTENT:END -->
306
310
  </auro-accordion>
307
311
 
308
- #### alignRight
312
+ ### Expanded
309
313
 
310
- Using the `alignRight` attribute will cause the trigger to align to the right edge of the accordion.
314
+ The accordion can be programatically expanded or collapsed by setting the `expanded` attribute to `true` or `false`.
311
315
 
312
316
  <div class="exampleWrapper">
313
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/alignRight.html) -->
314
- <!-- The below content is automatically added from ./../apiExamples/alignRight.html -->
315
- <auro-accordion alignRight>
317
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/expanded.html) -->
318
+ <!-- The below content is automatically added from ./../apiExamples/expanded.html -->
319
+ <auro-button id="accordionExpandedExampleBtnTrue">Set expanded = "true"</auro-button>
320
+ <auro-button id="accordionExpandedExampleBtnFalse">Set expanded = "false"</auro-button>
321
+ <auro-accordion id="accordionExpandedExample">
316
322
  <span slot="trigger">Trigger</span>
317
323
  <p>
318
324
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -328,14 +334,16 @@ Using the `alignRight` attribute will cause the trigger to align to the right ed
328
334
  </p>
329
335
  </auro-accordion>
330
336
  <!-- AURO-GENERATED-CONTENT:END -->
331
- </div>
337
+ </div>
332
338
  <auro-accordion alignRight>
333
339
  <span slot="trigger">See code</span>
334
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/alignRight.html) -->
335
- <!-- The below code snippet is automatically added from ./../apiExamples/alignRight.html -->
340
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/expanded.html) -->
341
+ <!-- The below code snippet is automatically added from ./../apiExamples/expanded.html -->
336
342
 
337
343
  ```html
338
- <auro-accordion alignRight>
344
+ <auro-button id="accordionExpandedExampleBtnTrue">Set expanded = "true"</auro-button>
345
+ <auro-button id="accordionExpandedExampleBtnFalse">Set expanded = "false"</auro-button>
346
+ <auro-accordion id="accordionExpandedExample">
339
347
  <span slot="trigger">Trigger</span>
340
348
  <p>
341
349
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -352,16 +360,39 @@ Using the `alignRight` attribute will cause the trigger to align to the right ed
352
360
  </auro-accordion>
353
361
  ```
354
362
  <!-- AURO-GENERATED-CONTENT:END -->
363
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/expanded.js) -->
364
+ <!-- The below code snippet is automatically added from ./../apiExamples/expanded.js -->
365
+
366
+ ```js
367
+ export function expandedExample() {
368
+ const expandedExampleElem = document.querySelector(
369
+ "#accordionExpandedExample",
370
+ );
371
+
372
+ document
373
+ .querySelector("#accordionExpandedExampleBtnTrue")
374
+ .addEventListener("click", () => {
375
+ expandedExampleElem.expanded = true;
376
+ });
377
+
378
+ document
379
+ .querySelector("#accordionExpandedExampleBtnFalse")
380
+ .addEventListener("click", () => {
381
+ expandedExampleElem.expanded = false;
382
+ });
383
+ }
384
+ ```
385
+ <!-- AURO-GENERATED-CONTENT:END -->
355
386
  </auro-accordion>
356
387
 
357
- #### align chevron right
388
+ ### Large Variant
358
389
 
359
- Using the `alignRight` attribute in conjuction with the `chevron="right"` attribute will cause the trigger to align to the right edge of the accordion, with the chevron appearing on the right side of the trigger.
390
+ Using the `variant="lg"` attribute will cause the size of the accordion trigger to render larger.
360
391
 
361
392
  <div class="exampleWrapper">
362
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/alignChevronRight.html) -->
363
- <!-- The below content is automatically added from ./../apiExamples/alignChevronRight.html -->
364
- <auro-accordion chevron="right" alignRight>
393
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/variant-lg.html) -->
394
+ <!-- The below content is automatically added from ./../apiExamples/variant-lg.html -->
395
+ <auro-accordion variant="lg">
365
396
  <span slot="trigger">Trigger</span>
366
397
  <p>
367
398
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -377,14 +408,14 @@ Using the `alignRight` attribute in conjuction with the `chevron="right"` attrib
377
408
  </p>
378
409
  </auro-accordion>
379
410
  <!-- AURO-GENERATED-CONTENT:END -->
380
- </div>
411
+ </div>
381
412
  <auro-accordion alignRight>
382
413
  <span slot="trigger">See code</span>
383
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/alignChevronRight.html) -->
384
- <!-- The below code snippet is automatically added from ./../apiExamples/alignChevronRight.html -->
414
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/variant-lg.html) -->
415
+ <!-- The below code snippet is automatically added from ./../apiExamples/variant-lg.html -->
385
416
 
386
417
  ```html
387
- <auro-accordion chevron="right" alignRight>
418
+ <auro-accordion variant="lg">
388
419
  <span slot="trigger">Trigger</span>
389
420
  <p>
390
421
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -403,14 +434,14 @@ Using the `alignRight` attribute in conjuction with the `chevron="right"` attrib
403
434
  <!-- AURO-GENERATED-CONTENT:END -->
404
435
  </auro-accordion>
405
436
 
406
- #### disabled
437
+ ### Small Variant
407
438
 
408
- Use the `disabled` attribute to disable the expand/collapse function and reduce the opacity of the element.
439
+ Using the `variant="sm"` attribute will cause the size of the accordion trigger to render smaller.
409
440
 
410
441
  <div class="exampleWrapper">
411
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
412
- <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
413
- <auro-accordion disabled>
442
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/variant-sm.html) -->
443
+ <!-- The below content is automatically added from ./../apiExamples/variant-sm.html -->
444
+ <auro-accordion variant="sm">
414
445
  <span slot="trigger">Trigger</span>
415
446
  <p>
416
447
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -426,14 +457,14 @@ Use the `disabled` attribute to disable the expand/collapse function and reduce
426
457
  </p>
427
458
  </auro-accordion>
428
459
  <!-- AURO-GENERATED-CONTENT:END -->
429
- </div>
460
+ </div>
430
461
  <auro-accordion alignRight>
431
462
  <span slot="trigger">See code</span>
432
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
433
- <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
463
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/variant-sm.html) -->
464
+ <!-- The below code snippet is automatically added from ./../apiExamples/variant-sm.html -->
434
465
 
435
466
  ```html
436
- <auro-accordion disabled>
467
+ <auro-accordion variant="sm">
437
468
  <span slot="trigger">Trigger</span>
438
469
  <p>
439
470
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -452,16 +483,17 @@ Use the `disabled` attribute to disable the expand/collapse function and reduce
452
483
  <!-- AURO-GENERATED-CONTENT:END -->
453
484
  </auro-accordion>
454
485
 
455
- #### expanded
486
+ ## Method Examples
487
+
488
+ ### Toggle
456
489
 
457
- The accordion can be programatically expanded or collapsed by setting the `expanded` attribute to `true` or `false`.
490
+ Using the `toggle()` method will change the state of the accordion from expanded to collapsed, or from collapsed to expanded.
458
491
 
459
492
  <div class="exampleWrapper">
460
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/expanded.html) -->
461
- <!-- The below content is automatically added from ./../apiExamples/expanded.html -->
462
- <auro-button id="auroaccordionExpandedExampleBtnTrue">Set expanded = `true`</auro-button>
463
- <auro-button id="auroaccordionExpandedExampleBtnFalse">Set expanded = `false`</auro-button>
464
- <auro-accordion id="auroaccordionExpandedExample">
493
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/toggle.html) -->
494
+ <!-- The below content is automatically added from ./../apiExamples/toggle.html -->
495
+ <auro-button id="accordionToggleExampleBtn">Toggle Accordion</auro-button>
496
+ <auro-accordion id="accordionToggleExample">
465
497
  <span slot="trigger">Trigger</span>
466
498
  <p>
467
499
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -477,16 +509,15 @@ The accordion can be programatically expanded or collapsed by setting the `expan
477
509
  </p>
478
510
  </auro-accordion>
479
511
  <!-- AURO-GENERATED-CONTENT:END -->
480
- </div>
512
+ </div>
481
513
  <auro-accordion alignRight>
482
514
  <span slot="trigger">See code</span>
483
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/expanded.html) -->
484
- <!-- The below code snippet is automatically added from ./../apiExamples/expanded.html -->
515
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/toggle.html) -->
516
+ <!-- The below code snippet is automatically added from ./../apiExamples/toggle.html -->
485
517
 
486
518
  ```html
487
- <auro-button id="auroaccordionExpandedExampleBtnTrue">Set expanded = `true`</auro-button>
488
- <auro-button id="auroaccordionExpandedExampleBtnFalse">Set expanded = `false`</auro-button>
489
- <auro-accordion id="auroaccordionExpandedExample">
519
+ <auro-button id="accordionToggleExampleBtn">Toggle Accordion</auro-button>
520
+ <auro-accordion id="accordionToggleExample">
490
521
  <span slot="trigger">Trigger</span>
491
522
  <p>
492
523
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -502,42 +533,89 @@ The accordion can be programatically expanded or collapsed by setting the `expan
502
533
  </p>
503
534
  </auro-accordion>
504
535
  ```
505
- <!-- AURO-GENERATED-CONTENT:END -->
506
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/expanded.js) -->
507
- <!-- The below code snippet is automatically added from ./../apiExamples/expanded.js -->
536
+ <!-- AURO-GENERATED-CONTENT:END -->
537
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/toggle.js) -->
538
+ <!-- The below code snippet is automatically added from ./../apiExamples/toggle.js -->
508
539
 
509
540
  ```js
510
- export function expandedExample() {
541
+ export function toggleExample() {
511
542
  const expandedExampleElem = document.querySelector(
512
- "#auroaccordionExpandedExample",
543
+ "#accordionToggleExample",
513
544
  );
514
545
 
515
546
  document
516
- .querySelector("#auroaccordionExpandedExampleBtnTrue")
517
- .addEventListener("click", () => {
518
- expandedExampleElem.expanded = true;
519
- });
520
-
521
- document
522
- .querySelector("#auroaccordionExpandedExampleBtnFalse")
547
+ .querySelector("#accordionToggleExampleBtn")
523
548
  .addEventListener("click", () => {
524
- expandedExampleElem.expanded = false;
549
+ expandedExampleElem.toggle();
525
550
  });
526
551
  }
527
552
  ```
528
553
  <!-- AURO-GENERATED-CONTENT:END -->
529
554
  </auro-accordion>
530
555
 
531
- ## Accordion Group Attribute Examples
556
+ ## Common Usage Patterns & Functional Examples
532
557
 
533
- ### Small
558
+ ### Align Chevron & Trigger Right
534
559
 
535
- Using the `variant="sm"` attribute will cause the size of the accordion trigger to render smaller.
560
+ Using the `alignRight` attribute in conjuction with the `chevron="right"` attribute will cause the trigger to align to the right edge of the accordion, with the chevron appearing on the right side of the trigger.
536
561
 
537
562
  <div class="exampleWrapper">
538
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordionGroupSm.html) -->
539
- <!-- The below content is automatically added from ./../apiExamples/accordionGroupSm.html -->
540
- <auro-accordion-group variant="sm">
563
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/align-chevron-right.html) -->
564
+ <!-- The below content is automatically added from ./../apiExamples/align-chevron-right.html -->
565
+ <auro-accordion chevron="right" alignRight>
566
+ <span slot="trigger">Trigger</span>
567
+ <p>
568
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
569
+ </p>
570
+ <p>
571
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
572
+ </p>
573
+ <p>
574
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
575
+ </p>
576
+ <p>
577
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
578
+ </p>
579
+ </auro-accordion>
580
+ <!-- AURO-GENERATED-CONTENT:END -->
581
+ </div>
582
+ <auro-accordion alignRight>
583
+ <span slot="trigger">See code</span>
584
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/align-chevron-right.html) -->
585
+ <!-- The below code snippet is automatically added from ./../apiExamples/align-chevron-right.html -->
586
+
587
+ ```html
588
+ <auro-accordion chevron="right" alignRight>
589
+ <span slot="trigger">Trigger</span>
590
+ <p>
591
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
592
+ </p>
593
+ <p>
594
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
595
+ </p>
596
+ <p>
597
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
598
+ </p>
599
+ <p>
600
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
601
+ </p>
602
+ </auro-accordion>
603
+ ```
604
+ <!-- AURO-GENERATED-CONTENT:END -->
605
+ </auro-accordion>
606
+
607
+ # auro-accordion-group
608
+
609
+ ## Property & Attribute Examples
610
+
611
+ ### Disabled
612
+
613
+ Use the `disabled` attribute to disable the expand/collapse function and reduce the opacity for all accordions inside of the group.
614
+
615
+ <div class="exampleWrapper">
616
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled-group.html) -->
617
+ <!-- The below content is automatically added from ./../apiExamples/disabled-group.html -->
618
+ <auro-accordion-group disabled>
541
619
  <auro-accordion>
542
620
  <span slot="trigger">Trigger</span>
543
621
  <p>
@@ -588,11 +666,11 @@ Using the `variant="sm"` attribute will cause the size of the accordion trigger
588
666
  </div>
589
667
  <auro-accordion alignRight>
590
668
  <span slot="trigger">See code</span>
591
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordionGroupSm.html) -->
592
- <!-- The below code snippet is automatically added from ./../apiExamples/accordionGroupSm.html -->
669
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled-group.html) -->
670
+ <!-- The below code snippet is automatically added from ./../apiExamples/disabled-group.html -->
593
671
 
594
672
  ```html
595
- <auro-accordion-group variant="sm">
673
+ <auro-accordion-group disabled>
596
674
  <auro-accordion>
597
675
  <span slot="trigger">Trigger</span>
598
676
  <p>
@@ -643,14 +721,14 @@ Using the `variant="sm"` attribute will cause the size of the accordion trigger
643
721
  <!-- AURO-GENERATED-CONTENT:END -->
644
722
  </auro-accordion>
645
723
 
646
- ### Large
724
+ ### Emphasis
647
725
 
648
- Using the `variant="lg"` attribute will cause the size of the accordion trigger to render larger.
726
+ Use the `emphasis` attribute to apply border highlights to the `auro-accordion` on hover and move the chevron to the right side of the trigger.
649
727
 
650
728
  <div class="exampleWrapper">
651
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordionGroupLg.html) -->
652
- <!-- The below content is automatically added from ./../apiExamples/accordionGroupLg.html -->
653
- <auro-accordion-group variant="lg">
729
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasis-group.html) -->
730
+ <!-- The below content is automatically added from ./../apiExamples/emphasis-group.html -->
731
+ <auro-accordion-group emphasis>
654
732
  <auro-accordion>
655
733
  <span slot="trigger">Trigger</span>
656
734
  <p>
@@ -701,11 +779,11 @@ Using the `variant="lg"` attribute will cause the size of the accordion trigger
701
779
  </div>
702
780
  <auro-accordion alignRight>
703
781
  <span slot="trigger">See code</span>
704
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordionGroupLg.html) -->
705
- <!-- The below code snippet is automatically added from ./../apiExamples/accordionGroupLg.html -->
782
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasis-group.html) -->
783
+ <!-- The below code snippet is automatically added from ./../apiExamples/emphasis-group.html -->
706
784
 
707
785
  ```html
708
- <auro-accordion-group variant="lg">
786
+ <auro-accordion-group emphasis>
709
787
  <auro-accordion>
710
788
  <span slot="trigger">Trigger</span>
711
789
  <p>
@@ -756,14 +834,14 @@ Using the `variant="lg"` attribute will cause the size of the accordion trigger
756
834
  <!-- AURO-GENERATED-CONTENT:END -->
757
835
  </auro-accordion>
758
836
 
759
- #### disabled
837
+ ### No Toggle Expanded
760
838
 
761
- Use the `disabled` attribute to disable the expand/collapse function and reduce the opacity for the whole accordion inside of the group.
839
+ Using the `noToggleExpanded` attribute will allow for multiple accordions in an group to be open at the same time.
762
840
 
763
841
  <div class="exampleWrapper">
764
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabledGroup.html) -->
765
- <!-- The below content is automatically added from ./../apiExamples/disabledGroup.html -->
766
- <auro-accordion-group disabled>
842
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/no-toggle-expanded.html) -->
843
+ <!-- The below content is automatically added from ./../apiExamples/no-toggle-expanded.html -->
844
+ <auro-accordion-group noToggleExpanded>
767
845
  <auro-accordion>
768
846
  <span slot="trigger">Trigger</span>
769
847
  <p>
@@ -814,11 +892,11 @@ Use the `disabled` attribute to disable the expand/collapse function and reduce
814
892
  </div>
815
893
  <auro-accordion alignRight>
816
894
  <span slot="trigger">See code</span>
817
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabledGroup.html) -->
818
- <!-- The below code snippet is automatically added from ./../apiExamples/disabledGroup.html -->
895
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/no-toggle-expanded.html) -->
896
+ <!-- The below code snippet is automatically added from ./../apiExamples/no-toggle-expanded.html -->
819
897
 
820
898
  ```html
821
- <auro-accordion-group disabled>
899
+ <auro-accordion-group noToggleExpanded>
822
900
  <auro-accordion>
823
901
  <span slot="trigger">Trigger</span>
824
902
  <p>
@@ -869,14 +947,14 @@ Use the `disabled` attribute to disable the expand/collapse function and reduce
869
947
  <!-- AURO-GENERATED-CONTENT:END -->
870
948
  </auro-accordion>
871
949
 
872
- ### emphasis
950
+ ### Large Variant
873
951
 
874
- Use the `emphasis` attribute to apply border highlights to the `auro-accordion` on hover and move the chevron to the right side of the trigger.
952
+ Using the `variant="lg"` attribute will cause the size of all accordion triggers within the group to render larger.
875
953
 
876
954
  <div class="exampleWrapper">
877
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasis.html) -->
878
- <!-- The below content is automatically added from ./../apiExamples/emphasis.html -->
879
- <auro-accordion-group emphasis>
955
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/variant-lg-group.html) -->
956
+ <!-- The below content is automatically added from ./../apiExamples/variant-lg-group.html -->
957
+ <auro-accordion-group variant="lg">
880
958
  <auro-accordion>
881
959
  <span slot="trigger">Trigger</span>
882
960
  <p>
@@ -927,11 +1005,11 @@ Use the `emphasis` attribute to apply border highlights to the `auro-accordion`
927
1005
  </div>
928
1006
  <auro-accordion alignRight>
929
1007
  <span slot="trigger">See code</span>
930
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasis.html) -->
931
- <!-- The below code snippet is automatically added from ./../apiExamples/emphasis.html -->
1008
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/variant-lg-group.html) -->
1009
+ <!-- The below code snippet is automatically added from ./../apiExamples/variant-lg-group.html -->
932
1010
 
933
1011
  ```html
934
- <auro-accordion-group emphasis>
1012
+ <auro-accordion-group variant="lg">
935
1013
  <auro-accordion>
936
1014
  <span slot="trigger">Trigger</span>
937
1015
  <p>
@@ -982,14 +1060,14 @@ Use the `emphasis` attribute to apply border highlights to the `auro-accordion`
982
1060
  <!-- AURO-GENERATED-CONTENT:END -->
983
1061
  </auro-accordion>
984
1062
 
985
- ### noToggleExpanded
1063
+ ### Small Variant
986
1064
 
987
- Using the `noToggleExpanded` attribute will allow for multiple `auro-accordion`'s in an `auro-accordion-group` to be open at the same time.
1065
+ Using the `variant="sm"` attribute will cause the size of all accordion triggers in the group to render smaller.
988
1066
 
989
1067
  <div class="exampleWrapper">
990
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noToggleExpanded.html) -->
991
- <!-- The below content is automatically added from ./../apiExamples/noToggleExpanded.html -->
992
- <auro-accordion-group noToggleExpanded>
1068
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/variant-sm-group.html) -->
1069
+ <!-- The below content is automatically added from ./../apiExamples/variant-sm-group.html -->
1070
+ <auro-accordion-group variant="sm">
993
1071
  <auro-accordion>
994
1072
  <span slot="trigger">Trigger</span>
995
1073
  <p>
@@ -1040,11 +1118,11 @@ Using the `noToggleExpanded` attribute will allow for multiple `auro-accordion`'
1040
1118
  </div>
1041
1119
  <auro-accordion alignRight>
1042
1120
  <span slot="trigger">See code</span>
1043
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/noToggleExpanded.html) -->
1044
- <!-- The below code snippet is automatically added from ./../apiExamples/noToggleExpanded.html -->
1121
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/variant-sm-group.html) -->
1122
+ <!-- The below code snippet is automatically added from ./../apiExamples/variant-sm-group.html -->
1045
1123
 
1046
1124
  ```html
1047
- <auro-accordion-group noToggleExpanded>
1125
+ <auro-accordion-group variant="sm">
1048
1126
  <auro-accordion>
1049
1127
  <span slot="trigger">Trigger</span>
1050
1128
  <p>
@@ -1095,9 +1173,9 @@ Using the `noToggleExpanded` attribute will allow for multiple `auro-accordion`'
1095
1173
  <!-- AURO-GENERATED-CONTENT:END -->
1096
1174
  </auro-accordion>
1097
1175
 
1098
- ### Theme Support
1176
+ ## Restyle Component with CSS Variables
1099
1177
 
1100
- The component may be restyled using the following code sample and changing the values of the following token(s).
1178
+ The component may be restyled by changing the values of the following token(s).
1101
1179
 
1102
1180
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
1103
1181
  <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->