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

package/components/input/demo/getting-started.min.js

@@ -4587,37 +4587,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 i$3 {
   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.
     };
   }
 
@@ -10584,6 +10584,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 {
 
@@ -10623,6 +10624,8 @@ class BaseInput extends AuroElement {
       "credit-card",
       "tel"
     ];
+
+    /** @type {'default' | 'inverse'} */
     this.appearance = "default";
 
     /** @private */
@@ -10656,7 +10659,6 @@ class BaseInput extends AuroElement {
 
     /** @private */
     this.label = 'Input label is undefined';
-    this.layout = 'classic';
     this.locale = 'en-US';
     this._format = undefined;
 
@@ -10678,11 +10680,9 @@ class BaseInput extends AuroElement {
       "password",
       "email"
     ];
-    this.shape = 'classic';
 
     /** @private */
     this.showPassword = false;
-    this.size = 'lg';
     this.touched = false;
 
     /** @private */
@@ -10700,6 +10700,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
@@ -10707,11 +10725,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
       },
 
@@ -10720,6 +10772,7 @@ class BaseInput extends AuroElement {
        */
       a11yControls: {
         type: String,
+        attribute: 'a11ycontrols',
         reflect: true
       },
 
@@ -10728,6 +10781,7 @@ class BaseInput extends AuroElement {
        */
       a11yExpanded: {
         type: Boolean,
+        attribute: 'a11yexpanded',
         reflect: true
       },
 
@@ -10737,6 +10791,7 @@ class BaseInput extends AuroElement {
        */
       a11yActivedescendant: {
         type: String,
+        attribute: 'a11yactivedescendant',
         reflect: true
       },
 
@@ -10747,6 +10802,7 @@ class BaseInput extends AuroElement {
        */
       activeLabel: {
         type: Boolean,
+        attribute: 'activelabel',
         reflect: true
       },
 
@@ -10761,7 +10817,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,
@@ -10778,6 +10835,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,
@@ -10788,7 +10846,8 @@ class BaseInput extends AuroElement {
        * Custom help text message for email type validity.
        */
       customValidityTypeEmail: {
-        type: String
+        type: String,
+        attribute: 'customvaliditytypeemail'
       },
 
       /**
@@ -10804,6 +10863,7 @@ class BaseInput extends AuroElement {
        */
       dvInputOnly: {
         type: Boolean,
+        attribute: 'dvinputonly',
         reflect: true
       },
 
@@ -10819,7 +10879,8 @@ class BaseInput extends AuroElement {
        * Contains the help text message for the current validity error.
        */
       errorMessage: {
-        type: String
+        type: String,
+        attribute: 'errormessage'
       },
 
       /**
@@ -10855,6 +10916,7 @@ class BaseInput extends AuroElement {
        */
       hideLabelVisually: {
         type: Boolean,
+        attribute: 'hidelabelvisually',
         reflect: true
       },
 
@@ -10921,6 +10983,7 @@ class BaseInput extends AuroElement {
        */
       maxLength: {
         type: Number,
+        attribute: 'maxlength',
         reflect: true
       },
 
@@ -10936,6 +10999,7 @@ class BaseInput extends AuroElement {
        */
       minLength: {
         type: Number,
+        attribute: 'minlength',
         reflect: true
       },
 
@@ -10961,6 +11025,7 @@ class BaseInput extends AuroElement {
        */
       noValidate: {
         type: Boolean,
+        attribute: 'novalidate',
         reflect: true
       },
 
@@ -10969,6 +11034,7 @@ class BaseInput extends AuroElement {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       },
 
@@ -11008,77 +11074,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
       },
 
       /**
@@ -11090,7 +11167,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,
@@ -11121,7 +11199,8 @@ class BaseInput extends AuroElement {
        * Sets validation mode to re-eval with each input.
        */
       validateOnInput: {
-        type: Boolean
+        type: Boolean,
+        attribute: 'validateoninput'
       },
 
       /**
@@ -12175,6 +12254,8 @@ class AuroHelpText extends i$3 {
     super();
 
     this.error = false;
+
+    /** @type {'default' | 'inverse'} */
     this.appearance = "default";
     this.onDark = false;
     this.hasTextContent = false;
@@ -12195,8 +12276,8 @@ class AuroHelpText extends i$3 {
     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: {
@@ -12209,6 +12290,7 @@ class AuroHelpText extends i$3 {
        */
       slotNodes: {
         type: Boolean,
+        attribute: 'slotnodes',
       },
 
       /**
@@ -12216,6 +12298,7 @@ class AuroHelpText extends i$3 {
        */
       hasTextContent: {
         type: Boolean,
+        attribute: 'hastextcontent',
       },
 
       /**
@@ -12231,6 +12314,7 @@ class AuroHelpText extends i$3 {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       }
     };
@@ -12301,7 +12385,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202608261850';
+var formkitVersion = '202608291822';
 
 /**
  * @license