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

package/components/menu/dist/index.js

@@ -9,37 +9,37 @@ var colorCss$1 = css`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-div
 
 var tokensCss = css`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-container-border-color: var(--ds-auro-menuoption-container-color);--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
 
+/**
+ * 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.
     };
   }
 
@@ -430,6 +430,7 @@ let menuInstanceIdCounter = 0;
  * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
  * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
  * @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
+ * @event {CustomEvent<{ options: Array<HTMLElement> }>} auroMenu-optionsChange - Notifies that the set of available menu options has changed.
  * @event {CustomEvent<any>} auroMenu-selectValueFailure - Notifies that an attempt to select a menuoption by matching a value has failed.
  * @event {CustomEvent<any>} auroMenu-selectValueReset - Notifies that the component value has been reset.
  * @event {CustomEvent<any>} auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
@@ -444,15 +445,7 @@ class AuroMenu extends AuroElement {
 
     // State properties (reactive)
 
-    /**
-     * @private
-     */
-    this.shape = "box";
-
-    /**
-     * @private
-     */
-    this.size = "sm";
+    this.initializeArchitectureDefaults();
 
     // Value of the selected options
     this.value = undefined;
@@ -493,8 +486,6 @@ class AuroMenu extends AuroElement {
 
     // Instance properties (non-reactive)
 
-    menuInstanceIdCounter += 1;
-
     Object.assign(this, {
       // Root-level menu (true) or a nested submenu (false)
       rootMenu: true,
@@ -506,7 +497,7 @@ class AuroMenu extends AuroElement {
       loadingSlots: null,
       // Unique id for this menu instance; prefixes every auto-generated option
       // key so keys never collide across menus in the same document.
-      _menuInstanceId: `menu-${menuInstanceIdCounter}`,
+      _menuInstanceId: `menu-${menuInstanceIdCounter += 1}`,
       // Monotonically increasing counter for option key generation. Never
       // resets, so a key is never reused within this instance's lifetime.
       _optionKeyCounter: 0,
@@ -522,10 +513,50 @@ class AuroMenu extends AuroElement {
     });
   }
 
+  // Defaults for the layout/shape/size architecture props are set in a helper
+  // (not the constructor body) so the CEM analyzer keeps their `@type` unions
+  // instead of inferring `string` from a constructor-literal assignment.
+  // See AlaskaAirlines/discussions#653.
+  initializeArchitectureDefaults() {
+    this.shape = "box";
+    this.size = "sm";
+  }
+
   static get properties() {
     return {
       ...super.properties,
 
+      /**
+       * Applies a named layout variant to the menu. Free-form string consumed by the shared architecture helpers; menu defines no closed value set.
+       */
+      layout: {
+        type: String,
+        attribute: "layout",
+        reflect: true
+      },
+
+      /**
+       * Sets the shape of the menu options.
+       * @type {'box' | 'pill' | 'snowflake'}
+       * @default 'box'
+       */
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      /**
+       * Sets the size of the menu options.
+       * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}
+       * @default 'sm'
+       */
+      size: {
+        type: String,
+        attribute: "size",
+        reflect: true
+      },
+
       /**
        * When true, the entire menu and all options are disabled.
        */
@@ -581,6 +612,7 @@ class AuroMenu extends AuroElement {
       /**
        * Specifies the current active menuOption.
        * @readonly
+       * @type {HTMLElement}
        */
       optionActive: {
         type: Object,
@@ -590,6 +622,7 @@ class AuroMenu extends AuroElement {
       /**
        * The currently selected menu option(s). In single-select mode this is a single `HTMLElement` (or `undefined` when nothing is selected). In multi-select mode this is an array of `HTMLElement`s.
        * @readonly
+       * @type {HTMLElement | HTMLElement[]}
        */
       optionSelected: {
         // Allow HTMLElement, HTMLElement[] arrays and undefined
@@ -1847,9 +1880,36 @@ class AuroMenuOption extends AuroElement {
   static get properties() {
     return {
       ...super.properties,
+
+      /**
+       * Sets the shape of the option. When unset, it inherits the shape of the parent `auro-menu`.
+       * @type {'box' | 'pill' | 'snowflake'}
+       * @default 'box'
+       */
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      /**
+       * Sets the size of the option. When unset, it inherits the size of the parent `auro-menu`.
+       * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}
+       * @default 'sm'
+       */
+      size: {
+        type: String,
+        attribute: "size",
+        reflect: true
+      },
+
+      /**
+       * When true, this option will not show the checkmark when selected.
+       */
       noCheckmark: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: 'nocheckmark'
       },
 
       /**
@@ -1861,21 +1921,34 @@ class AuroMenuOption extends AuroElement {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * When true, the option is disabled and cannot be selected.
+       */
       disabled: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * The value associated with this menu option.
+       */
       value: {
         type: String,
         reflect: true
       },
+
+      /**
+       * Sets the tab order of the menu option.
+       */
       tabIndex: {
         type: Number,
-        reflect: true
+        reflect: true,
+        attribute: 'tabindex'
       },
 
       /**
-       * @private
+       * When set, selecting this option dispatches a custom event of the given name from the parent `auro-menu` (and an `auroMenu-customEventFired` event) instead of selecting the option.
        */
       event: {
         type: String,

package/components/menu/dist/registered.js

@@ -9,37 +9,37 @@ var colorCss$1 = css`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-div
 
 var tokensCss = css`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-container-border-color: var(--ds-auro-menuoption-container-color);--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
 
+/**
+ * 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.
     };
   }
 
@@ -389,6 +389,7 @@ let menuInstanceIdCounter = 0;
  * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
  * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
  * @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
+ * @event {CustomEvent<{ options: Array<HTMLElement> }>} auroMenu-optionsChange - Notifies that the set of available menu options has changed.
  * @event {CustomEvent<any>} auroMenu-selectValueFailure - Notifies that an attempt to select a menuoption by matching a value has failed.
  * @event {CustomEvent<any>} auroMenu-selectValueReset - Notifies that the component value has been reset.
  * @event {CustomEvent<any>} auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
@@ -403,15 +404,7 @@ class AuroMenu extends AuroElement {
 
     // State properties (reactive)
 
-    /**
-     * @private
-     */
-    this.shape = "box";
-
-    /**
-     * @private
-     */
-    this.size = "sm";
+    this.initializeArchitectureDefaults();
 
     // Value of the selected options
     this.value = undefined;
@@ -452,8 +445,6 @@ class AuroMenu extends AuroElement {
 
     // Instance properties (non-reactive)
 
-    menuInstanceIdCounter += 1;
-
     Object.assign(this, {
       // Root-level menu (true) or a nested submenu (false)
       rootMenu: true,
@@ -465,7 +456,7 @@ class AuroMenu extends AuroElement {
       loadingSlots: null,
       // Unique id for this menu instance; prefixes every auto-generated option
       // key so keys never collide across menus in the same document.
-      _menuInstanceId: `menu-${menuInstanceIdCounter}`,
+      _menuInstanceId: `menu-${menuInstanceIdCounter += 1}`,
       // Monotonically increasing counter for option key generation. Never
       // resets, so a key is never reused within this instance's lifetime.
       _optionKeyCounter: 0,
@@ -481,10 +472,50 @@ class AuroMenu extends AuroElement {
     });
   }
 
+  // Defaults for the layout/shape/size architecture props are set in a helper
+  // (not the constructor body) so the CEM analyzer keeps their `@type` unions
+  // instead of inferring `string` from a constructor-literal assignment.
+  // See AlaskaAirlines/discussions#653.
+  initializeArchitectureDefaults() {
+    this.shape = "box";
+    this.size = "sm";
+  }
+
   static get properties() {
     return {
       ...super.properties,
 
+      /**
+       * Applies a named layout variant to the menu. Free-form string consumed by the shared architecture helpers; menu defines no closed value set.
+       */
+      layout: {
+        type: String,
+        attribute: "layout",
+        reflect: true
+      },
+
+      /**
+       * Sets the shape of the menu options.
+       * @type {'box' | 'pill' | 'snowflake'}
+       * @default 'box'
+       */
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      /**
+       * Sets the size of the menu options.
+       * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}
+       * @default 'sm'
+       */
+      size: {
+        type: String,
+        attribute: "size",
+        reflect: true
+      },
+
       /**
        * When true, the entire menu and all options are disabled.
        */
@@ -540,6 +571,7 @@ class AuroMenu extends AuroElement {
       /**
        * Specifies the current active menuOption.
        * @readonly
+       * @type {HTMLElement}
        */
       optionActive: {
         type: Object,
@@ -549,6 +581,7 @@ class AuroMenu extends AuroElement {
       /**
        * The currently selected menu option(s). In single-select mode this is a single `HTMLElement` (or `undefined` when nothing is selected). In multi-select mode this is an array of `HTMLElement`s.
        * @readonly
+       * @type {HTMLElement | HTMLElement[]}
        */
       optionSelected: {
         // Allow HTMLElement, HTMLElement[] arrays and undefined
@@ -1806,9 +1839,36 @@ class AuroMenuOption extends AuroElement {
   static get properties() {
     return {
       ...super.properties,
+
+      /**
+       * Sets the shape of the option. When unset, it inherits the shape of the parent `auro-menu`.
+       * @type {'box' | 'pill' | 'snowflake'}
+       * @default 'box'
+       */
+      shape: {
+        type: String,
+        attribute: "shape",
+        reflect: true
+      },
+
+      /**
+       * Sets the size of the option. When unset, it inherits the size of the parent `auro-menu`.
+       * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}
+       * @default 'sm'
+       */
+      size: {
+        type: String,
+        attribute: "size",
+        reflect: true
+      },
+
+      /**
+       * When true, this option will not show the checkmark when selected.
+       */
       noCheckmark: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: 'nocheckmark'
       },
 
       /**
@@ -1820,21 +1880,34 @@ class AuroMenuOption extends AuroElement {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * When true, the option is disabled and cannot be selected.
+       */
       disabled: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * The value associated with this menu option.
+       */
       value: {
         type: String,
         reflect: true
       },
+
+      /**
+       * Sets the tab order of the menu option.
+       */
       tabIndex: {
         type: Number,
-        reflect: true
+        reflect: true,
+        attribute: 'tabindex'
       },
 
       /**
-       * @private
+       * When set, selecting this option dispatches a custom event of the given name from the parent `auro-menu` (and an `auroMenu-customEventFired` event) instead of selecting the option.
        */
       event: {
         type: String,

package/components/radio/demo/api.md

@@ -13,13 +13,13 @@ The `auro-radio-group` element is used to group a set `auro-radio` elements.
 | `disabled`                      | `disabled`                      | `boolean`                |             | If true, all radio buttons will be disabled.     |
 | `error`                         | `error`                         | `string`                 |             | If true, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
 | `horizontal`                    | `horizontal`                    | `boolean`                |             | If true, displays radio buttons horizontally.    |
-| `noValidate`                    | `noValidate`                    | `boolean`                |             | If true, disables auto-validation on blur.       |
-| `onDark`                        | `onDark`                        | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
-| `optionSelected`                | `optionSelected`                | `object`                 |             | Specifies the current selected radio button.     |
+| `noValidate`                    | `novalidate`                    | `boolean`                |             | If true, disables auto-validation on blur.       |
+| `onDark`                        | `ondark`                        | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
+| `optionSelected`                | `optionselected`                | `HTMLElement`            |             | Specifies the current selected radio button.     |
 | `required`                      | `required`                      | `boolean`                |             | Populates the `required` attribute on the element. Used for client-side validation. |
-| `setCustomValidity`             | `setCustomValidity`             | `string`                 |             | Sets a custom help text message to display for all validityStates. |
-| `setCustomValidityCustomError`  | `setCustomValidityCustomError`  | `string`                 |             | Custom help text message to display when validity = `customError`. |
-| `setCustomValidityValueMissing` | `setCustomValidityValueMissing` | `string`                 |             | Custom help text message to display when validity = `valueMissing`. |
+| `setCustomValidity`             | `setcustomvalidity`             | `string`                 |             | Sets a custom help text message to display for all validityStates. |
+| `setCustomValidityCustomError`  | `setcustomvaliditycustomerror`  | `string`                 |             | Custom help text message to display when validity = `customError`. |
+| `setCustomValidityValueMissing` | `setcustomvalidityvaluemissing` | `string`                 |             | Custom help text message to display when validity = `valueMissing`. |
 | `validity`                      | `validity`                      | `string`                 |             | Specifies the `validityState` this element is in. |
 | `value`                         | `value`                         | `string`                 |             | Specifies the current value of the selected radio button. |
 
@@ -49,6 +49,7 @@ The `auro-radio-group` element is used to group a set `auro-radio` elements.
 
 | Part          | Description                                      |
 |---------------|--------------------------------------------------|
+| `helpText`    | Apply css to the help text element that displays helper or error messages. |
 | `radio-group` | Apply css to the fieldset element in the shadow DOM |
 
 # auro-radio
@@ -66,7 +67,7 @@ The `auro-radio` element is used to a button that allows the user to select one
 | `id`         | `id`         | `string`                 |             | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
 | `label`      | `label`      | `string`                 |             | Label for the radio button.                      |
 | `name`       | `name`       | `string`                 |             | Name for the radio button group.                 |
-| `onDark`     | `onDark`     | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
+| `onDark`     | `ondark`     | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
 | `required`   | `required`   | `boolean`                |             | Defines element as required.                     |
 | `value`      | `value`      | `string`                 |             | The value of the radio button.                   |
 

package/components/radio/demo/customize.min.js

@@ -271,6 +271,7 @@ class AuroRadio extends i$2 {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       },
 
@@ -1101,6 +1102,8 @@ class AuroHelpText extends i$2 {
     super();
 
     this.error = false;
+
+    /** @type {'default' | 'inverse'} */
     this.appearance = "default";
     this.onDark = false;
     this.hasTextContent = false;
@@ -1121,8 +1124,8 @@ class AuroHelpText extends i$2 {
     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: {
@@ -1135,6 +1138,7 @@ class AuroHelpText extends i$2 {
        */
       slotNodes: {
         type: Boolean,
+        attribute: 'slotnodes',
       },
 
       /**
@@ -1142,6 +1146,7 @@ class AuroHelpText extends i$2 {
        */
       hasTextContent: {
         type: Boolean,
+        attribute: 'hastextcontent',
       },
 
       /**
@@ -1157,6 +1162,7 @@ class AuroHelpText extends i$2 {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       }
     };
@@ -1227,7 +1233,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202608261850';
+var formkitVersion = '202608300032';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1242,6 +1248,7 @@ var formkitVersion = '202608261850';
  * @customElement auro-radio-group
  *
  * @csspart radio-group - Apply css to the fieldset element in the shadow DOM
+ * @csspart helpText - Apply css to the help text element that displays helper or error messages.
  * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
  * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
@@ -1356,6 +1363,7 @@ class AuroRadioGroup extends i$2 {
        */
       noValidate: {
         type: Boolean,
+        attribute: 'novalidate',
         reflect: true
       },
 
@@ -1364,14 +1372,17 @@ class AuroRadioGroup extends i$2 {
        */
       onDark: {
         type: Boolean,
+        attribute: 'ondark',
         reflect: true
       },
 
       /**
        * Specifies the current selected radio button.
+       * @type {HTMLElement}
        */
       optionSelected: {
-        type: Object
+        type: Object,
+        attribute: 'optionselected'
       },
 
       /**
@@ -1386,21 +1397,24 @@ class AuroRadioGroup extends i$2 {
        * 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 = `customError`.
        */
       setCustomValidityCustomError: {
-        type: String
+        type: String,
+        attribute: 'setcustomvaliditycustomerror'
       },
 
       /**
        * Custom help text message to display when validity = `valueMissing`.
        */
       setCustomValidityValueMissing: {
-        type: String
+        type: String,
+        attribute: 'setcustomvalidityvaluemissing'
       },
 
       /**