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