style(tap-click): rename activable to activatable

core/src/components/action-sheet/action-sheet.tsx

@@ -235,7 +235,7 @@ export class ActionSheet implements OverlayInterface {
               </div>
             }
             {buttons.map(b =>
-              <button type="button" ion-activable class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
+              <button type="button" ion-activatable class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
                 <span class="action-sheet-button-inner">
                   {b.icon && <ion-icon icon={b.icon} lazy={false} class="action-sheet-icon" />}
                   {b.text}
@@ -247,7 +247,7 @@ export class ActionSheet implements OverlayInterface {
           {cancelButton &&
             <div class="action-sheet-group action-sheet-group-cancel">
               <button
-                ion-activable
+                ion-activatable
                 type="button"
                 class={buttonClass(cancelButton)}
                 onClick={() => this.buttonClick(cancelButton)}

core/src/components/alert/alert.tsx

@@ -424,7 +424,7 @@ export class Alert implements OverlayInterface {
     return (
       <div class={alertButtonGroupClass}>
         {buttons.map(button =>
-          <button type="button" ion-activable class={buttonClass(button)} tabIndex={0} onClick={() => this.buttonClick(button)}>
+          <button type="button" ion-activatable class={buttonClass(button)} tabIndex={0} onClick={() => this.buttonClick(button)}>
             <span class="alert-button-inner">
               {button.text}
             </span>

core/src/components/back-button/back-button.tsx

@@ -65,7 +65,7 @@ export class BackButton {
         'button': true,
         'show-back-button': showBackButton
       },
-      'ion-activable': true,
+      'ion-activatable': true,
     };
   }
 

core/src/components/button/button.tsx

@@ -149,6 +149,7 @@ export class Button {
     const { buttonType, color, expand, fill, mode, shape, size, strong } = this;
 
     return {
+      'ion-activatable': true,
       class: {
         ...createColorClasses(color),
         ...getButtonClassMap(buttonType, mode),
@@ -158,8 +159,7 @@ export class Button {
         ...getButtonTypeClassMap(buttonType, strong ? 'strong' : undefined, mode),
         ...getButtonTypeClassMap(buttonType, fill, mode),
         'focused': this.keyFocus,
-      },
+      }
-      'ion-activable': true,
     };
   }
 

core/src/components/fab-button/fab-button.tsx

@@ -75,9 +75,8 @@ export class FabButton {
   }
 
   hostData() {
-
     return {
-      'ion-activable': !this.disabled,
+      'ion-activatable': true,
       class: {
         ...createColorClasses(this.color),
         ...this.getFabClassMap(),
@@ -102,7 +101,7 @@ export class FabButton {
         <span class="fab-button-inner">
           <slot></slot>
         </span>
-        {this.mode === 'md' && <ion-ripple-effect />}
+        {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
       </TagType>
     );
   }

core/src/components/item/item.tsx

@@ -126,7 +126,7 @@ export class Item {
     });
 
     return {
-      'ion-activable': this.isClickable(),
+      'ion-activatable': this.isClickable(),
       class: {
         ...childStyles,
         ...createColorClasses(this.color),

core/src/components/picker/picker.tsx

@@ -257,7 +257,7 @@ export class Picker implements OverlayInterface {
             <div class={buttonWrapperClass(b)}>
               <button
                 type="button"
-                ion-activable
+                ion-activatable
                 onClick={() => this.buttonClick(b)}
                 class={buttonClass(b)}
               >

core/src/components/segment-button/segment-button.tsx

@@ -57,12 +57,12 @@ export class SegmentButton {
   hostData() {
     const { disabled, checked, color } = this;
     return {
+      'ion-activatable': true,
       class: {
         ...createColorClasses(color),
         'segment-button-disabled': disabled,
         'segment-button-checked': checked,
-      },
+      }
-      'ion-activable': true,
     };
   }
 

core/src/components/tabbar/tabbar.tsx

@@ -112,7 +112,7 @@ export class Tabbar {
     return (
       <a
         role="tab"
-        ion-activable
+        ion-activatable
         aria-selected={selected ? 'true' : null}
         href={href || '#'}
         class={{

core/src/components/toast/toast.tsx

@@ -194,7 +194,7 @@ export class Toast implements OverlayInterface {
             <div class="toast-message">{this.message}</div>
           }
           {this.showCloseButton &&
-            <ion-button fill="clear" color="light" ion-activable class="toast-button" onClick={() => this.dismiss(undefined, 'cancel')}>
+            <ion-button fill="clear" color="light" ion-activatable class="toast-button" onClick={() => this.dismiss(undefined, 'cancel')}>
               {this.closeButtonText || 'Close'}
             </ion-button>
           }

core/src/interface.d.ts

@@ -54,7 +54,7 @@ declare global {
     // for ion-menu and ion-split-pane
     main?: boolean;
     tappable?: boolean;
-    'ion-activable'?: boolean;
+    'ion-activatable'?: boolean;
 
     padding?: boolean;
     ['padding-top']?: boolean;

core/src/utils/tap-click.ts

@@ -149,12 +149,12 @@ function getActivatableTarget(ev: any): any {
     const path = ev.composedPath() as HTMLElement[];
     for (let i = 0; i < path.length - 2; i++) {
       const el = path[i];
-      if (el.hasAttribute && el.hasAttribute('ion-activable')) {
+      if (el.hasAttribute && el.hasAttribute('ion-activatable')) {
         return el;
       }
     }
   } else {
-    return ev.target.closest('[ion-activable]');
+    return ev.target.closest('[ion-activatable]');
   }
 }