npm - @aurodesignsystem-dev/auro-formkit - Versions diffs - 0.0.0-pr1457.1 → 0.0.0-pr1457.2 - Mend

@aurodesignsystem-dev/auro-formkit 0.0.0-pr1457.1 → 0.0.0-pr1457.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (215) hide show

package/components/checkbox/demo/accessibility.html +1 -1
package/components/checkbox/demo/api.html +2 -1
package/components/checkbox/demo/customize.html +1 -1
package/components/checkbox/demo/demo-support.min.js +60 -0
package/components/checkbox/demo/design.html +2 -1
package/components/checkbox/demo/getting-started.html +1 -1
package/components/checkbox/demo/getting-started.md +154 -0
package/components/checkbox/demo/index.html +1 -1
package/components/checkbox/demo/index.min.js +3 -2
package/components/checkbox/demo/install.html +49 -0
package/components/checkbox/demo/keyboard-behavior.html +1 -1
package/components/checkbox/demo/pages.json +1 -0
package/components/checkbox/demo/readme.html +2 -1
package/components/checkbox/demo/styles.min.css +1 -1
package/components/checkbox/demo/voiceover.html +1 -1
package/components/checkbox/dist/auro-checkbox.d.ts +1 -0
package/components/checkbox/dist/index.js +3 -2
package/components/checkbox/dist/registered.js +3 -2
package/components/combobox/demo/accessibility.html +1 -3
package/components/combobox/demo/api.html +2 -3
package/components/combobox/demo/customize.html +1 -1
package/components/combobox/demo/demo-support.min.js +60 -0
package/components/combobox/demo/design.html +2 -3
package/components/combobox/demo/getting-started.html +1 -1
package/components/combobox/demo/index.html +1 -1
package/components/combobox/demo/install.html +50 -0
package/components/combobox/demo/keyboard-behavior.html +1 -3
package/components/combobox/demo/pages.json +1 -0
package/components/combobox/demo/readme.html +2 -3
package/components/combobox/demo/registered.min.js +5 -4
package/components/combobox/demo/styles.min.css +1 -1
package/components/combobox/demo/voiceover.html +1 -3
package/components/combobox/dist/index.js +5 -4
package/components/combobox/dist/registered.js +5 -4
package/components/counter/README.md +21 -47
package/components/counter/demo/accessibility.html +49 -0
package/components/counter/demo/accessibility.md +34 -0
package/components/counter/demo/api.html +13 -21
package/components/counter/demo/api.md +49 -1299
package/components/counter/demo/api.min.js +1 -8390
package/components/counter/demo/auro-counter-group.min.js +8392 -0
package/components/counter/demo/customize.html +53 -0
package/components/counter/demo/customize.md +650 -0
package/components/counter/demo/demo-support.js +1 -0
package/components/counter/demo/demo-support.min.js +55792 -0
package/components/counter/demo/design.html +52 -0
package/components/counter/demo/design.md +192 -0
package/components/counter/demo/getting-started.html +54 -0
package/components/counter/demo/getting-started.md +482 -0
package/components/counter/demo/index.html +14 -20
package/components/counter/demo/index.md +117 -51
package/components/counter/demo/index.min.js +1 -8390
package/components/{dropdown/demo/keyboardBehavior.html → counter/demo/keyboard-behavior.html} +9 -42
package/components/counter/demo/keyboardBehavior.html +7 -40
package/components/counter/demo/pages.json +1 -0
package/components/counter/demo/readme.html +12 -16
package/components/counter/demo/readme.md +21 -47
package/components/counter/demo/styles.min.css +1 -0
package/components/counter/demo/styles.scss +1 -0
package/components/counter/demo/voiceover.html +51 -0
package/components/counter/demo/voiceover.md +80 -0
package/components/counter/dist/index.js +2 -2
package/components/counter/dist/registered.js +2 -2
package/components/datepicker/demo/accessibility.html +2 -3
package/components/datepicker/demo/api.html +2 -2
package/components/datepicker/demo/auro-datepicker.min.js +5 -4
package/components/datepicker/demo/customize.html +1 -1
package/components/datepicker/demo/demo-support.min.js +60 -0
package/components/datepicker/demo/design.html +3 -4
package/components/datepicker/demo/getting-started.html +1 -1
package/components/datepicker/demo/index.html +1 -1
package/components/datepicker/demo/keyboard-behavior.html +2 -4
package/components/datepicker/demo/pages.json +1 -0
package/components/datepicker/demo/readme.html +2 -2
package/components/datepicker/demo/styles.min.css +1 -1
package/components/datepicker/demo/voiceover.html +2 -4
package/components/datepicker/dist/index.js +5 -4
package/components/datepicker/dist/registered.js +5 -4
package/components/dropdown/README.md +0 -21
package/components/dropdown/demo/accessibility.html +49 -0
package/components/dropdown/demo/accessibility.md +45 -0
package/components/dropdown/demo/api.html +11 -20
package/components/dropdown/demo/api.md +40 -1364
package/components/dropdown/demo/api.min.js +2 -5098
package/components/dropdown/demo/auro-dropdown.min.js +5099 -0
package/components/dropdown/demo/customize.html +54 -0
package/components/dropdown/demo/customize.md +780 -0
package/components/dropdown/demo/demo-support.js +1 -0
package/components/dropdown/demo/demo-support.min.js +55792 -0
package/components/dropdown/demo/design.html +52 -0
package/components/dropdown/demo/design.md +186 -0
package/components/dropdown/demo/getting-started.html +54 -0
package/components/dropdown/demo/getting-started.md +463 -0
package/components/dropdown/demo/index.html +12 -21
package/components/dropdown/demo/index.md +78 -233
package/components/dropdown/demo/index.min.js +1 -5097
package/components/dropdown/demo/keyboard-behavior.html +48 -0
package/components/dropdown/demo/pages.json +1 -0
package/components/dropdown/demo/readme.html +8 -21
package/components/dropdown/demo/readme.md +0 -21
package/components/dropdown/demo/styles.min.css +1 -0
package/components/dropdown/demo/styles.scss +1 -0
package/components/dropdown/demo/voiceover.html +51 -0
package/components/dropdown/demo/voiceover.md +63 -0
package/components/dropdown/dist/index.js +1 -1
package/components/dropdown/dist/registered.js +1 -1
package/components/form/README.md +9 -9
package/components/form/demo/accessibility.html +51 -0
package/components/form/demo/accessibility.md +23 -0
package/components/form/demo/api.html +12 -15
package/components/form/demo/api.md +14 -290
package/components/form/demo/api.min.js +2 -71921
package/components/form/demo/auro-form.min.js +718 -0
package/components/form/demo/autocomplete.html +2 -2
package/components/form/demo/customize.html +54 -0
package/components/form/demo/customize.md +246 -0
package/components/form/demo/demo-support.js +1 -0
package/components/form/demo/demo-support.min.js +55792 -0
package/components/form/demo/getting-started.html +54 -0
package/components/form/demo/getting-started.md +434 -0
package/components/form/demo/index.html +13 -15
package/components/form/demo/index.md +67 -97
package/components/form/demo/index.min.js +2 -71921
package/components/form/demo/keyboard-behavior.html +51 -0
package/components/form/demo/pages.json +1 -0
package/components/form/demo/readme.html +13 -18
package/components/form/demo/readme.md +9 -9
package/components/form/demo/registerDemoDeps.min.js +71212 -0
package/components/form/demo/styles.min.css +1 -0
package/components/form/demo/styles.scss +1 -0
package/components/form/demo/voiceover.html +51 -0
package/components/form/demo/voiceover.md +36 -0
package/components/form/demo/working.html +3 -2
package/components/input/demo/accessibility.html +1 -1
package/components/input/demo/api.html +1 -1
package/components/input/demo/auro-input.min.js +3 -2
package/components/input/demo/customize.html +1 -1
package/components/input/demo/demo-support.min.js +60 -0
package/components/input/demo/design.html +2 -1
package/components/input/demo/getting-started.html +1 -1
package/components/input/demo/index.html +1 -1
package/components/input/demo/keyboard-behavior.html +2 -1
package/components/input/demo/pages.json +1 -0
package/components/input/demo/readme.html +2 -2
package/components/input/demo/styles.min.css +1 -1
package/components/input/demo/voiceover.html +1 -1
package/components/input/dist/base-input.d.ts +1 -0
package/components/input/dist/index.js +3 -2
package/components/input/dist/registered.js +3 -2
package/components/menu/README.md +8 -26
package/components/menu/demo/accessibility.html +53 -0
package/components/menu/demo/accessibility.md +34 -0
package/components/menu/demo/api.html +12 -18
package/components/menu/demo/api.md +43 -1102
package/components/menu/demo/api.min.js +2 -2288
package/components/menu/demo/auro-menu.min.js +2289 -0
package/components/menu/demo/customize.html +54 -0
package/components/menu/demo/customize.md +637 -0
package/components/menu/demo/demo-support.js +1 -0
package/components/menu/demo/demo-support.min.js +55792 -0
package/components/menu/demo/design.html +53 -0
package/components/menu/demo/design.md +81 -0
package/components/menu/demo/getting-started.html +54 -0
package/components/menu/demo/getting-started.md +322 -0
package/components/menu/demo/index.html +14 -20
package/components/menu/demo/index.md +26 -63
package/components/menu/demo/index.min.js +1 -2287
package/components/menu/demo/keyboard-behavior.html +53 -0
package/components/menu/demo/pages.json +1 -0
package/components/menu/demo/readme.html +12 -16
package/components/menu/demo/readme.md +8 -26
package/components/menu/demo/styles.min.css +1 -0
package/components/menu/demo/styles.scss +1 -0
package/components/menu/demo/voiceover.html +53 -0
package/components/menu/demo/voiceover.md +33 -0
package/components/radio/demo/accessibility.html +2 -1
package/components/radio/demo/api.html +2 -1
package/components/radio/demo/customize.html +2 -1
package/components/radio/demo/demo-support.min.js +60 -0
package/components/radio/demo/design.html +2 -1
package/components/radio/demo/getting-started.html +2 -1
package/components/radio/demo/getting-started.md +154 -0
package/components/radio/demo/index.html +1 -1
package/components/radio/demo/index.min.js +1 -1
package/components/radio/demo/keyboard-behavior.html +2 -1
package/components/radio/demo/pages.json +1 -0
package/components/radio/demo/readme.html +3 -3
package/components/radio/demo/styles.min.css +1 -1
package/components/radio/demo/voiceover.html +2 -1
package/components/radio/dist/index.js +1 -1
package/components/radio/dist/registered.js +1 -1
package/components/select/demo/accessibility.html +1 -1
package/components/select/demo/api.html +2 -1
package/components/select/demo/customize.html +1 -1
package/components/select/demo/demo-support.min.js +60 -0
package/components/select/demo/design.html +2 -1
package/components/select/demo/getting-started.html +1 -1
package/components/select/demo/index.html +1 -1
package/components/select/demo/install.html +50 -0
package/components/select/demo/keyboard-behavior.html +1 -1
package/components/select/demo/keyboardBehavior.html +1 -1
package/components/select/demo/layout.html +2 -1
package/components/select/demo/pages.json +1 -0
package/components/select/demo/readme.html +2 -1
package/components/select/demo/registered.min.js +2 -2
package/components/select/demo/styles.min.css +1 -1
package/components/select/demo/voiceover.html +1 -1
package/components/select/dist/index.js +2 -2
package/components/select/dist/registered.js +2 -2
package/custom-elements.json +249 -246
package/package.json +1 -1
package/components/counter/demo/keyboard-behavior.md +0 -127
package/components/dropdown/demo/keyboard-behavior.md +0 -72
package/components/form/demo/keyboard-behavior.md +0 -38
package/components/menu/demo/keyboard-behavior.md +0 -18

package/components/form/demo/getting-started.html ADDED Viewed

@@ -0,0 +1,54 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/getting-started.md
+  With the exception of adding custom elements if needed for the demo.
+  ----------------------- DO NOT EDIT -----------------------------
+-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Demo | auro-form | Getting Started</title>
+    <!-- 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-form'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"/>
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+    <!-- Demo Specific Styles -->
+    <link rel="stylesheet" type="text/css" href="./styles.min.css" />
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+    <script type="module">
+      import { renderPage } from './demo-support.min.js';
+      await renderPage('./getting-started.md');
+    </script>
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <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-button@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
+    <script src="./api.min.js" data-demo-script="true" type="module"></script>
+  </body>
+</html>

package/components/form/demo/getting-started.md ADDED Viewed

@@ -0,0 +1,434 @@
+<auro-header level="1" id="overview">Form - 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="#recommendedSetup" class="level2 body-xs" onclick="openAccordion('recommendedAccordion')">Recommended</auro-anchorlink>
+<auro-anchorlink fluid href="#autoSetup" class="level2 body-xs" onclick="openAccordion('autoAccordion')">Auto</auro-anchorlink>
+<auro-anchorlink fluid href="#cdnSetup" class="level2 body-xs" onclick="openAccordion('cdnAccordion')">CDN</auro-anchorlink>
+<auro-anchorlink fluid href="#frameworks">Frameworks</auro-anchorlink>
+<auro-anchorlink fluid href="#react" class="level2 body-xs" onclick="openAccordion('react')">React</auro-anchorlink>
+<auro-anchorlink fluid href="#svelte" class="level2 body-xs" onclick="openAccordion('svelte')">Svelte</auro-anchorlink>
+<auro-anchorlink fluid href="#minimalConfig">Minimal Configuration</auro-anchorlink>
+<auro-anchorlink fluid href="#slots">Slots</auro-anchorlink>
+<auro-anchorlink fluid href="#functions">Functions</auro-anchorlink>
+<auro-anchorlink fluid href="#fnSubmit" class="level2 body-xs">submit()</auro-anchorlink>
+<auro-anchorlink fluid href="#fnReset" class="level2 body-xs">reset()</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 <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes" target="_blank">class</auro-hyperlink> 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 <code>register(name)</code> method with a unique name:
+<pre class="language-js"><code class="language-js">// Import the class only
+import { AuroForm } from '@aurodesignsystem/auro-formkit/auro-form/class';
+// Register with a custom name if desired
+AuroForm.register('[custom]-form');</code></pre>
+This will create a new custom element `<custom-form>` that behaves exactly like `<auro-form>`, allowing both to coexist on the same page without interfering with each other.
+### Using Custom-Named Child Form Elements
+When consuming custom-named Auro form elements (like `auro-input` registered as `custom-input`),
+these elements _must_ be registered BEFORE auro-form due to rendering order limitations.
+Auro form elements are automatically recognized based on their tag name (e.g. `auro-input`) or special auro attributes which are only assigned during the initial render.
+For example, the following is correct:
+<pre class="language-javascript"><code class="language-javascript">import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
+import { AuroForm } from '@aurodesignsystem/auro-formkit/auro-form/class';
+AuroInput.register('[custom]-input'); // adds an internal identifier auro-form uses to recognize the custom element
+AuroForm.register('[custom]-form'); // render looks for said identifier</code></pre>
+The following is NOT correct and will result in forms not working as expected:
+<pre class="language-javascript"><code class="language-javascript">import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
+import { AuroForm } from '@aurodesignsystem/auro-formkit/auro-form/class';
+AuroForm.register('[custom]-form'); // forms start rendering, looking for auro inputs, or custom-named inputs
+AuroInput.register('[custom]-input'); // too late, form has already rendered and did not find the custom element</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-form';</code></pre>
+Then use the element in your HTML:
+<pre class="language-html"><code class="language-html">&lt;auro-form&gt;
+  &lt;auro-input name="searchBox" required&gt;
+    &lt;span slot="label"&gt;Search flights&lt;/span&gt;
+  &lt;/auro-input&gt;
+  &lt;br /&gt;
+  &lt;auro-button type="submit"&gt;Submit&lt;/auro-button&gt;
+&lt;/auro-form&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+<auro-accordion class="section" id="cdnAccordion">
+<span slot="trigger">CDN Installation and Implementation</span>
+<div class="accordion-content">
+<p class="warning"><strong>Warning:</strong> CDN install & 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 & Implementation</auro-header>
+<!-- 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 -->
+<p>Add the following script tag to your HTML to load the component directly from a CDN:</p>
+<pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-form/+esm"&gt;&lt;/script&gt;</code></pre>
+<p>This script registers the <code>&lt;auro-form&gt;</code> custom element globally. You can then use it in your HTML:</p>
+<pre class="language-html"><code class="language-html">&lt;auro-form&gt;
+  &lt;auro-input name="searchBox" required&gt;
+    &lt;span slot="label"&gt;Search flights&lt;/span&gt;
+  &lt;/auro-input&gt;
+  &lt;br /&gt;
+  &lt;auro-button type="submit"&gt;Submit&lt;/auro-button&gt;
+&lt;/auro-form&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+</auro-accordion-group>
+<!-- AURO-GENERATED-CONTENT:END -->
+</section>
+<section>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/frameworks.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/frameworks.md -->
+<auro-header level="2" id="frameworks">Frameworks</auro-header>
+<auro-accordion-group Emphasis>
+<auro-accordion class="section" id="react">
+<span slot="trigger">React</span>
+<div class="accordion-content">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/react.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/react.md -->
+React 19 includes <a href="https://react.dev/blog/2024/12/05/react-19#support-for-custom-elements">native support for custom elements</a>, so <code>&lt;auro-form&gt;</code> works directly in JSX without any wrapper library.
+<auro-header level="3" id="reactImport">Import the Component</auro-header>
+Import and register the components at the top level of your application (e.g. in your root `main.tsx` or `App.tsx`):
+<pre class="language-js"><code class="language-js">import { AuroForm } from '@aurodesignsystem/auro-formkit/auro-form/class';
+AuroForm.register('[custom]-form');</code></pre>
+<auro-header level="3" id="reactTypeScript">TypeScript Declarations</auro-header>
+The component ships with TypeScript type definitions for the `AuroForm` class. However, React's JSX does not automatically map custom element tag names to their types. To get type checking for `<auro-form>` in JSX, add the following declaration to a `.d.ts` file in your project:
+<pre class="language-js"><code class="language-js">import type { AuroForm } from '@aurodesignsystem/auro-formkit/auro-form/class';
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      '[custom]-form': React.HTMLAttributes&lt;AuroForm&gt; &amp; Partial&lt;AuroForm&gt;;
+    }
+  }
+}</code></pre>
+<auro-header level="3" id="reactEvents">Event Handling</auro-header>
+Auro components emit native `CustomEvent`s. Use a `ref` to attach event listeners in a `useEffect`:
+<pre class="language-js"><code class="language-js">import { useRef, useEffect } from 'react';
+function MyForm() {
+  const formRef = useRef&lt;HTMLElement&gt;(null);
+  useEffect(() =&gt; {
+    const el = formRef.current;
+    if (!el) return;
+    const handleSubmit = (e: Event) =&gt; {
+      console.log('Form values:', (e as CustomEvent).detail.value);
+    };
+    el.addEventListener('submit', handleSubmit);
+    return () =&gt; el.removeEventListener('submit', handleSubmit);
+  }, []);
+  return (
+    &lt;custom-form ref={formRef}&gt;
+      {/* Add Auro form elements here */}
+      &lt;button type="submit"&gt;Submit&lt;/button&gt;
+    &lt;/custom-form&gt;
+  );
+}</code></pre>
+<auro-header level="3" id="reactModuleResolution">Module Resolution</auro-header>
+Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript can resolve the component's package exports:
+<pre class="language-js"><code class="language-js">{
+  "compilerOptions": {
+    "moduleResolution": "bundler"
+  }
+}</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+<auro-accordion class="section" id="svelte">
+<span slot="trigger">Svelte</span>
+<div class="accordion-content">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/svelte.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/svelte.md -->
+Svelte has <a href="https://svelte.dev/docs/svelte/custom-elements">native support for custom elements</a>, so <code>&lt;auro-form&gt;</code> works directly in Svelte templates without any wrapper or configuration.
+<auro-header level="3" id="svelteImport">Import the Component</auro-header>
+Import and register the components in the `<script>` block:
+<pre class="language-html"><code class="language-html">&lt;script lang="ts"&gt;
+  import { AuroForm } from '@aurodesignsystem/auro-formkit/auro-form/class';
+  AuroForm.register('[custom]-form');
+&lt;/script&gt;</code></pre>
+<auro-header level="3" id="svelteUsage">Basic Usage</auro-header>
+Use `<auro-form>` directly in your Svelte template:
+<pre class="language-html"><code class="language-html">&lt;script lang="ts"&gt;
+  import { AuroForm } from '@aurodesignsystem/auro-formkit/auro-form/class';
+  AuroForm.register('[custom]-form');
+&lt;/script&gt;
+&lt;custom-form&gt;
+  &lt;!-- Add Auro form elements here --&gt;
+  &lt;button type="submit"&gt;Submit&lt;/button&gt;
+&lt;/custom-form&gt;</code></pre>
+<auro-header level="3" id="svelteTypeScript">TypeScript Declarations</auro-header>
+Svelte does not automatically know about custom element attributes. To get autocomplete and type checking for `<auro-form>` props in templates, add the following to a `.d.ts` file in your project (e.g. `src/auro-elements.d.ts`):
+<pre class="language-js"><code class="language-js">import type { AuroForm } from '@aurodesignsystem/auro-formkit/auro-form/class';
+declare namespace svelteHTML {
+  interface IntrinsicElements {
+    '[custom]-form': Partial&lt;AuroForm&gt; &amp; svelteHTML.HTMLAttributes&lt;AuroForm&gt;;
+  }
+}</code></pre>
+This enables prop hinting for attributes like `disabled` and others directly in Svelte templates.
+<auro-header level="3" id="svelteEvents">Event Handling</auro-header>
+Auro components emit native `CustomEvent`s. Listen for the `submit` and `reset` events on the element:
+<pre class="language-html"><code class="language-html">&lt;script lang="ts"&gt;
+  function handleSubmit(e: Event) {
+    console.log('Form values:', (e as CustomEvent).detail.value);
+  }
+&lt;/script&gt;
+&lt;custom-form on:submit={handleSubmit}&gt;
+  &lt;!-- Add Auro form elements here --&gt;
+  &lt;button type="submit"&gt;Submit&lt;/button&gt;
+&lt;/custom-form&gt;</code></pre>
+<auro-header level="3" id="svelteModuleResolution">Module Resolution</auro-header>
+Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript can resolve the component's package exports:
+<pre class="language-js"><code class="language-js">{
+  "compilerOptions": {
+    "moduleResolution": "bundler"
+  }
+}</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-form</code> requires one or more named Auro form elements inside the form. Add a button with <code>type="submit"</code> to trigger form submission.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic.html -->
+<auro-form>
+<auro-input id="search-box" name="searchBox" required>
+<span slot="label">Search flights</span>
+</auro-input>
+<br />
+<auro-button type="submit">Submit</auro-button>
+</auro-form>
+<!-- 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-form&gt;
+  &lt;auro-input id="search-box" name="searchBox" required&gt;
+    &lt;span slot="label"&gt;Search flights&lt;/span&gt;
+  &lt;/auro-input&gt;
+  &lt;br /&gt;
+  &lt;auro-button type="submit"&gt;Submit&lt;/auro-button&gt;
+&lt;/auro-form&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+</section>
+<section>
+<auro-header level="2" id="slots">Slots</auro-header>
+<p>The <code>default</code> slot accepts any Auro form elements (e.g., <code>auro-input</code>, <code>auro-select</code>, <code>auro-datepicker</code>, <code>auro-counter-group</code>) as well as any HTML elements for layout and structure.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/complex.html) -->
+<!-- The below content is automatically added from ./../apiExamples/complex.html -->
+<style>
+          .submitBlock {
+            margin-top: 1rem;
+            display: flex;
+            justify-content: flex-end;
+            gap: 1rem;
+          }
+          .datepickerBlock {
+            margin-top: 1rem;
+          }
+          .complex-form {
+            display: block;
+            padding: 1rem;
+            border: 1px solid #2a2a2a;
+            border-radius: 1rem;
+          }
+</style>
+<auro-form class="complex-form">
+<auro-input id="first-name" name="firstName" required>
+<span slot="label">First Name</span>
+</auro-input>
+<br />
+<auro-input id="last-name" name="lastName" required>
+<span slot="label">Last Name</span>
+</auro-input>
+<br />
+<auro-input id="occupation" name="occupation" required>
+<span slot="label">Occupation</span>
+</auro-input>
+<br />
+<auro-input-two id="cool-fact" name="coolFact" required>
+<span slot="label">Cool Fact</span>
+</auro-input-two>
+<div class="datepickerBlock">
+<h4>Pick a cool date</h4>
+<auro-datepicker id="date-example" name="dateExample" required>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+</div>
+<div class="datepickerBlock">
+<h4>Pick a date range</h4>
+<auro-datepicker id="date-range" name="dateRange" required range>
+<span slot="fromLabel">Start</span>
+<span slot="toLabel">End</span>
+<span slot="bib.fullscreen.fromLabel">Start</span>
+<span slot="bib.fullscreen.toLabel">End</span>
+</auro-datepicker>
+</div>
+<div class="submitBlock">
+<auro-button type="reset">Reset</auro-button>
+<auro-button type="submit">Submit</auro-button>
+</div>
+</auro-form>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/complex.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/complex.html -->
+<pre class="language-html"><code class="language-html">&lt;style&gt;
+  .submitBlock {
+    margin-top: 1rem;
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+  }
+  .datepickerBlock {
+    margin-top: 1rem;
+  }
+  .complex-form {
+    display: block;
+    padding: 1rem;
+    border: 1px solid #2a2a2a;
+    border-radius: 1rem;
+  }
+&lt;/style&gt;
+&lt;auro-form class="complex-form"&gt;
+  &lt;auro-input id="first-name" name="firstName" required&gt;
+    &lt;span slot="label"&gt;First Name&lt;/span&gt;
+  &lt;/auro-input&gt;
+  &lt;br /&gt;
+  &lt;auro-input id="last-name" name="lastName" required&gt;
+    &lt;span slot="label"&gt;Last Name&lt;/span&gt;
+  &lt;/auro-input&gt;
+  &lt;br /&gt;
+  &lt;auro-input id="occupation" name="occupation" required&gt;
+    &lt;span slot="label"&gt;Occupation&lt;/span&gt;
+  &lt;/auro-input&gt;
+  &lt;br /&gt;
+  &lt;auro-input-two id="cool-fact" name="coolFact" required&gt;
+    &lt;span slot="label"&gt;Cool Fact&lt;/span&gt;
+  &lt;/auro-input-two&gt;
+  &lt;div class="datepickerBlock"&gt;
+    &lt;h4&gt;Pick a cool date&lt;/h4&gt;
+    &lt;auro-datepicker id="date-example" name="dateExample" required&gt;
+      &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+      &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+    &lt;/auro-datepicker&gt;
+  &lt;/div&gt;
+  &lt;div class="datepickerBlock"&gt;
+    &lt;h4&gt;Pick a date range&lt;/h4&gt;
+    &lt;auro-datepicker id="date-range" name="dateRange" required range&gt;
+      &lt;span slot="fromLabel"&gt;Start&lt;/span&gt;
+      &lt;span slot="toLabel"&gt;End&lt;/span&gt;
+      &lt;span slot="bib.fullscreen.fromLabel"&gt;Start&lt;/span&gt;
+      &lt;span slot="bib.fullscreen.toLabel"&gt;End&lt;/span&gt;
+    &lt;/auro-datepicker&gt;
+  &lt;/div&gt;
+  &lt;div class="submitBlock"&gt;
+    &lt;auro-button type="reset"&gt;Reset&lt;/auro-button&gt;
+    &lt;auro-button type="submit"&gt;Submit&lt;/auro-button&gt;
+  &lt;/div&gt;
+&lt;/auro-form&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="fnSubmit">submit()</auro-header>
+<p>Validates all form elements. If all are valid, fires a <code>submit</code> event with <code>detail.value</code> containing the current form values. If any element is invalid, its error state is surfaced and the <code>submit</code> event is not fired.</p>
+<auro-header level="3" id="fnReset">reset()</auro-header>
+<p>Resets all form elements to their initial state and fires a <code>reset</code> event. The event's <code>detail.previousValue</code> contains the form values captured immediately before the reset.</p>
+</section>
+</div>
+</div>
+</div>

package/components/form/demo/index.html CHANGED Viewed

@@ -18,8 +18,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Auro Web Component Demo | auro-form</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-form'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"/>
@@ -31,26 +31,24 @@
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
     <!-- 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.min.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.min.js';
+      await renderPage('./index.md');
     </script>
-    <script type="module" data-demo-script="true" src="./index.min.js"></script>
     <!-- If additional elements are needed for the demo, add them here. -->
     <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>