@aurodesignsystem/auro-formkit 5.1.0-rc-1305.1 → 5.1.0-rc-1314.1

package/components/dropdown/demo/api.md

@@ -186,16 +186,16 @@ The following examples demonstrate basic usage of the `auro-dropdown` component
 
 Use the `appearance="inverse"` attribute to ensure proper styling when the dropdown is used on dark backgrounds.
 
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
-<!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
-<auro-dropdown appearance="inverse" aria-label="custom label">
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-dropdown>
-<!-- AURO-GENERATED-CONTENT:END -->
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
+  <auro-dropdown appearance="inverse" aria-label="custom label">
+    Lorem ipsum solar
+    <div slot="trigger">
+      Trigger
+    </div>
+  </auro-dropdown>
+  <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
@@ -212,17 +212,6 @@ Use the `appearance="inverse"` attribute to ensure proper styling when the dropd
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-<div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
-  <auro-dropdown appearance="inverse" aria-label="custom label">
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-dropdown>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
 
 ### Chevron
 
@@ -358,11 +347,11 @@ Use the `error` attribute to set persistent error state styling on the dropdown.
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
   <!-- The below content is automatically added from ./../apiExamples/error.html -->
-  <auro-dropdown layout="classic" shape="classic" size="lg" error id="errorDropdownExample">
+  <auro-dropdown id="error" layout="classic" shape="classic" size="lg" error id="errorDropdownExample">
     <div style="padding: var(--ds-size-150);">
       Lorem ipsum solar
       <br />
-      <auro-button onclick="document.querySelector('#errorDropdownExample').hide()">
+      <auro-button id="errorButton">
         Dismiss Dropdown
       </auro-button>
     </div>
@@ -381,11 +370,11 @@ Use the `error` attribute to set persistent error state styling on the dropdown.
 <div class="exampleWrapper--ondark" aria-hidden>
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
   <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
-  <auro-dropdown appearance="inverse" layout="classic" shape="classic" size="lg" error id="errorDropdownOnDarkExample">
+  <auro-dropdown id="inverseError" appearance="inverse" layout="classic" shape="classic" size="lg" error>
     <div style="padding: var(--ds-size-150);">
       Lorem ipsum solar
       <br />
-      <auro-button onclick="document.querySelector('#errorDropdownOnDarkExample').hide()">
+      <auro-button id="inverseErrorButton">
         Dismiss Dropdown
       </auro-button>
     </div>
@@ -407,11 +396,11 @@ Use the `error` attribute to set persistent error state styling on the dropdown.
 <!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
 
 ```html
-<auro-dropdown layout="classic" shape="classic" size="lg" error id="errorDropdownExample">
+<auro-dropdown id="error" layout="classic" shape="classic" size="lg" error id="errorDropdownExample">
   <div style="padding: var(--ds-size-150);">
     Lorem ipsum solar
     <br />
-    <auro-button onclick="document.querySelector('#errorDropdownExample').hide()">
+    <auro-button id="errorButton">
       Dismiss Dropdown
     </auro-button>
   </div>
@@ -431,11 +420,11 @@ Use the `error` attribute to set persistent error state styling on the dropdown.
 <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-error.html -->
 
 ```html
-<auro-dropdown appearance="inverse" layout="classic" shape="classic" size="lg" error id="errorDropdownOnDarkExample">
+<auro-dropdown id="inverseError" appearance="inverse" layout="classic" shape="classic" size="lg" error>
   <div style="padding: var(--ds-size-150);">
     Lorem ipsum solar
     <br />
-    <auro-button onclick="document.querySelector('#errorDropdownOnDarkExample').hide()">
+    <auro-button id="inverseErrorButton">
       Dismiss Dropdown
     </auro-button>
   </div>
@@ -464,7 +453,7 @@ Breakpoint token can be found [here](https://auro.alaskaair.com/getting-started/
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreen-breakpoint.html) -->
   <!-- The below content is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
-  <auro-dropdown fullscreenBreakpoint="sm" layout="classic" shape="classic" size="lg" chevron id="fullscreenBreakpointExample">
+  <auro-dropdown id="fullscreen" fullscreenBreakpoint="sm" layout="classic" shape="classic" size="lg" chevron>
     <div>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -476,7 +465,7 @@ Breakpoint token can be found [here](https://auro.alaskaair.com/getting-started/
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       </p>
     </div>
-    <auro-button onclick="document.querySelector('#fullscreenBreakpointExample').hide()">
+    <auro-button id="fullscreenButton">
       Dismiss Dropdown
     </auro-button>
     <div slot="trigger">
@@ -491,7 +480,7 @@ Breakpoint token can be found [here](https://auro.alaskaair.com/getting-started/
 <!-- The below code snippet is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
 
 ```html
-<auro-dropdown fullscreenBreakpoint="sm" layout="classic" shape="classic" size="lg" chevron id="fullscreenBreakpointExample">
+<auro-dropdown id="fullscreen" fullscreenBreakpoint="sm" layout="classic" shape="classic" size="lg" chevron>
   <div>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -503,7 +492,7 @@ Breakpoint token can be found [here](https://auro.alaskaair.com/getting-started/
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
   </div>
-  <auro-button onclick="document.querySelector('#fullscreenBreakpointExample').hide()">
+  <auro-button id="fullscreenButton">
     Dismiss Dropdown
   </auro-button>
   <div slot="trigger">
@@ -529,7 +518,7 @@ The `auro-dropdown` element supports multiple layouts to fit different design ne
     <div style="padding: var(--ds-size-150);">
       Lorem ipsum solar
       <br />
-      <auro-button onclick="document.querySelector('#classic').hide()">
+      <auro-button id="classicButton">
         Dismiss Dropdown
       </auro-button>
     </div>
@@ -552,7 +541,7 @@ The `auro-dropdown` element supports multiple layouts to fit different design ne
   <div style="padding: var(--ds-size-150);">
     Lorem ipsum solar
     <br />
-    <auro-button onclick="document.querySelector('#classic').hide()">
+    <auro-button id="classicButton">
       Dismiss Dropdown
     </auro-button>
   </div>
@@ -569,11 +558,11 @@ The `auro-dropdown` element supports multiple layouts to fit different design ne
 <div class="exampleWrapper--ondark">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/appearance-inverse.html) -->
   <!-- The below content is automatically added from ./../apiExamples/classic/appearance-inverse.html -->
-  <auro-dropdown appearance="inverse" layout="classic" shape="classic" size="lg" id="classicOnDark" chevron aria-label="Label content for screen reader">
+  <auro-dropdown id="classicInverse" appearance="inverse" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
     <div style="padding: var(--ds-size-150);">
       Lorem ipsum solar
       <br />
-      <auro-button onclick="document.querySelector('#classicOnDark').hide()">
+      <auro-button id="classicInverseButton">
         Dismiss Dropdown
       </auro-button>
     </div>
@@ -592,11 +581,11 @@ The `auro-dropdown` element supports multiple layouts to fit different design ne
 <!-- The below code snippet is automatically added from ./../apiExamples/classic/appearance-inverse.html -->
 
 ```html
-<auro-dropdown appearance="inverse" layout="classic" shape="classic" size="lg" id="classicOnDark" chevron aria-label="Label content for screen reader">
+<auro-dropdown id="classicInverse" appearance="inverse" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
   <div style="padding: var(--ds-size-150);">
     Lorem ipsum solar
     <br />
-    <auro-button onclick="document.querySelector('#classicOnDark').hide()">
+    <auro-button id="classicInverseButton">
       Dismiss Dropdown
     </auro-button>
   </div>
@@ -925,11 +914,11 @@ When the `matchWidth` attribute is applied, the width of the dropdown bib will m
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/match-width.html) -->
   <!-- The below content is automatically added from ./../apiExamples/match-width.html -->
-  <auro-dropdown id="common" layout="classic" shape="classic" size="lg" matchWidth aria-label="Label content for screen reader">
+  <auro-dropdown id="matchWidth" layout="classic" shape="classic" size="lg" matchWidth aria-label="Label content for screen reader">
     <div style="padding: var(--ds-size-150);">
       Lorem ipsum solar
       <br />
-      <auro-button onclick="document.querySelector('#common').hide()">
+      <auro-button id="matchWidthButton">
         Dismiss Dropdown
       </auro-button>
     </div>
@@ -948,11 +937,11 @@ When the `matchWidth` attribute is applied, the width of the dropdown bib will m
 <!-- The below code snippet is automatically added from ./../apiExamples/match-width.html -->
 
 ```html
-<auro-dropdown id="common" layout="classic" shape="classic" size="lg" matchWidth aria-label="Label content for screen reader">
+<auro-dropdown id="matchWidth" layout="classic" shape="classic" size="lg" matchWidth aria-label="Label content for screen reader">
   <div style="padding: var(--ds-size-150);">
     Lorem ipsum solar
     <br />
-    <auro-button onclick="document.querySelector('#common').hide()">
+    <auro-button id="matchWidthButton">
       Dismiss Dropdown
     </auro-button>
   </div>
@@ -1016,7 +1005,7 @@ This example demonstrations collapsing the dropdown by clicking a button within
       Lorem ipsum solar
     </p>
     <div style="padding: var(--ds-size-150);">
-      <auro-button id="hideExampleBtn" onclick="document.querySelector('#hideExample').hide()">
+      <auro-button id="hideExampleBtn">
         Hide Dropdown
       </auro-button>
     </div>
@@ -1037,7 +1026,7 @@ This example demonstrations collapsing the dropdown by clicking a button within
     Lorem ipsum solar
   </p>
   <div style="padding: var(--ds-size-150);">
-    <auro-button id="hideExampleBtn" onclick="document.querySelector('#hideExample').hide()">
+    <auro-button id="hideExampleBtn">
       Hide Dropdown
     </auro-button>
   </div>
@@ -1055,8 +1044,8 @@ export function hideExample() {
   const btn = document.querySelector('#hideExampleBtn');
   const dropdown = document.querySelector('#hideExample');
 
-  btn.addEventListener('click', () => {
-    dropdown.hide();
+  btn?.addEventListener('click', () => {
+    dropdown?.hide();
   });
 }
 ```
@@ -1108,8 +1097,8 @@ export function showExample() {
   const triggerInput = document.querySelector('#showExampleTriggerInput');
   const dropdownElem = document.querySelector('#showMethodExample');
 
-  triggerInput.addEventListener('keydown', () => {
-    dropdownElem.show();
+  triggerInput?.addEventListener('keydown', () => {
+    dropdownElem?.show();
   });
 }
 ```
@@ -1252,7 +1241,7 @@ The element used within an `auro-dialog`.
           <div style="padding: var(--ds-size-150);">
             Lorem ipsum solar
             <br />
-            <auro-button onclick="document.querySelector('#in-dialog-dropdown').hide()">
+            <auro-button id="in-dialog-dismiss-btn">
               Dismiss Dropdown
             </auro-button>
           </div>
@@ -1286,7 +1275,7 @@ The element used within an `auro-dialog`.
         <div style="padding: var(--ds-size-150);">
           Lorem ipsum solar
           <br />
-          <auro-button onclick="document.querySelector('#in-dialog-dropdown').hide()">
+          <auro-button id="in-dialog-dismiss-btn">
             Dismiss Dropdown
           </auro-button>
         </div>
@@ -1310,10 +1299,18 @@ The element used within an `auro-dialog`.
 
 ```js
 export function inDialogExample() {
-  document.querySelector("#dropdown-dialog-opener").addEventListener("click", () => {
+  const openBtn = document.querySelector("#dropdown-dialog-opener");
+  const closeBtn = document.querySelector("#in-dialog-dismiss-btn");
+  const dropdown = document.querySelector("#in-dialog-dropdown");
+
+  openBtn?.addEventListener("click", () => {
     const dialog = document.querySelector("#dropdown-dialog");
     dialog.open = true;
   });
+
+  closeBtn?.addEventListener("click", () => {
+    dropdown?.hide();
+  });
 };
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/dropdown/demo/api.min.js

@@ -1,9 +1,63 @@
+function errorExample() {
+  const btn = document.querySelector('#errorButton');
+  const dropdown = document.querySelector('#error');
+
+  btn?.addEventListener('click', () => {
+    dropdown?.hide();
+  });
+}
+
+function inverseErrorExample() {
+  const btn = document.querySelector('#inverseErrorButton');
+  const dropdown = document.querySelector('#inverseError');
+
+  btn?.addEventListener('click', () => {
+    dropdown?.hide();
+  });
+}
+
+function fullscreenBreakpointExample() {
+  const btn = document.querySelector('#fullscreenButton');
+  const dropdown = document.querySelector('#fullscreen');
+
+  btn?.addEventListener('click', () => {
+    dropdown?.hide();
+  });
+}
+
+function classicExample() {
+  const btn = document.querySelector('#classicButton');
+  const dropdown = document.querySelector('#classic');
+
+  btn?.addEventListener('click', () => {
+    dropdown?.hide();
+  });
+}
+
+function classicInverseExample() {
+  const btn = document.querySelector('#classicInverseButton');
+  const dropdown = document.querySelector('#classicInverse');
+
+  btn?.addEventListener('click', () => {
+    dropdown?.hide();
+  });
+}
+
+function matchWidthExample() {
+  const btn = document.querySelector('#matchWidthButton');
+  const dropdown = document.querySelector('#matchWidth');
+
+  btn?.addEventListener('click', () => {
+    dropdown?.hide();
+  });
+}
+
 function hideExample() {
   const btn = document.querySelector('#hideExampleBtn');
   const dropdown = document.querySelector('#hideExample');
 
-  btn.addEventListener('click', () => {
-    dropdown.hide();
+  btn?.addEventListener('click', () => {
+    dropdown?.hide();
   });
 }
 
@@ -11,16 +65,24 @@ function showExample() {
   const triggerInput = document.querySelector('#showExampleTriggerInput');
   const dropdownElem = document.querySelector('#showMethodExample');
 
-  triggerInput.addEventListener('keydown', () => {
-    dropdownElem.show();
+  triggerInput?.addEventListener('keydown', () => {
+    dropdownElem?.show();
   });
 }
 
 function inDialogExample() {
-  document.querySelector("#dropdown-dialog-opener").addEventListener("click", () => {
+  const openBtn = document.querySelector("#dropdown-dialog-opener");
+  const closeBtn = document.querySelector("#in-dialog-dismiss-btn");
+  const dropdown = document.querySelector("#in-dialog-dropdown");
+
+  openBtn?.addEventListener("click", () => {
     const dialog = document.querySelector("#dropdown-dialog");
     dialog.open = true;
   });
+
+  closeBtn?.addEventListener("click", () => {
+    dropdown?.hide();
+  });
 }
 
 /**
@@ -3183,7 +3245,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202601262137';
+var formkitVersion = '202601292023';
 
 class AuroElement extends i {
   static get properties() {
@@ -4239,20 +4301,17 @@ AuroDropdown.register();
 
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers */
 
-function initExamples(initialCount = 0) {
-  try {
-    // javascript example function calls to be added here upon creation to test examples
-    hideExample();
-    showExample();
-    inDialogExample();
-  } catch (err) {
-    if (initialCount <= 20) {
-      // setTimeout handles issue where content is sometimes loaded after the functions get called
-      setTimeout(() => {
-        initExamples(initialCount + 1);
-      }, 100);
-    }
-  }
+function initExamples() {
+  // javascript example function calls to be added here upon creation to test examples
+  errorExample();
+  inverseErrorExample();
+  fullscreenBreakpointExample();
+  classicExample();
+  classicInverseExample();
+  matchWidthExample();
+  hideExample();
+  showExample();
+  inDialogExample();
 }
 
 export { initExamples };

package/components/dropdown/demo/index.html

@@ -51,7 +51,9 @@
     <script type="module">
       import { initExamples } from "./index.min.js";
 
-      initExamples();
+      window.addEventListener('load', () => {
+        initExamples();
+      });
     </script>
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>

package/components/dropdown/demo/index.js

@@ -1,19 +1,16 @@
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
-// import { AuroDropdownBib } from '../src/auro-dropdownBib.js';
+
+import { classicExample } from '../apiExamples/classic/basic.js';
+import { classicInverseExample } from '../apiExamples/classic/appearance-inverse.js';
+import { customExample } from '../apiExamples/custom.js';
+
 import { AuroDropdown } from '../src/auro-dropdown.js';
 AuroDropdown.register();
 AuroDropdown.register('custom-dropdown');
 
-export function initExamples(initialCount = 0) {
-  try {
-    // javascript example function calls to be added here upon creation to test examples
-    // auroMenuResetExample();
-  } catch (err) {
-    if (initialCount <= 20) {
-      // setTimeout handles issue where content is sometimes loaded after the functions get called
-      setTimeout(() => {
-        initExamples(initialCount + 1);
-      }, 100);
-    }
-  }
+export function initExamples() {
+  // javascript example function calls to be added here upon creation to test examples
+  classicExample();
+  classicInverseExample();
+  customExample();
 }

package/components/dropdown/demo/index.md

@@ -94,7 +94,7 @@ The `auro-dropdown` element supports multiple layouts to fit different design ne
     <div style="padding: var(--ds-size-150);">
       Lorem ipsum solar
       <br />
-      <auro-button onclick="document.querySelector('#classic').hide()">
+      <auro-button id="classicButton">
         Dismiss Dropdown
       </auro-button>
     </div>
@@ -117,7 +117,7 @@ The `auro-dropdown` element supports multiple layouts to fit different design ne
   <div style="padding: var(--ds-size-150);">
     Lorem ipsum solar
     <br />
-    <auro-button onclick="document.querySelector('#classic').hide()">
+    <auro-button id="classicButton">
       Dismiss Dropdown
     </auro-button>
   </div>
@@ -134,11 +134,11 @@ The `auro-dropdown` element supports multiple layouts to fit different design ne
 <div class="exampleWrapper--ondark">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/appearance-inverse.html) -->
   <!-- The below content is automatically added from ./../apiExamples/classic/appearance-inverse.html -->
-  <auro-dropdown appearance="inverse" layout="classic" shape="classic" size="lg" id="classicOnDark" chevron aria-label="Label content for screen reader">
+  <auro-dropdown id="classicInverse" appearance="inverse" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
     <div style="padding: var(--ds-size-150);">
       Lorem ipsum solar
       <br />
-      <auro-button onclick="document.querySelector('#classicOnDark').hide()">
+      <auro-button id="classicInverseButton">
         Dismiss Dropdown
       </auro-button>
     </div>
@@ -157,11 +157,11 @@ The `auro-dropdown` element supports multiple layouts to fit different design ne
 <!-- The below code snippet is automatically added from ./../apiExamples/classic/appearance-inverse.html -->
 
 ```html
-<auro-dropdown appearance="inverse" layout="classic" shape="classic" size="lg" id="classicOnDark" chevron aria-label="Label content for screen reader">
+<auro-dropdown id="classicInverse" appearance="inverse" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
   <div style="padding: var(--ds-size-150);">
     Lorem ipsum solar
     <br />
-    <auro-button onclick="document.querySelector('#classicOnDark').hide()">
+    <auro-button id="classicInverseButton">
       Dismiss Dropdown
     </auro-button>
   </div>

package/components/dropdown/demo/index.min.js

@@ -1,3 +1,30 @@
+function classicExample() {
+  const btn = document.querySelector('#classicButton');
+  const dropdown = document.querySelector('#classic');
+
+  btn?.addEventListener('click', () => {
+    dropdown?.hide();
+  });
+}
+
+function classicInverseExample() {
+  const btn = document.querySelector('#classicInverseButton');
+  const dropdown = document.querySelector('#classicInverse');
+
+  btn?.addEventListener('click', () => {
+    dropdown?.hide();
+  });
+}
+
+function customExample() {
+  const btn = document.querySelector('#customCommonButton');
+  const dropdown = document.querySelector('#customCommon');
+
+  btn?.addEventListener('click', () => {
+    dropdown?.hide();
+  });
+}
+
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -3158,7 +3185,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202601262137';
+var formkitVersion = '202601292023';
 
 class AuroElement extends i {
   static get properties() {
@@ -4211,11 +4238,15 @@ class AuroDropdown extends AuroElement {
 }
 
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
-// import { AuroDropdownBib } from '../src/auro-dropdownBib.js';
+
 AuroDropdown.register();
 AuroDropdown.register('custom-dropdown');
 
-function initExamples(initialCount = 0) {
+function initExamples() {
+  // javascript example function calls to be added here upon creation to test examples
+  classicExample();
+  classicInverseExample();
+  customExample();
 }
 
 export { initExamples };

package/components/dropdown/demo/readme.html

@@ -48,9 +48,17 @@
           Prism.highlightAll();
         })
     </script>
-    <script src="./index.min.js" data-demo-script="true" type="module"></script>
+    <script type="module">
+      import { initExamples } from "./index.min.js";
+
+      window.addEventListener('load', () => {
+        initExamples();
+      });
+    </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
   </body>
 </html>

package/components/dropdown/demo/readme.md

@@ -124,7 +124,7 @@ This will create a new custom element `<custom-dropdown>` that behaves exactly l
     <div style="padding: var(--ds-size-150);">
       Lorem ipsum solar
       <br />
-      <auro-button onclick="document.querySelector('#customCommon').hide()">
+      <auro-button id="customCommonButton">
         Dismiss Dropdown
       </auro-button>
     </div>
@@ -144,7 +144,7 @@ This will create a new custom element `<custom-dropdown>` that behaves exactly l
     <div style="padding: var(--ds-size-150);">
       Lorem ipsum solar
       <br />
-      <auro-button onclick="document.querySelector('#customCommon').hide()">
+      <auro-button id="customCommonButton">
         Dismiss Dropdown
       </auro-button>
     </div>

package/components/dropdown/dist/index.js

@@ -3094,7 +3094,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202601262137';
+var formkitVersion = '202601292023';
 
 class AuroElement extends LitElement {
   static get properties() {

package/components/dropdown/dist/registered.js

@@ -3094,7 +3094,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202601262137';
+var formkitVersion = '202601292023';
 
 class AuroElement extends LitElement {
   static get properties() {

package/components/input/demo/api.min.js

@@ -6715,7 +6715,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202601262137';
+var formkitVersion = '202601292023';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/input/demo/index.min.js

@@ -6640,7 +6640,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202601262137';
+var formkitVersion = '202601292023';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/input/dist/index.js

@@ -6581,7 +6581,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202601262137';
+var formkitVersion = '202601292023';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.