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

package/components/bibtemplate/dist/buttonVersion.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "11.0.0";
+declare const _default: "11.2.1";
 export default _default;

package/components/bibtemplate/dist/index.js

@@ -501,7 +501,6 @@ let AuroElement$1 = class AuroElement extends LitElement {
        * @private
        */
       wrapper: {
-        type: HTMLElement,
         attribute: false,
         reflect: false
       }
@@ -810,7 +809,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.
 
@@ -877,6 +876,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() {
@@ -943,13 +957,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.
        */
@@ -982,6 +1006,27 @@ class AuroButton extends AuroElement$1 {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      buttonHref: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonTarget: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonRel: {
+        type: String,
+      },
     };
   }
 
@@ -1072,14 +1117,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$1`
-      <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)}"
@@ -1088,6 +1136,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$1`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
 
@@ -1096,12 +1147,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
    */
@@ -1110,7 +1161,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.

package/components/bibtemplate/dist/registered.js

@@ -501,7 +501,6 @@ let AuroElement$1 = class AuroElement extends LitElement {
        * @private
        */
       wrapper: {
-        type: HTMLElement,
         attribute: false,
         reflect: false
       }
@@ -810,7 +809,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.
 
@@ -877,6 +876,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() {
@@ -943,13 +957,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.
        */
@@ -982,6 +1006,27 @@ class AuroButton extends AuroElement$1 {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      buttonHref: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonTarget: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonRel: {
+        type: String,
+      },
     };
   }
 
@@ -1072,14 +1117,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$1`
-      <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)}"
@@ -1088,6 +1136,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$1`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
 
@@ -1096,12 +1147,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
    */
@@ -1110,7 +1161,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.

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

@@ -12062,7 +12062,6 @@ let AuroElement$3 = class AuroElement extends i$2 {
        * @private
        */
       wrapper: {
-        type: HTMLElement,
         attribute: false,
         reflect: false
       }
@@ -12371,7 +12370,7 @@ let AuroLoader$1 = class AuroLoader extends i$2 {
 
 var loaderVersion$1 = '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.
 
@@ -12438,6 +12437,21 @@ let AuroButton$1 = class AuroButton extends AuroElement$3 {
      * @private
      */
     this.loaderTag = versioning.generateTag('auro-loader', loaderVersion$1, AuroLoader$1);
+
+    /**
+     *  @private
+     */
+    this.buttonHref = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonTarget = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonRel = undefined;
   }
 
   static get styles() {
@@ -12504,13 +12518,23 @@ let AuroButton$1 = class AuroButton extends AuroElement$3 {
       },
 
       /**
-       * 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.
        */
@@ -12543,6 +12567,27 @@ let AuroButton$1 = class AuroButton extends AuroElement$3 {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      buttonHref: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonTarget: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonRel: {
+        type: String,
+      },
     };
   }
 
@@ -12633,14 +12678,17 @@ let AuroButton$1 = class AuroButton extends AuroElement$3 {
       loading: this.loading,
     };
 
+    const tag = this.buttonHref ? i$1`a` : i$1`button`;
+    const part = this.buttonHref ? 'link' : 'button';
+
     return u$2`
-      <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)}"
@@ -12649,6 +12697,9 @@ let AuroButton$1 = class AuroButton extends AuroElement$3 {
         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$2`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
 
@@ -12657,12 +12708,12 @@ let AuroButton$1 = class AuroButton extends AuroElement$3 {
             <slot></slot>
           </span>
         </span>
-      </button>
+      </${tag}>
     `;
   }
 
   /**
-   * Renders the layout of the button
+   * Renders the layout of the button.
    * @returns {TemplateResult}
    * @private
    */
@@ -13892,7 +13943,6 @@ let AuroElement$1$1 = class AuroElement extends i$2 {
        * @private
        */
       wrapper: {
-        type: HTMLElement,
         attribute: false,
         reflect: false
       }
@@ -14201,7 +14251,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.
 
@@ -14268,6 +14318,21 @@ class AuroButton extends AuroElement$1$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() {
@@ -14334,13 +14399,23 @@ class AuroButton extends AuroElement$1$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.
        */
@@ -14373,6 +14448,27 @@ class AuroButton extends AuroElement$1$1 {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      buttonHref: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonTarget: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonRel: {
+        type: String,
+      },
     };
   }
 
@@ -14463,14 +14559,17 @@ class AuroButton extends AuroElement$1$1 {
       loading: this.loading,
     };
 
+    const tag = this.buttonHref ? i$1`a` : i$1`button`;
+    const part = this.buttonHref ? 'link' : 'button';
+
     return u$2`
-      <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)}"
@@ -14479,6 +14578,9 @@ class AuroButton extends AuroElement$1$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$2`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
 
@@ -14487,12 +14589,12 @@ class AuroButton extends AuroElement$1$1 {
             <slot></slot>
           </span>
         </span>
-      </button>
+      </${tag}>
     `;
   }
 
   /**
-   * Renders the layout of the button
+   * Renders the layout of the button.
    * @returns {TemplateResult}
    * @private
    */
@@ -14501,7 +14603,7 @@ class AuroButton extends AuroElement$1$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.
@@ -16397,10 +16499,10 @@ class AuroCombobox extends AuroElement$1 {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
     this.input = this.dropdown.querySelector(this.inputTag._$litStatic$);
 
-    this.configureMenu();
     this.configureInput();
     this.configureDropdown();
     this.configureCombobox();
+    this.configureMenu();
 
     // Set the initial value in auro-menu if defined
     if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
@@ -16859,6 +16961,7 @@ class AuroMenu extends AuroElement$1 {
     this.addEventListener('mousedown', this.handleMouseSelect);
     this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
     this.addEventListener('slotchange', this.handleSlotChange);
+    this.setTagAttribute("auro-menu");
   }
 
   disconnectedCallback() {
@@ -16877,6 +16980,17 @@ class AuroMenu extends AuroElement$1 {
     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);