@aurodesignsystem-dev/auro-formkit 0.0.0-pr1594.2 → 0.0.0-pr1595.0

package/components/input/dist/registered.js

@@ -4529,37 +4529,37 @@ class AuroFormValidation {
   }
 }
 
+/**
+ * AuroElement is the shared base class for layout-aware Auro form components.
+ *
+ * It defines the common `layout`, `shape`, `size`, and `ondark` reactive
+ * properties and the architecture helpers (`renderLayout`, `resetShapeClasses`,
+ * `resetLayoutClasses`) that subclasses use to render a chosen layout and apply
+ * the matching `shape-*` / `layout-*` wrapper classes. Subclasses supply their
+ * own default and valid value set for `layout`, `shape`, and `size`.
+ */
 class AuroElement extends LitElement {
   static get properties() {
     return {
 
       /**
-       * Defines the language of an element.
-       * @default {'default'}
+       * When true, renders the component styled for use on a dark background.
        */
-      layout: {
-        type: String,
-        attribute: "layout",
-        reflect: true
-      },
-
-      shape: {
-        type: String,
-        attribute: "shape",
-        reflect: true
-      },
-
-      size: {
-        type: String,
-        attribute: "size",
-        reflect: true
-      },
-
       onDark: {
         type: Boolean,
         attribute: "ondark",
         reflect: true
       }
+
+      // NOTE: `layout`, `shape`, and `size` are intentionally NOT declared here.
+      // Their valid value sets differ per component, and the CEM analyzer roots
+      // an inherited property's `type` in the class that declares it — a base
+      // declaration would force every subclass's `@type` to be discarded and
+      // emitted as plain `string`. Each subclass declares its own `layout` /
+      // `shape` / `size` with an exact `@type` union instead. AuroElement still
+      // consumes `this.layout` / `this.shape` / `this.size` in its render and
+      // architecture helpers below (subclasses guarantee the reactive props).
+      // See AlaskaAirlines/discussions#653.
     };
   }
 
@@ -10526,6 +10526,7 @@ class DomHandler {
  * Base class for auro-input component that provides core input functionality.
  * @event input - Event fires when the value of an `auro-input` has been changed.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed.
+ * @event auroInput-validityChange - Notifies that the `validity` state of the input has changed.
  */
 class BaseInput extends AuroElement {
 
@@ -10565,6 +10566,8 @@ class BaseInput extends AuroElement {
       "credit-card",
       "tel"
     ];
+
+    /** @type {'default' | 'inverse'} */
     this.appearance = "default";
 
     /** @private */
@@ -10598,7 +10601,6 @@ class BaseInput extends AuroElement {
 
     /** @private */
     this.label = 'Input label is undefined';
-    this.layout = 'classic';
     this.locale = 'en-US';
     this._format = undefined;
 
@@ -10620,11 +10622,9 @@ class BaseInput extends AuroElement {
       "password",
       "email"
     ];
-    this.shape = 'classic';
 
     /** @private */
     this.showPassword = false;
-    this.size = 'lg';
     this.touched = false;
 
     /** @private */
@@ -10642,6 +10642,24 @@ class BaseInput extends AuroElement {
     /** @private */
     this.validationCCLength = undefined;
     this.value = undefined;
+
+    this.initializeArchitectureDefaults();
+  }
+
+  /**
+   * Sets the default `layout`, `shape`, and `size` values.
+   *
+   * These are assigned in a helper method rather than the constructor body so
+   * the CEM analyzer keeps their `@type` string-literal unions (a literal
+   * assignment in the constructor would make the analyzer infer `string` and
+   * override the union — see AlaskaAirlines/discussions#653, gotcha 1).
+   * @private
+   * @returns {void}
+   */
+  initializeArchitectureDefaults() {
+    this.layout = 'classic';
+    this.shape = 'classic';
+    this.size = 'lg';
   }
 
   // function to define props used within the scope of this component
@@ -10649,11 +10667,45 @@ class BaseInput extends AuroElement {
     return {
       ...super.properties,
 
+      /**
+       * Sets the layout variant of the input.
+       * @type {'classic' | 'emphasized' | 'emphasized-left' | 'emphasized-right' | 'snowflake' | 'snowflake-left' | 'snowflake-right'}
+       * @default 'classic'
+       */
+      layout: {
+        type: String,
+        attribute: "layout",
+        reflect: true
+      },
+
+      /**
+       * Sets the shape of the input.
+       * @type {'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'}
+       * @default 'classic'
+       */
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      /**
+       * Sets the size of the input.
+       * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}
+       * @default 'lg'
+       */
+      size: {
+        type: String,
+        attribute: "size",
+        reflect: true
+      },
+
       /**
        * The value for the role attribute.
        */
       a11yRole: {
         type: String,
+        attribute: 'a11yrole',
         reflect: true
       },
 
@@ -10662,6 +10714,7 @@ class BaseInput extends AuroElement {
        */
       a11yControls: {
         type: String,
+        attribute: 'a11ycontrols',
         reflect: true
       },
 
@@ -10670,6 +10723,7 @@ class BaseInput extends AuroElement {
        */
       a11yExpanded: {
         type: Boolean,
+        attribute: 'a11yexpanded',
         reflect: true
       },
 
@@ -10679,6 +10733,7 @@ class BaseInput extends AuroElement {
        */
       a11yActivedescendant: {
         type: String,
+        attribute: 'a11yactivedescendant',
         reflect: true
       },
 
@@ -10689,6 +10744,7 @@ class BaseInput extends AuroElement {
        */
       activeLabel: {
         type: Boolean,
+        attribute: 'activelabel',
         reflect: true
       },
 
@@ -10703,7 +10759,8 @@ class BaseInput extends AuroElement {
       },
 
       /**
-       * An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters].
+       * An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+       * @type {'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'}
        */
       autocapitalize: {
         type: String,
@@ -10720,6 +10777,7 @@ class BaseInput extends AuroElement {
 
       /**
        * When set to `off`, stops iOS from auto-correcting words when typed into a text box.
+       * @type {'on' | 'off'}
        */
       autocorrect: {
         type: String,
@@ -10730,7 +10788,8 @@ class BaseInput extends AuroElement {
        * Custom help text message for email type validity.
        */
       customValidityTypeEmail: {
-        type: String
+        type: String,
+        attribute: 'customvaliditytypeemail'
       },
 
       /**
@@ -10746,6 +10805,7 @@ class BaseInput extends AuroElement {
        */
       dvInputOnly: {
         type: Boolean,
+        attribute: 'dvinputonly',
         reflect: true
       },
 
@@ -10761,7 +10821,8 @@ class BaseInput extends AuroElement {
        * Contains the help text message for the current validity error.
        */
       errorMessage: {
-        type: String
+        type: String,
+        attribute: 'errormessage'
       },
 
       /**
@@ -10797,6 +10858,7 @@ class BaseInput extends AuroElement {
        */
       hideLabelVisually: {
         type: Boolean,
+        attribute: 'hidelabelvisually',
         reflect: true
       },
 
@@ -10863,6 +10925,7 @@ class BaseInput extends AuroElement {
        */
       maxLength: {
         type: Number,
+        attribute: 'maxlength',
         reflect: true
       },
 
@@ -10878,6 +10941,7 @@ class BaseInput extends AuroElement {
        */
       minLength: {
         type: Number,
+        attribute: 'minlength',
         reflect: true
       },
 
@@ -10903,6 +10967,7 @@ class BaseInput extends AuroElement {
        */
       noValidate: {
         type: Boolean,
+        attribute: 'novalidate',
         reflect: true
       },
 
@@ -10911,6 +10976,7 @@ class BaseInput extends AuroElement {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       },
 
@@ -10950,77 +11016,88 @@ class BaseInput extends AuroElement {
        * Sets a custom help text message to display for all validityStates.
        */
       setCustomValidity: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidity'
       },
 
       /**
        * Custom help text message to display when validity = `badInput`.
        */
       setCustomValidityBadInput: {
-        type: String
+        type: String,
+        attribute: 'setcustomvaliditybadinput'
       },
 
       /**
        * Custom help text message to display when validity = `customError`.
        */
       setCustomValidityCustomError: {
-        type: String
+        type: String,
+        attribute: 'setcustomvaliditycustomerror'
       },
 
       /**
        * Custom help text message to display for the declared element `type` and type validity fails.
        */
       setCustomValidityForType: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidityfortype'
       },
 
       /**
        * Custom help text message to display when validity = `patternMismatch`.
        */
       setCustomValidityPatternMismatch: {
-        type: String
+        type: String,
+        attribute: 'setcustomvaliditypatternmismatch'
       },
 
       /**
        * Custom help text message to display when validity = `rangeOverflow`.
        */
       setCustomValidityRangeOverflow: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidityrangeoverflow'
       },
 
       /**
        * Custom help text message to display when validity = `rangeUnderflow`.
        */
       setCustomValidityRangeUnderflow: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidityrangeunderflow'
       },
 
       /**
        * Custom help text message to display when validity = `tooLong`.
        */
       setCustomValidityTooLong: {
-        type: String
+        type: String,
+        attribute: 'setcustomvaliditytoolong'
       },
 
       /**
        * Custom help text message to display when validity = `tooShort`.
        */
       setCustomValidityTooShort: {
-        type: String
+        type: String,
+        attribute: 'setcustomvaliditytooshort'
       },
 
       /**
        * Custom help text message to display when validity = `valueMissing`.
        */
       setCustomValidityValueMissing: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidityvaluemissing'
       },
 
       /**
        * @ignore
        */
       showPassword: {
-        state: true
+        state: true,
+        attribute: false
       },
 
       /**
@@ -11032,7 +11109,8 @@ class BaseInput extends AuroElement {
       },
 
       /**
-       * An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`.
+       * An enumerated attribute defines whether the element may be checked for spelling errors. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`.
+       * @type {'true' | 'false'}
        */
       spellcheck: {
         type: String,
@@ -11063,7 +11141,8 @@ class BaseInput extends AuroElement {
        * Sets validation mode to re-eval with each input.
        */
       validateOnInput: {
-        type: Boolean
+        type: Boolean,
+        attribute: 'validateoninput'
       },
 
       /**
@@ -12117,6 +12196,8 @@ class AuroHelpText extends LitElement {
     super();
 
     this.error = false;
+
+    /** @type {'default' | 'inverse'} */
     this.appearance = "default";
     this.onDark = false;
     this.hasTextContent = false;
@@ -12137,8 +12218,8 @@ class AuroHelpText extends LitElement {
     return {
 
       /**
-       * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'} - The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
+       * The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
+       * @type {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
@@ -12151,6 +12232,7 @@ class AuroHelpText extends LitElement {
        */
       slotNodes: {
         type: Boolean,
+        attribute: 'slotnodes',
       },
 
       /**
@@ -12158,6 +12240,7 @@ class AuroHelpText extends LitElement {
        */
       hasTextContent: {
         type: Boolean,
+        attribute: 'hastextcontent',
       },
 
       /**
@@ -12173,6 +12256,7 @@ class AuroHelpText extends LitElement {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       }
     };
@@ -12243,7 +12327,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202608261850';
+var formkitVersion = '202608291822';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/layoutElement/dist/auroElement.d.ts

@@ -1,24 +1,17 @@
+/**
+ * AuroElement is the shared base class for layout-aware Auro form components.
+ *
+ * It defines the common `layout`, `shape`, `size`, and `ondark` reactive
+ * properties and the architecture helpers (`renderLayout`, `resetShapeClasses`,
+ * `resetLayoutClasses`) that subclasses use to render a chosen layout and apply
+ * the matching `shape-*` / `layout-*` wrapper classes. Subclasses supply their
+ * own default and valid value set for `layout`, `shape`, and `size`.
+ */
 export class AuroElement extends LitElement {
     static get properties(): {
         /**
-         * Defines the language of an element.
-         * @default {'default'}
+         * When true, renders the component styled for use on a dark background.
          */
-        layout: {
-            type: StringConstructor;
-            attribute: string;
-            reflect: boolean;
-        };
-        shape: {
-            type: StringConstructor;
-            attribute: string;
-            reflect: boolean;
-        };
-        size: {
-            type: StringConstructor;
-            attribute: string;
-            reflect: boolean;
-        };
         onDark: {
             type: BooleanConstructor;
             attribute: string;

package/components/layoutElement/dist/index.js

@@ -1,36 +1,36 @@
 import { LitElement } from 'lit';
 
+/**
+ * AuroElement is the shared base class for layout-aware Auro form components.
+ *
+ * It defines the common `layout`, `shape`, `size`, and `ondark` reactive
+ * properties and the architecture helpers (`renderLayout`, `resetShapeClasses`,
+ * `resetLayoutClasses`) that subclasses use to render a chosen layout and apply
+ * the matching `shape-*` / `layout-*` wrapper classes. Subclasses supply their
+ * own default and valid value set for `layout`, `shape`, and `size`.
+ */
 class AuroElement extends LitElement {
   static get properties() {
     return {
 
       /**
-       * Defines the language of an element.
-       * @default {'default'}
+       * When true, renders the component styled for use on a dark background.
        */
-      layout: {
-        type: String,
-        attribute: "layout",
-        reflect: true
-      },
-
-      shape: {
-        type: String,
-        attribute: "shape",
-        reflect: true
-      },
-
-      size: {
-        type: String,
-        attribute: "size",
-        reflect: true
-      },
-
       onDark: {
         type: Boolean,
         attribute: "ondark",
         reflect: true
       }
+
+      // NOTE: `layout`, `shape`, and `size` are intentionally NOT declared here.
+      // Their valid value sets differ per component, and the CEM analyzer roots
+      // an inherited property's `type` in the class that declares it — a base
+      // declaration would force every subclass's `@type` to be discarded and
+      // emitted as plain `string`. Each subclass declares its own `layout` /
+      // `shape` / `size` with an exact `@type` union instead. AuroElement still
+      // consumes `this.layout` / `this.shape` / `this.size` in its render and
+      // architecture helpers below (subclasses guarantee the reactive props).
+      // See AlaskaAirlines/discussions#653.
     };
   }
 

package/components/layoutElement/dist/registered.js

@@ -1,36 +1,36 @@
 import { LitElement } from 'lit';
 
+/**
+ * AuroElement is the shared base class for layout-aware Auro form components.
+ *
+ * It defines the common `layout`, `shape`, `size`, and `ondark` reactive
+ * properties and the architecture helpers (`renderLayout`, `resetShapeClasses`,
+ * `resetLayoutClasses`) that subclasses use to render a chosen layout and apply
+ * the matching `shape-*` / `layout-*` wrapper classes. Subclasses supply their
+ * own default and valid value set for `layout`, `shape`, and `size`.
+ */
 class AuroElement extends LitElement {
   static get properties() {
     return {
 
       /**
-       * Defines the language of an element.
-       * @default {'default'}
+       * When true, renders the component styled for use on a dark background.
        */
-      layout: {
-        type: String,
-        attribute: "layout",
-        reflect: true
-      },
-
-      shape: {
-        type: String,
-        attribute: "shape",
-        reflect: true
-      },
-
-      size: {
-        type: String,
-        attribute: "size",
-        reflect: true
-      },
-
       onDark: {
         type: Boolean,
         attribute: "ondark",
         reflect: true
       }
+
+      // NOTE: `layout`, `shape`, and `size` are intentionally NOT declared here.
+      // Their valid value sets differ per component, and the CEM analyzer roots
+      // an inherited property's `type` in the class that declares it — a base
+      // declaration would force every subclass's `@type` to be discarded and
+      // emitted as plain `string`. Each subclass declares its own `layout` /
+      // `shape` / `size` with an exact `@type` union instead. AuroElement still
+      // consumes `this.layout` / `this.shape` / `this.size` in its render and
+      // architecture helpers below (subclasses guarantee the reactive props).
+      // See AlaskaAirlines/discussions#653.
     };
   }