@aurodesignsystem/auro-accordion 4.0.1 → 4.0.2

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 (18) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +1 -1
  3. package/coverage/lcov-report/auro-accordion-group.js.html +1 -1
  4. package/coverage/lcov-report/auro-accordion.js.html +8 -47
  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 +28 -44
  11. package/dist/auro-accordion.d.ts +1 -7
  12. package/dist/auro-accordion.d.ts.map +1 -1
  13. package/dist/auro-accordion__bundled.js +3 -16
  14. package/package.json +1 -1
  15. package/src/auro-accordion.js +2 -15
  16. package/src/style-css.js +1 -1
  17. package/src/style.css +7 -0
  18. package/src/style.scss +8 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Semantic Release Automated Changelog
2
2
 
3
+ ## [4.0.2](https://github.com/AlaskaAirlines/auro-accordion/compare/v4.0.1...v4.0.2) (2024-10-16)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * resize content container when content is dynamically altered [#130](https://github.com/AlaskaAirlines/auro-accordion/issues/130) ([b93842e](https://github.com/AlaskaAirlines/auro-accordion/commit/b93842e0ab634ec1353cb7d7eb4105f452f07e05))
9
+
3
10
  ## [4.0.1](https://github.com/AlaskaAirlines/auro-accordion/compare/v4.0.0...v4.0.1) (2024-10-08)
4
11
 
5
12
 
package/README.md CHANGED
@@ -126,7 +126,7 @@ 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.0.1/dist/auro-accordion__bundled.js" type="module"></script>
129
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@4.0.2/dist/auro-accordion__bundled.js" type="module"></script>
130
130
  ```
131
131
 
132
132
  <!-- AURO-GENERATED-CONTENT:END -->
package/coverage/lcov-report/auro-accordion-group.js.html CHANGED
@@ -436,7 +436,7 @@ if (!customElements.get("auro-accordion-group")) {
436
436
  <div class='footer quiet pad2 space-top1 center small'>
437
437
  Code coverage generated by
438
438
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
439
- at 2024-10-08T16:54:45.303Z
439
+ at 2024-10-16T18:57:46.496Z
440
440
  </div>
441
441
  <script src="prettify.js"></script>
442
442
  <script>
package/coverage/lcov-report/auro-accordion.js.html CHANGED
@@ -25,28 +25,28 @@
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'>197/197</span>
28
+ <span class='fraction'>184/184</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
33
  <span class="strong">100% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>10/10</span>
35
+ <span class='fraction'>9/9</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
40
  <span class="strong">100% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>8/8</span>
42
+ <span class='fraction'>7/7</span>
43
43
  </div>
44
44
 
45
45
 
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'>197/197</span>
49
+ <span class='fraction'>184/184</span>
50
50
  </div>
51
51
 
52
52
 
@@ -247,20 +247,7 @@
247
247
  <a name='L182'></a><a href='#L182'>182</a>
248
248
  <a name='L183'></a><a href='#L183'>183</a>
249
249
  <a name='L184'></a><a href='#L184'>184</a>
250
- <a name='L185'></a><a href='#L185'>185</a>
251
- <a name='L186'></a><a href='#L186'>186</a>
252
- <a name='L187'></a><a href='#L187'>187</a>
253
- <a name='L188'></a><a href='#L188'>188</a>
254
- <a name='L189'></a><a href='#L189'>189</a>
255
- <a name='L190'></a><a href='#L190'>190</a>
256
- <a name='L191'></a><a href='#L191'>191</a>
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>
260
- <a name='L195'></a><a href='#L195'>195</a>
261
- <a name='L196'></a><a href='#L196'>196</a>
262
- <a name='L197'></a><a href='#L197'>197</a>
263
- <a name='L198'></a><a href='#L198'>198</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">2x</span>
250
+ <a name='L185'></a><a href='#L185'>185</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">2x</span>
264
251
  <span class="cline-any cline-yes">2x</span>
265
252
  <span class="cline-any cline-yes">2x</span>
266
253
  <span class="cline-any cline-yes">2x</span>
@@ -405,19 +392,6 @@
405
392
  <span class="cline-any cline-yes">2x</span>
406
393
  <span class="cline-any cline-yes">2x</span>
407
394
  <span class="cline-any cline-yes">2x</span>
408
- <span class="cline-any cline-yes">2x</span>
409
- <span class="cline-any cline-yes">2x</span>
410
- <span class="cline-any cline-yes">2x</span>
411
- <span class="cline-any cline-yes">2x</span>
412
- <span class="cline-any cline-yes">10x</span>
413
- <span class="cline-any cline-yes">10x</span>
414
- <span class="cline-any cline-yes">10x</span>
415
- <span class="cline-any cline-yes">10x</span>
416
- <span class="cline-any cline-yes">10x</span>
417
- <span class="cline-any cline-yes">10x</span>
418
- <span class="cline-any cline-yes">2x</span>
419
- <span class="cline-any cline-yes">2x</span>
420
- <span class="cline-any cline-yes">2x</span>
421
395
  <span class="cline-any cline-yes">23x</span>
422
396
  <span class="cline-any cline-yes">23x</span>
423
397
  <span class="cline-any cline-yes">23x</span>
@@ -500,7 +474,7 @@ import tokensCss from "./tokens-css.js";
500
474
  * @csspart trigger - Apply CSS to trigger element.
501
475
  * @csspart chevron - Apply CSS to chevron icon.
502
476
  * @csspart content - Apply CSS to the accordion content.
503
- * @fires toggleExpanded - Notifies that the accordion has been expanded or closed.
477
+ * @event toggleExpanded - Notifies that the accordion has been expanded or closed.
504
478
  */
505
479
  &nbsp;
506
480
  // build the component class
@@ -599,19 +573,6 @@ export class AuroAccordion extends LitElement {
599
573
  }
600
574
  }));
601
575
  }
602
- &nbsp;
603
- /**
604
- * Used to generate inline style heights of content so it animates correctly.
605
- * @private
606
- * @returns {void}
607
- */
608
- handleContentSlotChanges() {
609
- const content = this.shadowRoot.querySelector(".content");
610
- const container = this.shadowRoot.querySelector(".contentWrapper");
611
- const height = container.offsetHeight;
612
- &nbsp;
613
- content.style.height = `${height}px`;
614
- }
615
576
  &nbsp;
616
577
  // function that renders the HTML and CSS into the scope of the component
617
578
  render() {
@@ -642,7 +603,7 @@ export class AuroAccordion extends LitElement {
642
603
  &lt;/auro-accordion-button&gt;
643
604
  &lt;div class="content" id="accordionContent" aria-labelledby="accordionTrigger" inert="${!this.expanded || nothing}" part="content"&gt;
644
605
  &lt;div class="contentWrapper" part="contentWrapper"&gt;
645
- &lt;slot @slotchange="${this.handleContentSlotChanges}"&gt;&lt;/slot&gt;
606
+ &lt;slot&gt;&lt;/slot&gt;
646
607
  &lt;/div&gt;
647
608
  &lt;/div&gt;
648
609
  &lt;/div&gt;
@@ -661,7 +622,7 @@ if (!customElements.get("auro-accordion")) {
661
622
  <div class='footer quiet pad2 space-top1 center small'>
662
623
  Code coverage generated by
663
624
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
664
- at 2024-10-08T16:54:45.303Z
625
+ at 2024-10-16T18:57:46.496Z
665
626
  </div>
666
627
  <script src="prettify.js"></script>
667
628
  <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-10-08T16:54:45.303Z
79
+ at 2024-10-16T18:57:46.496Z
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-10-08T16:54:45.303Z
73
+ at 2024-10-16T18:57:46.496Z
74
74
  </div>
75
75
  <script src="prettify.js"></script>
76
76
  <script>
package/coverage/lcov-report/index.html CHANGED
@@ -25,28 +25,28 @@
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'>326/326</span>
28
+ <span class='fraction'>313/313</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
33
  <span class="strong">100% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>32/32</span>
35
+ <span class='fraction'>31/31</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
40
  <span class="strong">100% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>15/15</span>
42
+ <span class='fraction'>14/14</span>
43
43
  </div>
44
44
 
45
45
 
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'>326/326</span>
49
+ <span class='fraction'>313/313</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="197" class="abs high">197/197</td>
102
+ <td data-value="184" class="abs high">184/184</td>
103
103
  <td data-value="100" class="pct high">100%</td>
104
- <td data-value="10" class="abs high">10/10</td>
104
+ <td data-value="9" class="abs high">9/9</td>
105
105
  <td data-value="100" class="pct high">100%</td>
106
- <td data-value="8" class="abs high">8/8</td>
106
+ <td data-value="7" class="abs high">7/7</td>
107
107
  <td data-value="100" class="pct high">100%</td>
108
- <td data-value="197" class="abs high">197/197</td>
108
+ <td data-value="184" class="abs high">184/184</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-10-08T16:54:45.303Z
179
+ at 2024-10-16T18:57:46.496Z
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 .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]{height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}: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-width:1px;border-style:solid}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}: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: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]{height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}: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-width:1px;border-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 .trigger{position:relative;cursor:pointer;display:flex;
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-10-08T16:54:45.303Z
79
+ at 2024-10-16T18:57:46.496Z
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-10-08T16:54:45.303Z
79
+ at 2024-10-16T18:57:46.496Z
80
80
  </div>
81
81
  <script src="prettify.js"></script>
82
82
  <script>
package/coverage/lcov.info CHANGED
@@ -169,17 +169,15 @@ FN:101,get styles
169
169
  FN:109,firstUpdated
170
170
  FN:120,generateIconHtml
171
171
  FN:132,toggle
172
- FN:149,handleContentSlotChanges
173
- FN:158,render
174
- FNF:8
175
- FNH:8
172
+ FN:145,render
173
+ FNF:7
174
+ FNH:7
176
175
  FNDA:10,AuroAccordion
177
176
  FNDA:2,get properties
178
177
  FNDA:2,get styles
179
178
  FNDA:10,firstUpdated
180
179
  FNDA:46,generateIconHtml
181
180
  FNDA:4,toggle
182
- FNDA:10,handleContentSlotChanges
183
181
  FNDA:23,render
184
182
  DA:1,2
185
183
  DA:2,2
@@ -326,19 +324,19 @@ DA:142,4
326
324
  DA:143,2
327
325
  DA:144,2
328
326
  DA:145,2
329
- DA:146,2
330
- DA:147,2
331
- DA:148,2
332
- DA:149,2
333
- DA:150,10
334
- DA:151,10
335
- DA:152,10
336
- DA:153,10
337
- DA:154,10
338
- DA:155,10
339
- DA:156,2
340
- DA:157,2
341
- DA:158,2
327
+ DA:146,23
328
+ DA:147,23
329
+ DA:148,23
330
+ DA:149,23
331
+ DA:150,23
332
+ DA:151,23
333
+ DA:152,23
334
+ DA:153,23
335
+ DA:154,23
336
+ DA:155,23
337
+ DA:156,23
338
+ DA:157,23
339
+ DA:158,23
342
340
  DA:159,23
343
341
  DA:160,23
344
342
  DA:161,23
@@ -359,27 +357,14 @@ DA:175,23
359
357
  DA:176,23
360
358
  DA:177,23
361
359
  DA:178,23
362
- DA:179,23
363
- DA:180,23
364
- DA:181,23
365
- DA:182,23
366
- DA:183,23
367
- DA:184,23
368
- DA:185,23
369
- DA:186,23
370
- DA:187,23
371
- DA:188,23
372
- DA:189,23
373
- DA:190,23
374
- DA:191,23
375
- DA:192,2
376
- DA:193,2
377
- DA:194,2
378
- DA:195,2
379
- DA:196,2
380
- DA:197,2
381
- LF:197
382
- LH:197
360
+ DA:179,2
361
+ DA:180,2
362
+ DA:181,2
363
+ DA:182,2
364
+ DA:183,2
365
+ DA:184,2
366
+ LF:184
367
+ LH:184
383
368
  BRDA:1,0,0,2
384
369
  BRDA:49,1,0,10
385
370
  BRDA:70,2,0,2
@@ -387,11 +372,10 @@ BRDA:101,3,0,2
387
372
  BRDA:109,4,0,10
388
373
  BRDA:120,5,0,46
389
374
  BRDA:132,6,0,4
390
- BRDA:149,7,0,10
391
- BRDA:158,8,0,23
392
- BRDA:184,9,0,7
393
- BRF:10
394
- BRH:10
375
+ BRDA:145,7,0,23
376
+ BRDA:171,8,0,7
377
+ BRF:9
378
+ BRH:9
395
379
  end_of_record
396
380
  TN:
397
381
  SF:src/color-css.js
package/dist/auro-accordion.d.ts CHANGED
@@ -14,7 +14,7 @@
14
14
  * @csspart trigger - Apply CSS to trigger element.
15
15
  * @csspart chevron - Apply CSS to chevron icon.
16
16
  * @csspart content - Apply CSS to the accordion content.
17
- * @fires toggleExpanded - Notifies that the accordion has been expanded or closed.
17
+ * @event toggleExpanded - Notifies that the accordion has been expanded or closed.
18
18
  */
19
19
  export class AuroAccordion extends LitElement {
20
20
  static get properties(): {
@@ -65,12 +65,6 @@ export class AuroAccordion extends LitElement {
65
65
  * Toggles the visibility of the accordion content.
66
66
  */
67
67
  toggle(): void;
68
- /**
69
- * Used to generate inline style heights of content so it animates correctly.
70
- * @private
71
- * @returns {void}
72
- */
73
- private handleContentSlotChanges;
74
68
  render(): import("lit-html").TemplateResult;
75
69
  }
76
70
  import { LitElement } from "lit";
package/dist/auro-accordion.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"auro-accordion.d.ts","sourceRoot":"","sources":["../src/auro-accordion.js"],"names":[],"mappings":"AA2BA;;;;;;;;;;;;;;;;;GAiBG;AAGH;IAsBE;;;;;;;;;;;;;;;;;;;;;;;;;MA6BC;IAED,+CAMC;IArDC;;OAEG;IACH,gBAAyE;IAEzE;;OAEG;IACH,qBAAiD;IAEjD,kBAAqB;IA6CvB,qBAGC;IAED;;;;;OAKG;IACH,yBAOC;IAED;;OAEG;IACH,eAUC;IAED;;;;OAIG;IACH,iCAMC;IAGD,4CAiCC;CACF;2BAvLmC,KAAK"}
1
+ {"version":3,"file":"auro-accordion.d.ts","sourceRoot":"","sources":["../src/auro-accordion.js"],"names":[],"mappings":"AA2BA;;;;;;;;;;;;;;;;;GAiBG;AAGH;IAsBE;;;;;;;;;;;;;;;;;;;;;;;;;MA6BC;IAED,+CAMC;IArDC;;OAEG;IACH,gBAAyE;IAEzE;;OAEG;IACH,qBAAiD;IAEjD,kBAAqB;IA6CvB,qBAGC;IAED;;;;;OAKG;IACH,yBAOC;IAED;;OAEG;IACH,eAUC;IAGD,4CAiCC;CACF;2BA1KmC,KAAK"}
package/dist/auro-accordion__bundled.js CHANGED
@@ -510,7 +510,7 @@ var chevronUp = {"role":"img","color":"currentColor","title":"","desc":"Directio
510
510
 
511
511
  var chevronDown = {"role":"img","color":"currentColor","title":"","desc":"Directional indicator; down.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"chevron-down","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"chevron-down__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"chevron-down__desc\">Directional indicator; down.</desc><path d=\"m6.397 9.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 13.939l4.47-4.47a.75.75 0 0 1 .976-.072l.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 15l-.354.354a1 1 0 0 1-1.414 0L10.939 15l-4.47-4.47a.75.75 0 0 1-.072-.976l.073-.084z\"/></svg>"};
512
512
 
513
- var styleCss$1 = i$2`: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]{height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}: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-width:1px;border-style:solid}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}: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}`;
513
+ var styleCss$1 = i$2`: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]{height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}: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-width:1px;border-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}`;
514
514
 
515
515
  var colorCss$2 = i$2`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host(:focus){--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8);--ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-focus-default, #7e7e7e)}:host(:hover){--ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-hover-default, #525252)}:host([grouped]) .componentWrapper{border-color:var(--ds-auro-accordion-group-border-color)}:host([emphasis]) .trigger:before{border-color:var(--ds-auro-accordion-trigger-border-color)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([emphasis]) .content{border-left-color:var(--ds-auro-accordion-content-border-color)}:host([emphasis][expanded]) .trigger:before{--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color: var(--ds-color-border-subtle-default, #f0f7fd)}`;
516
516
 
@@ -537,7 +537,7 @@ var tokensCss$2 = i$2`:host{--ds-auro-accordion-content-border-color: transparen
537
537
  * @csspart trigger - Apply CSS to trigger element.
538
538
  * @csspart chevron - Apply CSS to chevron icon.
539
539
  * @csspart content - Apply CSS to the accordion content.
540
- * @fires toggleExpanded - Notifies that the accordion has been expanded or closed.
540
+ * @event toggleExpanded - Notifies that the accordion has been expanded or closed.
541
541
  */
542
542
 
543
543
  // build the component class
@@ -637,19 +637,6 @@ class AuroAccordion extends h {
637
637
  }));
638
638
  }
639
639
 
640
- /**
641
- * Used to generate inline style heights of content so it animates correctly.
642
- * @private
643
- * @returns {void}
644
- */
645
- handleContentSlotChanges() {
646
- const content = this.shadowRoot.querySelector(".content");
647
- const container = this.shadowRoot.querySelector(".contentWrapper");
648
- const height = container.offsetHeight;
649
-
650
- content.style.height = `${height}px`;
651
- }
652
-
653
640
  // function that renders the HTML and CSS into the scope of the component
654
641
  render() {
655
642
  const buttonClasses = {
@@ -679,7 +666,7 @@ class AuroAccordion extends h {
679
666
  </auro-accordion-button>
680
667
  <div class="content" id="accordionContent" aria-labelledby="accordionTrigger" inert="${!this.expanded || D}" part="content">
681
668
  <div class="contentWrapper" part="contentWrapper">
682
- <slot @slotchange="${this.handleContentSlotChanges}"></slot>
669
+ <slot></slot>
683
670
  </div>
684
671
  </div>
685
672
  </div>
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "================================================================================"
8
8
  ],
9
9
  "name": "@aurodesignsystem/auro-accordion",
10
- "version": "4.0.1",
10
+ "version": "4.0.2",
11
11
  "description": "auro-accordion HTML custom element",
12
12
  "repository": {
13
13
  "type": "git",
package/src/auro-accordion.js CHANGED
@@ -41,7 +41,7 @@ import tokensCss from "./tokens-css.js";
41
41
  * @csspart trigger - Apply CSS to trigger element.
42
42
  * @csspart chevron - Apply CSS to chevron icon.
43
43
  * @csspart content - Apply CSS to the accordion content.
44
- * @fires toggleExpanded - Notifies that the accordion has been expanded or closed.
44
+ * @event toggleExpanded - Notifies that the accordion has been expanded or closed.
45
45
  */
46
46
 
47
47
  // build the component class
@@ -141,19 +141,6 @@ export class AuroAccordion extends LitElement {
141
141
  }));
142
142
  }
143
143
 
144
- /**
145
- * Used to generate inline style heights of content so it animates correctly.
146
- * @private
147
- * @returns {void}
148
- */
149
- handleContentSlotChanges() {
150
- const content = this.shadowRoot.querySelector(".content");
151
- const container = this.shadowRoot.querySelector(".contentWrapper");
152
- const height = container.offsetHeight;
153
-
154
- content.style.height = `${height}px`;
155
- }
156
-
157
144
  // function that renders the HTML and CSS into the scope of the component
158
145
  render() {
159
146
  const buttonClasses = {
@@ -183,7 +170,7 @@ export class AuroAccordion extends LitElement {
183
170
  </auro-accordion-button>
184
171
  <div class="content" id="accordionContent" aria-labelledby="accordionTrigger" inert="${!this.expanded || nothing}" part="content">
185
172
  <div class="contentWrapper" part="contentWrapper">
186
- <slot @slotchange="${this.handleContentSlotChanges}"></slot>
173
+ <slot></slot>
187
174
  </div>
188
175
  </div>
189
176
  </div>
package/src/style-css.js CHANGED
@@ -1,2 +1,2 @@
1
1
  import { css } from 'lit';
2
- export default css`: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]{height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}: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-width:1px;border-style:solid}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}: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}`;
2
+ 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]{height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}: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-width:1px;border-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}`;
package/src/style.css CHANGED
@@ -1,4 +1,7 @@
1
1
  /* stylelint-disable order/properties-order, selector-max-combinators, selector-max-compound-selectors, declaration-empty-line-before, declaration-no-important, no-descending-specificity */
2
+ :host {
3
+ interpolate-size: allow-keywords;
4
+ }
2
5
  :host .trigger {
3
6
  position: relative;
4
7
  cursor: pointer;
@@ -73,6 +76,10 @@
73
76
  height: 0 !important;
74
77
  }
75
78
 
79
+ :host([expanded]) .content {
80
+ height: auto;
81
+ }
82
+
76
83
  :host([emphasis]) .trigger {
77
84
  border-style: solid;
78
85
  border-width: 1px;
package/src/style.scss CHANGED
@@ -9,6 +9,8 @@
9
9
  @import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
10
10
 
11
11
  :host {
12
+ interpolate-size: allow-keywords; // stylelint-disable-line
13
+
12
14
  .trigger {
13
15
  position: relative;
14
16
 
@@ -109,6 +111,12 @@
109
111
  }
110
112
  }
111
113
 
114
+ :host([expanded]) {
115
+ .content {
116
+ height: auto;
117
+ }
118
+ }
119
+
112
120
  :host([emphasis]) {
113
121
  .trigger {
114
122
  border-style: solid;