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

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

@@ -419,7 +419,6 @@ let AuroElement$5 = class AuroElement extends i$2 {
        * @private
        */
       wrapper: {
-        type: HTMLElement,
         attribute: false,
         reflect: false
       }
@@ -857,7 +856,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.
 
@@ -924,6 +923,21 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
      * @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() {
@@ -990,13 +1004,23 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
       },
 
       /**
-       * 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.
        */
@@ -1029,6 +1053,27 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      buttonHref: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonTarget: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonRel: {
+        type: String,
+      },
     };
   }
 
@@ -1119,14 +1164,17 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
       loading: this.loading,
     };
 
+    const tag = this.buttonHref ? i$1`a` : i$1`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)}"
@@ -1135,6 +1183,9 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
         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)}
 
@@ -1143,12 +1194,12 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
             <slot></slot>
           </span>
         </span>
-      </button>
+      </${tag}>
     `;
   }
 
   /**
-   * Renders the layout of the button
+   * Renders the layout of the button.
    * @returns {TemplateResult}
    * @private
    */
@@ -2662,6 +2713,18 @@ class AuroCounter extends i$2 {
 
   firstUpdated() {
     this.initValue();
+    this.setTagAttribute("auro-counter");
+  }
+
+  /**
+   * 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);
+    }
   }
 
   /**
@@ -2702,14 +2765,24 @@ class AuroCounter extends i$2 {
           <label id="counter-label" class="label"><slot @slotchange="${this.onDefaultSlotChange}" ></slot></label>
           <slot id="counter-description" name="description"></slot>
         </div>
-        <div part="counterControl" aria-labelledby="counter-label" aria-describedby="counter-description" tabindex="${this.disabled ? '-1' : '0'}" role="spinbutton" aria-valuemin="${this.min}" aria-valuemax="${this.max}" aria-valuenow="${this.value}">
+        <div 
+          part="counterControl" 
+          aria-labelledby="counter-label" 
+          aria-describedby="counter-description" 
+          tabindex="${this.disabled ? '-1' : '0'}" 
+          role="spinbutton" 
+          aria-valuemin="${this.min}" 
+          aria-valuemax="${this.max}" 
+          aria-valuenow="${this.value}"
+          aria-valuetext="${this.value !== undefined ? this.value : this.min}"
+        >
           <auro-counter-button
-          aria-hidden="true"
-          tindex="-1"
-          part="controlMinus"
-          @click="${() => this.decrement()}"
-          ?onDark="${this.onDark}"
-          ?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
+            aria-hidden="true"
+            .tabindex="${'-1'}"
+            part="controlMinus"
+            @click="${() => this.decrement()}"
+            ?onDark="${this.onDark}"
+            ?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
           >
             <${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(minusIcon)} </${this.iconTag}>
           </auro-counter-button>
@@ -2719,12 +2792,12 @@ class AuroCounter extends i$2 {
           </div>
 
           <auro-counter-button
-          aria-hidden="true"
-          tindex="-1"
-          part="controlPlus"
-          @click="${() => this.increment()}"
-          ?onDark="${this.onDark}"
-          ?disabled="${this.disabled || this.disableMax || this.isIncrementDisabled(this.max)}"
+            aria-hidden="true"
+            .tabindex="${'-1'}"
+            part="controlPlus"
+            @click="${() => this.increment()}"
+            ?onDark="${this.onDark}"
+            ?disabled="${this.disabled || this.disableMax || this.isIncrementDisabled(this.max)}"
           >
             <${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(plusIcon)} </${this.iconTag}>
           </auro-counter-button>
@@ -7351,7 +7424,6 @@ let AuroElement$1 = class AuroElement extends i$2 {
        * @private
        */
       wrapper: {
-        type: HTMLElement,
         attribute: false,
         reflect: false
       }
@@ -7660,7 +7732,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.
 
@@ -7727,6 +7799,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() {
@@ -7793,13 +7880,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.
        */
@@ -7832,6 +7929,27 @@ class AuroButton extends AuroElement$1 {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      buttonHref: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonTarget: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonRel: {
+        type: String,
+      },
     };
   }
 
@@ -7922,14 +8040,17 @@ class AuroButton extends AuroElement$1 {
       loading: this.loading,
     };
 
+    const tag = this.buttonHref ? i$1`a` : i$1`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)}"
@@ -7938,6 +8059,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)}
 
@@ -7946,12 +8070,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
    */
@@ -7960,7 +8084,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.
@@ -9114,7 +9238,7 @@ function isFocusableComponent(element) {
   const componentName = element.tagName.toLowerCase();
 
   // Guard Clause: Element is a focusable component
-  if (!FOCUSABLE_COMPONENTS.includes(componentName)) return false;
+  if (!FOCUSABLE_COMPONENTS.some((name) => element.hasAttribute(name) || componentName === name)) return false;
 
   // Guard Clause: Element is not disabled
   if (element.hasAttribute('disabled')) return false;
@@ -9435,6 +9559,8 @@ class AuroCounterGroup extends AuroElement {
   static get properties() {
     return {
 
+      ...super.properties,
+
       /**
        * If declared, bib's position will be automatically calculated where to appear.
        * @default false

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

@@ -83,6 +83,12 @@ export class AuroCounter extends LitElement {
      */
     private handleKeyDown;
     firstUpdated(): void;
+    /**
+     * 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
+     */
+    private setTagAttribute;
     /**
      * Handles the change event for the default slot.
      * Updates the defaultSlot property with the trimmed text content of the first assigned node.