@aurodesignsystem/auro-accordion 5.2.1 → 5.2.2

package/dist/{auro-accordion-button.d.ts → src/auro-accordion-button.d.ts}

@@ -2,6 +2,7 @@
  * Auro-accordion-button is the trigger element for Auro-accordion.
  */
 export class AuroAccordionButton {
+    static get properties(): any;
     static get styles(): any[];
     /**
      * This will register this element with the browser.
@@ -13,5 +14,6 @@ export class AuroAccordionButton {
      */
     static register(name?: string): void;
     ariaexpanded: boolean;
+    updated(changedProperties: any): void;
 }
 //# sourceMappingURL=auro-accordion-button.d.ts.map

package/dist/src/auro-accordion-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auro-accordion-button.d.ts","sourceRoot":"","sources":["../../src/auro-accordion-button.js"],"names":[],"mappings":"AAYA;;GAEG;AAGH;IAOE,6BAQC;IAED,2BAKC;IAeD;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IA3CC,sBAAyB;IAsB3B,sCASC;CAaF"}

package/dist/src/auro-accordion-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auro-accordion-group.d.ts","sourceRoot":"","sources":["../../src/auro-accordion-group.js"],"names":[],"mappings":"AAWA;;;;;;;;GAQG;AAGH;IAaE;;;;;;;;;;;;;MAiBC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAtCC;;OAEG;IACH,qBAAiD;IAqCnD,qBAGC;IAED,sCAIC;IAED;;;OAGG;IACH,4BAKC;IAED,gCAqBC;IAED;;;;OAIG;IACH,6BAaC;IAED;;;OAGG;IACH,oBAKC;IADC,iBAAgE;IAIlE,+CAMC;CACF;2BAhJgC,KAAK"}

package/dist/{auro-accordion.d.ts → src/auro-accordion.d.ts}

@@ -76,13 +76,13 @@ export class AuroAccordion extends LitElement {
     private runtimeUtils;
     expanded: boolean;
     firstUpdated(): void;
+    updated(changedProperties: any): void;
     /**
-     * Internal function to generate the HTML for the icon to use.
+     * Renders the chevron icons.
      * @private
-     * @param {string} svgContent - The imported svg icon.
-     * @returns {TemplateResult} - The html template for the icon.
+     * @returns {TemplateResult} - The html template for the chevron icons.
      */
-    private generateIconHtml;
+    private renderChevronIcons;
     /**
      * Generates a random string of letters.
      * @private

package/dist/src/auro-accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auro-accordion.d.ts","sourceRoot":"","sources":["../../src/auro-accordion.js"],"names":[],"mappings":"AA+BA;;;;;;;;;;;;;;;;;;GAkBG;AAGH;IAgCE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAiCC;IAED,+CAMC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAUhB;IAjFC;;OAEG;IACH,gBAAyE;IAEzE;;OAEG;IACH,uBAAmD;IAEnD;;OAEG;IACH,kBAA0G;IAE1G;;OAEG;IACH,qBAAiD;IAEjD,kBAAqB;IA+DvB,qBAGC;IAED,sCAQC;IAED;;;;OAIG;IACH,2BAgBC;IAED;;;;;OAKG;IACH,8BASC;IAED;;OAEG;IACH,eAUC;IAED;;;;OAIG;IACH,0BAMC;IAGD,4CA2CC;CACF;2BArQmC,KAAK"}

package/dist/src/iconVersion.d.ts

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

package/dist/src/iconVersion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconVersion.d.ts","sourceRoot":"","sources":["../../src/iconVersion.js"],"names":[],"mappings":"wBAAe,OAAO"}

package/dist/{color-css.d.ts.map → src/styles/color-css.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"color-css.d.ts","sourceRoot":"","sources":["../src/color-css.js"],"names":[],"mappings":""}
+{"version":3,"file":"color-css.d.ts","sourceRoot":"","sources":["../../../src/styles/color-css.js"],"names":[],"mappings":""}

package/dist/src/styles/style-button-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-button-css.d.ts","sourceRoot":"","sources":["../../../src/styles/style-button-css.js"],"names":[],"mappings":""}

package/dist/{style-css.d.ts.map → src/styles/style-css.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"style-css.d.ts","sourceRoot":"","sources":["../src/style-css.js"],"names":[],"mappings":""}
+{"version":3,"file":"style-css.d.ts","sourceRoot":"","sources":["../../../src/styles/style-css.js"],"names":[],"mappings":""}

package/dist/{tokens-css.d.ts.map → src/styles/tokens-css.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"tokens-css.d.ts","sourceRoot":"","sources":["../src/tokens-css.js"],"names":[],"mappings":""}
+{"version":3,"file":"tokens-css.d.ts","sourceRoot":"","sources":["../../../src/styles/tokens-css.js"],"names":[],"mappings":""}

package/dist/test/auro-accordion-group.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=auro-accordion-group.test.d.ts.map

package/dist/test/auro-accordion-group.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auro-accordion-group.test.d.ts","sourceRoot":"","sources":["../../test/auro-accordion-group.test.js"],"names":[],"mappings":""}

package/dist/test/auro-accordion.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=auro-accordion.test.d.ts.map

package/dist/test/auro-accordion.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auro-accordion.test.d.ts","sourceRoot":"","sources":["../../test/auro-accordion.test.js"],"names":[],"mappings":""}

package/package.json

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem/auro-accordion",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "description": "auro-accordion HTML custom element",
   "repository": {
     "type": "git",
@@ -20,53 +20,54 @@
     "node": "^20.x || ^22.x "
   },
   "dependencies": {
-    "@alaskaairux/icons": "5.3.0",
-    "@aurodesignsystem/auro-button": "9.3.3",
-    "@aurodesignsystem/auro-icon": "8.0.2",
-    "@aurodesignsystem/auro-library": "4.4.1",
+    "@alaskaairux/icons": "5.6.0",
+    "@aurodesignsystem/auro-button": "11.3.2",
+    "@aurodesignsystem/auro-icon": "8.1.1",
+    "@aurodesignsystem/auro-library": "5.3.2",
     "chalk": "^5.4.1",
-    "lit": "^3.2.1",
-    "@aurodesignsystem/webcorestylesheets": "6.5.0",
-    "@aurodesignsystem/design-tokens": "5.14.0"
+    "lit": "^3.3.1",
+    "@aurodesignsystem/webcorestylesheets": "10.0.2",
+    "@aurodesignsystem/design-tokens": "8.3.0"
   },
   "devDependencies": {
-    "@aurodesignsystem/eslint-config": "1.3.4",
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
+    "@aurodesignsystem/eslint-config": "1.3.5",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
     "@open-wc/testing": "^4.0.0",
-    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-node-resolve": "^16.0.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/npm": "^12.0.1",
+    "@semantic-release/npm": "^12.0.2",
+    "@types/mocha": "^10.0.10",
     "@web/dev-server": "^0.4.6",
-    "@web/test-runner": "^0.20.1",
+    "@web/test-runner": "^0.20.2",
     "autoprefixer": "^10.4.21",
-    "compression": "^1.8.0",
+    "compression": "^1.8.1",
     "concat": "^1.0.3",
-    "concurrently": "^9.1.2",
+    "concurrently": "^9.2.0",
     "copyfiles": "^2.4.1",
-    "core-js": "^3.41.0",
-    "eslint": "^9.24.0",
-    "eslint-plugin-jsdoc": "^50.6.9",
+    "core-js": "^3.44.0",
+    "eslint": "^9.32.0",
+    "eslint-plugin-jsdoc": "^52.0.0",
     "husky": "^9.1.7",
     "lodash": "^4.17.21",
-    "markdown-magic": "^2.6.1",
-    "nodemon": "^3.1.9",
+    "markdown-magic": "^3.7.0",
+    "nodemon": "^3.1.10",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.5.3",
-    "postcss-discard-comments": "^7.0.3",
+    "postcss": "^8.5.6",
+    "postcss-discard-comments": "^7.0.4",
     "postcss-selector-replace": "^1.0.2",
-    "rollup": "^4.24.3",
-    "rollup-plugin-serve": "^2.0.3",
-    "sass": "^1.80.5",
-    "semantic-release": "^24.2.3",
-    "stylelint": "^16.18.0",
+    "rollup": "^4.46.1",
+    "rollup-plugin-serve": "^3.0.0",
+    "sass": "^1.89.2",
+    "semantic-release": "^24.2.7",
+    "stylelint": "^16.22.0",
     "stylelint-config-idiomatic-order": "^10.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",
-    "typescript": "^5.8.2",
+    "stylelint-config-standard-scss": "^15.0.1",
+    "stylelint-order": "^7.0.0",
+    "stylelint-scss": "^6.12.1",
+    "typescript": "^5.8.3",
     "wc-sass-render": "^1.4.0",
     "web-component-analyzer": "^2.0.0",
     "whatwg-fetch": "^3.6.20",
@@ -149,7 +150,7 @@
     "build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render build:docs",
     "build:docs": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/generateDocs.mjs",
     "build:sass": "npm-run-all build:sass:component postCss:component sass:render",
-    "build:sass:component": "sass --no-source-map src:src",
+    "build:sass:component": "sass --load-path=node_modules --no-source-map src:src",
     "build:version": "node scripts/version.mjs",
     "build:watch": "nodemon -e scss,js,html --watch src --watch apiExamples/**/* --exec npm run build:dev:assets",
     "bundler": "rollup -c",
@@ -162,9 +163,9 @@
     "preCommit": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/pre-commit.mjs",
     "postCss:component": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs",
     "postinstall": "node packageScripts/postinstall.mjs",
-    "sass:render": "sass-render src/*.css -t ./node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js",
-    "serve": "web-dev-server --open demo/ --node-resolve --watch",
-    "sweep": "rm -rf ./demo/css ./dist | rm ./src/*.css ./src/*-css.js",
+    "sass:render": "sass-render src/styles/*.css -t ./node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js",
+    "serve": "web-dev-server --open --node-resolve --watch",
+    "sweep": "rm -rf ./demo/css ./dist | rm ./src/styles/*.css ./src/styles/*-css.js",
     "test": "wtr --coverage",
     "test:watch": "wtr --watch",
     "types": "tsc",

package/src/auro-accordion-button.js

@@ -3,8 +3,8 @@
 
 // ---------------------------------------------------------------------
 
-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";
 
 import { AuroButton } from "@aurodesignsystem/auro-button/src/auro-button.js";
 
@@ -22,6 +22,16 @@ export class AuroAccordionButton extends AuroButton {
     this.ariaexpanded = false;
   }
 
+  static get properties() {
+    return {
+      ...super.properties,
+      ariaexpanded: {
+        type: Boolean,
+        reflect: true
+      }
+    };
+  }
+
   static get styles() {
     return [
       styleCssAuroButton,
@@ -29,6 +39,19 @@ export class AuroAccordionButton extends AuroButton {
     ];
   }
 
+
+  // 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');
+      }
+    }
+  }
+
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-accordion-button"] - The name of element that you want to register to.

package/src/auro-accordion.js

@@ -9,6 +9,7 @@
 import { LitElement, nothing } from "lit";
 import { html } from 'lit/static-html.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 import { AuroAccordionGroup } from './auro-accordion-group.js';
 import { AuroAccordionButton } from './auro-accordion-button.js';
@@ -23,9 +24,9 @@ import iconVersion from './iconVersion.js';
 import chevronUp from "@alaskaairux/icons/dist/icons/interface/chevron-up.mjs";
 import chevronDown from "@alaskaairux/icons/dist/icons/interface/chevron-down.mjs";
 
-import styleCss from "./style-css.js";
-import colorCss from "./color-css.js";
-import tokensCss from "./tokens-css.js";
+import styleCss from "./styles/style-css.js";
+import colorCss from "./styles/color-css.js";
+import tokensCss from "./styles/tokens-css.js";
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
@@ -143,19 +144,37 @@ export class AuroAccordion extends LitElement {
     this.runtimeUtils.handleComponentTagRename(this, 'auro-accordion');
   }
 
+  updated(changedProperties) {
+    // Update button when ariaexpanded changes
+    if (changedProperties.has('expanded')) {
+      const button = this.shadowRoot.querySelector('#accordionTrigger');
+      if (button) {
+        button.ariaexpanded = this.expanded;
+      }
+    }
+  }
+
   /**
-   * Internal function to generate the HTML for the icon to use.
+   * Renders the chevron icons.
    * @private
-   * @param {string} svgContent - The imported svg icon.
-   * @returns {TemplateResult} - The html template for the icon.
+   * @returns {TemplateResult} - The html template for the chevron icons.
    */
-  generateIconHtml(svgContent) {
-    const dom = new DOMParser().parseFromString(svgContent, 'text/html');
-    const svg = dom.body.firstChild;
-
-    svg.setAttribute('slot', 'svg');
-
-    return html`${svg}`;
+  renderChevronIcons() {
+    if (this.chevron === 'none') {
+      return nothing;
+    }
+    
+    const iconSvg = this.expanded ? chevronUp.svg : chevronDown.svg;
+    
+    return html`
+      <${this.iconTag} 
+        customSvg 
+        customColor 
+        ?disabled="${this.disabled}"
+        part="chevron">
+        <div slot="svg">${unsafeHTML(iconSvg)}</div>
+      </${this.iconTag}>
+    `;
   }
 
   /**
@@ -208,33 +227,39 @@ export class AuroAccordion extends LitElement {
     const buttonClasses = {
       "trigger": true,
       "iconRight": this.getAttribute('chevron') === 'right',
+      "iconNone": this.getAttribute('chevron') === 'none',
       "sm": this.getAttribute('variant') === 'sm',
       "lg": this.getAttribute('variant') === 'lg',
     };
 
+    const variantClassMap = {
+      'sm': 'body-default',
+      'lg': 'heading-xs'
+    };
+
+    const triggerSlotClass = variantClassMap[this.variant] || 'heading-2xs';
+
+    // Generate unique ID & apply aria-controls
+    const accordionContentId = `accordionContent-${this.buttonNameHash}`;
+
     return html`
       <div class="componentWrapper" part="accordion">
         <${this.buttonTag}
           ?fluid="${this.emphasis}"
           class="${classMap(buttonClasses)}"
           id="accordionTrigger"
-          aria-controls="accordionContent"
+          aria-controls="${accordionContentId}"
           ?ariaexpanded="${this.expanded}"
           ?aria-disabled="${this.disabled}"
           ?disabled="${this.disabled}"
           @click="${this.handleButtonClick}"
           part="trigger">
-          ${this.chevron === 'none' ? undefined : html`
-            <${this.iconTag} slot="icon" customSvg customColor ?hidden="${!this.expanded}">
-              ${this.generateIconHtml(chevronUp.svg)}
-            </${this.iconTag}>
-            <${this.iconTag} slot="icon" customSvg customColor ?hidden="${this.expanded}">
-              ${this.generateIconHtml(chevronDown.svg)}
-            </${this.iconTag}>
-          `}
-          <slot name="trigger" part="triggerSlot"></slot>
+          ${this.chevron === 'right' ? nothing : this.renderChevronIcons()}
+          <slot name="trigger" part="triggerSlot" class="${triggerSlotClass}"></slot>
+          ${this.chevron === 'right' ? this.renderChevronIcons() : nothing}
         </${this.buttonTag}>
-        <div class="content" id="accordionContent" aria-labelledby="accordionTrigger" inert="${!this.expanded || nothing}" part="content">
+        
+        <div class="content body-default" id="${accordionContentId}" aria-labelledby="accordionTrigger" inert="${!this.expanded || nothing}" part="content">
           <div class="contentWrapper" part="contentWrapper">
             <slot></slot>
           </div>

package/src/iconVersion.js

@@ -1 +1 @@
-export default '8.0.2'
+export default '8.1.1'

package/src/styles/color-css.js

@@ -0,0 +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([disabled]){--ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-disabled, v.$ds-basic-color-texticon-disabled)}:host([disabled]) [auro-icon]{color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}: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/styles/color.css

@@ -0,0 +1,43 @@
+/* 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 */
+: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([disabled]) {
+  --ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-disabled, v.$ds-basic-color-texticon-disabled);
+}
+:host([disabled]) [auro-icon] {
+  color: var(--ds-basic-color-texticon-disabled, #d0d0d0);
+}
+
+: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.scss → styles/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/alaska/SCSSVariables--alaska';
+@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
 
 :host {
   .trigger {
@@ -22,11 +22,15 @@
 
 
 :host([disabled]) {
-  --ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-disabled, $ds-basic-color-texticon-disabled);
+  --ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-disabled, v.$ds-basic-color-texticon-disabled);
+
+  [auro-icon] {
+    color: var(--ds-basic-color-texticon-disabled, v.$ds-basic-color-texticon-disabled);
+  }
 }
 
 :host(:focus) {
-  --ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-focused, #{$ds-advanced-color-state-focused});
+  --ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-focused, #{v.$ds-advanced-color-state-focused});
 }
 
 :host([grouped]) {
@@ -44,12 +48,12 @@
     &:focus,
     &:hover {
       &:before {
-        --ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-selected, #{$ds-advanced-color-state-selected});
+        --ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-selected, #{v.$ds-advanced-color-state-selected});
       }
     }
 
     &:focus {
-      --ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-focused, #{$ds-advanced-color-state-focused});
+      --ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-focused, #{v.$ds-advanced-color-state-focused});
     }
   }
 
@@ -61,11 +65,11 @@
 :host([emphasis][expanded]) {
   .trigger {
     &:before {
-      --ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-selected, #{$ds-advanced-color-state-selected});
+      --ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-selected, #{v.$ds-advanced-color-state-selected});
     }
   }
 
   .content {
-    --ds-auro-accordion-content-border-color: var(--ds-basic-color-border-subtle, #{$ds-basic-color-border-subtle});
+    --ds-auro-accordion-content-border-color: var(--ds-basic-color-border-subtle, #{v.$ds-basic-color-border-subtle});
   }
 }

package/src/styles/style-button-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset;cursor:pointer;overflow:visible}:host .auro-button{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}:host .auro-button:focus,:host .auro-button:focus-visible,:host .auro-button:focus-within{outline:0}:host .auro-button:after{border-color:transparent}:host .contentWrapper{display:flex;flex-direction:row-reverse;margin-left:0 !important;margin-right:0 !important}:host .textSlot{display:flex;flex:1}:host([disabled]){cursor:not-allowed;text-decoration:none !important}:host([disabled]) .auro-button{pointer-events:none}: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]) .textSlot{width:100%}:host(.iconRight) .textSlot{display:flex;flex-direction:row;justify-content:space-between}`;

package/src/styles/style-button.css

@@ -0,0 +1,61 @@
+:focus:not(:focus-visible) {
+  outline: 3px solid transparent;
+}
+
+/* stylelint-disable order/properties-order, declaration-empty-line-before, selector-class-pattern */
+:host {
+  border: unset;
+  cursor: pointer;
+  overflow: visible;
+}
+:host .auro-button {
+  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;
+}
+:host .auro-button:focus, :host .auro-button:focus-visible, :host .auro-button:focus-within {
+  outline: 0;
+}
+:host .auro-button:after {
+  border-color: transparent;
+}
+:host .contentWrapper {
+  display: flex;
+  flex-direction: row-reverse;
+  /* stylelint-disable declaration-no-important */
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+:host .textSlot {
+  display: flex;
+  flex: 1;
+}
+
+:host([disabled]) {
+  cursor: not-allowed;
+  text-decoration: none !important;
+}
+:host([disabled]) .auro-button {
+  pointer-events: none;
+}
+
+: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]) .textSlot {
+  width: 100%;
+}
+
+:host(.iconRight) .textSlot {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}

package/src/{style-button.scss → styles/style-button.scss}

@@ -4,21 +4,21 @@
 // ---------------------------------------------------------------------
 
 // Import Auro tokens
-@import './../node_modules/@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariables';
-@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';
-@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/core';
+@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;
+@use "@aurodesignsystem/webcorestylesheets/src/core";
 
 /* stylelint-disable order/properties-order, declaration-empty-line-before, selector-class-pattern */
 
 :host {
   border: unset;
   cursor: pointer;
+  overflow: visible; // override WCSS Global styles for :host to allow ::before element to be visible
 
   .auro-button {
     all: unset;
     width: 100%;
-    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);
+    padding: var(--ds-size-200, vac.$ds-size-200) var(--trigger-padding-right, 0)
+      var(--ds-size-200, vac.$ds-size-200) var(--trigger-padding-left, 0);
     box-sizing: border-box;
 
     &:focus,
@@ -35,6 +35,9 @@
   .contentWrapper {
     display: flex;
     flex-direction: row-reverse;
+    /* stylelint-disable declaration-no-important */
+    margin-left: 0 !important; // override auro-button default
+    margin-right: 0 !important; // override auro-button default
   }
 
   .textSlot {
@@ -45,6 +48,7 @@
 
 :host([disabled]) {
   cursor: not-allowed;
+  text-decoration: none !important; // override button default
 
   .auro-button {
     pointer-events: none;
@@ -53,27 +57,28 @@
 
 :host(.sm) {
   .auro-button {
-    padding-top: var(--ds-size-150, $ds-size-150);
-    padding-bottom: var(--ds-size-150, $ds-size-150);
+    padding-top: var(--ds-size-150, vac.$ds-size-150);
+    padding-bottom: var(--ds-size-150, vac.$ds-size-150);
   }
 }
 
 :host(.lg) {
   .auro-button {
-    padding-top: var(--ds-size-250, $ds-size-250);
-    padding-bottom: var(--ds-size-250, $ds-size-250);
+    padding-top: var(--ds-size-250, vac.$ds-size-250);
+    padding-bottom: var(--ds-size-250, vac.$ds-size-250);
   }
 }
 
 :host([fluid]) {
-  .contentWrapper {
+  .textSlot {
     width: 100%;
   }
 }
 
 :host(.iconRight) {
-  .contentWrapper {
+  .textSlot {
     display: flex;
     flex-direction: row;
+    justify-content: space-between;
   }
 }