@aurodesignsystem/auro-accordion 5.0.2 → 5.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,6 +2,7 @@
2
2
  "cSpell.words": [
3
3
  "csspart",
4
4
  "labelledby",
5
- "slotchange"
5
+ "slotchange",
6
+ "texticon"
6
7
  ]
7
8
  }
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Semantic Release Automated Changelog
2
2
 
3
+ ## [5.1.1](https://github.com/AlaskaAirlines/auro-accordion/compare/v5.1.0...v5.1.1) (2025-04-29)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * adjust chevron-right positioning for grouped ([467fc0c](https://github.com/AlaskaAirlines/auro-accordion/commit/467fc0c8f85546ae14200016d42a5287c1f98728)), closes [#173](https://github.com/AlaskaAirlines/auro-accordion/issues/173)
9
+
10
+ # [5.1.0](https://github.com/AlaskaAirlines/auro-accordion/compare/v5.0.2...v5.1.0) (2025-04-23)
11
+
12
+
13
+ ### Features
14
+
15
+ * support new component themes [#171](https://github.com/AlaskaAirlines/auro-accordion/issues/171) ([e28dba7](https://github.com/AlaskaAirlines/auro-accordion/commit/e28dba784d568075c2f6679949fc0487ca535588))
16
+
3
17
  ## [5.0.2](https://github.com/AlaskaAirlines/auro-accordion/compare/v5.0.1...v5.0.2) (2025-04-14)
4
18
 
5
19
 
package/README.md CHANGED
@@ -125,7 +125,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
125
125
  ```html
126
126
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@/dist/auro-classic/CSSCustomProperties.css" />
127
127
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@/dist/bundled/essentials.css" />
128
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@5.0.2/dist/auro-accordion__bundled.js" type="module"></script>
128
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@5.1.1/dist/auro-accordion__bundled.js" type="module"></script>
129
129
  ```
130
130
 
131
131
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -199,7 +199,7 @@ export class AuroAccordionButton extends AuroButton {
199
199
  <div class='footer quiet pad2 space-top1 center small'>
200
200
  Code coverage generated by
201
201
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
202
- at 2025-04-14T23:37:20.783Z
202
+ at 2025-04-29T17:20:51.455Z
203
203
  </div>
204
204
  <script src="prettify.js"></script>
205
205
  <script>
@@ -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 2025-04-14T23:37:20.783Z
460
+ at 2025-04-29T17:20:51.455Z
461
461
  </div>
462
462
  <script src="prettify.js"></script>
463
463
  <script>
@@ -745,7 +745,7 @@ export class AuroAccordion extends LitElement {
745
745
  <div class='footer quiet pad2 space-top1 center small'>
746
746
  Code coverage generated by
747
747
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
748
- at 2025-04-14T23:37:20.783Z
748
+ at 2025-04-29T17:20:51.455Z
749
749
  </div>
750
750
  <script src="prettify.js"></script>
751
751
  <script>
@@ -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{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)}`;
71
+ 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-advanced-color-state-focused, #01426a)}: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-advanced-color-state-selected, #01426a)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a)}: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-advanced-color-state-selected, #01426a)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color:var(--ds-basic-color-border-subtle, #dddddd)}`;
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{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 2025-04-14T23:37:20.783Z
79
+ at 2025-04-29T17:20:51.455Z
80
80
  </div>
81
81
  <script src="prettify.js"></script>
82
82
  <script>
@@ -63,14 +63,14 @@
63
63
  </div>
64
64
  <div class='status-line high'></div>
65
65
  <pre><table class="coverage">
66
- <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 '7.0.1'</pre></td></tr></table></pre>
66
+ <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 '8.0.1'</pre></td></tr></table></pre>
67
67
 
68
68
  <div class='push'></div><!-- for sticky footer -->
69
69
  </div><!-- /wrapper -->
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 2025-04-14T23:37:20.783Z
73
+ at 2025-04-29T17:20:51.455Z
74
74
  </div>
75
75
  <script src="prettify.js"></script>
76
76
  <script>
@@ -206,7 +206,7 @@
206
206
  <div class='footer quiet pad2 space-top1 center small'>
207
207
  Code coverage generated by
208
208
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
209
- at 2025-04-14T23:37:20.783Z
209
+ at 2025-04-29T17:20:51.455Z
210
210
  </div>
211
211
  <script src="prettify.js"></script>
212
212
  <script>
@@ -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`: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}`;
71
+ export default css`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset}:host .auroButton{all:unset;width:100%;padding:var(--ds-size-200, 1rem) var(--trigger-padding-right, 0) var(--ds-size-200, 1rem) var(--trigger-padding-left, 0);box-sizing:border-box;cursor:pointer;pointer-events:none}:host .auroButton:focus,:host .auroButton:focus-visible,:host .auroButton:focus-within{outline:0}:host .auroButton:after{border-color:transparent}:host .contentWrapper{display:flex;flex-direction:row-reverse}:host .textSlot{display:flex;flex:1}:host(.sm) .auro-button{padding-top:var(--ds-size-150, 0.75rem);padding-bottom:var(--ds-size-150, 0.75rem)}:host(.lg) .auro-button{padding-top:var(--ds-size-250, 1.25rem);padding-bottom:var(--ds-size-250, 1.25rem)}:host([fluid]) .contentWrapper{width:100%}:host(.iconRight) .contentWrapper{display:flex;flex-direction:row}`;
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`:focus:not(:focus-visible){outline:3px solid transparent}:hos
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 2025-04-14T23:37:20.783Z
79
+ at 2025-04-29T17:20:51.455Z
80
80
  </div>
81
81
  <script src="prettify.js"></script>
82
82
  <script>
@@ -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: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}`;
71
+ export default css`:host{interpolate-size:allow-keywords;--webkit-fill:-webkit-fill-available}: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)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-100, 0.5rem)}:host([chevron=right]) .contentWrapper{padding-left:var(--ds-size-400, 2rem)}: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([grouped][chevron=right]:not([alignright])) .trigger{width:var(--webkit-fill, 100%);--trigger-padding-right:var(--ds-size-200, $ds-size-200)}: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;--trigger-padding-left:var(--ds-size-200, $ds-size-200)}: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][variant=lg]) .trigger,:host([emphasis][variant=lg]) .contentWrapper{padding-left:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}: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 2025-04-14T23:37:20.783Z
79
+ at 2025-04-29T17:20:51.455Z
80
80
  </div>
81
81
  <script src="prettify.js"></script>
82
82
  <script>
@@ -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{--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)}`;
71
+ export default css`:host{--ds-auro-accordion-content-border-color:transparent;--ds-auro-accordion-group-border-color:var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-accordion-trigger-border-color:transparent;--ds-auro-accordion-trigger-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a)}`;
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{--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 2025-04-14T23:37:20.783Z
79
+ at 2025-04-29T17:20:51.455Z
80
80
  </div>
81
81
  <script src="prettify.js"></script>
82
82
  <script>
package/demo/api.html CHANGED
@@ -22,8 +22,8 @@
22
22
  type="text/css"
23
23
  href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
24
  />
25
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
26
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
25
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
27
27
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
28
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
29
  </head>
package/demo/api.md CHANGED
@@ -933,14 +933,14 @@ The component may be restyled using the following code sample and changing the v
933
933
  <!-- The below code snippet is automatically added from ./../src/tokens.scss -->
934
934
 
935
935
  ```scss
936
- @import "./../node_modules/@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariables";
936
+ @import "./../node_modules/@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
937
937
 
938
938
  :host {
939
939
  --ds-auro-accordion-content-border-color: transparent;
940
- --ds-auro-accordion-group-border-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default});
940
+ --ds-auro-accordion-group-border-color: var(--ds-basic-color-border-divider, #{$ds-basic-color-border-divider});
941
941
  --ds-auro-accordion-trigger-border-color: transparent;
942
- --ds-auro-accordion-trigger-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
943
- --ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-default-default, #{$ds-color-icon-ui-secondary-default-default});
942
+ --ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
943
+ --ds-auro-accordion-trigger-icon-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
944
944
  }
945
945
  ```
946
946
  <!-- AURO-GENERATED-CONTENT:END -->