@aquera/nile-elements 0.0.50 → 0.0.51

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-button/nile-button.css.ts

@@ -73,70 +73,86 @@ export const styles = css`
     /* vertical-align: -2px; */
   }
 
-  .button--standard.button--secondary {
-    background-color: var(--nile-colors-button-secondary);
-    border-color: var(--nile-colors-button-secondary-border);
-    color: var(--nile-colors-button-secondary-text);
-  }
-
-  .button--standard.button--secondary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-button-secondary-hover);
-    border-color: var(--nile-colors-button-secondary-border);
-    color: var(--nile-colors-button-secondary-text);
-  }
-
-  .button--standard.button--secondary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-button-secondary-pressed);
-    border-color: var(--nile-colors-button-secondary-pressed-border);
-    color: var(--nile-colors-button-secondary-text);
-  }
-
-  .button--standard.button--secondary.button--disabled {
-    background-color: var(--nile-colors-button-secondary-disabled);
-    border-color: var(--nile-colors-button-secondary-disabled-border);
-    color: var(--nile-colors-button-secondary-disabled-text);
-    cursor: not-allowed;
-  }
-
-  .button--standard.button--secondary.button--disabled:hover,
-  .button--standard.button--secondary.button--disabled:active {
-    background-color: var(--nile-colors-button-secondary-disabled);
-    border-color: var(--nile-colors-button-secondary-disabled-border);
-    color: var(--nile-colors-button-secondary-disabled-text);
-    cursor: not-allowed;
-  }
-
   /* Primary */
   .button--standard.button--primary {
     background-color: var(--nile-colors-button-primary);
+    background-color: #005ea6; /*for v2 */
     border-color: var(--nile-colors-button-primary-border);
+    border-color: #005ea6; /*for v2 */
     color: var(--nile-colors-button-primary-text);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /*for v2 */
   }
 
   .button--standard.button--primary:hover:not(.button--disabled) {
     background-color: var(--nile-colors-button-primary-hover);
+    background-color: #005291; /*for v2 */
     border-color: var(--nile-colors-button-primary-hover);
+    border-color: #005291; /*for v2 */
     color: var(--nile-colors-button-primary-text);
   }
 
   .button--standard.button--primary:active:not(.button--disabled) {
     background-color: var(--nile-colors-button-primary-pressed);
+    background-color: #005ea6; /*for v2 */
     border-color: var(--nile-colors-button-primary-pressed-border);
+    border-color: #005ea6; /*for v2 */
     color: var(--nile-colors-button-primary-text);
+    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),
+      0px 0px 0px 4px rgba(0, 94, 166, 0.15); /*for v2 */
   }
 
   .button--standard.button--primary.button--disabled {
     background-color: var(--nile-colors-button-primary-disabled);
+    background-color: #f2f4f7; /*for v2 */
     border-color: var(--nile-colors-button-primary-disabled);
+    border-color: #eaecf0; /*for v2 */
     color: var(--nile-colors-button-primary-disabled-text);
+    color: #98a2b3; /*for v2 */
     cursor: not-allowed;
   }
 
   .button--standard.button--primary.button--disabled:hover,
   .button--standard.button--primary.button--disabled:active {
     background-color: var(--nile-colors-button-primary-disabled);
+    background-color: #f2f4f7; /*for v2 */
     border-color: var(--nile-colors-button-primary-disabled);
+    border-color: #eaecf0; /*for v2 */
     color: var(--nile-colors-button-primary-disabled-text);
+    color: #98a2b3; /*for v2 */
+    cursor: not-allowed;
+  }
+
+  /*  Secondary */
+  .button--standard.button--secondary {
+    background-color: var(--nile-colors-button-secondary);
+    border-color: var(--nile-colors-button-secondary-border);
+    color: var(--nile-colors-button-secondary-text);
+  }
+
+  .button--standard.button--secondary:hover:not(.button--disabled) {
+    background-color: var(--nile-colors-button-secondary-hover);
+    border-color: var(--nile-colors-button-secondary-border);
+    color: var(--nile-colors-button-secondary-text);
+  }
+
+  .button--standard.button--secondary:active:not(.button--disabled) {
+    background-color: var(--nile-colors-button-secondary-pressed);
+    border-color: var(--nile-colors-button-secondary-pressed-border);
+    color: var(--nile-colors-button-secondary-text);
+  }
+
+  .button--standard.button--secondary.button--disabled {
+    background-color: var(--nile-colors-button-secondary-disabled);
+    border-color: var(--nile-colors-button-secondary-disabled-border);
+    color: var(--nile-colors-button-secondary-disabled-text);
+    cursor: not-allowed;
+  }
+
+  .button--standard.button--secondary.button--disabled:hover,
+  .button--standard.button--secondary.button--disabled:active {
+    background-color: var(--nile-colors-button-secondary-disabled);
+    border-color: var(--nile-colors-button-secondary-disabled-border);
+    color: var(--nile-colors-button-secondary-disabled-text);
     cursor: not-allowed;
   }
 
@@ -170,7 +186,7 @@ export const styles = css`
   }
 
   /* ghost  */
-  .button--standard.button--ghost{
+  .button--standard.button--ghost {
     background-color: var(--nile-colors-button-tertiary);
     border-color: transparent;
     color: var(--nile-colors-button-tertiary-text);
@@ -184,14 +200,14 @@ export const styles = css`
 
   .button--standard.button--ghost:active:not(.button--disabled) {
     background-color: var(--nile-colors-button-tertiary-pressed);
-    border-color:transparent;
+    border-color: transparent;
     color: var(--nile-colors-button-tertiary-text);
   }
 
   .button--standard.button--ghost.button--disabled,
   .button--standard.button--ghost.button--disabled:hover,
   .button--standard.button--ghost.button--disabled:active {
-    border-color:transparent;
+    border-color: transparent;
     background-color: var(--nile-colors-button-tertiary-disabled);
     color: var(--nile-colors-button-tertiary-disabled-text);
     cursor: not-allowed;
@@ -225,68 +241,217 @@ export const styles = css`
     color: var(--nile-colors-button-caution-disabled-text);
   }
 
+  /* destructive */
+  .button--standard.button--destructive {
+    background-color: #d92d20;
+    border-color: #d92d20;
+    color: #fff;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
 
-        /* Primary Variant - Nile Icon Fill */
-        .button--standard.button--primary ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
-      }
-      .button--standard.button--primary:hover:not(.button--disabled) ::slotted(nile-icon),
-      .button--standard.button--primary:active:not(.button--disabled) ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
-      }
-      .button--standard.button--primary.button--disabled ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;
-      }
-
-      /* Secondary Variant */
-      .button--standard.button--secondary ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
-      }
-      .button--standard.button--secondary:hover:not(.button--disabled) ::slotted(nile-icon),
-      .button--standard.button--secondary:active:not(.button--disabled) ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
-      }
-      .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-secondary-disabled-text) !important;
-      }
-
-      /* Tertiary Variant */
-      .button--standard.button--tertiary ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
-      }
-      .button--standard.button--tertiary:hover:not(.button--disabled) ::slotted(nile-icon),
-      .button--standard.button--tertiary:active:not(.button--disabled) ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
-      }
-      .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;
-      }
-
-        /* Ghost Variant */
-      .button--standard.button--ghost ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
-      }
-      .button--standard.button--ghost:hover:not(.button--disabled) ::slotted(nile-icon),
-      .button--standard.button--ghost:active:not(.button--disabled) ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
-      }
-      .button--standard.button--ghost ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;
-      }
-
-      /* Caution Variant */
-      .button--standard.button--caution ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
-      }
-      .button--standard.button--caution:hover:not(.button--disabled) ::slotted(nile-icon),
-      .button--standard.button--caution:active:not(.button--disabled) ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
-      }
-      .button--standard.button--caution.button--disabled ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;
-      }
-
-    /*
+  .button--standard.button--destructive:hover:not(.button--disabled) {
+    background-color: #b42318;
+    border-color: #b42318;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+
+  .button--standard.button--destructive:active:not(.button--disabled) {
+    background-color: #d92d20;
+    border-color: #d92d20;
+    color: #fff;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+  }
+  .button--standard.button--destructive:focus-visible:not(.button--disabled) {
+    background-color: #d92d20;
+    border-color: #d92d20;
+    color: #fff;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+  }
+
+  .button--standard.button--destructive.button--disabled {
+    background-color: #f2f4f7;
+    border-color: #eaecf0;
+    color: #98a2b3;
+    cursor: not-allowed;
+  }
+
+  .button--standard.button--destructive.button--disabled:hover,
+  .button--standard.button--destructive.button--disabled:active {
+    background-color: #f2f4f7;
+    border-color: #eaecf0;
+    color: #98a2b3;
+    cursor: not-allowed;
+  }
+
+  /* secondary-Grey */
+  .button--standard.button--secondary-grey {
+    background-color: #fff;
+    border-color: #d0d5dd;
+    color: #344054;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+
+  .button--standard.button--secondary-grey:hover:not(.button--disabled) {
+    background-color: #f9fafb;
+    border-color: #d0d5dd;
+    color: #182230;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+
+  .button--standard.button--secondary-grey:active:not(.button--disabled) {
+    background-color: #fff;
+    border-color: #d0d5dd;
+    color: #344054;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(152, 162, 179, 0.14);
+  }
+
+  .button--standard.button--secondary-grey.button--disabled {
+    background-color: #eaecf0;
+    border-color: var(--nile-colors-button-primary-disabled);
+    color: #98a2b3;
+    cursor: not-allowed;
+  }
+
+  .button--standard.button--secondary-grey.button--disabled:hover,
+  .button--standard.button--secondary-grey.button--disabled:active {
+    background-color: #eaecf0;
+    border-color: var(--nile-colors-button-primary-disabled);
+    color: #98a2b3;
+    cursor: not-allowed;
+  }
+
+  /* secondary-blue */
+  .button--standard.button--secondary-blue {
+    background-color: #fff;
+    border-color: #85aad1;
+    color: #005291;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+
+  .button--standard.button--secondary-blue:hover:not(.button--disabled) {
+    background-color: #eaf0f8;
+    border-color: #85aad1;
+    color: #004678;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+
+  .button--standard.button--secondary-blue:active:not(.button--disabled) {
+    background-color: #fff;
+    border-color: #85aad1;
+    color: #005291;
+    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),
+      0px 0px 0px 4px rgba(0, 94, 166, 0.15);
+  }
+
+  .button--standard.button--secondary-blue.button--disabled {
+    background-color: #fff;
+    border-color: #eaecf0;
+    color: #98a2b3;
+    cursor: not-allowed;
+  }
+
+  .button--standard.button--secondary-blue.button--disabled:hover,
+  .button--standard.button--secondary-blue.button--disabled:active {
+    background-color: #fff;
+    border-color: #eaecf0;
+    color: #98a2b3;
+    cursor: not-allowed;
+  }
+
+  /* Primary Variant - Nile Icon Fill */
+  .button--standard.button--primary ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
+  }
+  .button--standard.button--primary:hover:not(.button--disabled)
+    ::slotted(nile-icon),
+  .button--standard.button--primary:active:not(.button--disabled)
+    ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
+  }
+  .button--standard.button--primary.button--disabled ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;
+  }
+
+  /* Secondary Variant */
+  .button--standard.button--secondary ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
+  }
+  .button--standard.button--secondary:hover:not(.button--disabled)
+    ::slotted(nile-icon),
+  .button--standard.button--secondary:active:not(.button--disabled)
+    ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
+  }
+  .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {
+    --nile-svg-fill: var(
+      --nile-colors-button-secondary-disabled-text
+    ) !important;
+  }
+
+  /* Tertiary Variant */
+  .button--standard.button--tertiary ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+  }
+  .button--standard.button--tertiary:hover:not(.button--disabled)
+    ::slotted(nile-icon),
+  .button--standard.button--tertiary:active:not(.button--disabled)
+    ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+  }
+  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {
+    --nile-svg-fill: var(
+      --nile-colors-button-tertiary-disabled-text
+    ) !important;
+  }
+
+  /* Ghost Variant */
+  .button--standard.button--ghost ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+  }
+  .button--standard.button--ghost:hover:not(.button--disabled)
+    ::slotted(nile-icon),
+  .button--standard.button--ghost:active:not(.button--disabled)
+    ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+  }
+  .button--standard.button--ghost ::slotted(nile-icon) {
+    --nile-svg-fill: var(
+      --nile-colors-button-tertiary-disabled-text
+    ) !important;
+  }
+
+  /* Caution Variant */
+  .button--standard.button--caution ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
+  }
+  .button--standard.button--caution:hover:not(.button--disabled)
+    ::slotted(nile-icon),
+  .button--standard.button--caution:active:not(.button--disabled)
+    ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
+  }
+  .button--standard.button--caution.button--disabled ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;
+  }
+
+  /* destructive */
+  .button--standard.button--destructive ::slotted(nile-icon) {
+    --nile-svg-fill: #fff !important;
+  }
+  .button--standard.button--destructive:hover:not(.button--disabled)
+    ::slotted(nile-icon),
+  .button--standard.button--caution:active:not(.button--disabled)
+    ::slotted(nile-icon) {
+    --nile-svg-fill: #fff !important;
+  }
+  .button--standard.button--destructive.button--disabled ::slotted(nile-icon) {
+    --nile-svg-fill: #fff !important;
+  }
+
+  /*
    * Outline buttons
    */
 
@@ -388,12 +553,83 @@ export const styles = css`
     color: var(--nile-colors-white-base);
   }
 
- .button--outline.button--danger:active:not(.button--disabled) {
+  .button--outline.button--danger:active:not(.button--disabled) {
     border-color: var(--nile-colors-red-700);
     background-color: var(--nile-colors-red-700);
     color: var(--nile-colors-white-base);
   }
 
+  /* destructive  */
+  .button--outline.button--destructive {
+    border-color: #fda29b;
+    color: #b42318;
+    box-shadow: 0px;
+  }
+
+  .button--outline.button--destructive:hover:not(.button--disabled),
+  .button--outline.button--destructive.button--checked:not(.button--disabled) {
+    border-color: #fda29b;
+    color: #912018;
+    background-color: #fef3f2;
+  }
+
+  .button--outline.button--destructive:active:not(.button--disabled) {
+    border-color: #fda29b;
+    color: #b42318;
+    background-color: #fff;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+  }
+
+  /* destructive - focus-visible */
+  .button--outline.button--destructive:focus-visible:not(.button--disabled) {
+    border-color: #fda29b;
+    color: #b42318;
+    background-color: #fff;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+  }
+
+  /* secondary-grey  */
+  .button--outline.button--secondary-grey {
+    box-shadow: 0px;
+  }
+
+  .button--outline.button--secondary-grey:hover:not(.button--disabled),
+  .button--outline.button--secondary-grey.button--checked:not(
+      .button--disabled
+    ) {
+    color: #344054;
+    background-color: #f9fafb;
+  }
+
+  .button--outline.button--secondary-grey:active:not(.button--disabled) {
+    box-shadow: 0px;
+  }
+
+  .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {
+    box-shadow: 0px;
+  }
+
+  /* secondary-blue  */
+  .button--outline.button--secondary-blue {
+    box-shadow: 0px;
+  }
+
+  .button--outline.button--secondary-blue:hover:not(.button--disabled),
+  .button--outline.button--secondary-blue.button--checked:not(.button--disabled) {
+    color: #004678;
+    background-color: #EAF0F8;
+  }
+
+  .button--outline.button--secondary-blue:active:not(.button--disabled) {
+    box-shadow: 0px;
+  }
+
+  .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {
+    box-shadow: 0px;
+  }
+  
   @media (forced-colors: active) {
     .button.button--outline.button--checked:not(.button--disabled) {
       outline: solid 2px transparent;
@@ -486,4 +722,8 @@ export const styles = css`
     pointer-events: none;
   }
 
+  /* outline with no border */
+  .button--outline.button--hideborder {
+    border: 0px;
+  }
 `;

package/src/nile-button/nile-button.ts

@@ -51,9 +51,14 @@ export class NileButton extends NileElement implements NileFormControl {
       // Fall back to the closest containing form
       return input.closest('form');
     },
-    assumeInteractionOn: ['click']
+    assumeInteractionOn: ['click'],
   });
-  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
+  private readonly hasSlotController = new HasSlotController(
+    this,
+    '[default]',
+    'prefix',
+    'suffix'
+  );
 
   @query('.button') button: HTMLButtonElement | HTMLLinkElement;
 
@@ -62,10 +67,18 @@ export class NileButton extends NileElement implements NileFormControl {
   @property() title = ''; // make reactive to pass through
 
   /** The button's theme variant. */
-  @property({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' | 'caution'|'ghost'  = 'primary';
+  @property({ reflect: true }) variant:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'caution'
+    | 'ghost'
+    | 'destructive'
+    | 'secondary-grey'
+    | 'secondary-blue' = 'primary';
 
   /** The button's size. */
-  @property({ reflect: true }) size:  'medium' = 'medium';
+  @property({ reflect: true }) size: 'medium' = 'medium';
 
   /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
   @property({ type: Boolean, reflect: true }) caret = false;
@@ -134,16 +147,28 @@ export class NileButton extends NileElement implements NileFormControl {
 
   /** Used to override the form owner's `enctype` attribute.  */
   @property({ attribute: 'formenctype' })
-  formEnctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+  formEnctype:
+    | 'application/x-www-form-urlencoded'
+    | 'multipart/form-data'
+    | 'text/plain';
 
   /** Used to override the form owner's `method` attribute.  */
   @property({ attribute: 'formmethod' }) formMethod: 'post' | 'get';
 
   /** Used to override the form owner's `novalidate` attribute. */
-  @property({ attribute: 'formnovalidate', type: Boolean }) formNoValidate: boolean;
+  @property({ attribute: 'formnovalidate', type: Boolean })
+  formNoValidate: boolean;
 
   /** Used to override the form owner's `target` attribute. */
-  @property({ attribute: 'formtarget' }) formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
+  @property({ attribute: 'formtarget' }) formTarget:
+    | '_self'
+    | '_blank'
+    | '_parent'
+    | '_top'
+    | string;
+
+  @property({ type: Boolean, reflect: true, attribute: 'hide-border' })
+  hideBorder = false;
 
   /** Gets the validity state object */
   get validity() {
@@ -293,6 +318,10 @@ export class NileButton extends NileElement implements NileFormControl {
           'button--tertiary': this.variant === 'tertiary',
           'button--caution': this.variant === 'caution',
           'button--ghost': this.variant === 'ghost',
+          'button--destructive': this.variant === 'destructive',
+          'button--secondary-grey': this.variant === 'secondary-grey',
+          'button--secondary-blue': this.variant === 'secondary-blue',
+          'button--hideborder': this.hideBorder,
           'button--medium': this.size === 'medium',
           'button--caret': this.caret,
           'button--circle': this.circle,
@@ -304,11 +333,14 @@ export class NileButton extends NileElement implements NileFormControl {
           'button--pill': this.pill,
           'button--has-label': this.hasSlotController.test('[default]'),
           'button--has-prefix': this.hasSlotController.test('prefix'),
-          'button--has-suffix': this.hasSlotController.test('suffix')
+          'button--has-suffix': this.hasSlotController.test('suffix'),
         })}
         ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
         type=${ifDefined(isLink ? undefined : this.type)}
-        title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
+        title=${
+          this
+            .title /* An empty title prevents browser validation tooltips from appearing on hover */
+        }
         name=${ifDefined(isLink ? undefined : this.name)}
         value=${ifDefined(isLink ? undefined : this.value)}
         href=${ifDefined(isLink ? this.href : undefined)}
@@ -327,7 +359,16 @@ export class NileButton extends NileElement implements NileFormControl {
         <slot part="label" class="button__label"></slot>
         <slot name="suffix" part="suffix" class="button__suffix"></slot>
         ${
-          this.caret ? html` <nile-icon part="caret" class="button__caret" color="white" name="arrowdown"></nile-icon> ` : ''
+          this.caret
+            ? html`
+                <nile-icon
+                  part="caret"
+                  class="button__caret"
+                  color="white"
+                  name="arrowdown"
+                ></nile-icon>
+              `
+            : ''
         }
         ${this.loading ? html`<nile-spinner></nile-spinner>` : ''}
       </${tag}>
@@ -338,7 +379,7 @@ export class NileButton extends NileElement implements NileFormControl {
 export default NileButton;
 
 declare global {
- interface HTMLElementTagNameMap {
+  interface HTMLElementTagNameMap {
     'nile-button': NileButton;
   }
 }