@aurodesignsystem/auro-accordion 6.0.0-rc-1.1 → 6.0.0-rc-216.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 +12 -1
  2. package/README.md +135 -84
  3. package/custom-elements.json +1331 -0
  4. package/demo/api.js +2 -0
  5. package/demo/api.md +311 -232
  6. package/demo/api.min.js +16 -3
  7. package/demo/auro-accordion.min.js +95 -50
  8. package/demo/index.md +16 -11
  9. package/dist/{auro-accordion-B6aPKaGa.js → auro-accordion-BmwXsHxz.js} +17 -13
  10. package/dist/index.d.ts +247 -121
  11. package/dist/index.js +1 -1
  12. package/dist/registered.js +1 -1
  13. package/package.json +21 -13
package/demo/api.md CHANGED
@@ -3,53 +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
- ## Properties
8
+ ### Properties & Attributes
10
9
 
11
- | Property | Attribute | Type | Default | Description |
12
- |--------------|--------------|-----------|---------|--------------------------------------------------|
13
- | [alignRight](#alignRight) | `alignRight` | `Boolean` | | If set, the trigger content will align right. |
14
- | [chevron](#chevron) | `chevron` | `String` | | Sets chevron variant option. Possible values are: `none`, `right`. |
15
- | [disabled](#disabled) | `disabled` | `Boolean` | | If set, the accordion is disabled and have reduced opacity. |
16
- | [emphasis](#emphasis) | `emphasis` | `Boolean` | | If set, emphasis styles will be applied to the auro-accordions. |
17
- | [expanded](#expanded) | `expanded` | `Boolean` | false | If set, the accordion is expanded. |
18
- | [grouped](#grouped) | `grouped` | `Boolean` | | Attribute will be set on accordion when it appears in an accordion group. |
19
- | [variant](#variant) | `variant` | `String` | | Sets accordion variant option. Possible values are: `sm`, `lg`. |
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. |
20
19
 
21
- ## Methods
20
+ ### Methods
22
21
 
23
- | Method | Type | Description |
24
- |----------|------------|--------------------------------------------------|
25
- | [toggle](#toggle) | `(): void` | Toggles the visibility of the accordion content. |
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
26
 
27
- ## Events
27
+ ### Events
28
28
 
29
- | Event | Type | Description |
30
- |------------------|---------------------------------------|--------------------------------------------------|
31
- | [toggleExpanded](#toggleExpanded) | `CustomEvent<{ expanded: boolean; }>` | Notifies that the accordion has been expanded or closed. |
29
+ | Name | Description |
30
+ | -------------- | -------------------------------------------------------- |
31
+ | toggleExpanded | Notifies that the accordion has been expanded or closed. |
32
32
 
33
- ## Slots
33
+ ### Slots
34
34
 
35
35
  | Name | Description |
36
- |-----------|---------------------------------------------|
37
- | | Default slot for the accordion content. |
38
- | [trigger](#trigger) | Defines the content of the trigger element. |
36
+ | --------- | ------------------------------------------- |
37
+ | (default) | Default slot for the accordion content. |
38
+ | trigger | Defines the content of the trigger element. |
39
39
 
40
- ## CSS Shadow Parts
40
+ ### CSS Shadow Parts
41
41
 
42
- | Part | Description |
43
- |-------------|-------------------------------------|
44
- | [accordion](#accordion) | Apply CSS to Accordion wrapper. |
45
- | [chevron](#chevron) | Apply CSS to chevron icon. |
46
- | [content](#content) | Apply CSS to the accordion content. |
47
- | [trigger](#trigger) | Apply CSS to trigger element. |
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. |
48
66
  <!-- AURO-GENERATED-CONTENT:END -->
49
67
 
50
- ## Accordion API Examples
68
+ # auro-accordion
51
69
 
52
- ### Basic
70
+ ## Basic
53
71
 
54
72
  <div class="exampleWrapper">
55
73
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
@@ -70,90 +88,11 @@ Use auro-accordion-group if you want to have auto closing accordion components w
70
88
  </p>
71
89
  </auro-accordion>
72
90
  <!-- AURO-GENERATED-CONTENT:END -->
73
- </div>
74
- <auro-accordion alignRight>
75
- <span slot="trigger">See code</span>
76
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
77
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
78
-
79
- ```html
80
- <auro-accordion>
81
- <span slot="trigger">Trigger</span>
82
- <p>
83
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
84
- </p>
85
- <p>
86
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
87
- </p>
88
- <p>
89
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
90
- </p>
91
- <p>
92
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
93
- </p>
94
- </auro-accordion>
95
- ```
96
- <!-- AURO-GENERATED-CONTENT:END -->
97
- </auro-accordion>
98
- <div class="exampleWrapper">
99
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordionGroup.html) -->
100
- <!-- The below content is automatically added from ./../apiExamples/accordionGroup.html -->
101
- <auro-accordion-group>
102
- <auro-accordion>
103
- <span slot="trigger">Trigger</span>
104
- <p>
105
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
106
- </p>
107
- <p>
108
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
109
- </p>
110
- <p>
111
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
112
- </p>
113
- <p>
114
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
115
- </p>
116
- </auro-accordion>
117
- <auro-accordion>
118
- <span slot="trigger">Trigger</span>
119
- <p>
120
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
121
- </p>
122
- <p>
123
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
124
- </p>
125
- <p>
126
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
127
- </p>
128
- <p>
129
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
130
- </p>
131
- </auro-accordion>
132
- <auro-accordion>
133
- <span slot="trigger">Trigger</span>
134
- <p>
135
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
136
- </p>
137
- <p>
138
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
139
- </p>
140
- <p>
141
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
142
- </p>
143
- <p>
144
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
145
- </p>
146
- </auro-accordion>
147
- </auro-accordion-group>
148
- <!-- AURO-GENERATED-CONTENT:END -->
149
- </div>
91
+ </div>
150
92
  <auro-accordion alignRight>
151
93
  <span slot="trigger">See code</span>
152
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordionGroup.html) -->
153
- <!-- The below code snippet is automatically added from ./../apiExamples/accordionGroup.html -->
154
-
155
- ```html
156
- <auro-accordion-group>
94
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
95
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
157
96
  <auro-accordion>
158
97
  <span slot="trigger">Trigger</span>
159
98
  <p>
@@ -169,7 +108,19 @@ Use auro-accordion-group if you want to have auto closing accordion components w
169
108
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
170
109
  </p>
171
110
  </auro-accordion>
172
- <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>
173
124
  <span slot="trigger">Trigger</span>
174
125
  <p>
175
126
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -184,7 +135,41 @@ Use auro-accordion-group if you want to have auto closing accordion components w
184
135
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
185
136
  </p>
186
137
  </auro-accordion>
187
- <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">
188
173
  <span slot="trigger">Trigger</span>
189
174
  <p>
190
175
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -199,20 +184,40 @@ Use auro-accordion-group if you want to have auto closing accordion components w
199
184
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
200
185
  </p>
201
186
  </auro-accordion>
202
- </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>
203
210
  ```
204
211
  <!-- AURO-GENERATED-CONTENT:END -->
205
212
  </auro-accordion>
206
213
 
207
- ### Accordion Attribute Examples
208
-
209
- #### No Chevron
214
+ ### No Chevron
210
215
 
211
216
  The chevron icon within the trigger of the `auro-accordion` will not render when `chevron="none"` is present on the element.
212
217
 
213
218
  <div class="exampleWrapper">
214
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevronNone.html) -->
215
- <!-- 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 -->
216
221
  <auro-accordion chevron="none">
217
222
  <span slot="trigger">Trigger</span>
218
223
  <p>
@@ -229,11 +234,11 @@ The chevron icon within the trigger of the `auro-accordion` will not render when
229
234
  </p>
230
235
  </auro-accordion>
231
236
  <!-- AURO-GENERATED-CONTENT:END -->
232
- </div>
237
+ </div>
233
238
  <auro-accordion alignRight>
234
239
  <span slot="trigger">See code</span>
235
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevronNone.html) -->
236
- <!-- 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 -->
237
242
 
238
243
  ```html
239
244
  <auro-accordion chevron="none">
@@ -255,14 +260,14 @@ The chevron icon within the trigger of the `auro-accordion` will not render when
255
260
  <!-- AURO-GENERATED-CONTENT:END -->
256
261
  </auro-accordion>
257
262
 
258
- #### Chevron Right
263
+ ### Disabled
259
264
 
260
- 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.
261
266
 
262
267
  <div class="exampleWrapper">
263
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevronRight.html) -->
264
- <!-- The below content is automatically added from ./../apiExamples/chevronRight.html -->
265
- <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>
266
271
  <span slot="trigger">Trigger</span>
267
272
  <p>
268
273
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -278,14 +283,14 @@ Using the `chevron="right"` will cause the chevron to appear on the right side o
278
283
  </p>
279
284
  </auro-accordion>
280
285
  <!-- AURO-GENERATED-CONTENT:END -->
281
- </div>
282
- <auro-accordion alignRight chevron>
286
+ </div>
287
+ <auro-accordion alignRight>
283
288
  <span slot="trigger">See code</span>
284
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevronRight.html) -->
285
- <!-- 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 -->
286
291
 
287
292
  ```html
288
- <auro-accordion chevron="right">
293
+ <auro-accordion disabled>
289
294
  <span slot="trigger">Trigger</span>
290
295
  <p>
291
296
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -304,14 +309,16 @@ Using the `chevron="right"` will cause the chevron to appear on the right side o
304
309
  <!-- AURO-GENERATED-CONTENT:END -->
305
310
  </auro-accordion>
306
311
 
307
- #### alignRight
312
+ ### Expanded
308
313
 
309
- 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`.
310
315
 
311
316
  <div class="exampleWrapper">
312
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/alignRight.html) -->
313
- <!-- The below content is automatically added from ./../apiExamples/alignRight.html -->
314
- <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">
315
322
  <span slot="trigger">Trigger</span>
316
323
  <p>
317
324
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -327,14 +334,16 @@ Using the `alignRight` attribute will cause the trigger to align to the right ed
327
334
  </p>
328
335
  </auro-accordion>
329
336
  <!-- AURO-GENERATED-CONTENT:END -->
330
- </div>
337
+ </div>
331
338
  <auro-accordion alignRight>
332
339
  <span slot="trigger">See code</span>
333
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/alignRight.html) -->
334
- <!-- 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 -->
335
342
 
336
343
  ```html
337
- <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">
338
347
  <span slot="trigger">Trigger</span>
339
348
  <p>
340
349
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -351,16 +360,39 @@ Using the `alignRight` attribute will cause the trigger to align to the right ed
351
360
  </auro-accordion>
352
361
  ```
353
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 -->
354
386
  </auro-accordion>
355
387
 
356
- #### align chevron right
388
+ ### Large Variant
357
389
 
358
- 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.
359
391
 
360
392
  <div class="exampleWrapper">
361
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/alignChevronRight.html) -->
362
- <!-- The below content is automatically added from ./../apiExamples/alignChevronRight.html -->
363
- <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">
364
396
  <span slot="trigger">Trigger</span>
365
397
  <p>
366
398
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -376,14 +408,14 @@ Using the `alignRight` attribute in conjuction with the `chevron="right"` attrib
376
408
  </p>
377
409
  </auro-accordion>
378
410
  <!-- AURO-GENERATED-CONTENT:END -->
379
- </div>
411
+ </div>
380
412
  <auro-accordion alignRight>
381
413
  <span slot="trigger">See code</span>
382
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/alignChevronRight.html) -->
383
- <!-- 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 -->
384
416
 
385
417
  ```html
386
- <auro-accordion chevron="right" alignRight>
418
+ <auro-accordion variant="lg">
387
419
  <span slot="trigger">Trigger</span>
388
420
  <p>
389
421
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -402,14 +434,14 @@ Using the `alignRight` attribute in conjuction with the `chevron="right"` attrib
402
434
  <!-- AURO-GENERATED-CONTENT:END -->
403
435
  </auro-accordion>
404
436
 
405
- #### disabled
437
+ ### Small Variant
406
438
 
407
- 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.
408
440
 
409
441
  <div class="exampleWrapper">
410
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
411
- <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
412
- <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">
413
445
  <span slot="trigger">Trigger</span>
414
446
  <p>
415
447
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -425,14 +457,14 @@ Use the `disabled` attribute to disable the expand/collapse function and reduce
425
457
  </p>
426
458
  </auro-accordion>
427
459
  <!-- AURO-GENERATED-CONTENT:END -->
428
- </div>
460
+ </div>
429
461
  <auro-accordion alignRight>
430
462
  <span slot="trigger">See code</span>
431
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
432
- <!-- 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 -->
433
465
 
434
466
  ```html
435
- <auro-accordion disabled>
467
+ <auro-accordion variant="sm">
436
468
  <span slot="trigger">Trigger</span>
437
469
  <p>
438
470
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -451,16 +483,17 @@ Use the `disabled` attribute to disable the expand/collapse function and reduce
451
483
  <!-- AURO-GENERATED-CONTENT:END -->
452
484
  </auro-accordion>
453
485
 
454
- #### expanded
486
+ ## Method Examples
487
+
488
+ ### Toggle
455
489
 
456
- 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.
457
491
 
458
492
  <div class="exampleWrapper">
459
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/expanded.html) -->
460
- <!-- The below content is automatically added from ./../apiExamples/expanded.html -->
461
- <auro-button id="auroaccordionExpandedExampleBtnTrue">Set expanded = `true`</auro-button>
462
- <auro-button id="auroaccordionExpandedExampleBtnFalse">Set expanded = `false`</auro-button>
463
- <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">
464
497
  <span slot="trigger">Trigger</span>
465
498
  <p>
466
499
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -476,16 +509,15 @@ The accordion can be programatically expanded or collapsed by setting the `expan
476
509
  </p>
477
510
  </auro-accordion>
478
511
  <!-- AURO-GENERATED-CONTENT:END -->
479
- </div>
512
+ </div>
480
513
  <auro-accordion alignRight>
481
514
  <span slot="trigger">See code</span>
482
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/expanded.html) -->
483
- <!-- 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 -->
484
517
 
485
518
  ```html
486
- <auro-button id="auroaccordionExpandedExampleBtnTrue">Set expanded = `true`</auro-button>
487
- <auro-button id="auroaccordionExpandedExampleBtnFalse">Set expanded = `false`</auro-button>
488
- <auro-accordion id="auroaccordionExpandedExample">
519
+ <auro-button id="accordionToggleExampleBtn">Toggle Accordion</auro-button>
520
+ <auro-accordion id="accordionToggleExample">
489
521
  <span slot="trigger">Trigger</span>
490
522
  <p>
491
523
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -501,42 +533,89 @@ The accordion can be programatically expanded or collapsed by setting the `expan
501
533
  </p>
502
534
  </auro-accordion>
503
535
  ```
504
- <!-- AURO-GENERATED-CONTENT:END -->
505
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/expanded.js) -->
506
- <!-- 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 -->
507
539
 
508
540
  ```js
509
- export function expandedExample() {
541
+ export function toggleExample() {
510
542
  const expandedExampleElem = document.querySelector(
511
- "#auroaccordionExpandedExample",
543
+ "#accordionToggleExample",
512
544
  );
513
545
 
514
546
  document
515
- .querySelector("#auroaccordionExpandedExampleBtnTrue")
547
+ .querySelector("#accordionToggleExampleBtn")
516
548
  .addEventListener("click", () => {
517
- expandedExampleElem.expanded = true;
518
- });
519
-
520
- document
521
- .querySelector("#auroaccordionExpandedExampleBtnFalse")
522
- .addEventListener("click", () => {
523
- expandedExampleElem.expanded = false;
549
+ expandedExampleElem.toggle();
524
550
  });
525
551
  }
526
552
  ```
527
553
  <!-- AURO-GENERATED-CONTENT:END -->
528
554
  </auro-accordion>
529
555
 
530
- ## Accordion Group Attribute Examples
556
+ ## Common Usage Patterns & Functional Examples
531
557
 
532
- ### Small
558
+ ### Align Chevron & Trigger Right
533
559
 
534
- 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.
535
561
 
536
562
  <div class="exampleWrapper">
537
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordionGroupSm.html) -->
538
- <!-- The below content is automatically added from ./../apiExamples/accordionGroupSm.html -->
539
- <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>
540
619
  <auro-accordion>
541
620
  <span slot="trigger">Trigger</span>
542
621
  <p>
@@ -587,11 +666,11 @@ Using the `variant="sm"` attribute will cause the size of the accordion trigger
587
666
  </div>
588
667
  <auro-accordion alignRight>
589
668
  <span slot="trigger">See code</span>
590
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordionGroupSm.html) -->
591
- <!-- 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 -->
592
671
 
593
672
  ```html
594
- <auro-accordion-group variant="sm">
673
+ <auro-accordion-group disabled>
595
674
  <auro-accordion>
596
675
  <span slot="trigger">Trigger</span>
597
676
  <p>
@@ -642,14 +721,14 @@ Using the `variant="sm"` attribute will cause the size of the accordion trigger
642
721
  <!-- AURO-GENERATED-CONTENT:END -->
643
722
  </auro-accordion>
644
723
 
645
- ### Large
724
+ ### Emphasis
646
725
 
647
- 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.
648
727
 
649
728
  <div class="exampleWrapper">
650
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordionGroupLg.html) -->
651
- <!-- The below content is automatically added from ./../apiExamples/accordionGroupLg.html -->
652
- <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>
653
732
  <auro-accordion>
654
733
  <span slot="trigger">Trigger</span>
655
734
  <p>
@@ -700,11 +779,11 @@ Using the `variant="lg"` attribute will cause the size of the accordion trigger
700
779
  </div>
701
780
  <auro-accordion alignRight>
702
781
  <span slot="trigger">See code</span>
703
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordionGroupLg.html) -->
704
- <!-- 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 -->
705
784
 
706
785
  ```html
707
- <auro-accordion-group variant="lg">
786
+ <auro-accordion-group emphasis>
708
787
  <auro-accordion>
709
788
  <span slot="trigger">Trigger</span>
710
789
  <p>
@@ -755,14 +834,14 @@ Using the `variant="lg"` attribute will cause the size of the accordion trigger
755
834
  <!-- AURO-GENERATED-CONTENT:END -->
756
835
  </auro-accordion>
757
836
 
758
- #### disabled
837
+ ### No Toggle Expanded
759
838
 
760
- 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.
761
840
 
762
841
  <div class="exampleWrapper">
763
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabledGroup.html) -->
764
- <!-- The below content is automatically added from ./../apiExamples/disabledGroup.html -->
765
- <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>
766
845
  <auro-accordion>
767
846
  <span slot="trigger">Trigger</span>
768
847
  <p>
@@ -813,11 +892,11 @@ Use the `disabled` attribute to disable the expand/collapse function and reduce
813
892
  </div>
814
893
  <auro-accordion alignRight>
815
894
  <span slot="trigger">See code</span>
816
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabledGroup.html) -->
817
- <!-- 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 -->
818
897
 
819
898
  ```html
820
- <auro-accordion-group disabled>
899
+ <auro-accordion-group noToggleExpanded>
821
900
  <auro-accordion>
822
901
  <span slot="trigger">Trigger</span>
823
902
  <p>
@@ -868,14 +947,14 @@ Use the `disabled` attribute to disable the expand/collapse function and reduce
868
947
  <!-- AURO-GENERATED-CONTENT:END -->
869
948
  </auro-accordion>
870
949
 
871
- ### emphasis
950
+ ### Large Variant
872
951
 
873
- 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.
874
953
 
875
954
  <div class="exampleWrapper">
876
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasis.html) -->
877
- <!-- The below content is automatically added from ./../apiExamples/emphasis.html -->
878
- <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">
879
958
  <auro-accordion>
880
959
  <span slot="trigger">Trigger</span>
881
960
  <p>
@@ -926,11 +1005,11 @@ Use the `emphasis` attribute to apply border highlights to the `auro-accordion`
926
1005
  </div>
927
1006
  <auro-accordion alignRight>
928
1007
  <span slot="trigger">See code</span>
929
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasis.html) -->
930
- <!-- 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 -->
931
1010
 
932
1011
  ```html
933
- <auro-accordion-group emphasis>
1012
+ <auro-accordion-group variant="lg">
934
1013
  <auro-accordion>
935
1014
  <span slot="trigger">Trigger</span>
936
1015
  <p>
@@ -981,14 +1060,14 @@ Use the `emphasis` attribute to apply border highlights to the `auro-accordion`
981
1060
  <!-- AURO-GENERATED-CONTENT:END -->
982
1061
  </auro-accordion>
983
1062
 
984
- ### noToggleExpanded
1063
+ ### Small Variant
985
1064
 
986
- 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.
987
1066
 
988
1067
  <div class="exampleWrapper">
989
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noToggleExpanded.html) -->
990
- <!-- The below content is automatically added from ./../apiExamples/noToggleExpanded.html -->
991
- <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">
992
1071
  <auro-accordion>
993
1072
  <span slot="trigger">Trigger</span>
994
1073
  <p>
@@ -1039,11 +1118,11 @@ Using the `noToggleExpanded` attribute will allow for multiple `auro-accordion`'
1039
1118
  </div>
1040
1119
  <auro-accordion alignRight>
1041
1120
  <span slot="trigger">See code</span>
1042
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/noToggleExpanded.html) -->
1043
- <!-- 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 -->
1044
1123
 
1045
1124
  ```html
1046
- <auro-accordion-group noToggleExpanded>
1125
+ <auro-accordion-group variant="sm">
1047
1126
  <auro-accordion>
1048
1127
  <span slot="trigger">Trigger</span>
1049
1128
  <p>
@@ -1094,9 +1173,9 @@ Using the `noToggleExpanded` attribute will allow for multiple `auro-accordion`'
1094
1173
  <!-- AURO-GENERATED-CONTENT:END -->
1095
1174
  </auro-accordion>
1096
1175
 
1097
- ### Theme Support
1176
+ ## Restyle Component with CSS Variables
1098
1177
 
1099
- 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).
1100
1179
 
1101
1180
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
1102
1181
  <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->