@aurodesignsystem/auro-accordion 4.3.1 → 4.4.1

package/coverage/lcov-report/auro-accordion.js.html

@@ -25,28 +25,28 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>193/193</span>
+                <span class='fraction'>225/225</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">90.9% </span>
+                <span class="strong">92.3% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>10/11</span>
+                <span class='fraction'>12/13</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>8/8</span>
+                <span class='fraction'>9/9</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>193/193</span>
+                <span class='fraction'>225/225</span>
             </div>
         
             
@@ -256,7 +256,39 @@
 <a name='L191'></a><a href='#L191'>191</a>
 <a name='L192'></a><a href='#L192'>192</a>
 <a name='L193'></a><a href='#L193'>193</a>
-<a name='L194'></a><a href='#L194'>194</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">2x</span>
+<a name='L194'></a><a href='#L194'>194</a>
+<a name='L195'></a><a href='#L195'>195</a>
+<a name='L196'></a><a href='#L196'>196</a>
+<a name='L197'></a><a href='#L197'>197</a>
+<a name='L198'></a><a href='#L198'>198</a>
+<a name='L199'></a><a href='#L199'>199</a>
+<a name='L200'></a><a href='#L200'>200</a>
+<a name='L201'></a><a href='#L201'>201</a>
+<a name='L202'></a><a href='#L202'>202</a>
+<a name='L203'></a><a href='#L203'>203</a>
+<a name='L204'></a><a href='#L204'>204</a>
+<a name='L205'></a><a href='#L205'>205</a>
+<a name='L206'></a><a href='#L206'>206</a>
+<a name='L207'></a><a href='#L207'>207</a>
+<a name='L208'></a><a href='#L208'>208</a>
+<a name='L209'></a><a href='#L209'>209</a>
+<a name='L210'></a><a href='#L210'>210</a>
+<a name='L211'></a><a href='#L211'>211</a>
+<a name='L212'></a><a href='#L212'>212</a>
+<a name='L213'></a><a href='#L213'>213</a>
+<a name='L214'></a><a href='#L214'>214</a>
+<a name='L215'></a><a href='#L215'>215</a>
+<a name='L216'></a><a href='#L216'>216</a>
+<a name='L217'></a><a href='#L217'>217</a>
+<a name='L218'></a><a href='#L218'>218</a>
+<a name='L219'></a><a href='#L219'>219</a>
+<a name='L220'></a><a href='#L220'>220</a>
+<a name='L221'></a><a href='#L221'>221</a>
+<a name='L222'></a><a href='#L222'>222</a>
+<a name='L223'></a><a href='#L223'>223</a>
+<a name='L224'></a><a href='#L224'>224</a>
+<a name='L225'></a><a href='#L225'>225</a>
+<a name='L226'></a><a href='#L226'>226</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>
@@ -305,6 +337,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">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-yes">10x</span>
@@ -377,6 +422,8 @@
 <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">10x</span>
 <span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-yes">10x</span>
@@ -400,6 +447,23 @@
 <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">10x</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">40x</span>
+<span class="cline-any cline-yes">40x</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">10x</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">4x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
@@ -461,10 +525,13 @@ import { LitElement, nothing } from "lit";
 import { html } from 'lit/static-html.js';
 import { classMap } from 'lit/directives/class-map.js';
 &nbsp;
-import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+import { AuroAccordionGroup } from './auro-accordion-group.js';
+import { AuroAccordionButton } from './auro-accordion-button.js';
 &nbsp;
 import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
 &nbsp;
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+&nbsp;
 import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
 import iconVersion from './iconVersion.js';
 &nbsp;
@@ -506,6 +573,16 @@ export class AuroAccordion extends LitElement {
      * @private
      */
     this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
+&nbsp;
+    /**
+     * @private
+     */
+    this.buttonNameHash = this.generateRandomLetters(4); //eslint-disable-line
+&nbsp;
+    /**
+     * @private
+     */
+    this.buttonTag = versioning.generateTag('auro-accordion-button', this.buttonNameHash, AuroAccordionButton);
 &nbsp;
     /**
      * @private
@@ -566,7 +643,9 @@ export class AuroAccordion extends LitElement {
    *
    */
   static register(name = "auro-accordion") {
+    const nameGroup = `${name}-group`;
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordion);
+    AuroAccordionGroup.register(nameGroup);
   }
 &nbsp;
   firstUpdated() {
@@ -588,6 +667,23 @@ export class AuroAccordion extends LitElement {
 &nbsp;
     return html`${svg}`;
   }
+&nbsp;
+  /**
+   * Generates a random string of letters.
+   * @private
+   * @param {number} length - The number of characters to generate in the string.
+   * @returns {string} - The generated string.
+   */
+  generateRandomLetters(length) {
+    let result = '';
+    const characters = 'abcdefghijklmnopqrstuvwxyz';
+    const charactersLength = characters.length;
+    for (let index = 0; index &lt; length; index += 1) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+&nbsp;
+    return result;
+  }
 &nbsp;
   /**
    * Toggles the visibility of the accordion content.
@@ -615,7 +711,7 @@ export class AuroAccordion extends LitElement {
 &nbsp;
     return html`
       &lt;div class="componentWrapper" part="accordion"&gt;
-        &lt;auro-accordion-button
+        &lt;${this.buttonTag}
           ?fluid="${this.emphasis}"
           class="${classMap(buttonClasses)}"
           id="accordionTrigger"
@@ -632,7 +728,7 @@ export class AuroAccordion extends LitElement {
             &lt;/${this.iconTag}&gt;
           `}
           &lt;slot name="trigger" part="triggerSlot"&gt;&lt;/slot&gt;
-        &lt;/auro-accordion-button&gt;
+        &lt;/${this.buttonTag}&gt;
         &lt;div class="content" id="accordionContent" aria-labelledby="accordionTrigger" inert="${!this.expanded || nothing}" part="content"&gt;
           &lt;div class="contentWrapper" part="contentWrapper"&gt;
             &lt;slot&gt;&lt;/slot&gt;
@@ -649,7 +745,7 @@ export class AuroAccordion 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 2024-12-21T00:10:49.305Z
+                at 2025-02-08T21:42:51.366Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/coverage/lcov-report/color-css.js.html

@@ -68,7 +68,7 @@
 <a name='L3'></a><a href='#L3'>3</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-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { css } from 'lit';
-export default css`: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-bottom-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)}`;
+export default css`: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-bottom-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)}`;
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -76,7 +76,7 @@ export default css`:host .trigger{color:var(--ds-auro-accordion-trigger-color);b
             <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 2024-12-21T00:10:49.305Z
+                at 2025-02-08T21:42:51.366Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/coverage/lcov-report/iconVersion.js.html

@@ -63,14 +63,14 @@
     </div>
     <div class='status-line high'></div>
     <pre><table class="coverage">
-<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">2x</span></td><td class="text"><pre class="prettyprint lang-js">export default '6.0.2'</pre></td></tr></table></pre>
+<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">2x</span></td><td class="text"><pre class="prettyprint lang-js">export default '6.1.9'</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
             </div><!-- /wrapper -->
             <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 2024-12-21T00:10:49.305Z
+                at 2025-02-08T21:42:51.366Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/coverage/lcov-report/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">99.49% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>329/329</span>
+                <span class='fraction'>394/396</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">97.05% </span>
+                <span class="strong">97.43% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>33/34</span>
+                <span class='fraction'>38/39</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">94.73% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>16/16</span>
+                <span class='fraction'>18/19</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">99.49% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>329/329</span>
+                <span class='fraction'>394/396</span>
             </div>
         
             
@@ -79,6 +79,21 @@
 </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="93.93" class="pic high">
+	<div class="chart"><div class="cover-fill" style="width: 93%"></div><div class="cover-empty" style="width: 7%"></div></div>
+	</td>
+	<td data-value="93.93" class="pct high">93.93%</td>
+	<td data-value="33" class="abs high">31/33</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="2" class="abs high">2/2</td>
+	<td data-value="50" class="pct medium">50%</td>
+	<td data-value="2" class="abs medium">1/2</td>
+	<td data-value="93.93" class="pct high">93.93%</td>
+	<td data-value="33" class="abs high">31/33</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>
@@ -99,13 +114,13 @@
 	<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="193" class="abs high">193/193</td>
-	<td data-value="90.9" class="pct high">90.9%</td>
-	<td data-value="11" class="abs high">10/11</td>
+	<td data-value="225" class="abs high">225/225</td>
+	<td data-value="92.3" class="pct high">92.3%</td>
+	<td data-value="13" class="abs high">12/13</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="8" class="abs high">8/8</td>
+	<td data-value="9" class="abs high">9/9</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="193" class="abs high">193/193</td>
+	<td data-value="225" class="abs high">225/225</td>
 	</tr>
 
 <tr>
@@ -138,6 +153,21 @@
 	<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">
@@ -176,7 +206,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 2024-12-21T00:10:49.305Z
+                at 2025-02-08T21:42:51.366Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/coverage/lcov-report/style-button-css.js.html

@@ -0,0 +1,91 @@
+
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Code coverage report for style-button-css.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" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+    
+<body>
+<div class='wrapper'>
+    <div class='pad1'>
+        <h1><a href="index.html">All files</a> style-button-css.js</h1>
+        <div class='clearfix'>
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Statements</span>
+                <span class='fraction'>2/2</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Branches</span>
+                <span class='fraction'>1/1</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Functions</span>
+                <span class='fraction'>0/0</span>
+            </div>
+        
+            
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Lines</span>
+                <span class='fraction'>2/2</span>
+            </div>
+        
+            
+        </div>
+        <p class="quiet">
+            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
+        </p>
+        <template id="filterTemplate">
+            <div class="quiet">
+                Filter:
+                <input type="search" id="fileSearch">
+            </div>
+        </template>
+    </div>
+    <div class='status-line high'></div>
+    <pre><table class="coverage">
+<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
+<a name='L2'></a><a href='#L2'>2</a>
+<a name='L3'></a><a href='#L3'>3</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-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { css } from 'lit';
+export default css`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset}:host .auro-button{all:unset;width:100%;padding:var(--ds-size-200, 1rem) 0;cursor:pointer;pointer-events:none}:host .auro-button:after{border-color:transparent}:host .contentWrapper{display:flex;flex-direction:row-reverse}:host .textSlot{display:flex;flex:1}:host(.sm) .auro-button{padding:var(--ds-size-100, 0.5rem) 0}:host(.lg) .auro-button{padding:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)) 0}:host([fluid]) .contentWrapper{width:100%}:host(.iconRight) .contentWrapper{display:flex;flex-direction:row}`;
+&nbsp;</pre></td></tr></table></pre>
+
+                <div class='push'></div><!-- for sticky footer -->
+            </div><!-- /wrapper -->
+            <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-02-08T21:42:51.366Z
+            </div>
+        <script src="prettify.js"></script>
+        <script>
+            window.onload = function () {
+                prettyPrint();
+            };
+        </script>
+        <script src="sorter.js"></script>
+        <script src="block-navigation.js"></script>
+    </body>
+</html>
+    

package/coverage/lcov-report/style-css.js.html

@@ -68,7 +68,7 @@
 <a name='L3'></a><a href='#L3'>3</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-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { css } from 'lit';
-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}`;
+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}`;
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -76,7 +76,7 @@ export default css`:host{interpolate-size:allow-keywords}:host .trigger{position
             <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 2024-12-21T00:10:49.305Z
+                at 2025-02-08T21:42:51.366Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/coverage/lcov-report/tokens-css.js.html

@@ -68,7 +68,7 @@
 <a name='L3'></a><a href='#L3'>3</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-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { css } from 'lit';
-export default css`:host{--ds-auro-accordion-content-border-color: transparent;--ds-auro-accordion-group-border-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-accordion-trigger-border-color: transparent;--ds-auro-accordion-trigger-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-default-default, #7e7e7e)}`;
+export default css`:host{--ds-auro-accordion-content-border-color:transparent;--ds-auro-accordion-group-border-color:var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-accordion-trigger-border-color:transparent;--ds-auro-accordion-trigger-color:var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color:var(--ds-color-icon-ui-secondary-default-default, #7e7e7e)}`;
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -76,7 +76,7 @@ export default css`:host{--ds-auro-accordion-content-border-color: transparent;-
             <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 2024-12-21T00:10:49.305Z
+                at 2025-02-08T21:42:51.366Z
             </div>
         <script src="prettify.js"></script>
         <script>