@aurodesignsystem/auro-accordion 5.0.2 → 5.1.1

package/dist/iconVersion.d.ts

@@ -1,3 +1,3 @@
-declare const _default: "7.0.1";
+declare const _default: "8.0.1";
 export default _default;
 //# sourceMappingURL=iconVersion.d.ts.map

package/package.json

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem/auro-accordion",
-  "version": "5.0.2",
+  "version": "5.1.1",
   "description": "auro-accordion HTML custom element",
   "repository": {
     "type": "git",
@@ -21,13 +21,13 @@
   },
   "dependencies": {
     "@alaskaairux/icons": "5.3.0",
-    "@aurodesignsystem/auro-button": "9.1.0",
-    "@aurodesignsystem/auro-icon": "7.0.1",
-    "@aurodesignsystem/auro-library": "4.0.0",
+    "@aurodesignsystem/auro-button": "9.3.1",
+    "@aurodesignsystem/auro-icon": "8.0.1",
+    "@aurodesignsystem/auro-library": "4.2.1",
     "chalk": "^5.4.1",
     "lit": "^3.2.1",
     "@aurodesignsystem/webcorestylesheets": "6.1.0",
-    "@aurodesignsystem/design-tokens": "5.3.1"
+    "@aurodesignsystem/design-tokens": "5.8.2"
   },
   "devDependencies": {
     "@aurodesignsystem/eslint-config": "1.3.4",
@@ -39,14 +39,14 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/npm": "^12.0.1",
     "@web/dev-server": "^0.4.6",
-    "@web/test-runner": "^0.20.0",
+    "@web/test-runner": "^0.20.1",
     "autoprefixer": "^10.4.21",
     "compression": "^1.8.0",
     "concat": "^1.0.3",
     "concurrently": "^9.1.2",
     "copyfiles": "^2.4.1",
     "core-js": "^3.41.0",
-    "eslint": "^9.23.0",
+    "eslint": "^9.24.0",
     "eslint-plugin-jsdoc": "^50.6.9",
     "husky": "^9.1.7",
     "lodash": "^4.17.21",
@@ -60,9 +60,9 @@
     "rollup-plugin-serve": "^2.0.3",
     "sass": "^1.80.5",
     "semantic-release": "^24.2.3",
-    "stylelint": "^16.17.0",
+    "stylelint": "^16.18.0",
     "stylelint-config-idiomatic-order": "^10.0.0",
-    "stylelint-config-standard": "^37.0.0",
+    "stylelint-config-standard": "^38.0.0",
     "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^6.11.1",

package/src/color-css.js

@@ -1,2 +1,2 @@
 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-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)}`;

package/src/color.css

@@ -7,12 +7,7 @@
 }
 
 :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);
+  --ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a);
 }
 
 :host([grouped]) .componentWrapper{
@@ -23,18 +18,18 @@
   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);
+  --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-color-border-active-default, #0074c8);
+  --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-color-border-active-default, #0074c8);
+  --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-color-border-subtle-default, #f0f7fd);
+  --ds-auro-accordion-content-border-color:var(--ds-basic-color-border-subtle, #dddddd);
 }

package/src/color.scss

@@ -6,7 +6,7 @@
 /* stylelint-disable max-nesting-depth, order/properties-order, selector-max-combinators, selector-max-compound-selectors, declaration-empty-line-before, declaration-no-important, no-descending-specificity */
 
 // Import Auro tokens
-@import './../node_modules/@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariables';
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska';
 
 :host {
   .trigger {
@@ -21,12 +21,7 @@
 }
 
 :host(:focus) {
-  --ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #{$ds-color-border-active-default});
-  --ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-focus-default, #{$ds-color-icon-ui-secondary-focus-default});
-}
-
-:host(:hover) {
-  --ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-hover-default, #{$ds-color-icon-ui-secondary-hover-default});
+  --ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-focused, #{$ds-advanced-color-state-focused});
 }
 
 :host([grouped]) {
@@ -44,12 +39,12 @@
     &:focus,
     &:hover {
       &:before {
-        --ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #{$ds-color-border-active-default});
+        --ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-selected, #{$ds-advanced-color-state-selected});
       }
     }
 
     &:focus {
-      --ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #{$ds-color-border-active-default});
+      --ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-focused, #{$ds-advanced-color-state-focused});
     }
   }
 
@@ -61,11 +56,11 @@
 :host([emphasis][expanded]) {
   .trigger {
     &:before {
-      --ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #{$ds-color-border-active-default});
+      --ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-selected, #{$ds-advanced-color-state-selected});
     }
   }
 
   .content {
-    --ds-auro-accordion-content-border-color: var(--ds-color-border-subtle-default, #{$ds-color-border-subtle-default});
+    --ds-auro-accordion-content-border-color: var(--ds-basic-color-border-subtle, #{$ds-basic-color-border-subtle});
   }
 }

package/src/iconVersion.js

@@ -1 +1 @@
-export default '7.0.1'
+export default '8.0.1'

package/src/style-button-css.js

@@ -1,2 +1,2 @@
 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}`;
+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}`;

package/src/style-button.css

@@ -4,14 +4,18 @@
 :host{
   border:unset;
 }
-:host .auro-button{
+:host .auroButton{
   all:unset;
   width:100%;
-  padding:var(--ds-size-200, 1rem) 0;
+  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 .auro-button:after{
+:host .auroButton:focus, :host .auroButton:focus-visible, :host .auroButton:focus-within{
+  outline:0;
+}
+:host .auroButton:after{
   border-color:transparent;
 }
 :host .contentWrapper{
@@ -24,11 +28,13 @@
 }
 
 :host(.sm) .auro-button{
-  padding:var(--ds-size-100, 0.5rem) 0;
+  padding-top:var(--ds-size-150, 0.75rem);
+  padding-bottom:var(--ds-size-150, 0.75rem);
 }
 
 :host(.lg) .auro-button{
-  padding:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)) 0;
+  padding-top:var(--ds-size-250, 1.25rem);
+  padding-bottom:var(--ds-size-250, 1.25rem);
 }
 
 :host([fluid]) .contentWrapper{

package/src/style-button.scss

@@ -13,15 +13,23 @@
 :host {
   border: unset;
 
-  .auro-button {
+  .auroButton {
     all: unset;
     width: 100%;
-    padding: var(--ds-size-200, $ds-size-200) 0;
+    padding: var(--ds-size-200, $ds-size-200) var(--trigger-padding-right, 0)
+      var(--ds-size-200, $ds-size-200) var(--trigger-padding-left, 0);
+    box-sizing: border-box;
 
     cursor: pointer;
 
     pointer-events: none;
 
+    &:focus,
+    &:focus-visible,
+    &:focus-within {
+      outline: 0;
+    }
+
     &:after {
       border-color: transparent; // not supported by tokens - this should never have a color regardless of the theme
     }
@@ -40,13 +48,15 @@
 
 :host(.sm) {
   .auro-button {
-    padding: var(--ds-size-100, $ds-size-100) 0;
+    padding-top: var(--ds-size-150, $ds-size-150);
+    padding-bottom: var(--ds-size-150, $ds-size-150);
   }
 }
 
 :host(.lg) {
   .auro-button {
-    padding: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50)) 0;
+    padding-top: var(--ds-size-250, $ds-size-250);
+    padding-bottom: var(--ds-size-250, $ds-size-250);
   }
 }
 

package/src/style-css.js

@@ -1,2 +1,2 @@
 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;--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}`;

package/src/style.css

@@ -1,5 +1,6 @@
 :host{
   interpolate-size:allow-keywords;
+  --webkit-fill:-webkit-fill-available;
 }
 :host .trigger{
   position:relative;
@@ -40,7 +41,6 @@
 :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{
@@ -50,7 +50,10 @@
 
 :host([chevron=right]) ::slotted([slot=trigger]){
   padding-left:0;
-  padding-right:var(--ds-size-50, 0.25rem);
+  padding-right:var(--ds-size-100, 0.5rem);
+}
+:host([chevron=right]) .contentWrapper{
+  padding-left:var(--ds-size-400, 2rem);
 }
 
 :host([alignRight]) .componentWrapper{
@@ -68,6 +71,11 @@
   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;
@@ -81,7 +89,7 @@
   border-style:solid;
   border-width:1px;
   border-left-width:2px;
-  padding-left:var(--ds-size-200, 1rem);
+  --trigger-padding-left:var(--ds-size-200, $ds-size-200);
 }
 :host([emphasis]) .trigger:before{
   display:block;
@@ -110,6 +118,11 @@
   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;
 }

package/src/style.scss

@@ -11,6 +11,8 @@
 :host {
   interpolate-size: allow-keywords; // stylelint-disable-line
 
+  --webkit-fill: -webkit-fill-available;
+
   .trigger {
     position: relative;
 
@@ -63,7 +65,6 @@
   .contentWrapper {
     padding-left: var(--ds-size-400, $ds-size-400);
     padding-bottom: var(--ds-size-300, $ds-size-300);
-    padding-right: var(--ds-size-200, $ds-size-200);
   }
 }
 
@@ -77,7 +78,11 @@
 :host([chevron="right"]) {
   ::slotted([slot="trigger"]) {
     padding-left: 0;
-    padding-right: var(--ds-size-50, $ds-size-50);
+    padding-right: var(--ds-size-100, $ds-size-100);
+  }
+
+  .contentWrapper {
+    padding-left: var(--ds-size-400, $ds-size-400);
   }
 }
 
@@ -102,6 +107,14 @@
   }
 }
 
+:host([grouped][chevron="right"]:not([alignright])) {
+  .trigger {
+    width: var(--webkit-fill, 100%);
+
+    --trigger-padding-right: var(--ds-size-200, $ds-size-200); // will be passed to the child component
+  }
+}
+
 :host(:not([expanded])),
 :host([expanded="false"]) {
   .content  {
@@ -120,7 +133,8 @@
     border-style: solid;
     border-width: 1px;
     border-left-width: 2px;
-    padding-left: var(--ds-size-200, $ds-size-200);
+
+    --trigger-padding-left: var(--ds-size-200, $ds-size-200); // will be passed to the child component
 
     &:before {
       display: block;
@@ -158,6 +172,13 @@
   }
 }
 
+:host([emphasis][variant="lg"]) {
+  .trigger,
+  .contentWrapper {
+    padding-left: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50));
+  }
+}
+
 :host([emphasis]:not([expanded]):hover) {
   .trigger {
     text-decoration: unset;

package/src/tokens-css.js

@@ -1,2 +1,2 @@
 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-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)}`;

package/src/tokens.css

@@ -1,7 +1,7 @@
 :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-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-color-text-primary-default, #2a2a2a);
-  --ds-auro-accordion-trigger-icon-color:var(--ds-color-icon-ui-secondary-default-default, #7e7e7e);
+  --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);
 }

package/src/tokens.scss

@@ -1,9 +1,9 @@
-@import "./../node_modules/@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariables";
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
 
 :host {
   --ds-auro-accordion-content-border-color: transparent;
-  --ds-auro-accordion-group-border-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default});
+  --ds-auro-accordion-group-border-color: var(--ds-basic-color-border-divider, #{$ds-basic-color-border-divider});
   --ds-auro-accordion-trigger-border-color: transparent;
-  --ds-auro-accordion-trigger-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
-  --ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-default-default, #{$ds-color-icon-ui-secondary-default-default});
+  --ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
+  --ds-auro-accordion-trigger-icon-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
 }

package/test/auro-accordion-group.test.js

@@ -54,7 +54,7 @@ describe('auro-accordion-group', () => {
 
     secondAccordionTrigger.click();
 
-    await elementUpdated();
+    await elementUpdated(el);
 
     await expect(firstAccordion.hasAttribute('expanded')).to.be.false;
     await expect(secondAccordion.hasAttribute('expanded')).to.be.true;