@aurodesignsystem-dev/auro-formkit 0.0.0-pr1577.2 → 0.0.0-pr1577.3

package/components/dropdown/demo/customize.md

@@ -504,7 +504,7 @@
 <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="matchWidth" layout="classic" shape="classic" size="lg" matchWidth aria-label="Label content for screen reader">
+<auro-dropdown id="matchWidthDropdownExample" 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 />
@@ -525,7 +525,7 @@
 <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/match-width.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/match-width.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-dropdown id="matchWidth" layout="classic" shape="classic" size="lg" matchWidth aria-label="Label content for screen reader"&gt;
+<pre class="language-html"><code class="language-html">&lt;auro-dropdown id="matchWidthDropdownExample" layout="classic" shape="classic" size="lg" matchWidth aria-label="Label content for screen reader"&gt;
   &lt;div style="padding: var(--ds-size-150);"&gt;
     Lorem ipsum solar
     &lt;br /&gt;
@@ -664,7 +664,7 @@
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
 <!-- The below content is automatically added from ./../apiExamples/error.html -->
-<auro-dropdown id="error" layout="classic" shape="classic" size="lg" error id="errorDropdownExample">
+<auro-dropdown layout="classic" shape="classic" size="lg" error id="errorDropdownExample">
 <div style="padding: var(--ds-size-150);">
             Lorem ipsum solar
 <br />
@@ -711,7 +711,7 @@
 <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-dropdown id="error" layout="classic" shape="classic" size="lg" error id="errorDropdownExample"&gt;
+<pre class="language-html"><code class="language-html">&lt;auro-dropdown layout="classic" shape="classic" size="lg" error id="errorDropdownExample"&gt;
   &lt;div style="padding: var(--ds-size-150);"&gt;
     Lorem ipsum solar
     &lt;br /&gt;

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

@@ -3780,7 +3780,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202608041813';
+var formkitVersion = '202608051619';
 
 class AuroElement extends i {
   static get properties() {
@@ -5270,8 +5270,35 @@ function fullscreenBreakpointExample() {
   const btn = document.querySelector('#fullscreenButton');
   const dropdown = document.querySelector('#fullscreen');
 
-  btn?.addEventListener('click', () => {
-    dropdown?.hide();
+  btn.addEventListener('click', () => {
+    dropdown.hide();
+  });
+}
+
+function errorExample() {
+  const btn = document.querySelector('#errorButton');
+  const dropdown = document.querySelector('#errorDropdownExample');
+
+  btn.addEventListener('click', () => {
+    dropdown.hide();
+  });
+}
+
+function matchWidthExample() {
+  const btn = document.querySelector('#matchWidthButton');
+  const dropdown = document.querySelector('#matchWidthDropdownExample');
+
+  btn.addEventListener('click', () => {
+    dropdown.hide();
+  });
+}
+
+function inverseErrorExample() {
+  const btn = document.querySelector('#inverseErrorButton');
+  const dropdown = document.querySelector('#inverseError');
+
+  btn.addEventListener('click', () => {
+    dropdown.hide();
   });
 }
 
@@ -5279,10 +5306,22 @@ function fullscreenBreakpointExample() {
 
 AuroDropdown.register();
 AuroDropdown.register('custom-dropdown');
-function initExamples() {
+function initExamples(initCount) {
   // javascript example function calls to be added here upon creation to test examples
+  initCount = initCount || 0;
 
-  fullscreenBreakpointExample();
+  try {
+    fullscreenBreakpointExample();
+    errorExample();
+    matchWidthExample();
+    inverseErrorExample();
+  } catch {
+    if (initCount <= 20) {
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
 }
 
 export { initExamples };

package/components/dropdown/demo/getting-started.html

@@ -38,7 +38,10 @@
 
     <script type="module">
       import { renderPage } from './demo-support.min.js';
+      import { initExamples } from './getting-started.min.js';
       await renderPage('./getting-started.md');
+
+      initExamples();
     </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->

package/components/dropdown/demo/getting-started.md

@@ -402,8 +402,8 @@ Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript c
   const triggerInput = document.querySelector('#showExampleTriggerInput');
   const dropdownElem = document.querySelector('#showMethodExample');
 ​
-  triggerInput?.addEventListener('keydown', () => {
-    dropdownElem?.show();
+  triggerInput.addEventListener('keydown', () => {
+    dropdownElem.show();
   });
 }</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -452,8 +452,8 @@ Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript c
   const btn = document.querySelector('#hideExampleBtn');
   const dropdown = document.querySelector('#hideExample');
 ​
-  btn?.addEventListener('click', () =&gt; {
-    dropdown?.hide();
+  btn.addEventListener('click', () =&gt; {
+    dropdown.hide();
   });
 }</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->