@aurodesignsystem/auro-accordion 4.2.1 → 4.3.0

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 (21) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +12 -12
  3. package/coverage/lcov-report/auro-accordion-group.js.html +1 -1
  4. package/coverage/lcov-report/auro-accordion.js.html +18 -12
  5. package/coverage/lcov-report/color-css.js.html +1 -1
  6. package/coverage/lcov-report/iconVersion.js.html +1 -1
  7. package/coverage/lcov-report/index.html +9 -9
  8. package/coverage/lcov-report/style-css.js.html +2 -2
  9. package/coverage/lcov-report/tokens-css.js.html +1 -1
  10. package/coverage/lcov.info +8 -5
  11. package/demo/api.md +50 -50
  12. package/demo/api.min.js +272 -20
  13. package/demo/index.md +12 -12
  14. package/demo/index.min.js +272 -20
  15. package/dist/auro-accordion.d.ts.map +1 -1
  16. package/dist/auro-accordion__bundled.js +272 -20
  17. package/package.json +2 -2
  18. package/src/auro-accordion.js +8 -6
  19. package/src/style-css.js +1 -1
  20. package/src/style.css +1 -2
  21. package/src/style.scss +1 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # Semantic Release Automated Changelog
2
2
 
3
+ # [4.3.0](https://github.com/AlaskaAirlines/auro-accordion/compare/v4.2.2...v4.3.0) (2024-11-19)
4
+
5
+
6
+ ### Features
7
+
8
+ * update auro-library to 3.0.1 ([cf0c26d](https://github.com/AlaskaAirlines/auro-accordion/commit/cf0c26d65388bb7e5e46b47197c6b64f8633809e))
9
+
10
+
11
+ ### Performance Improvements
12
+
13
+ * update library to 3.0.2 ([54824fd](https://github.com/AlaskaAirlines/auro-accordion/commit/54824fdf8ec420a6ac0960b08817868508c9a79b))
14
+
15
+ ## [4.2.2](https://github.com/AlaskaAirlines/auro-accordion/compare/v4.2.1...v4.2.2) (2024-11-14)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * restore chevron none and right layout [#144](https://github.com/AlaskaAirlines/auro-accordion/issues/144) ([7e286d6](https://github.com/AlaskaAirlines/auro-accordion/commit/7e286d646b5e40a2c9d6fc0ea5f42373859790ba))
21
+
3
22
  ## [4.2.1](https://github.com/AlaskaAirlines/auro-accordion/compare/v4.2.0...v4.2.1) (2024-11-05)
4
23
 
5
24
 
package/README.md CHANGED
@@ -4,7 +4,7 @@ The README.md file is a compiled document. No edits should be made directly to t
4
4
  README.md is created by running `npm run build:docs`.
5
5
 
6
6
  This file is generated based on a template fetched from
7
- `https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README.md`
7
+ `https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_updated_paths.md`
8
8
  and copied to `./componentDocs/README.md` each time the the docs are compiled.
9
9
 
10
10
  The following sections are editable by making changes to the following files:
@@ -19,12 +19,12 @@ The following sections are editable by making changes to the following files:
19
19
 
20
20
  # Accordion
21
21
 
22
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
23
- <!-- The below content is automatically added from ./../docs/partials/description.md -->
22
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
23
+ <!-- The below content is automatically added from ./docs/partials/description.md -->
24
24
  `<auro-accordion>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of toggling the visibility of large content section by clicking on a smaller trigger element.
25
25
  <!-- AURO-GENERATED-CONTENT:END -->
26
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/readmeAddlInfo.md) -->
27
- <!-- The below content is automatically added from ./../docs/partials/readmeAddlInfo.md -->
26
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
27
+ <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
28
28
 
29
29
  ## Transitioning from v1.x to v3.x
30
30
 
@@ -88,8 +88,8 @@ import "@aurodesignsystem/auro-accordion";
88
88
 
89
89
  <!-- AURO-GENERATED-CONTENT:END -->
90
90
  **Reference component in HTML**
91
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
92
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
91
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
92
+ <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
93
93
 
94
94
  ```html
95
95
  <auro-accordion>
@@ -126,15 +126,15 @@ In cases where the project is not able to process JS assets, there are pre-proce
126
126
  ```html
127
127
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.2/dist/tokens/CSSCustomProperties.css" />
128
128
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
129
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@4.2.1/dist/auro-accordion__bundled.js" type="module"></script>
129
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@4.3.0/dist/auro-accordion__bundled.js" type="module"></script>
130
130
  ```
131
131
 
132
132
  <!-- AURO-GENERATED-CONTENT:END -->
133
133
 
134
134
  ## auro-accordion use cases
135
135
 
136
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
137
- <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
136
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
137
+ <!-- The below content is automatically added from ./docs/partials/useCases.md -->
138
138
  The `<auro-accordion>` element should be used in situations where users may:
139
139
 
140
140
  - Hide/show long sub-content based on headline trigger
@@ -145,8 +145,8 @@ The `<auro-accordion>` element should be used in situations where users may:
145
145
 
146
146
  ### Default auro-accordion
147
147
 
148
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
149
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
148
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
149
+ <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
150
150
 
151
151
  ```html
152
152
  <auro-accordion>
package/coverage/lcov-report/auro-accordion-group.js.html CHANGED
@@ -457,7 +457,7 @@ export class AuroAccordionGroup extends LitElement {
457
457
  <div class='footer quiet pad2 space-top1 center small'>
458
458
  Code coverage generated by
459
459
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
460
- at 2024-11-05T19:57:04.388Z
460
+ at 2024-11-19T17:20:49.117Z
461
461
  </div>
462
462
  <script src="prettify.js"></script>
463
463
  <script>
package/coverage/lcov-report/auro-accordion.js.html CHANGED
@@ -25,14 +25,14 @@
25
25
  <div class='fl pad1y space-right2'>
26
26
  <span class="strong">100% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>191/191</span>
28
+ <span class='fraction'>193/193</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">100% </span>
33
+ <span class="strong">90.9% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>10/10</span>
35
+ <span class='fraction'>10/11</span>
36
36
  </div>
37
37
 
38
38
 
@@ -46,7 +46,7 @@
46
46
  <div class='fl pad1y space-right2'>
47
47
  <span class="strong">100% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>191/191</span>
49
+ <span class='fraction'>193/193</span>
50
50
  </div>
51
51
 
52
52
 
@@ -254,7 +254,9 @@
254
254
  <a name='L189'></a><a href='#L189'>189</a>
255
255
  <a name='L190'></a><a href='#L190'>190</a>
256
256
  <a name='L191'></a><a href='#L191'>191</a>
257
- <a name='L192'></a><a href='#L192'>192</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">2x</span>
257
+ <a name='L192'></a><a href='#L192'>192</a>
258
+ <a name='L193'></a><a href='#L193'>193</a>
259
+ <a name='L194'></a><a href='#L194'>194</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">2x</span>
258
260
  <span class="cline-any cline-yes">2x</span>
259
261
  <span class="cline-any cline-yes">2x</span>
260
262
  <span class="cline-any cline-yes">2x</span>
@@ -444,6 +446,8 @@
444
446
  <span class="cline-any cline-yes">23x</span>
445
447
  <span class="cline-any cline-yes">23x</span>
446
448
  <span class="cline-any cline-yes">23x</span>
449
+ <span class="cline-any cline-yes">23x</span>
450
+ <span class="cline-any cline-yes">23x</span>
447
451
  <span class="cline-any cline-yes">2x</span>
448
452
  <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
449
453
  // See LICENSE in the project root for license information.
@@ -619,12 +623,14 @@ export class AuroAccordion extends LitElement {
619
623
  aria-expanded="${this.expanded}"
620
624
  @click="${this.toggle}"
621
625
  part="trigger"&gt;
622
- &lt;${this.iconTag} slot="icon" customSvg customColor ?hidden="${!this.expanded}"&gt;
623
- ${this.generateIconHtml(chevronUp.svg)}
624
- &lt;/${this.iconTag}&gt;
625
- &lt;${this.iconTag} slot="icon" customSvg customColor ?hidden="${this.expanded}"&gt;
626
- ${this.generateIconHtml(chevronDown.svg)}
627
- &lt;/${this.iconTag}&gt;
626
+ ${this.chevron === 'none' <span class="branch-0 cbranch-no" title="branch not covered" >? undefined </span>: html`
627
+ &lt;${this.iconTag} slot="icon" customSvg customColor ?hidden="${!this.expanded}"&gt;
628
+ ${this.generateIconHtml(chevronUp.svg)}
629
+ &lt;/${this.iconTag}&gt;
630
+ &lt;${this.iconTag} slot="icon" customSvg customColor ?hidden="${this.expanded}"&gt;
631
+ ${this.generateIconHtml(chevronDown.svg)}
632
+ &lt;/${this.iconTag}&gt;
633
+ `}
628
634
  &lt;slot name="trigger" part="triggerSlot"&gt;&lt;/slot&gt;
629
635
  &lt;/auro-accordion-button&gt;
630
636
  &lt;div class="content" id="accordionContent" aria-labelledby="accordionTrigger" inert="${!this.expanded || nothing}" part="content"&gt;
@@ -643,7 +649,7 @@ export class AuroAccordion extends LitElement {
643
649
  <div class='footer quiet pad2 space-top1 center small'>
644
650
  Code coverage generated by
645
651
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
646
- at 2024-11-05T19:57:04.388Z
652
+ at 2024-11-19T17:20:49.117Z
647
653
  </div>
648
654
  <script src="prettify.js"></script>
649
655
  <script>
package/coverage/lcov-report/color-css.js.html CHANGED
@@ -76,7 +76,7 @@ export default css`:host .trigger{color:var(--ds-auro-accordion-trigger-color);b
76
76
  <div class='footer quiet pad2 space-top1 center small'>
77
77
  Code coverage generated by
78
78
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
79
- at 2024-11-05T19:57:04.388Z
79
+ at 2024-11-19T17:20:49.117Z
80
80
  </div>
81
81
  <script src="prettify.js"></script>
82
82
  <script>
package/coverage/lcov-report/iconVersion.js.html CHANGED
@@ -70,7 +70,7 @@
70
70
  <div class='footer quiet pad2 space-top1 center small'>
71
71
  Code coverage generated by
72
72
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
73
- at 2024-11-05T19:57:04.388Z
73
+ at 2024-11-19T17:20:49.117Z
74
74
  </div>
75
75
  <script src="prettify.js"></script>
76
76
  <script>
package/coverage/lcov-report/index.html CHANGED
@@ -25,14 +25,14 @@
25
25
  <div class='fl pad1y space-right2'>
26
26
  <span class="strong">100% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>327/327</span>
28
+ <span class='fraction'>329/329</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">100% </span>
33
+ <span class="strong">97.05% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>33/33</span>
35
+ <span class='fraction'>33/34</span>
36
36
  </div>
37
37
 
38
38
 
@@ -46,7 +46,7 @@
46
46
  <div class='fl pad1y space-right2'>
47
47
  <span class="strong">100% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>327/327</span>
49
+ <span class='fraction'>329/329</span>
50
50
  </div>
51
51
 
52
52
 
@@ -99,13 +99,13 @@
99
99
  <div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
100
100
  </td>
101
101
  <td data-value="100" class="pct high">100%</td>
102
- <td data-value="191" class="abs high">191/191</td>
103
- <td data-value="100" class="pct high">100%</td>
104
- <td data-value="10" class="abs high">10/10</td>
102
+ <td data-value="193" class="abs high">193/193</td>
103
+ <td data-value="90.9" class="pct high">90.9%</td>
104
+ <td data-value="11" class="abs high">10/11</td>
105
105
  <td data-value="100" class="pct high">100%</td>
106
106
  <td data-value="8" class="abs high">8/8</td>
107
107
  <td data-value="100" class="pct high">100%</td>
108
- <td data-value="191" class="abs high">191/191</td>
108
+ <td data-value="193" class="abs high">193/193</td>
109
109
  </tr>
110
110
 
111
111
  <tr>
@@ -176,7 +176,7 @@
176
176
  <div class='footer quiet pad2 space-top1 center small'>
177
177
  Code coverage generated by
178
178
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
179
- at 2024-11-05T19:57:04.388Z
179
+ at 2024-11-19T17:20:49.117Z
180
180
  </div>
181
181
  <script src="prettify.js"></script>
182
182
  <script>
package/coverage/lcov-report/style-css.js.html CHANGED
@@ -68,7 +68,7 @@
68
68
  <a name='L3'></a><a href='#L3'>3</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">2x</span>
69
69
  <span class="cline-any cline-yes">2x</span>
70
70
  <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { css } from 'lit';
71
- export default css`:host{interpolate-size:allow-keywords}:host .trigger{position:relative;cursor:pointer;display:flex;flex-direction:row;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem)}:host .trigger:hover{text-decoration:underline}:host ::slotted([slot=trigger]){padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);font-size:var(--ds-text-heading-300-size, 1.125rem)}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300,$ds-size-300)}:host [auro-icon][hidden]{display:none}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height;font-size:var(--ds-text-body-size-default, 1rem)}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400, 2rem);padding-bottom:var(--ds-size-300, 1.5rem);padding-right:var(--ds-size-200, 1rem)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-50, 0.25rem)}:host([alignRight]) .componentWrapper{display:flex;flex-direction:column;align-items:flex-end}:host([fluid]) .trigger{width:100%}:host([grouped]) .componentWrapper{border-bottom-width:1px;border-bottom-style:solid}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}:host([expanded]) .content{height:auto}:host([emphasis]) .trigger{border-style:solid;border-width:1px;border-left-width:2px;padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .trigger:before{display:block;position:absolute;top:-1px;left:-2px;width:1px;height:calc(100% + 2px);content:"";border-left-style:solid;border-left-width:2px}:host([emphasis]) .trigger:focus{border-left-width:1px;margin-left:1px}:host([emphasis]) .content{border-left-width:2px;border-left-style:solid;padding:unset}:host([emphasis]) .contentWrapper{padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .iconWrapper{padding-right:var(--ds-size-200, 1rem)}:host([emphasis]:not([expanded]):hover) .trigger{text-decoration:unset}:host([variant=sm]) ::slotted([slot=trigger]){font-size:var(--ds-text-body-size-default, 1rem)}:host([variant=lg]) ::slotted([slot=trigger]){font-size:var(--ds-text-heading-400-size, 1.25rem)}:host([chevron=none]) ::slotted([slot=trigger]),:host([chevron=none]) .contentWrapper{padding-left:unset}`;
71
+ export default css`:host{interpolate-size:allow-keywords}:host .trigger{position:relative;cursor:pointer;display:inline-block;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem)}:host .trigger:hover{text-decoration:underline}:host ::slotted([slot=trigger]){padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);font-size:var(--ds-text-heading-300-size, 1.125rem)}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300,$ds-size-300)}:host [auro-icon][hidden]{display:none}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height;font-size:var(--ds-text-body-size-default, 1rem)}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400, 2rem);padding-bottom:var(--ds-size-300, 1.5rem);padding-right:var(--ds-size-200, 1rem)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-50, 0.25rem)}:host([alignRight]) .componentWrapper{display:flex;flex-direction:column;align-items:flex-end}:host([fluid]) .trigger{width:100%}:host([grouped]) .componentWrapper{border-bottom-width:1px;border-bottom-style:solid}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}:host([expanded]) .content{height:auto}:host([emphasis]) .trigger{border-style:solid;border-width:1px;border-left-width:2px;padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .trigger:before{display:block;position:absolute;top:-1px;left:-2px;width:1px;height:calc(100% + 2px);content:"";border-left-style:solid;border-left-width:2px}:host([emphasis]) .trigger:focus{border-left-width:1px;margin-left:1px}:host([emphasis]) .content{border-left-width:2px;border-left-style:solid;padding:unset}:host([emphasis]) .contentWrapper{padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .iconWrapper{padding-right:var(--ds-size-200, 1rem)}:host([emphasis]:not([expanded]):hover) .trigger{text-decoration:unset}:host([variant=sm]) ::slotted([slot=trigger]){font-size:var(--ds-text-body-size-default, 1rem)}:host([variant=lg]) ::slotted([slot=trigger]){font-size:var(--ds-text-heading-400-size, 1.25rem)}:host([chevron=none]) ::slotted([slot=trigger]),:host([chevron=none]) .contentWrapper{padding-left:unset}`;
72
72
  &nbsp;</pre></td></tr></table></pre>
73
73
 
74
74
  <div class='push'></div><!-- for sticky footer -->
@@ -76,7 +76,7 @@ export default css`:host{interpolate-size:allow-keywords}:host .trigger{position
76
76
  <div class='footer quiet pad2 space-top1 center small'>
77
77
  Code coverage generated by
78
78
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
79
- at 2024-11-05T19:57:04.388Z
79
+ at 2024-11-19T17:20:49.117Z
80
80
  </div>
81
81
  <script src="prettify.js"></script>
82
82
  <script>
package/coverage/lcov-report/tokens-css.js.html CHANGED
@@ -76,7 +76,7 @@ export default css`:host{--ds-auro-accordion-content-border-color: transparent;-
76
76
  <div class='footer quiet pad2 space-top1 center small'>
77
77
  Code coverage generated by
78
78
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
79
- at 2024-11-05T19:57:04.388Z
79
+ at 2024-11-19T17:20:49.117Z
80
80
  </div>
81
81
  <script src="prettify.js"></script>
82
82
  <script>
package/coverage/lcov.info CHANGED
@@ -381,9 +381,11 @@ DA:187,23
381
381
  DA:188,23
382
382
  DA:189,23
383
383
  DA:190,23
384
- DA:191,2
385
- LF:191
386
- LH:191
384
+ DA:191,23
385
+ DA:192,23
386
+ DA:193,2
387
+ LF:193
388
+ LH:193
387
389
  BRDA:1,0,0,2
388
390
  BRDA:49,1,0,10
389
391
  BRDA:70,2,0,2
@@ -393,8 +395,9 @@ BRDA:121,5,0,10
393
395
  BRDA:132,6,0,46
394
396
  BRDA:144,7,0,4
395
397
  BRDA:157,8,0,23
396
- BRDA:183,9,0,7
397
- BRF:10
398
+ BRDA:175,9,0,0
399
+ BRDA:185,10,0,7
400
+ BRF:11
398
401
  BRH:10
399
402
  end_of_record
400
403
  TN:
package/demo/api.md CHANGED
@@ -1,5 +1,5 @@
1
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../api.md) -->
2
- <!-- The below content is automatically added from ./../api.md -->
1
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
2
+ <!-- The below content is automatically added from ./../docs/api.md -->
3
3
 
4
4
  # auro-accordion
5
5
 
@@ -51,8 +51,8 @@ Use auro-accordion-group if you want to have auto closing accordion components w
51
51
  ### Basic
52
52
 
53
53
  <div class="exampleWrapper">
54
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
55
- <!-- The below content is automatically added from ./../../apiExamples/basic.html -->
54
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
55
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
56
56
  <auro-accordion>
57
57
  <span slot="trigger">Trigger</span>
58
58
  <p>
@@ -72,8 +72,8 @@ Use auro-accordion-group if you want to have auto closing accordion components w
72
72
  </div>
73
73
  <auro-accordion alignRight>
74
74
  <span slot="trigger">See code</span>
75
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
76
- <!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->
75
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
76
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
77
77
 
78
78
  ```html
79
79
  <auro-accordion>
@@ -95,8 +95,8 @@ Use auro-accordion-group if you want to have auto closing accordion components w
95
95
  <!-- AURO-GENERATED-CONTENT:END -->
96
96
  </auro-accordion>
97
97
  <div class="exampleWrapper">
98
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/accordionGroup.html) -->
99
- <!-- The below content is automatically added from ./../../apiExamples/accordionGroup.html -->
98
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordionGroup.html) -->
99
+ <!-- The below content is automatically added from ./../apiExamples/accordionGroup.html -->
100
100
  <auro-accordion-group>
101
101
  <auro-accordion>
102
102
  <span slot="trigger">Trigger</span>
@@ -148,8 +148,8 @@ Use auro-accordion-group if you want to have auto closing accordion components w
148
148
  </div>
149
149
  <auro-accordion alignRight>
150
150
  <span slot="trigger">See code</span>
151
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/accordionGroup.html) -->
152
- <!-- The below code snippet is automatically added from ./../../apiExamples/accordionGroup.html -->
151
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordionGroup.html) -->
152
+ <!-- The below code snippet is automatically added from ./../apiExamples/accordionGroup.html -->
153
153
 
154
154
  ```html
155
155
  <auro-accordion-group>
@@ -210,8 +210,8 @@ Use auro-accordion-group if you want to have auto closing accordion components w
210
210
  The chevron icon within the trigger of the `auro-accordion` will not render when `chevron="none"` is present on the element.
211
211
 
212
212
  <div class="exampleWrapper">
213
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/chevronNone.html) -->
214
- <!-- The below content is automatically added from ./../../apiExamples/chevronNone.html -->
213
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevronNone.html) -->
214
+ <!-- The below content is automatically added from ./../apiExamples/chevronNone.html -->
215
215
  <auro-accordion chevron="none">
216
216
  <span slot="trigger">Trigger</span>
217
217
  <p>
@@ -231,8 +231,8 @@ The chevron icon within the trigger of the `auro-accordion` will not render when
231
231
  </div>
232
232
  <auro-accordion alignRight>
233
233
  <span slot="trigger">See code</span>
234
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/chevronNone.html) -->
235
- <!-- The below code snippet is automatically added from ./../../apiExamples/chevronNone.html -->
234
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevronNone.html) -->
235
+ <!-- The below code snippet is automatically added from ./../apiExamples/chevronNone.html -->
236
236
 
237
237
  ```html
238
238
  <auro-accordion chevron="none">
@@ -259,8 +259,8 @@ The chevron icon within the trigger of the `auro-accordion` will not render when
259
259
  Using the `chevron="right"` will cause the chevron to appear on the right side of the accordion label.
260
260
 
261
261
  <div class="exampleWrapper">
262
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/chevronRight.html) -->
263
- <!-- The below content is automatically added from ./../../apiExamples/chevronRight.html -->
262
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevronRight.html) -->
263
+ <!-- The below content is automatically added from ./../apiExamples/chevronRight.html -->
264
264
  <auro-accordion chevron="right">
265
265
  <span slot="trigger">Trigger</span>
266
266
  <p>
@@ -280,8 +280,8 @@ Using the `chevron="right"` will cause the chevron to appear on the right side o
280
280
  </div>
281
281
  <auro-accordion alignRight chevron>
282
282
  <span slot="trigger">See code</span>
283
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/chevronRight.html) -->
284
- <!-- The below code snippet is automatically added from ./../../apiExamples/chevronRight.html -->
283
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevronRight.html) -->
284
+ <!-- The below code snippet is automatically added from ./../apiExamples/chevronRight.html -->
285
285
 
286
286
  ```html
287
287
  <auro-accordion chevron="right">
@@ -308,8 +308,8 @@ Using the `chevron="right"` will cause the chevron to appear on the right side o
308
308
  Using the `alignRight` attribute will cause the trigger to align to the right edge of the accordion.
309
309
 
310
310
  <div class="exampleWrapper">
311
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/alignRight.html) -->
312
- <!-- The below content is automatically added from ./../../apiExamples/alignRight.html -->
311
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/alignRight.html) -->
312
+ <!-- The below content is automatically added from ./../apiExamples/alignRight.html -->
313
313
  <auro-accordion alignRight>
314
314
  <span slot="trigger">Trigger</span>
315
315
  <p>
@@ -329,8 +329,8 @@ Using the `alignRight` attribute will cause the trigger to align to the right ed
329
329
  </div>
330
330
  <auro-accordion alignRight>
331
331
  <span slot="trigger">See code</span>
332
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/alignRight.html) -->
333
- <!-- The below code snippet is automatically added from ./../../apiExamples/alignRight.html -->
332
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/alignRight.html) -->
333
+ <!-- The below code snippet is automatically added from ./../apiExamples/alignRight.html -->
334
334
 
335
335
  ```html
336
336
  <auro-accordion alignRight>
@@ -357,8 +357,8 @@ Using the `alignRight` attribute will cause the trigger to align to the right ed
357
357
  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.
358
358
 
359
359
  <div class="exampleWrapper">
360
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/alignChevronRight.html) -->
361
- <!-- The below content is automatically added from ./../../apiExamples/alignChevronRight.html -->
360
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/alignChevronRight.html) -->
361
+ <!-- The below content is automatically added from ./../apiExamples/alignChevronRight.html -->
362
362
  <auro-accordion chevron="right" alignRight>
363
363
  <span slot="trigger">Trigger</span>
364
364
  <p>
@@ -378,8 +378,8 @@ Using the `alignRight` attribute in conjuction with the `chevron="right"` attrib
378
378
  </div>
379
379
  <auro-accordion alignRight>
380
380
  <span slot="trigger">See code</span>
381
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/alignChevronRight.html) -->
382
- <!-- The below code snippet is automatically added from ./../../apiExamples/alignChevronRight.html -->
381
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/alignChevronRight.html) -->
382
+ <!-- The below code snippet is automatically added from ./../apiExamples/alignChevronRight.html -->
383
383
 
384
384
  ```html
385
385
  <auro-accordion chevron="right" alignRight>
@@ -406,8 +406,8 @@ Using the `alignRight` attribute in conjuction with the `chevron="right"` attrib
406
406
  The accordion can be programatically expanded or collapsed by setting the `expanded` attribute to `true` or `false`.
407
407
 
408
408
  <div class="exampleWrapper">
409
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/expanded.html) -->
410
- <!-- The below content is automatically added from ./../../apiExamples/expanded.html -->
409
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/expanded.html) -->
410
+ <!-- The below content is automatically added from ./../apiExamples/expanded.html -->
411
411
  <auro-button id="auroaccordionExpandedExampleBtnTrue">Set expanded = `true`</auro-button>
412
412
  <auro-button id="auroaccordionExpandedExampleBtnFalse">Set expanded = `false`</auro-button>
413
413
  <auro-accordion id="auroaccordionExpandedExample">
@@ -429,8 +429,8 @@ The accordion can be programatically expanded or collapsed by setting the `expan
429
429
  </div>
430
430
  <auro-accordion alignRight>
431
431
  <span slot="trigger">See code</span>
432
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/expanded.html) -->
433
- <!-- The below code snippet is automatically added from ./../../apiExamples/expanded.html -->
432
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/expanded.html) -->
433
+ <!-- The below code snippet is automatically added from ./../apiExamples/expanded.html -->
434
434
 
435
435
  ```html
436
436
  <auro-button id="auroaccordionExpandedExampleBtnTrue">Set expanded = `true`</auro-button>
@@ -452,8 +452,8 @@ The accordion can be programatically expanded or collapsed by setting the `expan
452
452
  </auro-accordion>
453
453
  ```
454
454
  <!-- AURO-GENERATED-CONTENT:END -->
455
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/expanded.js) -->
456
- <!-- The below code snippet is automatically added from ./../../apiExamples/expanded.js -->
455
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/expanded.js) -->
456
+ <!-- The below code snippet is automatically added from ./../apiExamples/expanded.js -->
457
457
 
458
458
  ```js
459
459
  export function expandedExample() {
@@ -478,8 +478,8 @@ export function expandedExample() {
478
478
  Using the `variant="sm"` attribute will cause the size of the accordion trigger to render smaller.
479
479
 
480
480
  <div class="exampleWrapper">
481
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/accordionGroupSm.html) -->
482
- <!-- The below content is automatically added from ./../../apiExamples/accordionGroupSm.html -->
481
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordionGroupSm.html) -->
482
+ <!-- The below content is automatically added from ./../apiExamples/accordionGroupSm.html -->
483
483
  <auro-accordion-group variant="sm">
484
484
  <auro-accordion>
485
485
  <span slot="trigger">Trigger</span>
@@ -531,8 +531,8 @@ Using the `variant="sm"` attribute will cause the size of the accordion trigger
531
531
  </div>
532
532
  <auro-accordion alignRight>
533
533
  <span slot="trigger">See code</span>
534
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/accordionGroupSm.html) -->
535
- <!-- The below code snippet is automatically added from ./../../apiExamples/accordionGroupSm.html -->
534
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordionGroupSm.html) -->
535
+ <!-- The below code snippet is automatically added from ./../apiExamples/accordionGroupSm.html -->
536
536
 
537
537
  ```html
538
538
  <auro-accordion-group variant="sm">
@@ -591,8 +591,8 @@ Using the `variant="sm"` attribute will cause the size of the accordion trigger
591
591
  Using the `variant="lg"` attribute will cause the size of the accordion trigger to render larger.
592
592
 
593
593
  <div class="exampleWrapper">
594
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/accordionGroupLg.html) -->
595
- <!-- The below content is automatically added from ./../../apiExamples/accordionGroupLg.html -->
594
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordionGroupLg.html) -->
595
+ <!-- The below content is automatically added from ./../apiExamples/accordionGroupLg.html -->
596
596
  <auro-accordion-group variant="lg">
597
597
  <auro-accordion>
598
598
  <span slot="trigger">Trigger</span>
@@ -644,8 +644,8 @@ Using the `variant="lg"` attribute will cause the size of the accordion trigger
644
644
  </div>
645
645
  <auro-accordion alignRight>
646
646
  <span slot="trigger">See code</span>
647
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/accordionGroupLg.html) -->
648
- <!-- The below code snippet is automatically added from ./../../apiExamples/accordionGroupLg.html -->
647
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordionGroupLg.html) -->
648
+ <!-- The below code snippet is automatically added from ./../apiExamples/accordionGroupLg.html -->
649
649
 
650
650
  ```html
651
651
  <auro-accordion-group variant="lg">
@@ -704,8 +704,8 @@ Using the `variant="lg"` attribute will cause the size of the accordion trigger
704
704
  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.
705
705
 
706
706
  <div class="exampleWrapper">
707
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/emphasis.html) -->
708
- <!-- The below content is automatically added from ./../../apiExamples/emphasis.html -->
707
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasis.html) -->
708
+ <!-- The below content is automatically added from ./../apiExamples/emphasis.html -->
709
709
  <auro-accordion-group emphasis>
710
710
  <auro-accordion>
711
711
  <span slot="trigger">Trigger</span>
@@ -757,8 +757,8 @@ Use the `emphasis` attribute to apply border highlights to the `auro-accordion`
757
757
  </div>
758
758
  <auro-accordion alignRight>
759
759
  <span slot="trigger">See code</span>
760
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/emphasis.html) -->
761
- <!-- The below code snippet is automatically added from ./../../apiExamples/emphasis.html -->
760
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasis.html) -->
761
+ <!-- The below code snippet is automatically added from ./../apiExamples/emphasis.html -->
762
762
 
763
763
  ```html
764
764
  <auro-accordion-group emphasis>
@@ -817,8 +817,8 @@ Use the `emphasis` attribute to apply border highlights to the `auro-accordion`
817
817
  Using the `noToggleExpanded` attribute will allow for multiple `auro-accordion`'s in an `auro-accordion-group` to be open at the same time.
818
818
 
819
819
  <div class="exampleWrapper">
820
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/noToggleExpanded.html) -->
821
- <!-- The below content is automatically added from ./../../apiExamples/noToggleExpanded.html -->
820
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noToggleExpanded.html) -->
821
+ <!-- The below content is automatically added from ./../apiExamples/noToggleExpanded.html -->
822
822
  <auro-accordion-group noToggleExpanded>
823
823
  <auro-accordion>
824
824
  <span slot="trigger">Trigger</span>
@@ -870,8 +870,8 @@ Using the `noToggleExpanded` attribute will allow for multiple `auro-accordion`'
870
870
  </div>
871
871
  <auro-accordion alignRight>
872
872
  <span slot="trigger">See code</span>
873
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/noToggleExpanded.html) -->
874
- <!-- The below code snippet is automatically added from ./../../apiExamples/noToggleExpanded.html -->
873
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/noToggleExpanded.html) -->
874
+ <!-- The below code snippet is automatically added from ./../apiExamples/noToggleExpanded.html -->
875
875
 
876
876
  ```html
877
877
  <auro-accordion-group noToggleExpanded>
@@ -929,8 +929,8 @@ Using the `noToggleExpanded` attribute will allow for multiple `auro-accordion`'
929
929
 
930
930
  The component may be restyled using the following code sample and changing the values of the following token(s).
931
931
 
932
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
933
- <!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
932
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/tokens.scss) -->
933
+ <!-- The below code snippet is automatically added from ./../src/tokens.scss -->
934
934
 
935
935
  ```scss
936
936
  @import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";