@aurodesignsystem/auro-accordion 5.2.6 → 6.0.0-rc-206.1

package/demo/api.html

@@ -48,7 +48,7 @@
           Prism.highlightAll();
         });
     </script>
-     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
+     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
     <script type="module" data-demo-script="true">
       import { initExamples } from './api.min.js';
       initExamples();

package/demo/api.js

@@ -1,7 +1,8 @@
 import { expandedExample } from "../apiExamples/expanded";
-import '../index.js';
+import "../src/registered.js";
 
 export function initExamples(initCount) {
+  // biome-ignore lint/style/noParameterAssign: recursion, just for demos
   initCount = initCount || 0;
 
   try {

package/demo/api.md

@@ -6,45 +6,46 @@
 Auro-accordion provides users a way to have collapsible content on a page.
 Use auro-accordion-group if you want to have auto closing accordion components when others are selected.
 
-## Properties
+### Properties & Attributes
 
-| Property     | Attribute    | Type      | Default | Description                                      |
-|--------------|--------------|-----------|---------|--------------------------------------------------|
-| [alignRight](#alignRight) | `alignRight` | `Boolean` |         | If set, the trigger content will align right.    |
-| [chevron](#chevron)    | `chevron`    | `String`  |         | Sets chevron variant option. Possible values are: `none`, `right`. |
-| [disabled](#disabled)   | `disabled`   | `Boolean` |         | If set, the accordion is disabled and have reduced opacity. |
-| [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.               |
-| [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`. |
-
-## Methods
-
-| Method   | Type       | Description                                      |
-|----------|------------|--------------------------------------------------|
-| [toggle](#toggle) | `(): void` | Toggles the visibility of the accordion content. |
-
-## Events
-
-| Event            | Type                                  | Description                                      |
-|------------------|---------------------------------------|--------------------------------------------------|
-| [toggleExpanded](#toggleExpanded) | `CustomEvent<{ expanded: boolean; }>` | Notifies that the accordion has been expanded or closed. |
+| Properties | Attributes | Type | Default | Description  |
+| --- | --- | --- | --- | --- |
+expanded | expanded | boolean | false | If set, the accordion is expanded.
+alignRight | alignRight | boolean |  | If set, the trigger content will align right.
+emphasis | emphasis | boolean |  | If set, emphasis styles will be applied to the auro-accordions.
+grouped | grouped | boolean |  | Attribute will be set on accordion when it appears in an accordion group.
+chevron | chevron | string |  | Sets chevron variant option. Possible values are: `none`, `right`.
+variant | variant | string |  | Sets accordion variant option. Possible values are: `sm`, `lg`.
+disabled | disabled | boolean |  | If set, the accordion is disabled and have reduced opacity.
+
+### Methods
 
-## Slots
+| Name | Parameters | Return | Description |
+| --- | --- | --- | --- |
+register | `name` (string) - The name of element that you want to register to. |  | This will register this element with the browser.
+toggle | None |  | Toggles the visibility of the accordion content.
+
+### Events
 
-| Name      | Description                                 |
-|-----------|---------------------------------------------|
-|           | Default slot for the accordion content.     |
-| [trigger](#trigger) | Defines the content of the trigger element. |
+| Name | Description |
+| --- | --- |
+toggleExpanded | Notifies that the accordion has been expanded or closed.
+
+### Slots
 
-## CSS Shadow Parts
+| Name | Description |
+| --- | --- |
+(default) | Default slot for the accordion content.
+trigger | Defines the content of the trigger element.
+
+### CSS Shadow Parts
 
-| 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.       |
+| Name | Description |
+| --- | --- |
+accordion | Apply CSS to Accordion wrapper.
+trigger | Apply CSS to trigger element.
+chevron | Apply CSS to chevron icon.
+content | Apply CSS to the accordion content.
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Accordion API Examples
@@ -507,15 +508,21 @@ The accordion can be programatically expanded or collapsed by setting the `expan
 
 ```js
 export function expandedExample() {
-  const expandedExampleElem = document.querySelector('#auroaccordionExpandedExample');
+  const expandedExampleElem = document.querySelector(
+    "#auroaccordionExpandedExample",
+  );
 
-  document.querySelector('#auroaccordionExpandedExampleBtnTrue').addEventListener('click', () => {
-    expandedExampleElem.expanded = true;
-  })
+  document
+    .querySelector("#auroaccordionExpandedExampleBtnTrue")
+    .addEventListener("click", () => {
+      expandedExampleElem.expanded = true;
+    });
 
-  document.querySelector('#auroaccordionExpandedExampleBtnFalse').addEventListener('click', () => {
-    expandedExampleElem.expanded = false;
-  })
+  document
+    .querySelector("#auroaccordionExpandedExampleBtnFalse")
+    .addEventListener("click", () => {
+      expandedExampleElem.expanded = false;
+    });
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->