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

package/components/combobox/demo/install.md

@@ -1,98 +0,0 @@
-<auro-header level="1" id="install">Install</auro-header>
-<auro-header level="2" id="npmInstall">NPM Installation</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="2" id="gettingStarted">Getting Started</auro-header>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/gettingStarted.md) -->
-<!-- The below content is automatically added from ./../../../docs/templates/gettingStarted.md -->
-
-### TypeScript Module Resolution
-
-When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
-
-<pre class="language-json"><code class="language-json">{
-    "compilerOptions": {
-        "moduleResolution": "bundler"
-    }
-}</code></pre>
-
-This configuration enables proper module resolution for the component's TypeScript files.
-<!-- AURO-GENERATED-CONTENT:END -->
-<auro-header level="2" id="defaultSetup">Default Component Setup</auro-header>
-Once installed, the component can be used in your project by importing the component's registered module:
-
-<pre class="language-js"><code class="language-js">import '@aurodesignsystem/auro-formkit/auro-combobox';</code></pre>
-
-This import registers the `<auro-combobox>` custom element globally. You can then use it in your HTML:
-
-<pre class="language-html"><code class="language-html">&lt;auro-combobox&gt;
-  &lt;span slot="label"&gt;Choose an option&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="option1"&gt;Option 1&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="option2"&gt;Option 2&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
-
-<auro-header level="2" id="cdn">Install from CDN</auro-header>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/bundleInstallDescription.md) -->
-<!-- The below content is automatically added from ./../../../docs/templates/bundleInstallDescription.md -->
-In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
-
-<pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-combobox/+esm"&gt;&lt;/script&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-<auro-header level="2" id="customRegistration">Custom Component Registration</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.
-
-When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
-
-However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
-
-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 { AuroCombobox } from '@aurodesignsystem/auro-formkit/auro-combobox/class';
-​
-// Register with a custom name if desired
-AuroCombobox.register('custom-combobox');</code></pre>
-
-This will create a new custom element `<custom-combobox>` that behaves exactly like `<auro-combobox>`, allowing both to coexist on the same page without interfering with each other.
-
-<div class="exampleWrapper exampleWrapper--flex">
-<custom-combobox>
-<span slot="bib.fullscreen.headline">Bib Header</span>
-<span slot="label">Name</span>
-<auro-menu>
-<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
-<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
-<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
-<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
-<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
-<auro-menuoption static nomatch>No matching option</auro-menuoption>
-</auro-menu>
-</custom-combobox>
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-
-<pre class="language-html"><code class="language-html">&lt;custom-combobox&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
-  &lt;span slot="label"&gt;Name&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="Apples" id="option-0"&gt;Apples&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="Oranges" id="option-1"&gt;Oranges&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="Peaches" id="option-2"&gt;Peaches&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="Grapes" id="option-3"&gt;Grapes&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/custom-combobox&gt;</code></pre>
-</auro-accordion>
-<!-- AURO-GENERATED-CONTENT:END -->

package/components/select/demo/api.js

@@ -1,39 +0,0 @@
-import { customErrorValidityExample } from "../apiExamples/custom-error-validity";
-import { valueExample } from "../apiExamples/value";
-import { valueExtractionExample } from "../apiExamples/value-extraction";
-import { valueAlertExample } from "../apiExamples/value-alert";
-import { inDialogExample } from '../apiExamples/in-dialog';
-import { inDrawerExample } from '../apiExamples/in-drawer';
-import { resetStateExample } from "../apiExamples/reset-state";
-import { updateActiveOptionExample } from "../apiExamples/update-active-option.js";
-// import { auroMenuLoadingExample } from "../apiExamples/loading";
-
-/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
-import { AuroSelect } from '../src/auro-select.js';
-import '../../menu/src/registered.js';
-
-AuroSelect.register(); // registering to `auro-select`
-
-export function initExamples(initCount) {
-  initCount = initCount || 0;
-
-  try {
-    // javascript example function calls to be added here upon creation to test examples
-    customErrorValidityExample();
-    valueExample();
-    valueExtractionExample();
-    valueAlertExample();
-    inDialogExample();
-    inDrawerExample();
-    resetStateExample();
-    updateActiveOptionExample();
-    // auroMenuLoadingExample();
-  } catch (err) {
-    if (initCount <= 20) {
-      // setTimeout handles issue where content is sometimes loaded after the functions get called
-      setTimeout(() => {
-        initExamples(initCount + 1);
-      }, 100);
-    }
-  }
-}

package/components/select/demo/install.md

@@ -1,92 +0,0 @@
-<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 -->
-<p>Every Auro component consists of a JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define">custom element registration</a>. The class defines the component's behavior, and the registration maps it to an HTML tag name so it can be used in markup.</p>
-<p>The default import (shown above) handles both steps automatically, registering the component under its standard tag name.</p>
-<p>If you need multiple versions of the same component on a single page — for example, when two projects depend on different versions — you can register the class under a custom tag name to avoid conflicts.</p>
-<p>To do this, import the component class directly and call its `register(name)` method with a unique name:</p>
-<pre class="language-js"><code class="language-js">// Import the classes
-import { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class';
-import { AuroMenu } from '@aurodesignsystem/auro-formkit/auro-menu/class';
-import { AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menuoption/class';
-​
-// Register each component with a custom name
-AuroSelect.register('custom-select');
-AuroMenu.register('custom-menu');
-AuroMenuOption.register('custom-menuoption');</code></pre>
-
-The `<auro-menu>` and `<auro-menuoption>` components must also be custom registered when using a custom `<auro-select>` registration. All three components work together and need to be registered under the same custom naming convention.
-
-This will create new custom elements that behave exactly like their standard counterparts, allowing both to coexist on the same page without interfering with each other.
-
-<pre class="language-html"><code class="language-html">&lt;custom-select placeholder="Placeholder Text" id="custom-select"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
-  &lt;span slot="label"&gt;Label&lt;/span&gt;
-  &lt;custom-menu&gt;
-    &lt;custom-menuoption value="stops"&gt;Stops&lt;/custom-menuoption&gt;
-    &lt;custom-menuoption value="price"&gt;Price&lt;/custom-menuoption&gt;
-    &lt;custom-menuoption value="duration"&gt;Duration&lt;/custom-menuoption&gt;
-    &lt;custom-menuoption value="departure"&gt;Departure&lt;/custom-menuoption&gt;
-    &lt;custom-menuoption value="arrival"&gt;Arrival&lt;/custom-menuoption&gt;
-    &lt;custom-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/custom-menuoption&gt;
-  &lt;/custom-menu&gt;
-&lt;/custom-select&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/defaultRegistration.md) -->
-<!-- The below content is automatically added from ./../docs/partials/defaultRegistration.md -->
-<p>Once installed, the component can be used in your project by importing the component's registered module:</p>
-<pre class="language-js"><code class="language-js">import '@aurodesignsystem/auro-formkit/auro-select';</code></pre>
-<p>This import registers the <code>&lt;auro-select&gt;</code> custom element globally. You can then use it in your HTML:</p>
-<pre class="language-html"><code class="language-html">&lt;auro-select id="default-select"&gt;
-  &lt;span slot="label"&gt;Choose an option&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="option1"&gt;Option 1&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="option2"&gt;Option 2&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/auro-select&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/cdnRegistration.md) -->
-<!-- The below content is automatically added from ./../docs/partials/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-select/+esm"&gt;&lt;/script&gt;</code></pre>
-<p>This script registers the <code>&lt;auro-select&gt;</code> custom element globally. You can then use it in your HTML:</p>
-<pre class="language-html"><code class="language-html">&lt;auro-select id="cdn-select"&gt;
-  &lt;span slot="label"&gt;Choose an option&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="option1"&gt;Option 1&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="option2"&gt;Option 2&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/auro-select&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-</auro-accordion>
-</auro-accordion-group>