@aurodesignsystem/auro-accordion - npm Package Compare versions

Comparing version 2.0.2 to 3.0.0

CHANGELOG.md

 # Semantic Release Automated Changelog
 
+# [3.0.0](https://github.com/AlaskaAirlines/auro-accordion/compare/v2.0.2...v3.0.0) (2023-10-17)
+
+
+### Bug Fixes
+
+* **attribute:** make attribute name more clear for grouped accordions ([82d0464](https://github.com/AlaskaAirlines/auro-accordion/commit/82d04646c988b14e917e46d84bf52f4deb3cfe3e))
+* **border:** fix emphasis focus state border ([5317b4f](https://github.com/AlaskaAirlines/auro-accordion/commit/5317b4fbfb893138c61d20cdfe8dd46227d9eb63))
+* **types:** add types back into build script ([e15ec75](https://github.com/AlaskaAirlines/auro-accordion/commit/e15ec75da593f804bfca99e833d82d8a55a2f8b0))
+
+
+### Features
+
+* **attr:** add new attributes to affect solo accordion styles ([a1020e2](https://github.com/AlaskaAirlines/auro-accordion/commit/a1020e2883fcf0e490acb277d3c6eaea065fb781))
+* **chevron:** update chevron logic [#85](https://github.com/AlaskaAirlines/auro-accordion/issues/85) ([f722435](https://github.com/AlaskaAirlines/auro-accordion/commit/f72243528a1ede1884937e233561f29506d8f38f))
+* **group:** add functionality and styles for accordion group [#86](https://github.com/AlaskaAirlines/auro-accordion/issues/86) ([ecb6259](https://github.com/AlaskaAirlines/auro-accordion/commit/ecb6259dad90c19c35f4d5d3d9032a22731dbc0a))
+
+
+### Performance Improvements
+
+* **design:** implement default accordion design [#85](https://github.com/AlaskaAirlines/auro-accordion/issues/85) ([e6dd762](https://github.com/AlaskaAirlines/auro-accordion/commit/e6dd762dac7bec3e6726a06baa39db84e23b3017))
+* **npm:** update .npmignore ([61f87b9](https://github.com/AlaskaAirlines/auro-accordion/commit/61f87b907fabfb65b2674a184e4cd3ae984da759))
+* **template:** update template to use auro-button ([b9d6650](https://github.com/AlaskaAirlines/auro-accordion/commit/b9d6650d442dde65c5f34357957513d55dc9ada4))
+* **tokens:** update tokens to use ds prefix ([e141067](https://github.com/AlaskaAirlines/auro-accordion/commit/e141067f89925a9003e49be84320f3fed42358fb))
+
+
+### BREAKING CHANGES
+
+* **chevron:** Remove chevron attribute and add iconRight attribute.
+
 ## [2.0.2](https://github.com/AlaskaAirlines/auro-accordion/compare/v2.0.1...v2.0.2) (2023-08-07)
@@ -4,0 +33,0 @@

demo/api.md

@@ -14,5 +14,7 @@ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../api.md) -->
 | [alignRight](#alignRight) | `alignRight` | `Boolean` |         | If set, the trigger content will align right.    |
-| [chevron](#chevron)    | `chevron`    | `Boolean` |         | If set, the accordion trigger will have a chevron showing expanded/collapsed state. |
+| [chevron](#chevron)    | `chevron`    | `String`  |         | Sets chevron variant option. Possible values are: `none`, `right`. |
+| [emphasis](#emphasis)   | `emphasis`   | `Boolean` |         | If set, emphasis styles will be applied to the auro-accordions. |
 | [expanded](#expanded)   | `expanded`   | `Boolean` | false   | If set, the accordion is expanded.               |
-| [fluid](#fluid)      | `fluid`      | `Boolean` |         | If set, the trigger and content will be 100% width. |
+| [grouped](#grouped)    | `grouped`    | `Boolean` |         | Attribute will be set on accordion when it appears in an accordion group. |
+| [variant](#variant)    | `variant`    | `String`  |         | Sets accordion variant option. Possible values are: `sm`, `lg`. |
 
@@ -25,2 +27,8 @@ ## Methods
 
+## Events
+
+| Event            | Type                                  | Description                                      |
+|------------------|---------------------------------------|--------------------------------------------------|
+| [toggleExpanded](#toggleExpanded) | `CustomEvent<{ expanded: boolean; }>` | Notifies that the accordion has been expanded or closed. |
+
 ## Slots
@@ -35,10 +43,11 @@
 
-| Part      | Description                         |
-|-----------|-------------------------------------|
-| [chevron](#chevron) | Apply CSS to chevron icon.          |
-| [content](#content) | Apply CSS to the accordion content. |
-| [trigger](#trigger) | Apply CSS to trigger element.       |
+| Part        | Description                         |
+|-------------|-------------------------------------|
+| [accordion](#accordion) | Apply CSS to Accordion wrapper.     |
+| [chevron](#chevron)   | Apply CSS to chevron icon.          |
+| [content](#content)   | Apply CSS to the accordion content. |
+| [trigger](#trigger)   | Apply CSS to trigger element.       |
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## API Examples
+## Accordion API Examples
 
@@ -69,3 +78,3 @@ ### Basic
     </div>
-<auro-accordion alignRight chevron>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
@@ -94,13 +103,121 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
 </auro-accordion>
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/accordionGroup.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/accordionGroup.html -->
+  <auro-accordion-group>
+    <auro-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </auro-accordion>
+    <auro-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </auro-accordion>
+    <auro-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </auro-accordion>
+  </auro-accordion-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/accordionGroup.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/accordionGroup.html -->
 
-### Attribute Examples
+```html
+<auro-accordion-group>
+  <auro-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+  <auro-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+  <auro-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+</auro-accordion-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 
-#### alignRight
+### Accordion Attribute Examples
 
-Using the `alignRight` attribute will cause the trigger to align to the right edge of the accordion.
+#### No Chevron
 
+The chevron icon within the trigger of the `auro-accordion` will not render when `chevron="none"` is present on the element.
+
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/alignRight.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/alignRight.html -->
-  <auro-accordion alignRight>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/chevronNone.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/chevronNone.html -->
+  <auro-accordion chevron="none">
     <span slot="trigger">Trigger</span>
@@ -122,9 +239,9 @@ <p>
 </div>
-<auro-accordion alignRight chevron>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/alignRight.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/alignRight.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/chevronNone.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/chevronNone.html -->
 
 ```html
-<auro-accordion alignRight>
+<auro-accordion chevron="none">
   <span slot="trigger">Trigger</span>
@@ -148,12 +265,10 @@ <p>
 
-#### expanded
+#### Chevron Right
 
-The accordion can be programatically expanded or collapsed by setting the `expanded` attribute to `true` or `false`.
+Using the `chevron="right"` will cause the chevron to appear on the right side of the accordion label.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/expanded.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/expanded.html -->
-  <auro-button id="auroaccordionExpandedExampleBtnTrue">Set expanded = `true`</auro-button>
-  <auro-button id="auroaccordionExpandedExampleBtnFalse">Set expanded = `false`</auro-button>
-  <auro-accordion id="auroaccordionExpandedExample">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/chevronRight.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/chevronRight.html -->
+  <auro-accordion chevron="right">
     <span slot="trigger">Trigger</span>
@@ -177,9 +292,7 @@ <p>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/expanded.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/expanded.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/chevronRight.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/chevronRight.html -->
 
 ```html
-<auro-button id="auroaccordionExpandedExampleBtnTrue">Set expanded = `true`</auro-button>
-<auro-button id="auroaccordionExpandedExampleBtnFalse">Set expanded = `false`</auro-button>
-<auro-accordion id="auroaccordionExpandedExample">
+<auro-accordion chevron="right">
   <span slot="trigger">Trigger</span>
@@ -201,29 +314,12 @@ <p>
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/expanded.js) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/expanded.js -->
-
-```js
-export function expandedExample() {
-  const expandedExampleElem = document.querySelector('#auroaccordionExpandedExample');
-
-  document.querySelector('#auroaccordionExpandedExampleBtnTrue').addEventListener('click', () => {
-    expandedExampleElem.expanded = true;
-  })
-
-  document.querySelector('#auroaccordionExpandedExampleBtnFalse').addEventListener('click', () => {
-    expandedExampleElem.expanded = false;
-  })
-}
-```
-<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### fluid
+#### alignRight
 
-The accordion trigger can be set to consume 100% of available width by using the `fluid` attribute.
+Using the `alignRight` attribute will cause the trigger to align to the right edge of the accordion.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/fluid.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/fluid.html -->
-  <auro-accordion fluid>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/alignRight.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/alignRight.html -->
+  <auro-accordion alignRight>
     <span slot="trigger">Trigger</span>
@@ -245,9 +341,9 @@ <p>
 </div>
-<auro-accordion alignRight chevron>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/fluid.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/fluid.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/alignRight.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/alignRight.html -->
 
 ```html
-<auro-accordion fluid>
+<auro-accordion alignRight>
   <span slot="trigger">Trigger</span>
@@ -271,10 +367,10 @@ <p>
 
-#### chevron
+#### align chevron right
 
-The `chevron` attribute can be used to add a chevron that toggles between expanded and collapsed states. It can also be styled and positioned using a `chevron` CSS part.
+Using the `alignRight` attribute in conjuction with the `chevron="right"` attribute will cause the trigger to align to the right edge of the accordion, with the chevron appearing on the right side of the trigger.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/chevron.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/chevron.html -->
-  <auro-accordion id="chevronAccordion" chevron>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/alignChevronRight.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/alignChevronRight.html -->
+  <auro-accordion chevron="right" alignRight>
     <span slot="trigger">Trigger</span>
@@ -296,9 +392,9 @@ <p>
 </div>
-<auro-accordion alignRight chevron>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/chevron.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/chevron.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/alignChevronRight.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/alignChevronRight.html -->
 
 ```html
-<auro-accordion id="chevronAccordion" chevron>
+<auro-accordion chevron="right" alignRight>
   <span slot="trigger">Trigger</span>
@@ -320,38 +416,39 @@ <p>
 <!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 
-### Slot Examples
+#### expanded
 
-#### default
+The accordion can be programatically expanded or collapsed by setting the `expanded` attribute to `true` or `false`.
 
-Slot contains all content inside the collapsable portion of the accordion.
-
-<div class="twoColDemoRow">
-  <div>
-    <div class="exampleWrapper">
-      <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
-      <!-- The below content is automatically added from ./../../apiExamples/basic.html -->
-      <auro-accordion>
-        <span slot="trigger">Trigger</span>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-        <p>
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </p>
-        <p>
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-        </p>
-        <p>
-          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-      </auro-accordion>
-      <!-- AURO-GENERATED-CONTENT:END -->
-    </div>
-<auro-accordion alignRight chevron>
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/expanded.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/expanded.html -->
+  <auro-button id="auroaccordionExpandedExampleBtnTrue">Set expanded = `true`</auro-button>
+  <auro-button id="auroaccordionExpandedExampleBtnFalse">Set expanded = `false`</auro-button>
+  <auro-accordion id="auroaccordionExpandedExample">
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/expanded.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/expanded.html -->
 
 ```html
-<auro-accordion>
+<auro-button id="auroaccordionExpandedExampleBtnTrue">Set expanded = `true`</auro-button>
+<auro-button id="auroaccordionExpandedExampleBtnFalse">Set expanded = `false`</auro-button>
+<auro-accordion id="auroaccordionExpandedExample">
   <span slot="trigger">Trigger</span>
@@ -373,53 +470,473 @@ <p>
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/expanded.js) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/expanded.js -->
+
+```js
+export function expandedExample() {
+  const expandedExampleElem = document.querySelector('#auroaccordionExpandedExample');
+
+  document.querySelector('#auroaccordionExpandedExampleBtnTrue').addEventListener('click', () => {
+    expandedExampleElem.expanded = true;
+  })
+
+  document.querySelector('#auroaccordionExpandedExampleBtnFalse').addEventListener('click', () => {
+    expandedExampleElem.expanded = false;
+  })
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### trigger
+## Accordion Group Attribute Examples
 
-This slot is used for content that may be clicked on to toggle visibility of the accordion content.
+### Small
 
-<div class="twoColDemoRow">
-  <div>
-    <div class="exampleWrapper">
-      <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
-      <!-- The below content is automatically added from ./../../apiExamples/basic.html -->
-      <auro-accordion>
-        <span slot="trigger">Trigger</span>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-        <p>
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </p>
-        <p>
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-        </p>
-        <p>
-          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-      </auro-accordion>
-      <!-- AURO-GENERATED-CONTENT:END -->
-    </div>
-<auro-accordion alignRight chevron>
+Using the `variant="sm"` attribute will cause the size of the accordion trigger to render smaller.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/accordionGroupSm.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/accordionGroupSm.html -->
+  <auro-accordion-group variant="sm">
+    <auro-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </auro-accordion>
+    <auro-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </auro-accordion>
+    <auro-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </auro-accordion>
+  </auro-accordion-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/accordionGroupSm.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/accordionGroupSm.html -->
 
 ```html
-<auro-accordion>
-  <span slot="trigger">Trigger</span>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-  </p>
-  <p>
-    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </p>
-  <p>
-    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-  </p>
-  <p>
-    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </p>
+<auro-accordion-group variant="sm">
+  <auro-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+  <auro-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+  <auro-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+</auro-accordion-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+
+### Large
+
+Using the `variant="lg"` attribute will cause the size of the accordion trigger to render larger.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/accordionGroupLg.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/accordionGroupLg.html -->
+  <auro-accordion-group variant="lg">
+    <auro-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </auro-accordion>
+    <auro-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </auro-accordion>
+    <auro-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </auro-accordion>
+  </auro-accordion-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/accordionGroupLg.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/accordionGroupLg.html -->
+
+```html
+<auro-accordion-group variant="lg">
+  <auro-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+  <auro-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+  <auro-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+</auro-accordion-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+
+### emphasis
+
+Use the `emphasis` attribute to apply border highlights to the `auro-accordion` on hover and move the chevron to the right side of the trigger.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/emphasis.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/emphasis.html -->
+  <auro-accordion-group emphasis>
+    <auro-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </auro-accordion>
+    <auro-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </auro-accordion>
+    <auro-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </auro-accordion>
+  </auro-accordion-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/emphasis.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/emphasis.html -->
+
+```html
+<auro-accordion-group emphasis>
+  <auro-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+  <auro-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+  <auro-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+</auro-accordion-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### noToggleExpanded
+
+Using the `noToggleExpanded` attribute will allow for multiple `auro-accordion`'s in an `auro-accordion-group` to be open at the same time.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/noToggleExpanded.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/noToggleExpanded.html -->
+  <auro-accordion-group noToggleExpanded>
+    <auro-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </auro-accordion>
+    <auro-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </auro-accordion>
+    <auro-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </auro-accordion>
+  </auro-accordion-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/noToggleExpanded.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/noToggleExpanded.html -->
+
+```html
+<auro-accordion-group noToggleExpanded>
+  <auro-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+  <auro-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+  <auro-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+</auro-accordion-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>

demo/demo.md

@@ -46,3 +46,3 @@ <!--
 </div>
-<auro-accordion alignRight chevron>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
@@ -71,3 +71,111 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
 </auro-accordion>
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/accordionGroup.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/accordionGroup.html -->
+  <auro-accordion-group>
+    <auro-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </auro-accordion>
+    <auro-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </auro-accordion>
+    <auro-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </auro-accordion>
+  </auro-accordion-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/accordionGroup.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/accordionGroup.html -->
 
+```html
+<auro-accordion-group>
+  <auro-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+  <auro-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+  <auro-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </auro-accordion>
+</auro-accordion-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ## Recommended Use and Version Control
@@ -86,3 +194,7 @@
 
+#### Single Custom Accordion
+
 <div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/custom.html -->
   <custom-accordion>
@@ -103,6 +215,10 @@ <span slot="trigger">Trigger</span>
   </custom-accordion>
+  <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion alignRight chevron>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
-  ```html
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/custom.html -->
+
+```html
 <custom-accordion>
@@ -123,4 +239,115 @@ <span slot="trigger">Trigger</span>
 </custom-accordion>
-  ```
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 
+#### Custom Accordion Group
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/customGroup.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/customGroup.html -->
+  <custom-accordion-group>
+    <custom-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </custom-accordion>
+    <custom-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </custom-accordion>
+    <custom-accordion>
+      <span slot="trigger">Trigger</span>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <p>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </custom-accordion>
+  </custom-accordion-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight chevron>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/customGroup.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/customGroup.html -->
+
+```html
+<custom-accordion-group>
+  <custom-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </custom-accordion>
+  <custom-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </custom-accordion>
+  <custom-accordion>
+    <span slot="trigger">Trigger</span>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <p>
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </custom-accordion>
+</custom-accordion-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>

dist/auro-accordion.d.ts

@@ -6,10 +6,14 @@ /**
  * @attr {Boolean} alignRight - If set, the trigger content will align right.
- * @attr {Boolean} chevron - If set, the accordion trigger will have a chevron showing expanded/collapsed state.
  * @attr {Boolean} expanded - If set, the accordion is expanded.
- * @attr {Boolean} fluid - If set, the trigger and content will be 100% width.
+ * @attr {Boolean} emphasis - If set, emphasis styles will be applied to the auro-accordions.
+ * @attr {Boolean} grouped - Attribute will be set on accordion when it appears in an accordion group.
+ * @attr {String} chevron - Sets chevron variant option. Possible values are: `none`, `right`.
+ * @attr {String} variant - Sets accordion variant option. Possible values are: `sm`, `lg`.
  * @slot - Default slot for the accordion content.
  * @slot trigger - Defines the content of the trigger element.
+ * @csspart accordion - Apply CSS to Accordion wrapper.
  * @csspart trigger - Apply CSS to trigger element.
  * @csspart chevron - Apply CSS to chevron icon.
  * @csspart content - Apply CSS to the accordion content.
+ * @fires toggleExpanded - Notifies that the accordion has been expanded or closed.
  */
@@ -22,14 +26,22 @@ export class AuroAccordion extends LitElement {
         };
-        chevron: {
+        expanded: {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        expanded: {
+        emphasis: {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        fluid: {
+        grouped: {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        chevron: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
     };
@@ -46,3 +58,2 @@ static get styles(): import("lit").CSSResult[];
      * Toggles the visibility of the accordion content.
-     * @returns {void}
      */
@@ -54,3 +65,3 @@ toggle(): void;
      * @returns {void}
-     */
+    //  */
     private handleContentSlotChanges;
@@ -57,0 +68,0 @@ render(): import("lit-html").TemplateResult<1>;

dist/auro-accordion.js

@@ -8,2 +8,3 @@ // Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 import { LitElement, html, nothing } from "lit";
+import { classMap } from 'lit/directives/class-map.js';
 
@@ -14,3 +15,2 @@ // Import Icons
 
-// Import touch detection lib
 import styleCss from "./style-css.js";
@@ -24,10 +24,14 @@
  * @attr {Boolean} alignRight - If set, the trigger content will align right.
- * @attr {Boolean} chevron - If set, the accordion trigger will have a chevron showing expanded/collapsed state.
  * @attr {Boolean} expanded - If set, the accordion is expanded.
- * @attr {Boolean} fluid - If set, the trigger and content will be 100% width.
+ * @attr {Boolean} emphasis - If set, emphasis styles will be applied to the auro-accordions.
+ * @attr {Boolean} grouped - Attribute will be set on accordion when it appears in an accordion group.
+ * @attr {String} chevron - Sets chevron variant option. Possible values are: `none`, `right`.
+ * @attr {String} variant - Sets accordion variant option. Possible values are: `sm`, `lg`.
  * @slot - Default slot for the accordion content.
  * @slot trigger - Defines the content of the trigger element.
+ * @csspart accordion - Apply CSS to Accordion wrapper.
  * @csspart trigger - Apply CSS to trigger element.
  * @csspart chevron - Apply CSS to chevron icon.
  * @csspart content - Apply CSS to the accordion content.
+ * @fires toggleExpanded - Notifies that the accordion has been expanded or closed.
  */
@@ -54,13 +58,21 @@
       },
-      chevron: {
+      expanded: {
         type: Boolean,
         reflect: true,
       },
-      expanded: {
+      emphasis: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
-      fluid: {
+      grouped: {
         type: Boolean,
-        reflect: true,
+        reflect: true
+      },
+      chevron: {
+        type: String,
+        reflect: true
+      },
+      variant: {
+        type: String,
+        reflect: true
       }
@@ -83,3 +95,3 @@ };
 
-   return html`${svg}`;
+    return html`${svg}`;
   }
@@ -89,6 +101,13 @@
    * Toggles the visibility of the accordion content.
-   * @returns {void}
    */
   toggle() {
     this.expanded = !this.expanded;
+
+    this.dispatchEvent(new CustomEvent('toggleExpanded', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        expanded: this.expanded
+      }
+    }));
   }
@@ -100,3 +119,3 @@
    * @returns {void}
-   */
+  //  */
   handleContentSlotChanges() {
@@ -113,17 +132,31 @@ const content = this.shadowRoot.querySelector(".content");
 
-    const chevronHtml = this.chevron
-      ? html`
-          <div class="iconWrapper" part="chevron">
-            ${this.generateIconHtml(this.expanded ? chevronUp.svg : chevronDown.svg)}
-          </div>`
-      : html``
+    const buttonClasses = {
+      "trigger": true,
+      "iconRight": this.getAttribute('chevron') === 'right'
+    }
 
+    const chevronHtml = this.getAttribute('chevron') === 'none'
+      ? html``
+      : html`
+        <div class="iconWrapper" part="chevron" slot="icon">
+          ${this.generateIconHtml(this.expanded ? chevronUp.svg : chevronDown.svg)}
+        </div>
+      `;
+
     return html`
-      <div class="componentWrapper">
-        <button class="trigger" id="accordionTrigger" aria-controls="accordionContent" aria-expanded="${this.expanded}" @click="${this.toggle}" part="trigger">
-          <slot name="trigger"></slot>
+      <div class="componentWrapper" part="accordion">
+        <auro-accordionbutton 
+          ?fluid="${this.emphasis}" 
+          class="${classMap(buttonClasses)}" 
+          id="accordionTrigger" 
+          aria-controls="accordionContent" 
+          aria-expanded="${this.expanded}" 
+          @click="${this.toggle}" 
+          part="trigger">
+          
           ${chevronHtml}
-        </button  >
+          <slot name="trigger" part="triggerSlot"></slot>
+        </auro-accordionbutton>
         <div class="content" id="accordionContent" aria-labelledby="accordionTrigger" inert="${!this.expanded || nothing}" part="content">
-          <div class="contentWrapper">
+          <div class="contentWrapper" part="contentWrapper">
             <slot @slotchange="${this.handleContentSlotChanges}"></slot>
@@ -130,0 +163,0 @@ </div>

dist/style-css.js

 import {css} from 'lit-element';
-export default css`:root{--auro-asset-font-circular-family-name:"AS Circular";--auro-asset-font-circular-filename:"ASCircularWeb";--auro-asset-font-circular-weight-light:"-Light";--auro-asset-font-circular-weight-medium:"-Medium";--auro-asset-font-circular-weight-book:"-Book";--auro-border-radius:0.375rem;--auro-size-25:0.125rem;--auro-size-50:0.25rem;--auro-size-100:0.5rem;--auro-size-150:0.75rem;--auro-size-200:1rem;--auro-size-300:1.5rem;--auro-size-400:2rem;--auro-size-500:2.5rem;--auro-size-600:3rem;--auro-size-700:3.5rem;--auro-size-800:4rem;--auro-size-900:4.5rem;--auro-size-1000:5rem;--auro-size-none:0rem;--auro-size-xxxs:0.125rem;--auro-size-xxs:0.25rem;--auro-size-xs:0.5rem;--auro-size-sm:0.75rem;--auro-size-md:1rem;--auro-size-lg:1.5rem;--auro-size-xl:2rem;--auro-size-xxl:3rem;--auro-size-xxxl:4rem;--auro-unitless-scale-20:0.25;--auro-unitless-scale-50:0.5;--auro-unitless-scale-100:1;--auro-unitless-scale-140:1.4;--auro-unitless-scale-150:1.5;--auro-unitless-scale-200:2;--auro-unitless-scale-300:3;--auro-unitless-scale-350:3.5;--auro-animation-default-property:all;--auro-animation-default-duration:0.3s;--auro-animation-default-timing:ease-out;--auro-breakpoint-sm:660px;--auro-breakpoint-md:1024px;--auro-breakpoint-lg:1232px;--auro-depth-dialog:100;--auro-depth-overlay:200;--auro-depth-modal:400;--auro-depth-tooltip:300;--auro-elevation-100:0px 0px 5px rgba(0, 0, 0, 0.15);--auro-elevation-200:0px 0px 10px rgba(0, 0, 0, 0.15);--auro-elevation-300:0px 0px 15px rgba(0, 0, 0, 0.2);--auro-grid-breakpoint-xs:320px;--auro-grid-breakpoint-sm:576px;--auro-grid-breakpoint-md:768px;--auro-grid-breakpoint-lg:1024px;--auro-grid-breakpoint-xl:1232px;--auro-grid-column-xs:6;--auro-grid-column-sm:12;--auro-grid-column-md:12;--auro-grid-column-lg:12;--auro-grid-column-xl:12;--auro-grid-gutter-xs:0.5rem;--auro-grid-gutter-sm:1rem;--auro-grid-gutter-md:1.5rem;--auro-grid-gutter-lg:1.5rem;--auro-grid-gutter-xl:2rem;--auro-grid-margin-xs:1rem;--auro-grid-margin-sm:1rem;--auro-grid-margin-md:1.5rem;--auro-grid-margin-lg:2rem;--auro-grid-margin-xl:2rem;--auro-font-family-default:"AS Circular", Helvetica Neue, Arial, sans-serif;--auro-font-family-mono:Menlo, Monaco, Consolas, "Courier New", monospace;--auro-text-heading-300-weight:300;--auro-text-heading-300-px:18px;--auro-text-heading-300-size:1.125rem;--auro-text-heading-300-height:1.625rem;--auro-text-heading-300-height-px:26px;--auro-text-heading-400-weight:300;--auro-text-heading-400-px:20px;--auro-text-heading-400-size:1.25rem;--auro-text-heading-400-height:1.625rem;--auro-text-heading-400-height-px:26px;--auro-text-heading-500-weight:300;--auro-text-heading-500-px-breakpoint-sm:22px;--auro-text-heading-500-px-breakpoint-md:24px;--auro-text-heading-500-px-breakpoint-lg:24px;--auro-text-heading-500-size-breakpoint-sm:1.375rem;--auro-text-heading-500-size-breakpoint-md:1.5rem;--auro-text-heading-500-size-breakpoint-lg:1.5rem;--auro-text-heading-500-height-breakpoint-sm:1.625rem;--auro-text-heading-500-height-breakpoint-px-sm:26px;--auro-text-heading-500-height-breakpoint-md:1.875rem;--auro-text-heading-500-height-breakpoint-px-md:30px;--auro-text-heading-500-height-breakpoint-lg:2rem;--auro-text-heading-500-height-breakpoint-px-lg:32px;--auro-text-heading-600-weight:300;--auro-text-heading-600-px-breakpoint-sm:26px;--auro-text-heading-600-px-breakpoint-md:28px;--auro-text-heading-600-px-breakpoint-lg:28px;--auro-text-heading-600-size-breakpoint-sm:1.625rem;--auro-text-heading-600-size-breakpoint-md:1.75rem;--auro-text-heading-600-size-breakpoint-lg:1.75rem;--auro-text-heading-600-height-breakpoint-sm:1.875rem;--auro-text-heading-600-height-breakpoint-px-sm:30px;--auro-text-heading-600-height-breakpoint-md:2.125rem;--auro-text-heading-600-height-breakpoint-px-md:34px;--auro-text-heading-600-height-breakpoint-lg:2.25rem;--auro-text-heading-600-height-breakpoint-px-lg:36px;--auro-text-heading-700-weight:500;--auro-text-heading-700-px-breakpoint-sm:28px;--auro-text-heading-700-px-breakpoint-md:32px;--auro-text-heading-700-px-breakpoint-lg:36px;--auro-text-heading-700-size-breakpoint-sm:1.75rem;--auro-text-heading-700-size-breakpoint-md:2rem;--auro-text-heading-700-size-breakpoint-lg:2.25rem;--auro-text-heading-700-height-breakpoint-sm:2.125rem;--auro-text-heading-700-height-breakpoint-px-sm:34px;--auro-text-heading-700-height-breakpoint-md:2.375rem;--auro-text-heading-700-height-breakpoint-px-md:38px;--auro-text-heading-700-height-breakpoint-lg:2.75rem;--auro-text-heading-700-height-breakpoint-px-lg:44px;--auro-text-heading-800-weight:500;--auro-text-heading-800-px-breakpoint-sm:32px;--auro-text-heading-800-px-breakpoint-md:36px;--auro-text-heading-800-px-breakpoint-lg:40px;--auro-text-heading-800-size-breakpoint-sm:2rem;--auro-text-heading-800-size-breakpoint-md:2.25rem;--auro-text-heading-800-size-breakpoint-lg:2.5rem;--auro-text-heading-800-height-breakpoint-sm:2.375rem;--auro-text-heading-800-height-breakpoint-px-sm:38px;--auro-text-heading-800-height-breakpoint-md:2.625rem;--auro-text-heading-800-height-breakpoint-px-md:42px;--auro-text-heading-800-height-breakpoint-lg:3rem;--auro-text-heading-800-height-breakpoint-px-lg:48px;--auro-text-heading-default-weight:500;--auro-text-heading-default-margin:0;--auro-text-heading-default-spacing:-0.2px;--auro-text-heading-medium-weight:300;--auro-text-heading-display-weight:100;--auro-text-heading-display-px-breakpoint-sm:44px;--auro-text-heading-display-px-breakpoint-md:48px;--auro-text-heading-display-px-breakpoint-lg:56px;--auro-text-heading-display-size-breakpoint-sm:2.75rem;--auro-text-heading-display-size-breakpoint-md:3rem;--auro-text-heading-display-size-breakpoint-lg:3.5rem;--auro-text-heading-display-height-breakpoint-sm:3.375rem;--auro-text-heading-display-height-breakpoint-px-sm:54px;--auro-text-heading-display-height-breakpoint-md:3.75rem;--auro-text-heading-display-height-breakpoint-px-md:60px;--auro-text-heading-display-height-breakpoint-lg:4.25rem;--auro-text-heading-display-height-breakpoint-px-lg:68px;--auro-text-body-default-weight:500;--auro-text-body-size-xxs:0.625rem;--auro-text-body-size-xs:0.75rem;--auro-text-body-size-sm:0.875rem;--auro-text-body-size-default:1rem;--auro-text-body-size-lg:1.125rem;--auro-text-body-height-xs:1rem;--auro-text-body-height-sm:1.25rem;--auro-text-body-height-default:1.5rem;--auro-text-body-height-lg:1.625rem;--auro-color-alert-notification-on-light:#0074c8;--auro-color-alert-notification-on-dark:#00cff0;--auro-color-alert-warning-on-light:#de750c;--auro-color-alert-error-on-light:#df0b37;--auro-color-alert-error-on-dark:#ff999b;--auro-color-alert-success-on-light:#00805d;--auro-color-alert-success-on-dark:#69cf96;--auro-color-alert-advisory-on-light:#fff0cd;--auro-color-alert-advisory-on-dark:#fff0cd;--auro-color-alert-bkg-success-default:#ddf6e8;--auro-color-alert-bkg-error-default:#ffedf1;--auro-color-background-lightest:#ffffff;--auro-color-background-lighter:#f8f8f8;--auro-color-background-darker:#01426a;--auro-color-background-darkest:#00274a;--auro-color-base-white:#ffffff;--auro-color-base-white-opacity-40:rgba(255, 255, 255, 0.4);--auro-color-base-black:#000000;--auro-color-base-black-opacity-15:rgba(0, 0, 0, 0.15);--auro-color-base-gray-100:#f8f8f8;--auro-color-base-gray-200:#dbdbdb;--auro-color-base-gray-300:#b2b2b2;--auro-color-base-gray-400:#767676;--auro-color-base-gray-500:#222222;--auro-color-base-neutral-400:#9fabbb;--auro-color-base-neutral-500:#626b79;--auro-color-state-error-100:#ff999b;--auro-color-state-error-500:#df0b37;--auro-color-state-success-100:#69cf96;--auro-color-state-success-500:#00805d;--auro-color-state-warning-500:#de750c;--auro-color-border-primary-on-light:#626b79;--auro-color-border-primary-on-dark:#9fabbb;--auro-color-border-active-on-light:#0074c8;--auro-color-border-active-on-dark:#00cff0;--auro-color-border-error-on-light:#df0b37;--auro-color-border-error-on-dark:#ff999b;--auro-color-border-disabled-on-light:#dbdbdb;--auro-color-border-disabled-on-dark:#dbdbdb;--auro-color-border-focus-on-light:#222222;--auro-color-border-focus-on-dark:#ffffff;--auro-color-border-divider-on-light:rgba(0, 0, 0, 0.15);--auro-color-border-divider-on-dark:#ffffff;--auro-color-brand-midnight-100:#c1daf0;--auro-color-brand-midnight-200:#569ed7;--auro-color-brand-midnight-300:#156fad;--auro-color-brand-midnight-400:#01426a;--auro-color-brand-midnight-500:#00274a;--auro-color-brand-atlas-100:#cde6ff;--auro-color-brand-atlas-200:#6bb7fb;--auro-color-brand-atlas-300:#2492eb;--auro-color-brand-atlas-400:#0074c8;--auro-color-brand-atlas-500:#054687;--auro-color-brand-breeze-100:#c0f7ff;--auro-color-brand-breeze-200:#5de3f7;--auro-color-brand-breeze-300:#00cff0;--auro-color-brand-breeze-400:#099dc5;--auro-color-brand-breeze-500:#0b5575;--auro-color-brand-tropical-100:#e2ffcd;--auro-color-brand-tropical-200:#d0fba6;--auro-color-brand-tropical-300:#c0e585;--auro-color-brand-tropical-400:#91be62;--auro-color-brand-tropical-500:#5e8741;--auro-color-brand-alpine-100:#bcaae6;--auro-color-brand-alpine-200:#9e73ea;--auro-color-brand-alpine-300:#8439ef;--auro-color-brand-alpine-400:#631db8;--auro-color-brand-alpine-500:#39115c;--auro-color-brand-flamingo-100:#ffebee;--auro-color-brand-flamingo-200:#ffc0ca;--auro-color-brand-flamingo-300:#ff94a7;--auro-color-brand-flamingo-400:#f65b7b;--auro-color-brand-flamingo-500:#b82b47;--auro-color-brand-canyon-100:#ffcab6;--auro-color-brand-canyon-200:#f99574;--auro-color-brand-canyon-300:#f26135;--auro-color-brand-canyon-400:#de3e09;--auro-color-brand-canyon-500:#b83302;--auro-color-brand-goldcoast-100:#fff0cd;--auro-color-brand-goldcoast-200:#ffdb67;--auro-color-brand-goldcoast-300:#ffd200;--auro-color-brand-goldcoast-400:#e5ad07;--auro-color-brand-goldcoast-500:#b88624;--auro-color-brand-neutral-100:#f9fbfc;--auro-color-brand-neutral-200:#e2eaef;--auro-color-brand-neutral-300:#cbd8e2;--auro-color-brand-neutral-400:#9fabbb;--auro-color-brand-neutral-500:#626b79;--auro-color-brand-gray-100:#f8f8f8;--auro-color-brand-gray-200:#dbdbdb;--auro-color-brand-gray-300:#b2b2b2;--auro-color-brand-gray-400:#767676;--auro-color-brand-gray-500:#222222;--auro-color-brand-goldgray-100:#c5c1bf;--auro-color-brand-goldgray-200:#726e6c;--auro-color-brand-gold-100:#ccbc94;--auro-color-brand-gold-200:#7f682e;--auro-color-brand-emerald:#139142;--auro-color-brand-sapphire:#015daa;--auro-color-brand-ruby:#a41d4a;--auro-color-icon-primary-on-light:#626b79;--auro-color-icon-primary-on-dark:#9fabbb;--auro-color-icon-emphasis-on-light:#222222;--auro-color-icon-emphasis-on-dark:#ffffff;--auro-color-icon-accent-on-light:#0074c8;--auro-color-icon-accent-on-dark:#00cff0;--auro-color-icon-disabled-on-light:rgba(0, 0, 0, 0.15);--auro-color-icon-disabled-on-dark:rgba(255, 255, 255, 0.4);--auro-color-text-primary-on-light:#222222;--auro-color-text-primary-on-dark:#ffffff;--auro-color-text-secondary-on-light:#626b79;--auro-color-text-secondary-on-dark:#9fabbb;--auro-color-text-link-on-light:#0074c8;--auro-color-text-link-on-dark:#00cff0;--auro-color-text-error-on-light:#df0b37;--auro-color-text-error-on-dark:#ff999b;--auro-color-text-disabled-on-light:#dbdbdb;--auro-color-text-disabled-on-dark:#dbdbdb;--auro-color-text-emphasis-on-light:#01426a;--auro-color-text-emphasis-on-dark:#c1daf0;--auro-color-tier-alaska-mvp-on-light:#726e6c;--auro-color-tier-alaska-mvp-on-dark:#c5c1bf;--auro-color-tier-alaska-mvpgold-on-light:#7f682e;--auro-color-tier-alaska-mvpgold-on-dark:#ccbc94;--auro-color-tier-oneworld-emerald:#139142;--auro-color-tier-oneworld-sapphire:#015daa;--auro-color-tier-oneworld-ruby:#a41d4a;--auro-color-ui-default-on-light:#0074c8;--auro-color-ui-default-on-dark:#00cff0;--auro-color-ui-hover-on-light:#054687;--auro-color-ui-hover-on-dark:#5de3f7;--auro-color-ui-active-on-light:#054687;--auro-color-ui-active-on-dark:#5de3f7;--auro-color-ui-disabled-on-light:rgba(0, 116, 200, 0.2);--auro-color-ui-disabled-on-dark:rgba(0, 207, 240, 0.3);--auro-color-ui-bkg-hover-on-dark:rgba(93, 227, 247, 0.1);--auro-color-ui-bkg-hover-on-light:rgba(0, 0, 0, 0.06)}*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host .trigger{padding:0;margin:0;border:none;background-color:transparent;text-align:inherit;font:inherit;border-radius:0;-webkit-appearance:none;appearance:none;cursor:pointer;color:var(--auro-color-text-primary-on-light)}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height}:host .componentWrapper{height:100%;overflow:hidden}:host([alignRight]) .componentWrapper{display:flex;flex-direction:column;align-items:flex-end}:host([fluid]) .trigger{width:100%}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}:host([chevron]) .trigger{display:flex}:host([chevron]) .iconWrapper{display:inline-block}`;
+export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host .trigger{position:relative;cursor:pointer;display:flex;flex-direction:row;color:var(--ds-color-text-primary-default);padding:var(--ds-size-200) 0;border:1px solid transparent;border-radius:var(--ds-border-radius)}:host .trigger:hover{text-decoration:underline}:host ::slotted([slot=trigger]){padding-left:var(--ds-size-100);padding-right:var(--ds-size-200);font-size:var(--ds-text-heading-300-size)}:host .iconWrapper{height:var(--ds-size-300);margin-top:-2px}:host .iconWrapper svg{color:var(--ds-color-icon-accent-default)}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height;font-size:var(--ds-text-body-size-default)}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400);padding-bottom:var(--ds-size-300);padding-right:var(--ds-size-200)}:host(:focus) .trigger{border:1px solid var(--ds-color-border-active-default)}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-50)}:host([alignRight]) .componentWrapper{display:flex;flex-direction:column;align-items:flex-end}:host([fluid]) .trigger{width:100%}:host([grouped]) svg{color:var(--ds-color-icon-emphasis-default)}:host([grouped]) .componentWrapper{border-bottom:1px solid var(--ds-color-border-divider-default)}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}:host([emphasis]) .trigger{border-left:2px solid transparent;padding-left:var(--ds-size-200)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{display:block;position:absolute;top:-1px;left:-2px;width:2px;height:calc(100% + 2px);background-color:var(--ds-color-border-active-default);content:""}:host([emphasis]) .trigger:focus{border:1px solid var(--ds-color-border-active-default) !important;margin-left:1px}:host([emphasis]) .content{border-left:2px solid transparent;padding:unset}:host([emphasis]) .contentWrapper{padding-left:var(--ds-size-200)}:host([emphasis]) .iconWrapper{padding-right:var(--ds-size-200)}:host([emphasis]:hover) .trigger{text-decoration:unset}:host([emphasis]:hover) .content{border-left:2px solid var(--ds-color-ui-disabled-default)}:host([emphasis][expanded]) .trigger:before{display:block;position:absolute;top:-1px;left:-2px;width:2px;height:calc(100% + 2px);background-color:var(--ds-color-border-active-default);content:""}:host([emphasis][expanded]) .trigger:hover{text-decoration:underline}:host([emphasis][expanded]) .content{border-left:2px solid var(--ds-color-ui-disabled-default)}:host([variant=sm]) .trigger{padding:var(--ds-size-100) 0}:host([variant=sm]) ::slotted([slot=trigger]){font-size:var(--ds-text-body-size-default)}:host([variant=lg]) .trigger{padding:calc(var(--ds-size-200) + var(--ds-size-50)) 0}:host([variant=lg]) ::slotted([slot=trigger]){font-size:var(--ds-text-heading-400-size)}:host([chevron=none]) ::slotted([slot=trigger]),:host([chevron=none]) .contentWrapper{padding-left:unset}`;

index.js

 import { AuroAccordion } from './src/auro-accordion';
+import { AuroAccordionGroup } from './src/auro-accordion-group';
+import { AuroAccordionButton } from './src/auro-accordionbutton';
 
@@ -6,11 +8,14 @@ /**
  * @param {Object} name - Name to use for custom element.
+ * @param {Function} className - Class name to use for custom element.
  * @returns {void}
  */
- const registerComponent = (name = 'custom-accordion') => {
+export function registerComponent(name, className) {
   // alias definition
   if (!customElements.get(name)) {
-    customElements.define(name, class extends AuroAccordion {});
+    customElements.define(name, class extends className {});
   }
 }
 
-export { registerComponent }
+registerComponent('auro-accordion', AuroAccordion);
+registerComponent('auro-accordion-group', AuroAccordionGroup);
+registerComponent('auro-accordionbutton', AuroAccordionButton);

package.json

@@ -10,3 +10,3 @@ {
   "name": "@aurodesignsystem/auro-accordion",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "description": "auro-accordion HTML custom element",
@@ -29,8 +29,8 @@ "repository": {
     "@alaskaairux/design-tokens": "^3.14.0",
-    "@aurodesignsystem/webcorestylesheets": "^4.5.0"
+    "@aurodesignsystem/auro-button": "^7.2.1",
+    "@aurodesignsystem/design-tokens": "^4.1.1",
+    "@aurodesignsystem/webcorestylesheets": "^5.0.2"
   },
   "devDependencies": {
-    "@alaskaairux/design-tokens": "^3.14.0",
     "@aurodesignsystem/eslint-config": "^1.3.0",
-    "@aurodesignsystem/webcorestylesheets": "^4.6.1",
     "@commitlint/cli": "^17.6.6",
@@ -134,3 +134,3 @@ "@commitlint/config-conventional": "^17.6.6",
   "scripts": {
-    "build": "npm-run-all build:sass sass:render scssLint dist:js bundler postinstall build:api types build:docs build:demoScripts",
+    "build": "npm-run-all build:sass sass:render scssLint dist:js bundler postinstall build:api build:docs build:demoScripts types",
     "build:ci": "npm-run-all sweep build",
@@ -137,0 +137,0 @@ "build:api": "wca analyze 'src/auro-accordion.js' --outFiles docs/api.md",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

489933

increased by215.92%

Dev dependency count

41

decreased by-4.65%

Number of package files

75

increased by78.57%

Number of low license alerts

1

decreased by-50%

License quality

100

increased by25%

Lines of code

5917

increased by550.94%

Worsened metrics

Dependency count

7

increased by40%

Number of low supply chain risk alerts

3

increased by200%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes