@aurodesignsystem/auro-accordion 5.2.1 → 5.2.3

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Semantic Release Automated Changelog
 
+## [5.2.3](https://github.com/AlaskaAirlines/auro-accordion/compare/v5.2.2...v5.2.3) (2025-08-15)
+
+
+### Bug Fixes
+
+* update auro-library to latest version ([4bc9a43](https://github.com/AlaskaAirlines/auro-accordion/commit/4bc9a43c3347d438c533e451cf8c5fa8bc72a8f9))
+
+## [5.2.2](https://github.com/AlaskaAirlines/auro-accordion/compare/v5.2.1...v5.2.2) (2025-07-31)
+
+
+### Bug Fixes
+
+* accessibility & aria button state management ([fc9918f](https://github.com/AlaskaAirlines/auro-accordion/commit/fc9918fc72e8904f7456901fbfdc594536efdd08))
+* adding themeable type classes ([8d150db](https://github.com/AlaskaAirlines/auro-accordion/commit/8d150dbf6f6bc36e572b847ba04c655bae0c8814))
+* reduce ternary complexity ([71c7f55](https://github.com/AlaskaAirlines/auro-accordion/commit/71c7f5525f1b695ca30e59aea02fe73ab3b62b9e))
+* remove deprecated icon function ([f6283a2](https://github.com/AlaskaAirlines/auro-accordion/commit/f6283a2f60708d6ffc491dca1b81a51c3c3ae43f))
+* remove disabled text hover decoration ([67d50ac](https://github.com/AlaskaAirlines/auro-accordion/commit/67d50ac8608c884a34381c891472733e03be3d6e))
+* replace generateIconHtml with lit tool ([8d0b7d5](https://github.com/AlaskaAirlines/auro-accordion/commit/8d0b7d58240b9e6d63139b2d8f6df4988a8ff7f5))
+* update docs head content ([ac56191](https://github.com/AlaskaAirlines/auro-accordion/commit/ac5619145c75e9f3efea48de36323de5d33e2fa2))
+* use cdn for button demo ([1b2d537](https://github.com/AlaskaAirlines/auro-accordion/commit/1b2d53737bdd6014f4ceb408fd08c9784d7cef12))
+
 ## [5.2.1](https://github.com/AlaskaAirlines/auro-accordion/compare/v5.2.0...v5.2.1) (2025-05-20)
 
 

package/README.md

@@ -125,7 +125,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@/dist/auro-classic/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@5.2.1/dist/auro-accordion__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@5.2.3/dist/auro-accordion__bundled.js" type="module"></script>
 ```
 
 <!-- AURO-GENERATED-CONTENT:END -->

package/coverage/lcov-report/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">99.55% </span>
+                <span class="strong">99.59% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>446/448</span>
+                <span class='fraction'>494/496</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>48/48</span>
+                <span class='fraction'>62/62</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">95.65% </span>
+                <span class="strong">96.15% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>22/23</span>
+                <span class='fraction'>25/26</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">99.55% </span>
+                <span class="strong">99.59% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>446/448</span>
+                <span class='fraction'>494/496</span>
             </div>
         
             
@@ -79,123 +79,33 @@
 </tr>
 </thead>
 <tbody><tr>
-	<td class="file high" data-value="auro-accordion-button.js"><a href="auro-accordion-button.js.html">auro-accordion-button.js</a></td>
-	<td data-value="95.34" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 95%"></div><div class="cover-empty" style="width: 5%"></div></div>
+	<td class="file high" data-value="src"><a href="src/index.html">src</a></td>
+	<td data-value="99.59" class="pic high">
+	<div class="chart"><div class="cover-fill" style="width: 99%"></div><div class="cover-empty" style="width: 1%"></div></div>
 	</td>
-	<td data-value="95.34" class="pct high">95.34%</td>
-	<td data-value="43" class="abs high">41/43</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="3" class="abs high">3/3</td>
-	<td data-value="66.66" class="pct medium">66.66%</td>
-	<td data-value="3" class="abs medium">2/3</td>
-	<td data-value="95.34" class="pct high">95.34%</td>
-	<td data-value="43" class="abs high">41/43</td>
-	</tr>
-
-<tr>
-	<td class="file high" data-value="auro-accordion-group.js"><a href="auro-accordion-group.js.html">auro-accordion-group.js</a></td>
-	<td data-value="100" class="pic high">
-	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
-	</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="151" class="abs high">151/151</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="23" class="abs high">23/23</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="10" class="abs high">10/10</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="151" class="abs high">151/151</td>
-	</tr>
-
-<tr>
-	<td class="file high" data-value="auro-accordion.js"><a href="auro-accordion.js.html">auro-accordion.js</a></td>
-	<td data-value="100" class="pic high">
-	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
-	</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="245" class="abs high">245/245</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="17" class="abs high">17/17</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="10" class="abs high">10/10</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="245" class="abs high">245/245</td>
-	</tr>
-
-<tr>
-	<td class="file high" data-value="color-css.js"><a href="color-css.js.html">color-css.js</a></td>
-	<td data-value="100" class="pic high">
-	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
-	</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="2" class="abs high">2/2</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="1" class="abs high">1/1</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="0" class="abs high">0/0</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="2" class="abs high">2/2</td>
-	</tr>
-
-<tr>
-	<td class="file high" data-value="iconVersion.js"><a href="iconVersion.js.html">iconVersion.js</a></td>
-	<td data-value="100" class="pic high">
-	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
-	</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="1" class="abs high">1/1</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="1" class="abs high">1/1</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="0" class="abs high">0/0</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="1" class="abs high">1/1</td>
-	</tr>
-
-<tr>
-	<td class="file high" data-value="style-button-css.js"><a href="style-button-css.js.html">style-button-css.js</a></td>
-	<td data-value="100" class="pic high">
-	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
-	</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="2" class="abs high">2/2</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="1" class="abs high">1/1</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="0" class="abs high">0/0</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="2" class="abs high">2/2</td>
-	</tr>
-
-<tr>
-	<td class="file high" data-value="style-css.js"><a href="style-css.js.html">style-css.js</a></td>
-	<td data-value="100" class="pic high">
-	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
-	</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="2" class="abs high">2/2</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="1" class="abs high">1/1</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="0" class="abs high">0/0</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="2" class="abs high">2/2</td>
+	<td data-value="99.59" class="pct high">99.59%</td>
+	<td data-value="488" class="abs high">486/488</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="58" class="abs high">58/58</td>
+	<td data-value="96.15" class="pct high">96.15%</td>
+	<td data-value="26" class="abs high">25/26</td>
+	<td data-value="99.59" class="pct high">99.59%</td>
+	<td data-value="488" class="abs high">486/488</td>
 	</tr>
 
 <tr>
-	<td class="file high" data-value="tokens-css.js"><a href="tokens-css.js.html">tokens-css.js</a></td>
+	<td class="file high" data-value="src/styles"><a href="src/styles/index.html">src/styles</a></td>
 	<td data-value="100" class="pic high">
 	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
 	</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="2" class="abs high">2/2</td>
+	<td data-value="8" class="abs high">8/8</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="1" class="abs high">1/1</td>
+	<td data-value="4" class="abs high">4/4</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="0" class="abs high">0/0</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="2" class="abs high">2/2</td>
+	<td data-value="8" class="abs high">8/8</td>
 	</tr>
 
 </tbody>
@@ -206,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-05-20T02:31:15.245Z
+                at 2025-08-15T00:08:36.785Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/coverage/lcov-report/{auro-accordion-button.js.html → src/auro-accordion-button.js.html}

@@ -3,15 +3,15 @@
 <html lang="en">
 
 <head>
-    <title>Code coverage report for auro-accordion-button.js</title>
+    <title>Code coverage report for src/auro-accordion-button.js</title>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="prettify.css" />
-    <link rel="stylesheet" href="base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
+    <link rel="stylesheet" href="../prettify.css" />
+    <link rel="stylesheet" href="../base.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style type='text/css'>
         .coverage-summary .sorter {
-            background-image: url(sort-arrow-sprite.png);
+            background-image: url(../sort-arrow-sprite.png);
         }
     </style>
 </head>
@@ -19,34 +19,34 @@
 <body>
 <div class='wrapper'>
     <div class='pad1'>
-        <h1><a href="index.html">All files</a> auro-accordion-button.js</h1>
+        <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> auro-accordion-button.js</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">95.34% </span>
+                <span class="strong">96.96% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>41/43</span>
+                <span class='fraction'>64/66</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>3/3</span>
+                <span class='fraction'>8/8</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">66.66% </span>
+                <span class="strong">80% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>2/3</span>
+                <span class='fraction'>4/5</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">95.34% </span>
+                <span class="strong">96.96% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>41/43</span>
+                <span class='fraction'>64/66</span>
             </div>
         
             
@@ -106,7 +106,30 @@
 <a name='L41'></a><a href='#L41'>41</a>
 <a name='L42'></a><a href='#L42'>42</a>
 <a name='L43'></a><a href='#L43'>43</a>
-<a name='L44'></a><a href='#L44'>44</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">2x</span>
+<a name='L44'></a><a href='#L44'>44</a>
+<a name='L45'></a><a href='#L45'>45</a>
+<a name='L46'></a><a href='#L46'>46</a>
+<a name='L47'></a><a href='#L47'>47</a>
+<a name='L48'></a><a href='#L48'>48</a>
+<a name='L49'></a><a href='#L49'>49</a>
+<a name='L50'></a><a href='#L50'>50</a>
+<a name='L51'></a><a href='#L51'>51</a>
+<a name='L52'></a><a href='#L52'>52</a>
+<a name='L53'></a><a href='#L53'>53</a>
+<a name='L54'></a><a href='#L54'>54</a>
+<a name='L55'></a><a href='#L55'>55</a>
+<a name='L56'></a><a href='#L56'>56</a>
+<a name='L57'></a><a href='#L57'>57</a>
+<a name='L58'></a><a href='#L58'>58</a>
+<a name='L59'></a><a href='#L59'>59</a>
+<a name='L60'></a><a href='#L60'>60</a>
+<a name='L61'></a><a href='#L61'>61</a>
+<a name='L62'></a><a href='#L62'>62</a>
+<a name='L63'></a><a href='#L63'>63</a>
+<a name='L64'></a><a href='#L64'>64</a>
+<a name='L65'></a><a href='#L65'>65</a>
+<a name='L66'></a><a href='#L66'>66</a>
+<a name='L67'></a><a href='#L67'>67</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
@@ -131,6 +154,16 @@
 <span class="cline-any cline-yes">14x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">16x</span>
 <span class="cline-any cline-yes">16x</span>
 <span class="cline-any cline-yes">16x</span>
@@ -140,6 +173,19 @@
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">34x</span>
+<span class="cline-any cline-yes">34x</span>
+<span class="cline-any cline-yes">34x</span>
+<span class="cline-any cline-yes">19x</span>
+<span class="cline-any cline-yes">19x</span>
+<span class="cline-any cline-yes">19x</span>
+<span class="cline-any cline-yes">19x</span>
+<span class="cline-any cline-yes">19x</span>
+<span class="cline-any cline-yes">34x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
@@ -154,8 +200,8 @@
 &nbsp;
 // ---------------------------------------------------------------------
 &nbsp;
-import styleButtonCss from "./style-button-css.js";
-import styleCssAuroButton from "@aurodesignsystem/auro-button/src/style-css.js";
+import styleButtonCss from "./styles/style-button-css.js";
+import styleCssAuroButton from "@aurodesignsystem/auro-button/src/styles/style-css.js";
 &nbsp;
 import { AuroButton } from "@aurodesignsystem/auro-button/src/auro-button.js";
 &nbsp;
@@ -172,6 +218,16 @@ export class AuroAccordionButton extends AuroButton {
 &nbsp;
     this.ariaexpanded = false;
   }
+&nbsp;
+  static get properties() {
+    return {
+      ...super.properties,
+      ariaexpanded: {
+        type: Boolean,
+        reflect: true
+      }
+    };
+  }
 &nbsp;
   static get styles() {
     return [
@@ -179,6 +235,19 @@ export class AuroAccordionButton extends AuroButton {
       styleButtonCss
     ];
   }
+&nbsp;
+&nbsp;
+  // Sync aria-expanded changes
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    
+    if (changedProperties.has('ariaexpanded')) {
+      const button = this.shadowRoot.querySelector('button');
+      if (button) {
+        button.setAttribute('aria-expanded', this.ariaexpanded ? 'true' : 'false');
+      }
+    }
+  }
 &nbsp;
   /**
    * This will register this element with the browser.
@@ -199,16 +268,16 @@ export class AuroAccordionButton extends AuroButton {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-05-20T02:31:15.245Z
+                at 2025-08-15T00:08:36.785Z
             </div>
-        <script src="prettify.js"></script>
+        <script src="../prettify.js"></script>
         <script>
             window.onload = function () {
                 prettyPrint();
             };
         </script>
-        <script src="sorter.js"></script>
-        <script src="block-navigation.js"></script>
+        <script src="../sorter.js"></script>
+        <script src="../block-navigation.js"></script>
     </body>
 </html>
     

package/coverage/lcov-report/{auro-accordion-group.js.html → src/auro-accordion-group.js.html}

@@ -3,15 +3,15 @@
 <html lang="en">
 
 <head>
-    <title>Code coverage report for auro-accordion-group.js</title>
+    <title>Code coverage report for src/auro-accordion-group.js</title>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="prettify.css" />
-    <link rel="stylesheet" href="base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
+    <link rel="stylesheet" href="../prettify.css" />
+    <link rel="stylesheet" href="../base.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style type='text/css'>
         .coverage-summary .sorter {
-            background-image: url(sort-arrow-sprite.png);
+            background-image: url(../sort-arrow-sprite.png);
         }
     </style>
 </head>
@@ -19,7 +19,7 @@
 <body>
 <div class='wrapper'>
     <div class='pad1'>
-        <h1><a href="index.html">All files</a> auro-accordion-group.js</h1>
+        <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> auro-accordion-group.js</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
@@ -523,16 +523,16 @@ export class AuroAccordionGroup extends LitElement {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-05-20T02:31:15.245Z
+                at 2025-08-15T00:08:36.785Z
             </div>
-        <script src="prettify.js"></script>
+        <script src="../prettify.js"></script>
         <script>
             window.onload = function () {
                 prettyPrint();
             };
         </script>
-        <script src="sorter.js"></script>
-        <script src="block-navigation.js"></script>
+        <script src="../sorter.js"></script>
+        <script src="../block-navigation.js"></script>
     </body>
 </html>