@aurodesignsystem/auro-formkit 5.9.1 → 5.9.2

package/components/dropdown/dist/registered.js

@@ -3094,7 +3094,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202512120003';
+var formkitVersion = '202601271813';
 
 class AuroElement extends LitElement {
   static get properties() {
@@ -3200,12 +3200,14 @@ class AuroElement extends LitElement {
   }
 }
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
-
-/*
+/**
+ * The `auro-dropdown` element provides a way to place content in a bib that can be toggled.
+ * @customElement auro-dropdown
+ *
  * @slot - Default slot for the popover content.
  * @slot helpText - Defines the content of the helpText.
  * @slot trigger - Defines the content of the trigger.
@@ -3241,7 +3243,7 @@ class AuroDropdown extends AuroElement {
     /** @private */
     this.bibElement = createRef();
 
-    this.privateDefaults();
+    this._intializeDefaults();
   }
 
   /**
@@ -3262,7 +3264,7 @@ class AuroDropdown extends AuroElement {
    * @private
    * @returns {void} Internal defaults.
    */
-  privateDefaults() {
+  _intializeDefaults() {
     this.appearance = 'default';
     this.chevron = false;
     this.disabled = false;
@@ -3383,9 +3385,18 @@ class AuroDropdown extends AuroElement {
   static get properties() {
     return {
 
+      /**
+       * The value for the role attribute of the trigger element.
+       */
+      a11yRole: {
+        type: String || undefined,
+        attribute: false,
+        reflect: false
+      },
+
       /**
        * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'}
+       * @type {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
@@ -3395,7 +3406,6 @@ class AuroDropdown extends AuroElement {
 
       /**
        * If declared, bib's position will be automatically calculated where to appear.
-       * @default false
        */
       autoPlacement: {
         type: Boolean,
@@ -3404,7 +3414,6 @@ class AuroDropdown extends AuroElement {
 
       /**
        * If declared, the dropdown will only show by calling the API .show() public method.
-       * @default false
        */
       disableEventShow: {
         type: Boolean,
@@ -3421,11 +3430,11 @@ class AuroDropdown extends AuroElement {
 
       /**
        * If declared, the dropdown displays a chevron on the right.
-       * @attr {Boolean} chevron
        */
       chevron: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: 'chevron'
       },
 
       /**
@@ -3462,7 +3471,7 @@ class AuroDropdown extends AuroElement {
       },
 
       /**
-       * If declared in combination with not using the `simple` property or `helpText` slot content, will apply red color to both.
+       * If declared, will apply error UI to the dropdown.
        */
       error: {
         type: Boolean,
@@ -3517,18 +3526,28 @@ class AuroDropdown extends AuroElement {
       },
 
       /**
-       * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
-       * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
+       * Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
        *
        * When expanded, the dropdown will automatically display in fullscreen mode
        * if the screen size is equal to or smaller than the selected breakpoint.
-       * @default sm
+       * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'}
+       * @default 'sm'
        */
       fullscreenBreakpoint: {
         type: String,
         reflect: true
       },
 
+      /**
+       * Sets the layout of the dropdown.
+       * @type {'classic' | 'emphasized' | 'snowflake'}
+       * @default 'classic'
+       */
+      layout: {
+        type: String,
+        reflect: true
+      },
+
       /**
        * Defines if the trigger should size based on the parent element providing the border UI.
        * @private
@@ -3549,7 +3568,6 @@ class AuroDropdown extends AuroElement {
       /**
        * If declared, the bib will NOT flip to an alternate position
        * when there isn't enough space in the specified `placement`.
-       * @default false
        */
       noFlip: {
         type: Boolean,
@@ -3558,7 +3576,6 @@ class AuroDropdown extends AuroElement {
 
       /**
        * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
-       * @default false
        */
       shift: {
         type: Boolean,
@@ -3591,7 +3608,7 @@ class AuroDropdown extends AuroElement {
       },
 
       /**
-       * DEPRECATED - use `appearance` instead.
+       * DEPRECATED - use `appearance="inverse"` instead.
        */
       onDark: {
         type: Boolean,
@@ -3608,7 +3625,8 @@ class AuroDropdown extends AuroElement {
 
       /**
        * Position where the bib should appear relative to the trigger.
-       * @default bottom-start
+       * @type {'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'}
+       * @default 'bottom-start'
        */
       placement: {
         type: String,
@@ -3620,15 +3638,6 @@ class AuroDropdown extends AuroElement {
        */
       tabIndex: {
         type: Number
-      },
-
-      /**
-       * The value for the role attribute of the trigger element.
-       */
-      a11yRole: {
-        type: String || undefined,
-        attribute: false,
-        reflect: false
       }
     };
   }
@@ -3655,7 +3664,7 @@ class AuroDropdown extends AuroElement {
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-dropdown"] - The name of element that you want to register to.
+   * @param {string} [name="auro-dropdown"] - The name of the element that you want to register.
    *
    * @example
    * AuroDropdown.register("custom-dropdown") // this will register this element to <custom-dropdown/>

package/components/form/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/demo/api.md

@@ -3,30 +3,25 @@
 
 # auro-form
 
-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.
 
-## Attributes
-
-| Attribute  | Type      | Description                                      |
-|------------|-----------|--------------------------------------------------|
-| [cssClass](#cssClass) | `String`  | Applies designated CSS class to demo element - you want to delete me! |
-| [fixed](#fixed)    | `Boolean` | Uses fixed pixel values for element shape        |
-
 ## Properties
 
-| Property                   | Modifiers | Type                                             | Default | Description                                      |
-|----------------------------|-----------|--------------------------------------------------|---------|--------------------------------------------------|
-| [formState](#formState)                |           | `FormState`                                      | {}      |                                                  |
-| [isInitialState](#isInitialState)           | readonly  | `boolean`                                        |         | Mostly internal way to determine if a form is in the initial state. |
-| [mutationEventListener](#mutationEventListener)    |           |                                                  |         |                                                  |
-| [reset](#reset)                    |           |                                                  |         |                                                  |
-| [resetElements](#resetElements)            | readonly  | `HTMLButtonElement[]`                            |         | Returns a collection of elements that will reset the form. |
-| [sharedInputListener](#sharedInputListener)      |           |                                                  |         |                                                  |
-| [sharedValidationListener](#sharedValidationListener) |           |                                                  |         |                                                  |
-| [submit](#submit)                   |           |                                                  |         |                                                  |
-| [submitElements](#submitElements)           | readonly  | `HTMLButtonElement[]`                            |         | Getter for internal _submitElements.             |
-| [validity](#validity)                 | readonly  | `"valid" \| "invalid"`                           |         | Current validity state of the form, based on form element events. |
-| [value](#value)                    | readonly  | `Record<string, string \| number \| boolean \| string[] \| null>` |         | Reduce the form value into a key-value pair.<br /><br />NOTE: form keys use `name` first, and `id` second if `name` is not available.<br />This follows standard HTML5 form behavior - submission uses `name` by default when creating<br />the FormData object. |
+| Property                   | Attribute  | Modifiers | Type                                             | Default | Description                                      |
+|----------------------------|------------|-----------|--------------------------------------------------|---------|--------------------------------------------------|
+| [cssClass](#cssClass)                 | `cssClass` |           | `boolean`                                        |         | Applies designated CSS class to demo element - you want to delete me! |
+| [fixed](#fixed)                    | `fixed`    |           | `boolean`                                        |         | If declared, use fixed pixel values for element shape. |
+| [formState](#formState)                |            |           | `FormState`                                      | {}      |                                                  |
+| [isInitialState](#isInitialState)           |            | readonly  | `boolean`                                        |         | Mostly internal way to determine if a form is in the initial state. |
+| [mutationEventListener](#mutationEventListener)    |            |           |                                                  |         |                                                  |
+| [reset](#reset)                    |            |           |                                                  |         |                                                  |
+| [resetElements](#resetElements)            |            | readonly  | `HTMLButtonElement[]`                            |         | Returns a collection of elements that will reset the form. |
+| [sharedInputListener](#sharedInputListener)      |            |           |                                                  |         |                                                  |
+| [sharedValidationListener](#sharedValidationListener) |            |           |                                                  |         |                                                  |
+| [submit](#submit)                   |            |           |                                                  |         |                                                  |
+| [submitElements](#submitElements)           |            | readonly  | `HTMLButtonElement[]`                            |         | Getter for internal _submitElements.             |
+| [validity](#validity)                 |            | readonly  | `"valid" \| "invalid"`                           |         | Current validity state of the form, based on form element events. |
+| [value](#value)                    |            | readonly  | `Record<string, string \| number \| boolean \| string[] \| null>` |         | Reduce the form value into a key-value pair.<br /><br />NOTE: form keys use `name` first, and `id` second if `name` is not available.<br />This follows standard HTML5 form behavior - submission uses `name` by default when creating<br />the FormData object. |
 
 ## Methods
 

package/components/form/demo/api.min.js

@@ -109,7 +109,7 @@ class AuroLibraryRuntimeUtils {
   }
 }
 
-/* eslint-disable no-underscore-dangle,max-lines */
+/* eslint-disable no-underscore-dangle, max-lines, object-property-newline */
 
 
 /**
@@ -124,20 +124,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 i {
   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/demo/index.md

@@ -17,7 +17,7 @@ It automatically "scrapes" its inner content for any auro form elements, and sur
 them (along with events) to the parent form element as a JSON object.
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Form value generation
+## Form Value Generation
 
 Auro form exists to make a developer's life easier through surfacing all Auro form elements in a given form as a single
 JSON object.
@@ -32,7 +32,7 @@ The following is required on each Auro form element in a form for it to be colle
 That being said, we do _not_ require form elements to be direct children of `auro-form`.
 They can be nested within other elements for styling, such as a `div`, `span` or `fieldset`.
 
-### Form data structure
+### Form Data Structure
 
 In a correctly registered scenario, `auro-form`
 will automatically recognize the auro form elements and collect data from each on the form's `value` key as a JSON object.
@@ -68,7 +68,7 @@ interface AuroFormState {
 }
 ```
 
-## Accessing form data
+## Accessing Form Data
 
 As Auro components are designed to be framework-agnostic, data can be retrieved using simple vanilla JavaScript patterns.
 If you have ever worked with a standard HTML5 form, you are already equipped to work with Auro forms!
@@ -76,11 +76,11 @@ If you have ever worked with a standard HTML5 form, you are already equipped to
 Once you have a reference to the form element (React ref, querySelector, etc.),
 you can access the form data using the following methods:
 
-**Data keys + get methods**:
+**Data Keys + Get Methods**:
 - `.value` - Getter which returns the current form data as a JSON object.
 - `.validity` - Returns the current validity state of the form (`valid` or `invalid`).
 
-**Extra information**:
+**Extra Information**:
 - `.isInitialState` - Returns a boolean indicating if the form is in its initial state.
 
 **Events**
@@ -88,11 +88,11 @@ you can access the form data using the following methods:
 - `reset` - Fires when the form is reset.
 - `submit` - Fires when the form is submitted.
 
-**Advanced features**:
+**Advanced Features**:
 - `.formState` - This is the internal form state. It includes extra `required` and `validity` information for each form element.
 This key is not required for normal form usage, but can add additional context for more complex forms.
 
-## Important note for custom elements
+## Important Note for Custom Elements
 
 This **only applies to custom-named elements**.
 
@@ -104,8 +104,8 @@ which are only assigned during the initial render.
 For example, the following is correct:
 
 ```javascript
-import {AuroInput} from '@aurodesignsystem/auro-input';
-import {AuroForm} from '@aurodesignsystem/auro-form';
+import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
+import { AuroForm } from '@aurodesignsystem/auro-formkit/auro-form/class';
 
 AuroInput.register('my-custom-input'); // adds an internal identifier auro-form uses to recognize the custom element
 AuroForm.register(); // render looks for said identifier
@@ -114,8 +114,8 @@ AuroForm.register(); // render looks for said identifier
 The following is NOT correct and will result in forms not working as expected:
 
 ```javascript
-import {AuroInput} from '@aurodesignsystem/auro-input';
-import {AuroForm} from '@aurodesignsystem/auro-form';
+import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
+import { AuroForm } from '@aurodesignsystem/auro-formkit/auro-form/class';
 
 AuroForm.register(); // forms start rendering, looking for auro inputs, or custom-named inputs
 AuroInput.register('my-custom-input'); // too late, form has already rendered and did not find the custom element
@@ -124,6 +124,7 @@ AuroInput.register('my-custom-input'); // too late, form has already rendered an
 ## Examples
 
 ### Basic Form
+
 The most basic form implementation requires an `auro-input` and an optional auro button with `type="submit"`.
 
 By default, Auro Form connects a `submit` event to all `type="submit"` buttons within the form.
@@ -135,6 +136,7 @@ By default, Auro Form connects a `submit` event to all `type="submit"` buttons w
     <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 -->
@@ -149,13 +151,15 @@ By default, Auro Form connects a `submit` event to all `type="submit"` buttons w
   <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 -->
 </auro-accordion>
 
-### Form with column layout
+### Form with Column Layout
+
 Auro Form is designed to be completely unstyled by default, allowing developers to use divs, structural elements, or
 custom CSS to style the form.
 
@@ -264,7 +268,8 @@ This example shows that you can use advanced layouts with Auro Form, such as a c
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Complex form
+### Complex Form
+
 Finally, a more complex form example with multiple form elements, including a date picker and a select element.
 
 <div class="exampleWrapper">
@@ -294,19 +299,16 @@ Finally, a more complex form example with multiple form elements, including a da
   <auro-form class="complex-form">
     <auro-input id="first-name" name="firstName" required>
       <span slot="label">First Name</span>
-    </auro-input>
-    <div>
-      <auro-input id="last-name" name="lastName" required>
-        <span slot="label">Last Name</span>
-      </auro-input>
-    </div>
-    <div>
-      <div>
-        <auro-input id="occupation" name="occupation" required>
-          <span slot="label">Occupation</span>
-        </auro-input>
-      </div>
-    </div>
+    </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>
@@ -362,19 +364,16 @@ Finally, a more complex form example with multiple form elements, including a da
 <auro-form class="complex-form">
   <auro-input id="first-name" name="firstName" required>
     <span slot="label">First Name</span>
-  </auro-input>
-  <div>
-    <auro-input id="last-name" name="lastName" required>
-      <span slot="label">Last Name</span>
-    </auro-input>
-  </div>
-  <div>
-    <div>
-      <auro-input id="occupation" name="occupation" required>
-        <span slot="label">Occupation</span>
-      </auro-input>
-    </div>
-  </div>
+  </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>

package/components/form/demo/index.min.js

@@ -109,7 +109,7 @@ class AuroLibraryRuntimeUtils {
   }
 }
 
-/* eslint-disable no-underscore-dangle,max-lines */
+/* eslint-disable no-underscore-dangle, max-lines, object-property-newline */
 
 
 /**
@@ -124,20 +124,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 i {
   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 },