@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.2 → 0.0.0-pr1451.21

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

@@ -0,0 +1,317 @@
+<auro-header level="1" id="overview">Dropdown - Getting Started</auro-header>
+<div class="contentWrapper">
+<nav>
+<auro-nav anchorNavContent=".scrollWrapper">
+<span slot="mobileToggleCollapsed">View More</span>
+<span slot="mobileToggleExpanded">View Less</span>
+<auro-anchorlink fluid href="#setup">Setup</auro-anchorlink>
+<auro-anchorlink fluid href="#minimalConfig">Minimal Configuration</auro-anchorlink>
+<auro-anchorlink fluid href="#slots">Slots</auro-anchorlink>
+<auro-anchorlink fluid href="#slotTrigger" class="level2 body-xs">Trigger</auro-anchorlink>
+<auro-anchorlink fluid href="#slotHelpText" class="level2 body-xs">Help Text</auro-anchorlink>
+<auro-anchorlink fluid href="#functions">Functions</auro-anchorlink>
+<auro-anchorlink fluid href="#fnShow" class="level2 body-xs">show()</auro-anchorlink>
+<auro-anchorlink fluid href="#fnHide" class="level2 body-xs">hide()</auro-anchorlink>
+</auro-nav>
+</nav>
+<div class="mainContent">
+<div class="scrollWrapper">
+<section>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/install.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/install.md -->
+<auro-header level="2" id="setup">Setup</auro-header>
+<auro-accordion-group Emphasis>
+<auro-accordion expanded class="section" id="recommendedAccordion">
+<span slot="trigger">Recommended Installation and Implementation</span>
+<div class="accordion-content">
+<auro-header level="3">Install</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
+<!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
+
+<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+<auro-header level="3">Implementation</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customRegistration.md) -->
+<!-- The below content is automatically added from ./../docs/partials/customRegistration.md -->
+
+## Custom Component Registration for Version Management
+
+There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
+
+You can do this by importing only the component class and using the `register(name)` method with a unique name:
+
+<pre class="language-js"><code class="language-js">// Import the class only
+import { AuroDropdown } from '@aurodesignsystem/auro-formkit/auro-dropdown/class';
+​
+// Register with a custom name if desired
+AuroDropdown.register('custom-dropdown');</code></pre>
+
+This will create a new custom element `<custom-dropdown>` that behaves exactly like `<auro-dropdown>`, allowing both to coexist on the same page without interfering with each other.
+
+<pre class="language-html"><code class="language-html">&lt;custom-dropdown id="customCommon" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader"&gt;
+  &lt;div style="padding: var(--ds-size-150);"&gt;
+    Lorem ipsum solar
+    &lt;br /&gt;
+    &lt;auro-button id="customCommonButton"&gt;
+      Dismiss Dropdown
+    &lt;/auro-button&gt;
+  &lt;/div&gt;
+  &lt;span slot="helpText"&gt;
+    Help text
+  &lt;/span&gt;
+  &lt;div slot="trigger"&gt;
+    Trigger
+  &lt;/div&gt;
+&lt;/custom-dropdown&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+<auro-accordion class="section" id="autoAccordion">
+<span slot="trigger">Auto Installation and Implementation</span>
+<div class="accordion-content">
+<p class="warning"><strong>Warning:</strong> Default registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
+<auro-header level="3">Install</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
+<!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
+
+<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+<auro-header level="3">Implementation</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/defaultRegistration.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/defaultRegistration.md -->
+Import the component, then register the custom element:
+
+<pre class="language-js"><code class="language-js">import '@aurodesignsystem/auro-formkit/auro-dropdown';</code></pre>
+
+Then use the element in your HTML:
+
+<pre class="language-html"><code class="language-html">&lt;auro-dropdown aria-label="custom label"&gt;
+  Lorem ipsum solar
+  &lt;div slot="trigger"&gt;
+    Trigger
+  &lt;/div&gt;
+&lt;/auro-dropdown&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+<auro-accordion class="section" id="cdnAccordion">
+<span slot="trigger">CDN Installation</span>
+<div class="accordion-content">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/cdnRegistration.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/cdnRegistration.md -->
+The dropdown component can be loaded via CDN without a build step:
+
+<pre class="language-html"><code class="language-html">&lt;script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-dropdown/+esm" type="module"&gt;&lt;/script&gt;</code></pre>
+
+Then use the element in your HTML:
+
+<pre class="language-html"><code class="language-html">&lt;auro-dropdown aria-label="custom label"&gt;
+  Lorem ipsum solar
+  &lt;div slot="trigger"&gt;
+    Trigger
+  &lt;/div&gt;
+&lt;/auro-dropdown&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+</auro-accordion-group>
+<!-- AURO-GENERATED-CONTENT:END -->
+</section>
+<section>
+<auro-header level="2" id="minimalConfig">Minimal Configuration</auro-header>
+<p>The most basic use of <code>auro-dropdown</code> requires content in the default slot and a trigger element in the <code>trigger</code> slot. An accessible label must also be provided via <code>aria-label</code>, <code>aria-labelledby</code>, or the <code>label</code> slot.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic.html -->
+<auro-dropdown 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>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-dropdown aria-label="custom label"&gt;
+  Lorem ipsum solar
+  &lt;div slot="trigger"&gt;
+    Trigger
+  &lt;/div&gt;
+&lt;/auro-dropdown&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+</section>
+<section>
+<auro-header level="2" id="slots">Slots</auro-header>
+<auro-header level="3" id="slotTrigger">Trigger</auro-header>
+<p>The <code>trigger</code> slot defines the clickable element that toggles the dropdown bib. Any valid HTML can be placed in this slot.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-button.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic-button.html -->
+<auro-dropdown aria-label="custom label">
+Lorem ipsum solar
+<div slot="trigger">
+<auro-button slot="trigger">
+Dropdown
+</auro-button>
+</div>
+</auro-dropdown>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-button.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic-button.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-dropdown aria-label="custom label"&gt;
+  Lorem ipsum solar
+  &lt;div slot="trigger"&gt;
+    &lt;auro-button slot="trigger"&gt;
+      Dropdown
+    &lt;/auro-button&gt;
+  &lt;/div&gt;
+&lt;/auro-dropdown&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="3" id="slotHelpText">Help Text</auro-header>
+<p>Content defined in the <code>helpText</code> slot will be rendered left aligned below the trigger.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/help-text.html) -->
+<!-- The below content is automatically added from ./../apiExamples/help-text.html -->
+<auro-dropdown
+aria-label="custom label"
+inset
+bordered
+rounded>
+Lorem ipsum solar
+<span slot="helpText">
+Helper text
+</span>
+<div slot="trigger">
+Trigger
+</div>
+</auro-dropdown>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/help-text.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/help-text.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-dropdown
+  aria-label="custom label"
+  inset
+  bordered
+  rounded&gt;
+  Lorem ipsum solar
+  &lt;span slot="helpText"&gt;
+    Helper text
+  &lt;/span&gt;
+  &lt;div slot="trigger"&gt;
+    Trigger
+  &lt;/div&gt;
+&lt;/auro-dropdown&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+</section>
+<section>
+<auro-header level="2" id="functions">Functions</auro-header>
+<auro-header level="3" id="fnShow">show()</auro-header>
+<p>Use the <code>show()</code> method to programmatically open the dropdown.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/programmatically-show.html) -->
+<!-- The below content is automatically added from ./../apiExamples/programmatically-show.html -->
+<auro-input id="showExampleTriggerInput" required>
+<span slot="label">Enter a value to show the dropdown</span>
+</auro-input>
+<br />
+<auro-dropdown id="showMethodExample" aria-label="custom label" layout="classic" shape="classic" size="lg">
+<p>
+Lorem ipsum solar
+</p>
+<span slot="trigger">Trigger Label</span>
+</auro-dropdown>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/programmatically-show.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/programmatically-show.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-input id="showExampleTriggerInput" required&gt;
+  &lt;span slot="label"&gt;Enter a value to show the dropdown&lt;/span&gt;
+&lt;/auro-input&gt;
+&lt;br /&gt;
+&lt;auro-dropdown id="showMethodExample" aria-label="custom label" layout="classic" shape="classic" size="lg"&gt;
+  &lt;p&gt;
+    Lorem ipsum solar
+  &lt;/p&gt;
+  &lt;span slot="trigger"&gt;Trigger Label&lt;/span&gt;
+&lt;/auro-dropdown&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/programmatically-show.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/programmatically-show.js -->
+<pre class="language-js"><code class="language-js">export function showExample() {
+  const triggerInput = document.querySelector('#showExampleTriggerInput');
+  const dropdownElem = document.querySelector('#showMethodExample');
+​
+  triggerInput?.addEventListener('keydown', () =&gt; {
+    dropdownElem?.show();
+  });
+}</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="3" id="fnHide">hide()</auro-header>
+<p>Use the <code>hide()</code> method to programmatically close the dropdown.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/programmatically-hide.html) -->
+<!-- The below content is automatically added from ./../apiExamples/programmatically-hide.html -->
+<auro-dropdown id="hideExample" aria-label="custom label" layout="classic" shape="classic" size="lg">
+<p>
+Lorem ipsum solar
+</p>
+<div style="padding: var(--ds-size-150);">
+<auro-button id="hideExampleBtn">
+Hide Dropdown
+</auro-button>
+</div>
+<span slot="trigger">
+Trigger
+</span>
+</auro-dropdown>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/programmatically-hide.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/programmatically-hide.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-dropdown id="hideExample" aria-label="custom label" layout="classic" shape="classic" size="lg"&gt;
+  &lt;p&gt;
+    Lorem ipsum solar
+  &lt;/p&gt;
+  &lt;div style="padding: var(--ds-size-150);"&gt;
+    &lt;auro-button id="hideExampleBtn"&gt;
+      Hide Dropdown
+    &lt;/auro-button&gt;
+  &lt;/div&gt;
+  &lt;span slot="trigger"&gt;
+    Trigger
+  &lt;/span&gt;
+&lt;/auro-dropdown&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/programmatically-hide.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/programmatically-hide.js -->
+<pre class="language-js"><code class="language-js">export function hideExample() {
+  const btn = document.querySelector('#hideExampleBtn');
+  const dropdown = document.querySelector('#hideExample');
+​
+  btn?.addEventListener('click', () =&gt; {
+    dropdown?.hide();
+  });
+}</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+</section>
+</div>
+</div>
+</div>

package/components/dropdown/demo/index.html

@@ -18,8 +18,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Auro Web Component Demo | auro-dropdown</title>
 
-    <!-- Prism.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
+    <!-- highlight.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
 
     <!-- Legacy reference is still needed to support auro-dropdown's use of legacy token values at this time -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
@@ -32,32 +32,24 @@
     
     <!-- Demo Specific Styles -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
-</head>
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
+  </head>
   <body class="auro-markdown">
     <main></main>
 
     <script type="module">
-      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
-      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
-      fetch('./index.md')
-        .then((response) => response.text())
-        .then((text) => {
-          const rawHtml = marked.parse(text);
-          document.querySelector('main').innerHTML = rawHtml;
-          Prism.highlightAll();
-        })
+      import { renderPage } from './demo-support.js';
+      await renderPage('./index.md');
     </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-nav@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
+
+    <script src="./index.min.js" data-demo-script="true" type="module"></script>
   </body>
 </html>