@aurodesignsystem/auro-formkit 5.9.1 → 5.9.2

package/components/form/demo/readme.md

@@ -18,6 +18,7 @@ The following sections are editable by making changes to the following files:
 -->
 
 # Form
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 `<auro-form>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) designed to
@@ -31,7 +32,15 @@ them (along with events) to the parent form element as a JSON object.
 <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
+## Form Use Cases
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./docs/partials/useCases.md -->
+The `<auro-form>` element should be used in situations where users want to build HTML forms.
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Getting Started
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
@@ -44,30 +53,7 @@ $ npm i @aurodesignsystem/auro-formkit
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
 <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
 
-### Import Options
-
-#### Automatic Registration
-
-For automatic registration, simply import the component:
-
-```javascript
-// Registers <auro-form> automatically
-import '@aurodesignsystem/auro-formkit/auro-form';
-```
-
-#### Custom Registration
-
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroForm.register('custom-form')` method on the component class and pass in a unique name.
-
-```javascript
-// Import the class only
-import { AuroForm } from '@aurodesignsystem/auro-formkit/auro-form/class';
-
-// Register with a custom name if desired
-AuroForm.register('custom-form');
-```
-
-#### TypeScript Module Resolution
+### TypeScript Module Resolution
 
 When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
 
@@ -80,30 +66,10 @@ When using TypeScript set `moduleResolution` to `bundler`, add the following to
 ```
 
 This configuration enables proper module resolution for the component's TypeScript files.
-<!-- AURO-GENERATED-CONTENT:END -->
-**Reference component in HTML**
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
-
-```html
-<auro-form>
-  <auro-input id="search-box" name="searchBox" required>
-    <span slot="label">Search flights</span>
-  </auro-input>
-  <auro-button type="submit">Submit</auro-button>
-</auro-form>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Design Token CSS Custom Property dependency
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
-The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
-
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Install from CDN
+
 <!-- 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.
@@ -113,19 +79,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## UI development browser support
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
-For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## auro-form use cases
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
-<!-- The below content is automatically added from ./docs/partials/useCases.md -->
-The `<auro-form>` element should be used in situations where users want to build HTML forms.
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Formkit development
+## Formkit Development
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
 <!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
@@ -139,4 +93,8 @@ To only develop a single component, use the `--filter` flag:
 ```shell
 npx turbo dev --filter=@aurodesignsystem/auro-input
 ```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
+<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+The `auro-form` component does not support custom registration at this time.
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/form/dist/auro-form.d.ts

@@ -9,14 +9,26 @@
  * @typedef {Object.<string, FormStateMember>} FormState - The form state.
  */
 /**
- * The auro-form element provides users a way to ... (it would be great if you fill this out).
+ * The `auro-form` element provides users a way to create and manage forms in a consistent manner.
+ * @customElement auro-form
  *
- * @attr {Boolean} fixed - Uses fixed pixel values for element shape
- * @attr {String} cssClass - Applies designated CSS class to demo element - you want to delete me!
  * @event {Event} change - Fires when form state changes.
  */
 export class AuroForm extends LitElement {
     static get properties(): {
+        /**
+         * Applies designated CSS class to demo element - you want to delete me!
+         */
+        cssClass: {
+            type: BooleanConstructor;
+        };
+        /**
+         * If declared, use fixed pixel values for element shape.
+         */
+        fixed: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         formState: {
             attribute: boolean;
         };

package/components/form/dist/index.js

@@ -85,7 +85,7 @@ class AuroLibraryRuntimeUtils {
   }
 }
 
-/* eslint-disable no-underscore-dangle,max-lines */
+/* eslint-disable no-underscore-dangle, max-lines, object-property-newline */
 
 
 /**
@@ -100,20 +100,25 @@ class AuroLibraryRuntimeUtils {
  * @typedef {Object.<string, FormStateMember>} FormState - The form state.
  */
 
-
-// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
- * The auro-form element provides users a way to ... (it would be great if you fill this out).
+ * The `auro-form` element provides users a way to create and manage forms in a consistent manner.
+ * @customElement auro-form
  *
- * @attr {Boolean} fixed - Uses fixed pixel values for element shape
- * @attr {String} cssClass - Applies designated CSS class to demo element - you want to delete me!
  * @event {Event} change - Fires when form state changes.
  */
-
-// build the component class
 class AuroForm extends LitElement {
   static get properties() {
     return {
+
+      /**
+       * Applies designated CSS class to demo element - you want to delete me!
+       */
+      cssClass: { type: Boolean },
+
+      /**
+       * If declared, use fixed pixel values for element shape.
+       */
+      fixed: { type: Boolean, reflect: true },
       formState: { attribute: false },
       _validity: { attribute: false },
       _isInitialState: { attribute: false },

package/components/form/dist/registered.js

@@ -85,7 +85,7 @@ class AuroLibraryRuntimeUtils {
   }
 }
 
-/* eslint-disable no-underscore-dangle,max-lines */
+/* eslint-disable no-underscore-dangle, max-lines, object-property-newline */
 
 
 /**
@@ -100,20 +100,25 @@ class AuroLibraryRuntimeUtils {
  * @typedef {Object.<string, FormStateMember>} FormState - The form state.
  */
 
-
-// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
- * The auro-form element provides users a way to ... (it would be great if you fill this out).
+ * The `auro-form` element provides users a way to create and manage forms in a consistent manner.
+ * @customElement auro-form
  *
- * @attr {Boolean} fixed - Uses fixed pixel values for element shape
- * @attr {String} cssClass - Applies designated CSS class to demo element - you want to delete me!
  * @event {Event} change - Fires when form state changes.
  */
-
-// build the component class
 class AuroForm extends LitElement {
   static get properties() {
     return {
+
+      /**
+       * Applies designated CSS class to demo element - you want to delete me!
+       */
+      cssClass: { type: Boolean },
+
+      /**
+       * If declared, use fixed pixel values for element shape.
+       */
+      fixed: { type: Boolean, reflect: true },
       formState: { attribute: false },
       _validity: { attribute: false },
       _isInitialState: { attribute: false },

package/components/input/README.md

@@ -18,6 +18,7 @@ The following sections are editable by making changes to the following files:
 -->
 
 # Input
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 Use the `<auro-input>` custom element to create basic single-line text fields. Supports type `text`, `password`, and `email` with validation, required input, error states and a secondary `bordered` theme. Use the slots `label` and `helpText` for additional content support.
@@ -26,7 +27,18 @@ Use the `<auro-input>` custom element to create basic single-line text fields. S
 <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
+## Input Use Cases
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./docs/partials/useCases.md -->
+The `<auro-input>` element should be used in situations where users may:
+
+* needs to enter information
+* be filling out a form
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Getting Started
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
@@ -39,30 +51,7 @@ $ npm i @aurodesignsystem/auro-formkit
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
 <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
 
-### Import Options
-
-#### Automatic Registration
-
-For automatic registration, simply import the component:
-
-```javascript
-// Registers <auro-input> automatically
-import '@aurodesignsystem/auro-formkit/auro-input';
-```
-
-#### Custom Registration
-
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroInput.register('custom-input')` method on the component class and pass in a unique name.
-
-```javascript
-// Import the class only
-import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
-
-// Register with a custom name if desired
-AuroInput.register('custom-input');
-```
-
-#### TypeScript Module Resolution
+### TypeScript Module Resolution
 
 When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
 
@@ -75,29 +64,10 @@ When using TypeScript set `moduleResolution` to `bundler`, add the following to
 ```
 
 This configuration enables proper module resolution for the component's TypeScript files.
-<!-- AURO-GENERATED-CONTENT:END -->
-**Reference component in HTML**
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
-
-```html
-<auro-input>
-  <span slot="ariaLabel.clear">Clear All</span>
-  <span slot="label">Label</span>
-  <span slot="helpText">Help Text</span>
-</auro-input>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Design Token CSS Custom Property dependency
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
-The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
-
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Install from CDN
+
 <!-- 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.
@@ -107,22 +77,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## UI development browser support
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
-For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## auro-input use cases
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
-<!-- The below content is automatically added from ./docs/partials/useCases.md -->
-The `<auro-input>` element should be used in situations where users may:
-
-* needs to enter information
-* be filling out a form
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Formkit development
+## Formkit Development
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
 <!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
@@ -136,4 +91,44 @@ To only develop a single component, use the `--filter` flag:
 ```shell
 npx turbo dev --filter=@aurodesignsystem/auro-input
 ```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- 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:
+
+```js
+// Import the class only
+import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
+
+// Register with a custom name if desired
+AuroInput.register('custom-input');
+```
+
+This will create a new custom element `<custom-input>` that behaves exactly like `<auro-input>`, allowing both to coexist on the same page without interfering with each other.
+
+<div class="exampleWrapper exampleWrapper--flex">
+  <custom-input>
+    <span slot="label">Label</span>
+    <span slot="helpText">Help Text</span>
+  </custom-input>
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+```html
+  <custom-input>
+    <span slot="label">Label</span>
+    <span slot="helpText">Help Text</span>
+  </custom-input>
+```
+</auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/input/demo/api.js

@@ -1,17 +1,15 @@
-import { changeLang } from "../apiExamples/changeLang";
 import { customError } from "../apiExamples/error";
-import { customErrorOnDark } from "../apiExamples/inverseAppearanceError";
+import { customErrorOnDark } from "../apiExamples/appearance-inverse-error";
 import { setReadonlyValue } from "../apiExamples/readonly";
-import { swapInputValues } from "../apiExamples/swapValue";
 import { programmaticallySetValue } from "../apiExamples/value";
-import { resetStateExample } from "../apiExamples/resetState";
+import { resetStateExample } from "../apiExamples/reset-state";
+import { swapInputValues } from "../apiExamples/swap-value";
 import './index.js';
 
 export function initExamples(initCount) {
   initCount = initCount || 0;
 
   try {
-    changeLang();
     customError();
     customErrorOnDark();
     setReadonlyValue();