@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.17 → 0.0.0-pr624.18

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

@@ -5649,7 +5649,6 @@ let AuroElement$1 = class AuroElement extends i$2 {
        * @private
        */
       wrapper: {
-        type: HTMLElement,
         attribute: false,
         reflect: false
       }
@@ -5958,7 +5957,7 @@ class AuroLoader extends i$2 {
 
 var loaderVersion = '5.0.0';
 
-/* eslint-disable max-lines, curly */
+/* eslint-disable max-lines, curly, jsdoc/no-undefined-types */
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -6025,6 +6024,21 @@ class AuroButton extends AuroElement$1 {
      * @private
      */
     this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
+
+    /**
+     *  @private
+     */
+    this.buttonHref = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonTarget = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonRel = undefined;
   }
 
   static get styles() {
@@ -6091,13 +6105,23 @@ class AuroButton extends AuroElement$1 {
       },
 
       /**
-       * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
+       * Populates `tabindex` to define the focusable sequence in keyboard navigation.
        */
       tIndex: {
         type: String,
         reflect: true
       },
 
+      /**
+       * Populates `tabindex` to define the focusable sequence in keyboard navigation.
+       * Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
+       * Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`
+       */
+      tabindex: {
+        type: String,
+        reflect: false
+      },
+
       /**
        * Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
        */
@@ -6130,6 +6154,27 @@ class AuroButton extends AuroElement$1 {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      buttonHref: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonTarget: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonRel: {
+        type: String,
+      },
     };
   }
 
@@ -6220,14 +6265,17 @@ class AuroButton extends AuroElement$1 {
       loading: this.loading,
     };
 
+    const tag = this.buttonHref ? i`a` : i`button`;
+    const part = this.buttonHref ? 'link' : 'button';
+
     return u`
-      <button
-        part="button"
+      <${tag}
+        part="${part}"
         aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
         aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
-        tabIndex="${o(this.tIndex)}"
+        tabindex="${o(this.tIndex || this.tabindex)}"
         ?autofocus="${this.autofocus}"
-        class="${e(classes)}"
+        class=${e(classes)}
         ?disabled="${this.disabled || this.loading}"
         ?onDark="${this.onDark}"
         title="${o(this.title ? this.title : undefined)}"
@@ -6236,6 +6284,9 @@ class AuroButton extends AuroElement$1 {
         variant="${o(this.variant ? this.variant : undefined)}"
         .value="${o(this.value ? this.value : undefined)}"
         @click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
+        href="${o(this.buttonHref || undefined)}"
+        target="${o(this.buttonTarget || undefined)}"
+        rel="${o(this.buttonRel || undefined)}"
       >
         ${o(this.loading ? u`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
 
@@ -6244,12 +6295,12 @@ class AuroButton extends AuroElement$1 {
             <slot></slot>
           </span>
         </span>
-      </button>
+      </${tag}>
     `;
   }
 
   /**
-   * Renders the layout of the button
+   * Renders the layout of the button.
    * @returns {TemplateResult}
    * @private
    */
@@ -6258,7 +6309,7 @@ class AuroButton extends AuroElement$1 {
   }
 }
 
-var buttonVersion = '11.0.0';
+var buttonVersion = '11.2.1';
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -8068,10 +8119,25 @@ class AuroSelect extends AuroElement$4 {
     // Set the initial value in auro-menu if defined
     if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
       this.value = this.multiSelect ? arrayConverter(this.getAttribute('value')) : this.getAttribute('value');
-      this.menu.value = this.value;
+      if (this.menu) {
+        this.menu.value = this.value;
+      }
     }
   }
 
+  /**
+   * Update the menu value. With checks for menu existence. Awaits value update.
+   * @param {string} value - The value to set in the menu.
+   * @returns void
+   * @private
+   */
+  async updateMenuValue(value) {
+    if (!this.menu) return;
+
+    this.menu.value = value;
+    await this.menu.updateComplete;
+  }
+
   async updated(changedProperties) {
     if (changedProperties.has('multiSelect')) {
       this.clearSelection();
@@ -8081,14 +8147,13 @@ class AuroSelect extends AuroElement$4 {
       if (this.value) {
         this.value = this.multiSelect ? arrayConverter(this.value) : this.value;
 
-        this.menu.value = this.value;
-
-        // Wait for menu to finish updating its value
-        await this.menu.updateComplete;
+        await this.updateMenuValue(this.value);
 
-        this.optionSelected = this.menu.optionSelected;
+        if (this.menu) {
+          this.optionSelected = this.menu.optionSelected;
+        }
       } else {
-        this.menu.value = undefined;
+        await this.updateMenuValue(undefined);
       }
 
       this._updateNativeSelect();
@@ -8864,6 +8929,7 @@ class AuroMenu extends AuroElement$4 {
     this.addEventListener('mousedown', this.handleMouseSelect);
     this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
     this.addEventListener('slotchange', this.handleSlotChange);
+    this.setTagAttribute("auro-menu");
   }
 
   disconnectedCallback() {
@@ -8882,6 +8948,17 @@ class AuroMenu extends AuroElement$4 {
     this.initializeMenu();
   }
 
+  /**
+   * Sets an attribute that matches the default tag name if the tag name is not the default.
+   * @param {string} tagName - The tag name to set as an attribute.
+   * @private
+   */
+  setTagAttribute(tagName) {
+    if (this.tagName.toLowerCase() !== tagName) {
+      this.setAttribute(tagName, true);
+    }
+  }
+
   updated(changedProperties) {
     super.updated(changedProperties);
 

package/components/select/dist/auro-select.d.ts

@@ -384,6 +384,13 @@ export class AuroSelect extends AuroElement {
      */
     private clearSelection;
     firstUpdated(): void;
+    /**
+     * Update the menu value. With checks for menu existence. Awaits value update.
+     * @param {string} value - The value to set in the menu.
+     * @returns void
+     * @private
+     */
+    private updateMenuValue;
     updated(changedProperties: any): Promise<void>;
     /**
      * Resets component to initial state.

package/components/select/dist/index.js

@@ -5603,7 +5603,6 @@ let AuroElement$1 = class AuroElement extends LitElement {
        * @private
        */
       wrapper: {
-        type: HTMLElement,
         attribute: false,
         reflect: false
       }
@@ -5912,7 +5911,7 @@ class AuroLoader extends LitElement {
 
 var loaderVersion = '5.0.0';
 
-/* eslint-disable max-lines, curly */
+/* eslint-disable max-lines, curly, jsdoc/no-undefined-types */
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -5979,6 +5978,21 @@ class AuroButton extends AuroElement$1 {
      * @private
      */
     this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
+
+    /**
+     *  @private
+     */
+    this.buttonHref = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonTarget = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonRel = undefined;
   }
 
   static get styles() {
@@ -6045,13 +6059,23 @@ class AuroButton extends AuroElement$1 {
       },
 
       /**
-       * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
+       * Populates `tabindex` to define the focusable sequence in keyboard navigation.
        */
       tIndex: {
         type: String,
         reflect: true
       },
 
+      /**
+       * Populates `tabindex` to define the focusable sequence in keyboard navigation.
+       * Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
+       * Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`
+       */
+      tabindex: {
+        type: String,
+        reflect: false
+      },
+
       /**
        * Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
        */
@@ -6084,6 +6108,27 @@ class AuroButton extends AuroElement$1 {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      buttonHref: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonTarget: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonRel: {
+        type: String,
+      },
     };
   }
 
@@ -6174,14 +6219,17 @@ class AuroButton extends AuroElement$1 {
       loading: this.loading,
     };
 
+    const tag = this.buttonHref ? literal`a` : literal`button`;
+    const part = this.buttonHref ? 'link' : 'button';
+
     return html`
-      <button
-        part="button"
+      <${tag}
+        part="${part}"
         aria-label="${ifDefined(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
         aria-labelledby="${ifDefined(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
-        tabIndex="${ifDefined(this.tIndex)}"
+        tabindex="${ifDefined(this.tIndex || this.tabindex)}"
         ?autofocus="${this.autofocus}"
-        class="${classMap(classes)}"
+        class=${classMap(classes)}
         ?disabled="${this.disabled || this.loading}"
         ?onDark="${this.onDark}"
         title="${ifDefined(this.title ? this.title : undefined)}"
@@ -6190,6 +6238,9 @@ class AuroButton extends AuroElement$1 {
         variant="${ifDefined(this.variant ? this.variant : undefined)}"
         .value="${ifDefined(this.value ? this.value : undefined)}"
         @click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
+        href="${ifDefined(this.buttonHref || undefined)}"
+        target="${ifDefined(this.buttonTarget || undefined)}"
+        rel="${ifDefined(this.buttonRel || undefined)}"
       >
         ${ifDefined(this.loading ? html`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
 
@@ -6198,12 +6249,12 @@ class AuroButton extends AuroElement$1 {
             <slot></slot>
           </span>
         </span>
-      </button>
+      </${tag}>
     `;
   }
 
   /**
-   * Renders the layout of the button
+   * Renders the layout of the button.
    * @returns {TemplateResult}
    * @private
    */
@@ -6212,7 +6263,7 @@ class AuroButton extends AuroElement$1 {
   }
 }
 
-var buttonVersion = '11.0.0';
+var buttonVersion = '11.2.1';
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -8022,10 +8073,25 @@ class AuroSelect extends AuroElement$3 {
     // Set the initial value in auro-menu if defined
     if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
       this.value = this.multiSelect ? arrayConverter(this.getAttribute('value')) : this.getAttribute('value');
-      this.menu.value = this.value;
+      if (this.menu) {
+        this.menu.value = this.value;
+      }
     }
   }
 
+  /**
+   * Update the menu value. With checks for menu existence. Awaits value update.
+   * @param {string} value - The value to set in the menu.
+   * @returns void
+   * @private
+   */
+  async updateMenuValue(value) {
+    if (!this.menu) return;
+
+    this.menu.value = value;
+    await this.menu.updateComplete;
+  }
+
   async updated(changedProperties) {
     if (changedProperties.has('multiSelect')) {
       this.clearSelection();
@@ -8035,14 +8101,13 @@ class AuroSelect extends AuroElement$3 {
       if (this.value) {
         this.value = this.multiSelect ? arrayConverter(this.value) : this.value;
 
-        this.menu.value = this.value;
+        await this.updateMenuValue(this.value);
 
-        // Wait for menu to finish updating its value
-        await this.menu.updateComplete;
-
-        this.optionSelected = this.menu.optionSelected;
+        if (this.menu) {
+          this.optionSelected = this.menu.optionSelected;
+        }
       } else {
-        this.menu.value = undefined;
+        await this.updateMenuValue(undefined);
       }
 
       this._updateNativeSelect();

package/components/select/dist/registered.js

@@ -5603,7 +5603,6 @@ let AuroElement$1 = class AuroElement extends LitElement {
        * @private
        */
       wrapper: {
-        type: HTMLElement,
         attribute: false,
         reflect: false
       }
@@ -5912,7 +5911,7 @@ class AuroLoader extends LitElement {
 
 var loaderVersion = '5.0.0';
 
-/* eslint-disable max-lines, curly */
+/* eslint-disable max-lines, curly, jsdoc/no-undefined-types */
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -5979,6 +5978,21 @@ class AuroButton extends AuroElement$1 {
      * @private
      */
     this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
+
+    /**
+     *  @private
+     */
+    this.buttonHref = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonTarget = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonRel = undefined;
   }
 
   static get styles() {
@@ -6045,13 +6059,23 @@ class AuroButton extends AuroElement$1 {
       },
 
       /**
-       * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
+       * Populates `tabindex` to define the focusable sequence in keyboard navigation.
        */
       tIndex: {
         type: String,
         reflect: true
       },
 
+      /**
+       * Populates `tabindex` to define the focusable sequence in keyboard navigation.
+       * Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
+       * Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`
+       */
+      tabindex: {
+        type: String,
+        reflect: false
+      },
+
       /**
        * Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
        */
@@ -6084,6 +6108,27 @@ class AuroButton extends AuroElement$1 {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      buttonHref: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonTarget: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonRel: {
+        type: String,
+      },
     };
   }
 
@@ -6174,14 +6219,17 @@ class AuroButton extends AuroElement$1 {
       loading: this.loading,
     };
 
+    const tag = this.buttonHref ? literal`a` : literal`button`;
+    const part = this.buttonHref ? 'link' : 'button';
+
     return html`
-      <button
-        part="button"
+      <${tag}
+        part="${part}"
         aria-label="${ifDefined(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
         aria-labelledby="${ifDefined(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
-        tabIndex="${ifDefined(this.tIndex)}"
+        tabindex="${ifDefined(this.tIndex || this.tabindex)}"
         ?autofocus="${this.autofocus}"
-        class="${classMap(classes)}"
+        class=${classMap(classes)}
         ?disabled="${this.disabled || this.loading}"
         ?onDark="${this.onDark}"
         title="${ifDefined(this.title ? this.title : undefined)}"
@@ -6190,6 +6238,9 @@ class AuroButton extends AuroElement$1 {
         variant="${ifDefined(this.variant ? this.variant : undefined)}"
         .value="${ifDefined(this.value ? this.value : undefined)}"
         @click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
+        href="${ifDefined(this.buttonHref || undefined)}"
+        target="${ifDefined(this.buttonTarget || undefined)}"
+        rel="${ifDefined(this.buttonRel || undefined)}"
       >
         ${ifDefined(this.loading ? html`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
 
@@ -6198,12 +6249,12 @@ class AuroButton extends AuroElement$1 {
             <slot></slot>
           </span>
         </span>
-      </button>
+      </${tag}>
     `;
   }
 
   /**
-   * Renders the layout of the button
+   * Renders the layout of the button.
    * @returns {TemplateResult}
    * @private
    */
@@ -6212,7 +6263,7 @@ class AuroButton extends AuroElement$1 {
   }
 }
 
-var buttonVersion = '11.0.0';
+var buttonVersion = '11.2.1';
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -8022,10 +8073,25 @@ class AuroSelect extends AuroElement$3 {
     // Set the initial value in auro-menu if defined
     if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
       this.value = this.multiSelect ? arrayConverter(this.getAttribute('value')) : this.getAttribute('value');
-      this.menu.value = this.value;
+      if (this.menu) {
+        this.menu.value = this.value;
+      }
     }
   }
 
+  /**
+   * Update the menu value. With checks for menu existence. Awaits value update.
+   * @param {string} value - The value to set in the menu.
+   * @returns void
+   * @private
+   */
+  async updateMenuValue(value) {
+    if (!this.menu) return;
+
+    this.menu.value = value;
+    await this.menu.updateComplete;
+  }
+
   async updated(changedProperties) {
     if (changedProperties.has('multiSelect')) {
       this.clearSelection();
@@ -8035,14 +8101,13 @@ class AuroSelect extends AuroElement$3 {
       if (this.value) {
         this.value = this.multiSelect ? arrayConverter(this.value) : this.value;
 
-        this.menu.value = this.value;
+        await this.updateMenuValue(this.value);
 
-        // Wait for menu to finish updating its value
-        await this.menu.updateComplete;
-
-        this.optionSelected = this.menu.optionSelected;
+        if (this.menu) {
+          this.optionSelected = this.menu.optionSelected;
+        }
       } else {
-        this.menu.value = undefined;
+        await this.updateMenuValue(undefined);
       }
 
       this._updateNativeSelect();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr624.17",
+  "version": "0.0.0-pr624.18",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {
@@ -52,7 +52,7 @@
     "deploy-demo": "npm run build && sh ./deploy-components.sh"
   },
   "dependencies": {
-    "@aurodesignsystem/auro-library": "^5.1.0",
+    "@aurodesignsystem/auro-library": "^5.2.0",
     "@lit/reactive-element": "^2.1.0",
     "lit": "^3.2.1"
   },
@@ -60,9 +60,9 @@
     "@rollup/rollup-linux-x64-gnu": "*"
   },
   "devDependencies": {
+    "@aurodesignsystem/design-tokens": "^8.2.0",
     "@aurodesignsystem/eslint-config": "^1.3.4",
     "@aurodesignsystem/webcorestylesheets": "^8.1.1",
-    "@aurodesignsystem/design-tokens": "^8.2.0",
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
     "@open-wc/testing": "^4.0.0",