@aurodesignsystem-dev/auro-accordion 0.0.0-pr214.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 (9) hide show
  1. package/README.md +99 -41
  2. package/custom-elements.json +27 -12
  3. package/demo/api.js +2 -0
  4. package/demo/api.md +781 -59
  5. package/demo/api.min.js +16 -3
  6. package/demo/auro-accordion.min.js +5 -11
  7. package/demo/index.md +76 -74
  8. package/dist/index.d.ts +247 -125
  9. package/package.json +2 -2
package/demo/api.md CHANGED
@@ -1,29 +1,26 @@
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 | Modifiers | Type | Default | Description |
12
- | ---------- | ---------- | --------- | ----------------- | ------- | ------------------------------------------------------------------------- |
13
- | alignRight | alignRight | | boolean | | If set, the trigger content will align right. |
14
- | chevron | chevron | | 'none' \| 'right' | | Sets chevron variant option. |
15
- | disabled | disabled | | boolean | | If set, the accordion is disabled and have reduced opacity. |
16
- | emphasis | emphasis | | boolean | | If set, emphasis styles will be applied to the auro-accordions. |
17
- | expanded | expanded | | boolean | false | If set, the accordion is expanded. |
18
- | grouped | grouped | | boolean | | Attribute will be set on accordion when it appears in an accordion group. |
19
- | variant | variant | | 'sm' \| 'lg' | | Sets accordion variant option. |
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. |
20
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. |
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. |
27
24
 
28
25
  ### Events
29
26
 
@@ -47,10 +44,7 @@ Use auro-accordion-group if you want to have auto closing accordion components w
47
44
  | content | Apply CSS to the accordion content. |
48
45
  | trigger | Apply CSS to trigger element. |
49
46
 
50
- # auro-accordion-group
51
-
52
- Auro-accordion provides users a way to have collapsible content on a page.
53
- Use auro-accordion-group if you want to have auto closing accordion components when others are selected.
47
+ # auro-accordion-group
54
48
 
55
49
  ### Properties & Attributes
56
50
 
@@ -58,16 +52,17 @@ Use auro-accordion-group if you want to have auto closing accordion components w
58
52
  | ---------- | ---------- | --------- | ------------ | ------- | ----------------------------------------------------------------------------------- |
59
53
  | disabled | disabled | | boolean | | If set, the whole accordion inside the group are disabled and have reduced opacity. |
60
54
  | emphasis | emphasis | | boolean | | If set, emphasis styles will be applied to the auro-accordions. |
61
- | variant | variant | | 'sm' \| 'lg' | | Sets accordion variant option. |
55
+ | variant | variant | | `sm` \| `lg` | | Sets accordion variant option. |
62
56
 
63
57
  ### Methods
64
58
 
65
- | Name | Parameters | Return | Description |
66
- | ------------------- | ------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------- |
67
- | register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
68
- | updateDisabledState | None | | Updates the disabled state of all child <auro-accordion> elements<br>to match the disabled state of the <auro-accordion-group> element. |
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. |
69
62
  <!-- AURO-GENERATED-CONTENT:END -->
70
63
 
64
+ # auro-accordion
65
+
71
66
  ## Basic
72
67
 
73
68
  <div class="exampleWrapper">
@@ -116,11 +111,11 @@ Use auro-accordion-group if you want to have auto closing accordion components w
116
111
 
117
112
  ### Align Trigger Right
118
113
 
119
- Using the `alignRight` attribute will cause the trigger to align to the right edge of the accordion.
114
+ Using the `alignRight` attribute will cause the trigger to align to the right edge of the accordion container.
120
115
 
121
116
  <div class="exampleWrapper">
122
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/alignRight.html) -->
123
- <!-- The below content is automatically added from ./../apiExamples/alignRight.html -->
117
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/align-right.html) -->
118
+ <!-- The below content is automatically added from ./../apiExamples/align-right.html -->
124
119
  <auro-accordion alignRight>
125
120
  <span slot="trigger">Trigger</span>
126
121
  <p>
@@ -137,11 +132,11 @@ Using the `alignRight` attribute will cause the trigger to align to the right ed
137
132
  </p>
138
133
  </auro-accordion>
139
134
  <!-- AURO-GENERATED-CONTENT:END -->
140
- </div>
135
+ </div>
141
136
  <auro-accordion alignRight>
142
137
  <span slot="trigger">See code</span>
143
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/alignRight.html) -->
144
- <!-- The below code snippet is automatically added from ./../apiExamples/alignRight.html -->
138
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/align-right.html) -->
139
+ <!-- The below code snippet is automatically added from ./../apiExamples/align-right.html -->
145
140
 
146
141
  ```html
147
142
  <auro-accordion alignRight>
@@ -168,8 +163,8 @@ Using the `alignRight` attribute will cause the trigger to align to the right ed
168
163
  Using the `chevron="right"` will cause the chevron to appear on the right side of the accordion label.
169
164
 
170
165
  <div class="exampleWrapper">
171
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevronRight.html) -->
172
- <!-- The below content is automatically added from ./../apiExamples/chevronRight.html -->
166
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevron-right.html) -->
167
+ <!-- The below content is automatically added from ./../apiExamples/chevron-right.html -->
173
168
  <auro-accordion chevron="right">
174
169
  <span slot="trigger">Trigger</span>
175
170
  <p>
@@ -189,8 +184,8 @@ Using the `chevron="right"` will cause the chevron to appear on the right side o
189
184
  </div>
190
185
  <auro-accordion alignRight>
191
186
  <span slot="trigger">See code</span>
192
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevronRight.html) -->
193
- <!-- The below code snippet is automatically added from ./../apiExamples/chevronRight.html -->
187
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevron-right.html) -->
188
+ <!-- The below code snippet is automatically added from ./../apiExamples/chevron-right.html -->
194
189
 
195
190
  ```html
196
191
  <auro-accordion chevron="right">
@@ -217,8 +212,8 @@ Using the `chevron="right"` will cause the chevron to appear on the right side o
217
212
  The chevron icon within the trigger of the `auro-accordion` will not render when `chevron="none"` is present on the element.
218
213
 
219
214
  <div class="exampleWrapper">
220
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevronNone.html) -->
221
- <!-- 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 -->
222
217
  <auro-accordion chevron="none">
223
218
  <span slot="trigger">Trigger</span>
224
219
  <p>
@@ -238,8 +233,8 @@ The chevron icon within the trigger of the `auro-accordion` will not render when
238
233
  </div>
239
234
  <auro-accordion alignRight>
240
235
  <span slot="trigger">See code</span>
241
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevronNone.html) -->
242
- <!-- 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 -->
243
238
 
244
239
  ```html
245
240
  <auro-accordion chevron="none">
@@ -317,9 +312,9 @@ The accordion can be programatically expanded or collapsed by setting the `expan
317
312
  <div class="exampleWrapper">
318
313
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/expanded.html) -->
319
314
  <!-- The below content is automatically added from ./../apiExamples/expanded.html -->
320
- <auro-button id="auroaccordionExpandedExampleBtnTrue">Set expanded = `true`</auro-button>
321
- <auro-button id="auroaccordionExpandedExampleBtnFalse">Set expanded = `false`</auro-button>
322
- <auro-accordion id="auroaccordionExpandedExample">
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">
323
318
  <span slot="trigger">Trigger</span>
324
319
  <p>
325
320
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -342,9 +337,9 @@ The accordion can be programatically expanded or collapsed by setting the `expan
342
337
  <!-- The below code snippet is automatically added from ./../apiExamples/expanded.html -->
343
338
 
344
339
  ```html
345
- <auro-button id="auroaccordionExpandedExampleBtnTrue">Set expanded = `true`</auro-button>
346
- <auro-button id="auroaccordionExpandedExampleBtnFalse">Set expanded = `false`</auro-button>
347
- <auro-accordion id="auroaccordionExpandedExample">
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">
348
343
  <span slot="trigger">Trigger</span>
349
344
  <p>
350
345
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -367,17 +362,17 @@ The accordion can be programatically expanded or collapsed by setting the `expan
367
362
  ```js
368
363
  export function expandedExample() {
369
364
  const expandedExampleElem = document.querySelector(
370
- "#auroaccordionExpandedExample",
365
+ "#accordionExpandedExample",
371
366
  );
372
367
 
373
368
  document
374
- .querySelector("#auroaccordionExpandedExampleBtnTrue")
369
+ .querySelector("#accordionExpandedExampleBtnTrue")
375
370
  .addEventListener("click", () => {
376
371
  expandedExampleElem.expanded = true;
377
372
  });
378
373
 
379
374
  document
380
- .querySelector("#auroaccordionExpandedExampleBtnFalse")
375
+ .querySelector("#accordionExpandedExampleBtnFalse")
381
376
  .addEventListener("click", () => {
382
377
  expandedExampleElem.expanded = false;
383
378
  });
@@ -386,25 +381,183 @@ export function expandedExample() {
386
381
  <!-- AURO-GENERATED-CONTENT:END -->
387
382
  </auro-accordion>
388
383
 
389
- ## Method Examples
384
+ ### Large Variant
390
385
 
391
- <!-- Add all method examples here, remove section if none exist -->
386
+ Using the `variant="lg"` attribute will cause the size of the accordion trigger to render larger.
387
+
388
+ <div class="exampleWrapper">
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">
392
+ <span slot="trigger">Trigger</span>
393
+ <p>
394
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
395
+ </p>
396
+ <p>
397
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
398
+ </p>
399
+ <p>
400
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
401
+ </p>
402
+ <p>
403
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
404
+ </p>
405
+ </auro-accordion>
406
+ <!-- AURO-GENERATED-CONTENT:END -->
407
+ </div>
408
+ <auro-accordion alignRight>
409
+ <span slot="trigger">See code</span>
410
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/variant-lg.html) -->
411
+ <!-- The below code snippet is automatically added from ./../apiExamples/variant-lg.html -->
392
412
 
393
- ## CSS Shadow Part Examples
413
+ ```html
414
+ <auro-accordion variant="lg">
415
+ <span slot="trigger">Trigger</span>
416
+ <p>
417
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
418
+ </p>
419
+ <p>
420
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
421
+ </p>
422
+ <p>
423
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
424
+ </p>
425
+ <p>
426
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
427
+ </p>
428
+ </auro-accordion>
429
+ ```
430
+ <!-- AURO-GENERATED-CONTENT:END -->
431
+ </auro-accordion>
432
+
433
+ ### Small Variant
434
+
435
+ Using the `variant="sm"` attribute will cause the size of the accordion trigger to render smaller.
394
436
 
395
- <!-- Add all CSS Shadow Part examples here, remove section if none exist -->
437
+ <div class="exampleWrapper">
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">
441
+ <span slot="trigger">Trigger</span>
442
+ <p>
443
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
444
+ </p>
445
+ <p>
446
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
447
+ </p>
448
+ <p>
449
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
450
+ </p>
451
+ <p>
452
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
453
+ </p>
454
+ </auro-accordion>
455
+ <!-- AURO-GENERATED-CONTENT:END -->
456
+ </div>
457
+ <auro-accordion alignRight>
458
+ <span slot="trigger">See code</span>
459
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/variant-sm.html) -->
460
+ <!-- The below code snippet is automatically added from ./../apiExamples/variant-sm.html -->
461
+
462
+ ```html
463
+ <auro-accordion variant="sm">
464
+ <span slot="trigger">Trigger</span>
465
+ <p>
466
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
467
+ </p>
468
+ <p>
469
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
470
+ </p>
471
+ <p>
472
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
473
+ </p>
474
+ <p>
475
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
476
+ </p>
477
+ </auro-accordion>
478
+ ```
479
+ <!-- AURO-GENERATED-CONTENT:END -->
480
+ </auro-accordion>
481
+
482
+ ## Method Examples
483
+
484
+ ### Toggle
485
+
486
+ Using the `toggle()` method will change the state of the accordion from expanded to collapsed, or from collapsed to expanded.
487
+
488
+ <div class="exampleWrapper">
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">
493
+ <span slot="trigger">Trigger</span>
494
+ <p>
495
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
496
+ </p>
497
+ <p>
498
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
499
+ </p>
500
+ <p>
501
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
502
+ </p>
503
+ <p>
504
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
505
+ </p>
506
+ </auro-accordion>
507
+ <!-- AURO-GENERATED-CONTENT:END -->
508
+ </div>
509
+ <auro-accordion alignRight>
510
+ <span slot="trigger">See code</span>
511
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/toggle.html) -->
512
+ <!-- The below code snippet is automatically added from ./../apiExamples/toggle.html -->
513
+
514
+ ```html
515
+ <auro-button id="accordionToggleExampleBtn">Toggle Accordion</auro-button>
516
+ <auro-accordion id="accordionToggleExample">
517
+ <span slot="trigger">Trigger</span>
518
+ <p>
519
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
520
+ </p>
521
+ <p>
522
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
523
+ </p>
524
+ <p>
525
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
526
+ </p>
527
+ <p>
528
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
529
+ </p>
530
+ </auro-accordion>
531
+ ```
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 -->
396
535
 
397
- ## Common Usage Patterns & Functional Examples
536
+ ```js
537
+ export function toggleExample() {
538
+ const expandedExampleElem = document.querySelector(
539
+ "#accordionToggleExample",
540
+ );
398
541
 
399
- <!-- Add any common usage patterns or functional examples here, remove section if none exist -->
542
+ document
543
+ .querySelector("#accordionToggleExampleBtn")
544
+ .addEventListener("click", () => {
545
+ expandedExampleElem.toggle();
546
+ });
547
+ }
548
+ ```
549
+ <!-- AURO-GENERATED-CONTENT:END -->
550
+ </auro-accordion>
551
+
552
+ ## Common Usage Patterns & Functional Examples
400
553
 
401
554
  ### Align Chevron & Trigger Right
402
555
 
403
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.
404
557
 
405
558
  <div class="exampleWrapper">
406
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/alignChevronRight.html) -->
407
- <!-- The below content is automatically added from ./../apiExamples/alignChevronRight.html -->
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 -->
408
561
  <auro-accordion chevron="right" alignRight>
409
562
  <span slot="trigger">Trigger</span>
410
563
  <p>
@@ -424,8 +577,8 @@ Using the `alignRight` attribute in conjuction with the `chevron="right"` attrib
424
577
  </div>
425
578
  <auro-accordion alignRight>
426
579
  <span slot="trigger">See code</span>
427
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/alignChevronRight.html) -->
428
- <!-- The below code snippet is automatically added from ./../apiExamples/alignChevronRight.html -->
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 -->
429
582
 
430
583
  ```html
431
584
  <auro-accordion chevron="right" alignRight>
@@ -447,6 +600,575 @@ Using the `alignRight` attribute in conjuction with the `chevron="right"` attrib
447
600
  <!-- AURO-GENERATED-CONTENT:END -->
448
601
  </auro-accordion>
449
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>
615
+ <auro-accordion>
616
+ <span slot="trigger">Trigger</span>
617
+ <p>
618
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
619
+ </p>
620
+ <p>
621
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
622
+ </p>
623
+ <p>
624
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
625
+ </p>
626
+ <p>
627
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
628
+ </p>
629
+ </auro-accordion>
630
+ <auro-accordion>
631
+ <span slot="trigger">Trigger</span>
632
+ <p>
633
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
634
+ </p>
635
+ <p>
636
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
637
+ </p>
638
+ <p>
639
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
640
+ </p>
641
+ <p>
642
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
643
+ </p>
644
+ </auro-accordion>
645
+ <auro-accordion>
646
+ <span slot="trigger">Trigger</span>
647
+ <p>
648
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
649
+ </p>
650
+ <p>
651
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
652
+ </p>
653
+ <p>
654
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
655
+ </p>
656
+ <p>
657
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
658
+ </p>
659
+ </auro-accordion>
660
+ </auro-accordion-group>
661
+ <!-- AURO-GENERATED-CONTENT:END -->
662
+ </div>
663
+ <auro-accordion alignRight>
664
+ <span slot="trigger">See code</span>
665
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled-group.html) -->
666
+ <!-- The below code snippet is automatically added from ./../apiExamples/disabled-group.html -->
667
+
668
+ ```html
669
+ <auro-accordion-group disabled>
670
+ <auro-accordion>
671
+ <span slot="trigger">Trigger</span>
672
+ <p>
673
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
674
+ </p>
675
+ <p>
676
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
677
+ </p>
678
+ <p>
679
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
680
+ </p>
681
+ <p>
682
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
683
+ </p>
684
+ </auro-accordion>
685
+ <auro-accordion>
686
+ <span slot="trigger">Trigger</span>
687
+ <p>
688
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
689
+ </p>
690
+ <p>
691
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
692
+ </p>
693
+ <p>
694
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
695
+ </p>
696
+ <p>
697
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
698
+ </p>
699
+ </auro-accordion>
700
+ <auro-accordion>
701
+ <span slot="trigger">Trigger</span>
702
+ <p>
703
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
704
+ </p>
705
+ <p>
706
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
707
+ </p>
708
+ <p>
709
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
710
+ </p>
711
+ <p>
712
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
713
+ </p>
714
+ </auro-accordion>
715
+ </auro-accordion-group>
716
+ ```
717
+ <!-- AURO-GENERATED-CONTENT:END -->
718
+ </auro-accordion>
719
+
720
+ ### Emphasis
721
+
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.
723
+
724
+ <div class="exampleWrapper">
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>
728
+ <auro-accordion>
729
+ <span slot="trigger">Trigger</span>
730
+ <p>
731
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
732
+ </p>
733
+ <p>
734
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
735
+ </p>
736
+ <p>
737
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
738
+ </p>
739
+ <p>
740
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
741
+ </p>
742
+ </auro-accordion>
743
+ <auro-accordion>
744
+ <span slot="trigger">Trigger</span>
745
+ <p>
746
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
747
+ </p>
748
+ <p>
749
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
750
+ </p>
751
+ <p>
752
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
753
+ </p>
754
+ <p>
755
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
756
+ </p>
757
+ </auro-accordion>
758
+ <auro-accordion>
759
+ <span slot="trigger">Trigger</span>
760
+ <p>
761
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
762
+ </p>
763
+ <p>
764
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
765
+ </p>
766
+ <p>
767
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
768
+ </p>
769
+ <p>
770
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
771
+ </p>
772
+ </auro-accordion>
773
+ </auro-accordion-group>
774
+ <!-- AURO-GENERATED-CONTENT:END -->
775
+ </div>
776
+ <auro-accordion alignRight>
777
+ <span slot="trigger">See code</span>
778
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasis-group.html) -->
779
+ <!-- The below code snippet is automatically added from ./../apiExamples/emphasis-group.html -->
780
+
781
+ ```html
782
+ <auro-accordion-group emphasis>
783
+ <auro-accordion>
784
+ <span slot="trigger">Trigger</span>
785
+ <p>
786
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
787
+ </p>
788
+ <p>
789
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
790
+ </p>
791
+ <p>
792
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
793
+ </p>
794
+ <p>
795
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
796
+ </p>
797
+ </auro-accordion>
798
+ <auro-accordion>
799
+ <span slot="trigger">Trigger</span>
800
+ <p>
801
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
802
+ </p>
803
+ <p>
804
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
805
+ </p>
806
+ <p>
807
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
808
+ </p>
809
+ <p>
810
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
811
+ </p>
812
+ </auro-accordion>
813
+ <auro-accordion>
814
+ <span slot="trigger">Trigger</span>
815
+ <p>
816
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
817
+ </p>
818
+ <p>
819
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
820
+ </p>
821
+ <p>
822
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
823
+ </p>
824
+ <p>
825
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
826
+ </p>
827
+ </auro-accordion>
828
+ </auro-accordion-group>
829
+ ```
830
+ <!-- AURO-GENERATED-CONTENT:END -->
831
+ </auro-accordion>
832
+
833
+ ### No Toggle Expanded
834
+
835
+ Using the `noToggleExpanded` attribute will allow for multiple accordions in an group to be open at the same time.
836
+
837
+ <div class="exampleWrapper">
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>
841
+ <auro-accordion>
842
+ <span slot="trigger">Trigger</span>
843
+ <p>
844
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
845
+ </p>
846
+ <p>
847
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
848
+ </p>
849
+ <p>
850
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
851
+ </p>
852
+ <p>
853
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
854
+ </p>
855
+ </auro-accordion>
856
+ <auro-accordion>
857
+ <span slot="trigger">Trigger</span>
858
+ <p>
859
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
860
+ </p>
861
+ <p>
862
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
863
+ </p>
864
+ <p>
865
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
866
+ </p>
867
+ <p>
868
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
869
+ </p>
870
+ </auro-accordion>
871
+ <auro-accordion>
872
+ <span slot="trigger">Trigger</span>
873
+ <p>
874
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
875
+ </p>
876
+ <p>
877
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
878
+ </p>
879
+ <p>
880
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
881
+ </p>
882
+ <p>
883
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
884
+ </p>
885
+ </auro-accordion>
886
+ </auro-accordion-group>
887
+ <!-- AURO-GENERATED-CONTENT:END -->
888
+ </div>
889
+ <auro-accordion alignRight>
890
+ <span slot="trigger">See code</span>
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 -->
893
+
894
+ ```html
895
+ <auro-accordion-group noToggleExpanded>
896
+ <auro-accordion>
897
+ <span slot="trigger">Trigger</span>
898
+ <p>
899
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
900
+ </p>
901
+ <p>
902
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
903
+ </p>
904
+ <p>
905
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
906
+ </p>
907
+ <p>
908
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
909
+ </p>
910
+ </auro-accordion>
911
+ <auro-accordion>
912
+ <span slot="trigger">Trigger</span>
913
+ <p>
914
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
915
+ </p>
916
+ <p>
917
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
918
+ </p>
919
+ <p>
920
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
921
+ </p>
922
+ <p>
923
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
924
+ </p>
925
+ </auro-accordion>
926
+ <auro-accordion>
927
+ <span slot="trigger">Trigger</span>
928
+ <p>
929
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
930
+ </p>
931
+ <p>
932
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
933
+ </p>
934
+ <p>
935
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
936
+ </p>
937
+ <p>
938
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
939
+ </p>
940
+ </auro-accordion>
941
+ </auro-accordion-group>
942
+ ```
943
+ <!-- AURO-GENERATED-CONTENT:END -->
944
+ </auro-accordion>
945
+
946
+ ### Large Variant
947
+
948
+ Using the `variant="lg"` attribute will cause the size of all accordion triggers within the group to render larger.
949
+
950
+ <div class="exampleWrapper">
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">
954
+ <auro-accordion>
955
+ <span slot="trigger">Trigger</span>
956
+ <p>
957
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
958
+ </p>
959
+ <p>
960
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
961
+ </p>
962
+ <p>
963
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
964
+ </p>
965
+ <p>
966
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
967
+ </p>
968
+ </auro-accordion>
969
+ <auro-accordion>
970
+ <span slot="trigger">Trigger</span>
971
+ <p>
972
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
973
+ </p>
974
+ <p>
975
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
976
+ </p>
977
+ <p>
978
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
979
+ </p>
980
+ <p>
981
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
982
+ </p>
983
+ </auro-accordion>
984
+ <auro-accordion>
985
+ <span slot="trigger">Trigger</span>
986
+ <p>
987
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
988
+ </p>
989
+ <p>
990
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
991
+ </p>
992
+ <p>
993
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
994
+ </p>
995
+ <p>
996
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
997
+ </p>
998
+ </auro-accordion>
999
+ </auro-accordion-group>
1000
+ <!-- AURO-GENERATED-CONTENT:END -->
1001
+ </div>
1002
+ <auro-accordion alignRight>
1003
+ <span slot="trigger">See code</span>
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 -->
1006
+
1007
+ ```html
1008
+ <auro-accordion-group variant="lg">
1009
+ <auro-accordion>
1010
+ <span slot="trigger">Trigger</span>
1011
+ <p>
1012
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1013
+ </p>
1014
+ <p>
1015
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
1016
+ </p>
1017
+ <p>
1018
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
1019
+ </p>
1020
+ <p>
1021
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1022
+ </p>
1023
+ </auro-accordion>
1024
+ <auro-accordion>
1025
+ <span slot="trigger">Trigger</span>
1026
+ <p>
1027
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1028
+ </p>
1029
+ <p>
1030
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
1031
+ </p>
1032
+ <p>
1033
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
1034
+ </p>
1035
+ <p>
1036
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1037
+ </p>
1038
+ </auro-accordion>
1039
+ <auro-accordion>
1040
+ <span slot="trigger">Trigger</span>
1041
+ <p>
1042
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1043
+ </p>
1044
+ <p>
1045
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
1046
+ </p>
1047
+ <p>
1048
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
1049
+ </p>
1050
+ <p>
1051
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1052
+ </p>
1053
+ </auro-accordion>
1054
+ </auro-accordion-group>
1055
+ ```
1056
+ <!-- AURO-GENERATED-CONTENT:END -->
1057
+ </auro-accordion>
1058
+
1059
+ ### Small Variant
1060
+
1061
+ Using the `variant="sm"` attribute will cause the size of all accordion triggers in the group to render smaller.
1062
+
1063
+ <div class="exampleWrapper">
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">
1067
+ <auro-accordion>
1068
+ <span slot="trigger">Trigger</span>
1069
+ <p>
1070
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1071
+ </p>
1072
+ <p>
1073
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
1074
+ </p>
1075
+ <p>
1076
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
1077
+ </p>
1078
+ <p>
1079
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1080
+ </p>
1081
+ </auro-accordion>
1082
+ <auro-accordion>
1083
+ <span slot="trigger">Trigger</span>
1084
+ <p>
1085
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1086
+ </p>
1087
+ <p>
1088
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
1089
+ </p>
1090
+ <p>
1091
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
1092
+ </p>
1093
+ <p>
1094
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1095
+ </p>
1096
+ </auro-accordion>
1097
+ <auro-accordion>
1098
+ <span slot="trigger">Trigger</span>
1099
+ <p>
1100
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1101
+ </p>
1102
+ <p>
1103
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
1104
+ </p>
1105
+ <p>
1106
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
1107
+ </p>
1108
+ <p>
1109
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1110
+ </p>
1111
+ </auro-accordion>
1112
+ </auro-accordion-group>
1113
+ <!-- AURO-GENERATED-CONTENT:END -->
1114
+ </div>
1115
+ <auro-accordion alignRight>
1116
+ <span slot="trigger">See code</span>
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 -->
1119
+
1120
+ ```html
1121
+ <auro-accordion-group variant="sm">
1122
+ <auro-accordion>
1123
+ <span slot="trigger">Trigger</span>
1124
+ <p>
1125
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1126
+ </p>
1127
+ <p>
1128
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
1129
+ </p>
1130
+ <p>
1131
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
1132
+ </p>
1133
+ <p>
1134
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1135
+ </p>
1136
+ </auro-accordion>
1137
+ <auro-accordion>
1138
+ <span slot="trigger">Trigger</span>
1139
+ <p>
1140
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1141
+ </p>
1142
+ <p>
1143
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
1144
+ </p>
1145
+ <p>
1146
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
1147
+ </p>
1148
+ <p>
1149
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1150
+ </p>
1151
+ </auro-accordion>
1152
+ <auro-accordion>
1153
+ <span slot="trigger">Trigger</span>
1154
+ <p>
1155
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1156
+ </p>
1157
+ <p>
1158
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
1159
+ </p>
1160
+ <p>
1161
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
1162
+ </p>
1163
+ <p>
1164
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1165
+ </p>
1166
+ </auro-accordion>
1167
+ </auro-accordion-group>
1168
+ ```
1169
+ <!-- AURO-GENERATED-CONTENT:END -->
1170
+ </auro-accordion>
1171
+
450
1172
  ## Restyle Component with CSS Variables
451
1173
 
452
1174
  The component may be restyled by changing the values of the following token(s).