@aurodesignsystem/auro-accordion 5.0.2 → 5.1.0

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.0",
   "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) 0;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: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}`;

package/src/style-button.css

@@ -4,14 +4,17 @@
 :host{
   border:unset;
 }
-:host .auro-button{
+:host .auroButton{
   all:unset;
   width:100%;
   padding:var(--ds-size-200, 1rem) 0;
   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{

package/src/style-button.scss

@@ -13,7 +13,7 @@
 :host {
   border: unset;
 
-  .auro-button {
+  .auroButton {
     all: unset;
     width: 100%;
     padding: var(--ds-size-200, $ds-size-200) 0;
@@ -22,6 +22,12 @@
 
     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
     }

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;