@aurodesignsystem-dev/auro-accordion 0.0.0-pr214.0 → 0.0.0-pr214.2

package/README.md

@@ -25,22 +25,6 @@ The following sections are editable by making changes to the following files:
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
 <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
-
-## Transitioning from v1.x to v3.x
-
-The new `@aurodesignsystem/auro-accordion` element includes breaking changes that are not backwards compatible with earlier releases. Earlier versions may be installed by running the following command.
-
-```
-$ npm i @aurodesignsystem/auro-accordion@1.6.6
-```
-
-Or, by CDN.
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/design-tokens@3.11.0/dist/tokens/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/webcorestylesheets@3.7.3/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@1.6.6/dist/auro-accordion__bundled.js" type="module"></script>
-```
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Use Cases
@@ -128,12 +112,78 @@ However, if you need to load multiple versions of the same component on a single
 You can do this by importing only the component class and using the `register(name)` method with a unique name:
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
-<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
-<!-- add custom registration content here -->
+<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+
+```js
+// Import the class only
+import { AuroAccordion, AuroAccordionGroup } from '@aurodesignsystem/auro-accordion/class';
+
+// Register with a custom name if desired
+AuroAccordion.register('custom-accordion');
+AuroAccordionGroup.register('custom-accordion-group');
+```
+
+This will create a new custom element `<custom-accordion>` and `<custom-accordion-group>` that behaves exactly like `<auro-accordion>` and `<auro-accordion-group>`, allowing both sets of components to coexist on the same page without interfering with each other.
 <!-- AURO-GENERATED-CONTENT:END -->
 <div class="exampleWrapper exampleWrapper--flex">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
   <!-- The below content is automatically added from ./apiExamples/custom.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>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
+<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
+
+```html
+<custom-accordion-group>
   <custom-accordion>
     <span slot="trigger">Trigger</span>
     <p>
@@ -149,29 +199,37 @@ You can do this by importing only the component class and using the `register(na
       Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
   </custom-accordion>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
-<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
-
-```html
-<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>

package/custom-elements.json

@@ -841,7 +841,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Auro-accordion provides users a way to have collapsible content on a page.\nUse auro-accordion-group if you want to have auto closing accordion components when others are selected.",
+          "description": "",
           "name": "AuroAccordionGroup",
           "members": [
             {
@@ -874,7 +874,10 @@
             },
             {
               "kind": "method",
-              "name": "handleSlotContentChange"
+              "name": "handleSlotContentChange",
+              "type": {
+                "text": "handleSlotContentChange() => void"
+              }
             },
             {
               "kind": "method",
@@ -906,7 +909,10 @@
                   }
                 }
               ],
-              "description": "This will register this element with the browser."
+              "description": "This will register this element with the browser.",
+              "type": {
+                "text": "register(name?: string = \"auro-accordion-group\") => void"
+              }
             },
             {
               "kind": "field",
@@ -917,7 +923,8 @@
             {
               "kind": "method",
               "name": "updateDisabledState",
-              "description": "Updates the disabled state of all child <auro-accordion> elements\nto match the disabled state of the <auro-accordion-group> element."
+              "description": "Updates the disabled state of all child `<auro-accordion>` elements\nto match the disabled state of the `<auro-accordion-group>` element.",
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -962,7 +969,8 @@
             "package": "lit"
           },
           "tagName": "auro-accordion-group",
-          "customElement": true
+          "customElement": true,
+          "modulePath": "src/auro-accordion-group.js"
         }
       ],
       "exports": [
@@ -982,7 +990,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Auro-accordion provides users a way to have collapsible content on a page.\nUse auro-accordion-group if you want to have auto closing accordion components when others are selected.",
+          "description": "",
           "name": "AuroAccordion",
           "cssParts": [
             {
@@ -1063,7 +1071,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "If set, emphasis styles will be applied to the auro-accordions.",
+              "description": "If set, emphasis styles will be applied to the auro-accordion. This feature is best used on the auro-accordion-group component.",
               "attribute": "emphasis",
               "reflects": true
             },
@@ -1138,14 +1146,17 @@
                 {
                   "name": "name",
                   "default": "\"auro-accordion\"",
-                  "description": "The name of element that you want to register to.",
+                  "description": "The name of the element that you want to register.",
                   "optional": true,
                   "type": {
                     "text": "string"
                   }
                 }
               ],
-              "description": "This will register this element with the browser."
+              "description": "This will register this element with the browser.",
+              "type": {
+                "text": "register(name?: string = \"auro-accordion\") => void"
+              }
             },
             {
               "kind": "method",
@@ -1167,7 +1178,10 @@
             {
               "kind": "method",
               "name": "toggle",
-              "description": "Toggles the visibility of the accordion content."
+              "description": "Toggles the visibility of the accordion content.",
+              "type": {
+                "text": "toggle() => void"
+              }
             },
             {
               "kind": "field",
@@ -1220,7 +1234,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "If set, emphasis styles will be applied to the auro-accordions.",
+              "description": "If set, emphasis styles will be applied to the auro-accordion. This feature is best used on the auro-accordion-group component.",
               "fieldName": "emphasis"
             },
             {
@@ -1254,7 +1268,8 @@
             "package": "lit"
           },
           "tagName": "auro-accordion",
-          "customElement": true
+          "customElement": true,
+          "modulePath": "src/auro-accordion.js"
         }
       ],
       "exports": [

package/demo/api.js

@@ -1,4 +1,5 @@
 import { expandedExample } from "../apiExamples/expanded";
+import { toggleExample } from "../apiExamples/toggle";
 import "../src/registered.js";
 
 export function initExamples(initCount) {
@@ -7,6 +8,7 @@ export function initExamples(initCount) {
 
   try {
     expandedExample();
+    toggleExample();
   } catch {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called