@aurodesignsystem/auro-formkit 2.0.0-beta.14 → 2.0.0-beta.16

package/components/form/src/auro-form.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-underscore-dangle */
+
 // Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -6,16 +8,23 @@
 // If using litElement base class
 import { LitElement, html } from "lit";
 
-// If using auroElement base class
-// See instructions for importing auroElement base class https://git.io/JULq4
-// import { LitElement, html } from "lit";
-// import AuroElement from '@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement';
-
-// Import touch detection lib
 import styleCss from "./styles/style-css.js";
 
 import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
+/**
+ * @typedef {Object} FormStateMember - The form state member.
+ * @property {string | number | boolean | string[] | null} value - The value of the form element.
+ * @property {ValidityState} validity - The validity state of the form element, stored when fired from the form element.
+ * @property {boolean} required - Whether the form element is required or not.
+ * @property {HTMLElement} element - Whether the form element is required or not.
+ */
+
+/**
+ * @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).
@@ -26,26 +35,138 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
 
 // build the component class
 export class AuroForm extends LitElement {
-  // constructor() {
-  //   super();
-  // }
-
-  // This function is to define props used within the scope of this component
-  // Be sure to review  https://lit.dev/docs/components/properties/
-  // to understand how to use reflected attributes with your property settings.
   static get properties() {
     return {
-      // ...super.properties,
-
-      // this property is DEMO ONLY! Please delete.
-      cssClass:   { type: String }
+      _formState: { attribute: false },
     };
   }
 
+  constructor() {
+    super();
+
+    /** @type {FormState} */
+    this._formState = {};
+  }
+
+  // Note: button is NOT considered a form element in this context
+  // as it does not have a .value property.
+  static get formElementTags() {
+    return [
+      'auro-input',
+      'auro-select',
+      'auro-datepicker',
+      'auro-checkbox-group',
+    ];
+  }
+
+  /**
+   * Shared code for determining if an element is something we care about (submit, form element, etc.).
+   * @param {string[]} collection - The array to use for tag name search.
+   * @param {HTMLElement} element - The element to compare against the master list.
+   * @returns boolean
+   * @private
+   */
+  _isInElementCollection(collection, element) {
+    return collection.some((elementTag) => element.tagName.toLowerCase() === elementTag || element.hasAttribute(elementTag.toLowerCase()));
+  }
+
+  /**
+   * Check if the tag name is a form element.
+   * @param {HTMLElement} element - The element to check (attr or tag name).
+   * @returns {boolean}
+   */
+  isFormElement(element) {
+    return this._isInElementCollection(AuroForm.formElementTags, element);
+  }
+
+  static get submitElementTags() {
+    return [
+      'button',
+      'auro-button',
+    ];
+  }
+
+  /**
+   * Check if the tag name is a submit element.
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean}
+   */
+  isSubmitElement(element) {
+    return this._isInElementCollection(AuroForm.submitElementTags, element);
+  }
+
   static get styles() {
     return [styleCss];
   }
 
+  /**
+   * Reduce the form value into a key-value pair.
+   *
+   * NOTE: form keys use `name` first, and `id` second if `name` is not available.
+   * This follows standard HTML5 form behavior - submission uses `name` by default when creating
+   * the FormData object.
+   *
+   * @returns {Record<string, string | number | boolean | string[] | null>} The form value.
+   */
+  get value() {
+    return Object.keys(this._formState).reduce((acc, key) => {
+      acc[key] = this._formState[key].value;
+      return acc;
+    }, {});
+  }
+
+  get validity() {
+    // go through validity states and return the first invalid state (if any)
+    const invalidKey = Object.keys(this._formState).
+      find((key) => {
+        const formKey = this._formState[key];
+
+        // these are NOT extra :(
+        // eslint-disable-next-line no-extra-parens
+        return (formKey.validity !== 'valid' && formKey.required) || (formKey.validity !== 'valid' && formKey.value !== null);
+      });
+
+    return invalidKey ? 'invalid' : 'valid';
+  }
+
+  // Below is not implemented yet
+  get isInitialState() {
+    const anyTainted = Object.keys(this._formState).some((key) => this._formState[key].validity !== null);
+
+    return !anyTainted;
+  }
+
+  getSubmitFunction() {
+    // We return an arrow function here to ensure that the `this` context points at this same AuroForm context.
+    // Otherwise, submission tries to read `this.value` on the button element.
+    return (event) => {
+      event.preventDefault();
+
+      this.dispatchEvent(new CustomEvent('submit', {
+        detail: {
+          value: this.value
+        }
+      }));
+    };
+  }
+
+  /**
+   * Construct the query strings from elements, append them together, execute, and return the NodeList.
+   * @returns {NodeList}
+   */
+  queryAuroElements() {
+    const formElementQuery = AuroForm.formElementTags.map((tag) => `${tag}[name]`).join(',');
+    const submitterQuery = AuroForm.submitElementTags.map((tag) => `${tag}[type=submit]`).join(',');
+
+    // Alternatively, for renamed components...
+    const renamedFormElementQuery = AuroForm.formElementTags.map((tag) => `[${tag}][name]`).join(',');
+    const renamedSubmitterQuery = AuroForm.formElementTags.map((tag) => `[${tag}][type=submit]`).join(',');
+
+    const unifiedElementQuery = `${formElementQuery},${submitterQuery},${renamedFormElementQuery},${renamedSubmitterQuery}`;
+
+    return this.querySelectorAll(unifiedElementQuery);
+  }
+
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-form"] - The name of element that you want to register to.
@@ -58,17 +179,58 @@ export class AuroForm extends LitElement {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroForm);
   }
 
-  // When using auroElement, use the following attribute and function when hiding content from screen readers.
-  // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+
+    const slot = this.shadowRoot.querySelector('slot');
+
+    // Update the form state when a form element is detected
+    slot.addEventListener('input', (event) => {
+
+      /** @type {HTMLInputElement} */
+      const eventTarget = event.target;
+      if (this.isFormElement(eventTarget)) {
+        this._formState[eventTarget.getAttribute("name")].value = eventTarget.value;
+      }
+    });
+
+    slot.addEventListener('auroFormElement-validated', (event) => {
+      const oldValue = this._formState;
+
+      this._formState[event.target.getAttribute("name")].validity = event.detail.validity;
+      this.requestUpdate('formState', oldValue);
+    });
+  }
+
+  onSlotChange() {
+    this._formState = {};
 
-  // function that renders the HTML and CSS into  the scope of the component
+    this.queryAuroElements().forEach((element) => {
+      if (this.isFormElement(element)) {
+        this._formState[element.getAttribute('name')] = {
+          value: element.getAttribute('value'),
+          validity: element.getAttribute('validity'),
+          required: element.hasAttribute('required'),
+          element
+        };
+      }
+
+      if (this.isSubmitElement(element) && element.getAttribute('type') === 'submit') {
+        element.removeEventListener('click', this.getSubmitFunction());
+        element.addEventListener('click', this.getSubmitFunction());
+      }
+    });
+  }
+
+  // function that renders the HTML and CSS into the scope of the component
   render() {
     return html`
-
-      <!-- this is demo code, DO NOT USE IN YOUR ELEMENT -->
-      <div class=${this.cssClass} tabindex="0">
-        <slot></slot>
-      </div>
+        <form>
+          <p>Value: ${JSON.stringify(this.value)}</p>
+          <p>Validity: ${this.validity}</p>
+          <h3>Auro form example</h3>
+          <slot @slotchange="${this.onSlotChange}"></slot>
+        </form>
     `;
   }
 }

package/components/form/src/styles/style-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.testClass{display:inline-block;padding:var(--auro-text-body-size-default);border:1px solid var(--auro-color-border-error-on-light);color:var(--auro-color-border-error-on-light)}:focus-visible{background-color:var(--auro-color-border-error-on-light);color:var(--auro-color-base-white)}`;
+export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.testClass{display:inline-block;padding:var(--auro-text-body-size-default);border:1px solid var(--auro-color-border-error-on-light);color:var(--auro-color-border-error-on-light)}:focus-visible{background-color:var(--auro-color-border-error-on-light);color:var(--auro-color-base-white)}:host form{display:block;width:100%;padding:1rem;border:1px solid #2a2a2a;border-radius:1rem}`;

package/components/form/src/styles/style.css

@@ -34,3 +34,11 @@
   background-color: var(--auro-color-border-error-on-light);
   color: var(--auro-color-base-white);
 }
+
+:host form {
+  display: block;
+  width: 100%;
+  padding: 1rem;
+  border: 1px solid #2a2a2a;
+  border-radius: 1rem;
+}

package/components/form/src/styles/style.scss

@@ -35,3 +35,13 @@
   background-color: var(--auro-color-border-error-on-light);
   color: var(--auro-color-base-white);
 }
+
+:host {
+  form {
+    display: block;
+    width: 100%;
+    padding: 1rem;
+    border: 1px solid #2a2a2a;
+    border-radius: 1rem;
+  }
+}

package/components/input/.turbo/turbo-build.log

@@ -216,13 +216,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1.1s
+created dist in 1.3s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 779ms
+created ./demo/ in 698ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 692ms
+created ./demo/ in 910ms
 
 > @aurodesignsystem/auro-input@4.2.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component input

package/components/input/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 1.6s
+created dist in 1.3s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 985ms
+created ./demo/ in 616ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 697ms
+created ./demo/ in 659ms

package/components/input/README.md

@@ -89,7 +89,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.13/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.15/dist/auro-input__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-input use cases

package/components/menu/.turbo/turbo-build.log

@@ -101,13 +101,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1s
+created dist in 751ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 677ms
+created ./demo/ in 786ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 611ms
+created ./demo/ in 626ms
 
 > @aurodesignsystem/auro-menu@4.1.4 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component menu

package/components/menu/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 831ms
+created dist in 858ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 921ms
+created ./demo/ in 715ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 671ms
+created ./demo/ in 523ms

package/components/menu/README.md

@@ -100,7 +100,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.13/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.15/dist/auro-menu__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-menu use cases

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

@@ -531,7 +531,6 @@ class AuroMenu extends r {
       // Update selection if option or value changed
       if (changedProperties.has('optionSelected') || changedProperties.has('value')) {
         const isSelected = this.isOptionSelected(option);
-        option.classList.toggle('active', isSelected);
         option.setAttribute('aria-selected', isSelected ? 'true' : 'false');
 
         // Add/remove selected attribute based on state
@@ -993,7 +992,7 @@ const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litS
 
 var styleCss$1 = i$5`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
 
-var colorCss$1 = i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;
+var colorCss$1 = i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-active-default, #225296)}`;
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -491,7 +491,6 @@ class AuroMenu extends r {
       // Update selection if option or value changed
       if (changedProperties.has('optionSelected') || changedProperties.has('value')) {
         const isSelected = this.isOptionSelected(option);
-        option.classList.toggle('active', isSelected);
         option.setAttribute('aria-selected', isSelected ? 'true' : 'false');
 
         // Add/remove selected attribute based on state
@@ -953,7 +952,7 @@ const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litS
 
 var styleCss$1 = i$5`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
 
-var colorCss$1 = i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;
+var colorCss$1 = i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-active-default, #225296)}`;
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/menu/dist/auro-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auro-menu.d.ts","sourceRoot":"","sources":["../src/auro-menu.js"],"names":[],"mappings":"AAqBA;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH;IA8DE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAwCC;IAED,+CAMC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAnHC,WAAsB;IAEtB,oBAA+B;IAE/B,eAA0B;IAE1B,qBAAwB;IAExB,sBAA6B;IAE7B,iBAAoB;IAEpB,qBAAwB;IA8Z1B;;;;OAIG;IACH,sBAeC;IAsDD;;;;OAIG;IACH,0BAUC;IAED;;;;OAIG;IACH,0BAIC;IAED;;;OAGG;IACH,yBAeC;IA1ZD,qBAKC;IAFC,kCAAuF;IAIzF,sCA+CC;IAzCK,WAAe;IA2CrB;;;;OAIG;IACH,yBAgEC;IAID;;;OAGG;IACH,uBAOC;IAED;;;OAGG;IACH,kBAUC;IATC,iBAAoF;IAatF;;;;OAIG;IACH,0BAwBC;IAED;;;;OAIG;IACH,4BAiCC;IAED;;;OAGG;IACH,uBAGC;IAED;;;;OAIG;IACH,qBAgBC;IAED;;;;OAIG;IACH,0BAiBC;IA0BD;;;OAGG;IACH,sBA6BC;IAED;;;;OAIG;IACH,qBAUC;IAoCG,kBAAqB;IAezB;;;;OAIG;IACH,wBA2CC;IAED;;;;OAIG;IACH,2BAUC;IAED;;;;OAIG;IACH,0BAIC;IAED;;;OAGG;IACH,8BAEC;IAED;;;;;OAKG;IACH,yBAMC;IAED;;;OAGG;IACH,6BAFa,OAAO,CAInB;IAED;;;OAGG;IACH,UAFa,OAAO,CAenB;CACF;2BAltBgC,KAAK;+BAY/B,sBAAsB;2CAAtB,sBAAsB"}
+{"version":3,"file":"auro-menu.d.ts","sourceRoot":"","sources":["../src/auro-menu.js"],"names":[],"mappings":"AAqBA;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH;IA8DE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAwCC;IAED,+CAMC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAnHC,WAAsB;IAEtB,oBAA+B;IAE/B,eAA0B;IAE1B,qBAAwB;IAExB,sBAA6B;IAE7B,iBAAoB;IAEpB,qBAAwB;IA6Z1B;;;;OAIG;IACH,sBAeC;IAsDD;;;;OAIG;IACH,0BAUC;IAED;;;;OAIG;IACH,0BAIC;IAED;;;OAGG;IACH,yBAeC;IAzZD,qBAKC;IAFC,kCAAuF;IAIzF,sCA+CC;IAzCK,WAAe;IA2CrB;;;;OAIG;IACH,yBA+DC;IAID;;;OAGG;IACH,uBAOC;IAED;;;OAGG;IACH,kBAUC;IATC,iBAAoF;IAatF;;;;OAIG;IACH,0BAwBC;IAED;;;;OAIG;IACH,4BAiCC;IAED;;;OAGG;IACH,uBAGC;IAED;;;;OAIG;IACH,qBAgBC;IAED;;;;OAIG;IACH,0BAiBC;IA0BD;;;OAGG;IACH,sBA6BC;IAED;;;;OAIG;IACH,qBAUC;IAoCG,kBAAqB;IAezB;;;;OAIG;IACH,wBA2CC;IAED;;;;OAIG;IACH,2BAUC;IAED;;;;OAIG;IACH,0BAIC;IAED;;;OAGG;IACH,8BAEC;IAED;;;;;OAKG;IACH,yBAMC;IAED;;;OAGG;IACH,6BAFa,OAAO,CAInB;IAED;;;OAGG;IACH,UAFa,OAAO,CAenB;CACF;2BAjtBgC,KAAK;+BAY/B,sBAAsB;2CAAtB,sBAAsB"}

package/components/menu/dist/index.js

@@ -491,7 +491,6 @@ class AuroMenu extends r {
       // Update selection if option or value changed
       if (changedProperties.has('optionSelected') || changedProperties.has('value')) {
         const isSelected = this.isOptionSelected(option);
-        option.classList.toggle('active', isSelected);
         option.setAttribute('aria-selected', isSelected ? 'true' : 'false');
 
         // Add/remove selected attribute based on state
@@ -953,7 +952,7 @@ const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litS
 
 var styleCss$1 = i$5`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
 
-var colorCss$1 = i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;
+var colorCss$1 = i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-active-default, #225296)}`;
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/menu/src/auro-menu.js

@@ -272,7 +272,6 @@ export class AuroMenu extends LitElement {
       // Update selection if option or value changed
       if (changedProperties.has('optionSelected') || changedProperties.has('value')) {
         const isSelected = this.isOptionSelected(option);
-        option.classList.toggle('active', isSelected);
         option.setAttribute('aria-selected', isSelected ? 'true' : 'false');
 
         // Add/remove selected attribute based on state

package/components/menu/src/styles/color-menuoption-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;
+export default css`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-active-default, #225296)}`;

package/components/menu/src/styles/color-menuoption.css

@@ -21,3 +21,6 @@
   --ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);
   --ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff);
 }
+:host([selected]):host(.active) {
+  --ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-active-default, #225296);
+}

package/components/menu/src/styles/color-menuoption.scss

@@ -29,5 +29,9 @@
   --ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #{$ds-color-container-ui-primary-default-default});
   --ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
   --ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #{$ds-color-icon-emphasis-inverse});
+
+  &:host(.active) {
+    --ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-active-default, #{$ds-color-container-ui-primary-active-default});
+  }
 }
 

package/components/radio/.turbo/turbo-build.log

@@ -138,13 +138,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 832ms
+created dist in 812ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 561ms
+created ./demo/ in 498ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 622ms
+created ./demo/ in 486ms
 
 > @aurodesignsystem/auro-radio@4.1.1 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component radio

package/components/radio/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 1.1s
+created dist in 846ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 648ms
+created ./demo/ in 476ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 647ms
+created ./demo/ in 462ms

package/components/radio/README.md

@@ -90,7 +90,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.2/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-radio@2.0.0-beta.13/dist/auro-radio__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-radio@2.0.0-beta.15/dist/auro-radio__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-radio use cases

package/components/select/.turbo/turbo-build.log

@@ -137,13 +137,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1s
+created dist in 657ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 640ms
+created ./demo/ in 631ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 535ms
+created ./demo/ in 467ms
 
 > @aurodesignsystem/auro-select@3.3.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component select

package/components/select/README.md

@@ -99,9 +99,9 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.13/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.13/dist/auro-menu__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.13/dist/auro-select__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.15/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.15/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.15/dist/auro-select__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-select use cases

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

@@ -4032,7 +4032,6 @@ let AuroMenu$1 = class AuroMenu extends r {
       // Update selection if option or value changed
       if (changedProperties.has('optionSelected') || changedProperties.has('value')) {
         const isSelected = this.isOptionSelected(option);
-        option.classList.toggle('active', isSelected);
         option.setAttribute('aria-selected', isSelected ? 'true' : 'false');
 
         // Add/remove selected attribute based on state
@@ -4494,7 +4493,7 @@ const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litS
 
 var styleCss$1$1 = i$5`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
 
-var colorCss$1$1 = i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;
+var colorCss$1$1 = i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-active-default, #225296)}`;
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -6018,7 +6017,6 @@ class AuroMenu extends r$5 {
       // Update selection if option or value changed
       if (changedProperties.has('optionSelected') || changedProperties.has('value')) {
         const isSelected = this.isOptionSelected(option);
-        option.classList.toggle('active', isSelected);
         option.setAttribute('aria-selected', isSelected ? 'true' : 'false');
 
         // Add/remove selected attribute based on state
@@ -6473,7 +6471,7 @@ class AuroMenu extends r$5 {
 
 var styleCss$1 = i$c`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
 
-var colorCss$1 = i$c`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;
+var colorCss$1 = i$c`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-active-default, #225296)}`;
 
 /**
  * @license