@aquera/nile-elements 0.0.50 → 0.0.51

package/dist/src/nile-button/nile-button.css.js

@@ -71,70 +71,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;
   }
 
@@ -168,7 +184,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);
@@ -182,14 +198,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;
@@ -223,68 +239,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
    */
 
@@ -386,12 +551,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;
@@ -484,5 +720,9 @@ export const styles = css `
     pointer-events: none;
   }
 
+  /* outline with no border */
+  .button--outline.button--hideborder {
+    border: 0px;
+  }
 `;
 //# sourceMappingURL=nile-button.css.js.map

package/dist/src/nile-button/nile-button.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4dxB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Button CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: 1px;\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default) border,\n      var(--nile-transition-duration-default) box-shadow;\n    cursor: inherit;\n    padding: var(--nile-spacing-2-x);\n    gap: var(--nile-spacing-2-x);\n    border-radius: var(--nile-radius-base-standard);\n    line-height: var(--nile-type-scale-3);\n    box-sizing: border-box;\n    height: 38px;\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  .button__label::slotted(nile-icon) {\n    /* vertical-align: -2px; */\n  }\n\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-button-secondary);\n    border-color: var(--nile-colors-button-secondary-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-secondary-hover);\n    border-color: var(--nile-colors-button-secondary-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-secondary-pressed);\n    border-color: var(--nile-colors-button-secondary-pressed-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-button-secondary-disabled);\n    border-color: var(--nile-colors-button-secondary-disabled-border);\n    color: var(--nile-colors-button-secondary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-button-secondary-disabled);\n    border-color: var(--nile-colors-button-secondary-disabled-border);\n    color: var(--nile-colors-button-secondary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-button-primary);\n    border-color: var(--nile-colors-button-primary-border);\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-primary-hover);\n    border-color: var(--nile-colors-button-primary-hover);\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-primary-pressed);\n    border-color: var(--nile-colors-button-primary-pressed-border);\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-button-primary-disabled);\n    border-color: var(--nile-colors-button-primary-disabled);\n    color: var(--nile-colors-button-primary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-button-primary-disabled);\n    border-color: var(--nile-colors-button-primary-disabled);\n    color: var(--nile-colors-button-primary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-button-tertiary);\n    border-color: var(--nile-colors-button-tertiary-border);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-hover);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-pressed);\n    border-color: var(--nile-colors-button-tertiary-pressed-border);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    border-color: var(--nile-colors-neutral-500);\n    background-color: var(--nile-colors-button-tertiary-disabled);\n    color: var(--nile-colors-button-tertiary-disabled-text);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost{\n    background-color: var(--nile-colors-button-tertiary);\n    border-color: transparent;\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-hover);\n    border-color: transparent;\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-pressed);\n    border-color:transparent;\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--ghost.button--disabled,\n  .button--standard.button--ghost.button--disabled:hover,\n  .button--standard.button--ghost.button--disabled:active {\n    border-color:transparent;\n    background-color: var(--nile-colors-button-tertiary-disabled);\n    color: var(--nile-colors-button-tertiary-disabled-text);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-button-caution);\n    border-color: var(--nile-colors-button-caution);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-caution-hover);\n    border-color: var(--nile-colors-button-caution-hover);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-caution-pressed);\n    border-color: var(--nile-colors-button-caution-pressed-border);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution.button--disabled,\n  .button--standard.button--caution.button--disabled:hover,\n  .button--standard.button--caution.button--disabled:active {\n    background-color: var(--nile-colors-button-caution-disabled);\n    border-color: var(--nile-colors-button-caution-disabled);\n    color: var(--nile-colors-button-caution-disabled-text);\n  }\n\n\n        /* Primary Variant - Nile Icon Fill */\n        .button--standard.button--primary ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n      }\n      .button--standard.button--primary:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--primary:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n      }\n      .button--standard.button--primary.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;\n      }\n\n      /* Secondary Variant */\n      .button--standard.button--secondary ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n      }\n      .button--standard.button--secondary:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--secondary:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n      }\n      .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-secondary-disabled-text) !important;\n      }\n\n      /* Tertiary Variant */\n      .button--standard.button--tertiary ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n      }\n      .button--standard.button--tertiary:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--tertiary:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n      }\n      .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;\n      }\n\n        /* Ghost Variant */\n      .button--standard.button--ghost ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n      }\n      .button--standard.button--ghost:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--ghost:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n      }\n      .button--standard.button--ghost ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;\n      }\n\n      /* Caution Variant */\n      .button--standard.button--caution ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n      }\n      .button--standard.button--caution:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--caution:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n      }\n      .button--standard.button--caution.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;\n      }\n\n    /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: 24px;\n  }\n\n  .button--pill.button--medium {\n    border-radius: 32px;\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: 1em;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n`;\n"]}
+{"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4sBxB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Button CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: 1px;\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default) border,\n      var(--nile-transition-duration-default) box-shadow;\n    cursor: inherit;\n    padding: var(--nile-spacing-2-x);\n    gap: var(--nile-spacing-2-x);\n    border-radius: var(--nile-radius-base-standard);\n    line-height: var(--nile-type-scale-3);\n    box-sizing: border-box;\n    height: 38px;\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  .button__label::slotted(nile-icon) {\n    /* vertical-align: -2px; */\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-button-primary);\n    background-color: #005ea6; /*for v2 */\n    border-color: var(--nile-colors-button-primary-border);\n    border-color: #005ea6; /*for v2 */\n    color: var(--nile-colors-button-primary-text);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /*for v2 */\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-primary-hover);\n    background-color: #005291; /*for v2 */\n    border-color: var(--nile-colors-button-primary-hover);\n    border-color: #005291; /*for v2 */\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-primary-pressed);\n    background-color: #005ea6; /*for v2 */\n    border-color: var(--nile-colors-button-primary-pressed-border);\n    border-color: #005ea6; /*for v2 */\n    color: var(--nile-colors-button-primary-text);\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15); /*for v2 */\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-button-primary-disabled);\n    background-color: #f2f4f7; /*for v2 */\n    border-color: var(--nile-colors-button-primary-disabled);\n    border-color: #eaecf0; /*for v2 */\n    color: var(--nile-colors-button-primary-disabled-text);\n    color: #98a2b3; /*for v2 */\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-button-primary-disabled);\n    background-color: #f2f4f7; /*for v2 */\n    border-color: var(--nile-colors-button-primary-disabled);\n    border-color: #eaecf0; /*for v2 */\n    color: var(--nile-colors-button-primary-disabled-text);\n    color: #98a2b3; /*for v2 */\n    cursor: not-allowed;\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-button-secondary);\n    border-color: var(--nile-colors-button-secondary-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-secondary-hover);\n    border-color: var(--nile-colors-button-secondary-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-secondary-pressed);\n    border-color: var(--nile-colors-button-secondary-pressed-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-button-secondary-disabled);\n    border-color: var(--nile-colors-button-secondary-disabled-border);\n    color: var(--nile-colors-button-secondary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-button-secondary-disabled);\n    border-color: var(--nile-colors-button-secondary-disabled-border);\n    color: var(--nile-colors-button-secondary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-button-tertiary);\n    border-color: var(--nile-colors-button-tertiary-border);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-hover);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-pressed);\n    border-color: var(--nile-colors-button-tertiary-pressed-border);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    border-color: var(--nile-colors-neutral-500);\n    background-color: var(--nile-colors-button-tertiary-disabled);\n    color: var(--nile-colors-button-tertiary-disabled-text);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost {\n    background-color: var(--nile-colors-button-tertiary);\n    border-color: transparent;\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-hover);\n    border-color: transparent;\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-pressed);\n    border-color: transparent;\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--ghost.button--disabled,\n  .button--standard.button--ghost.button--disabled:hover,\n  .button--standard.button--ghost.button--disabled:active {\n    border-color: transparent;\n    background-color: var(--nile-colors-button-tertiary-disabled);\n    color: var(--nile-colors-button-tertiary-disabled-text);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-button-caution);\n    border-color: var(--nile-colors-button-caution);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-caution-hover);\n    border-color: var(--nile-colors-button-caution-hover);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-caution-pressed);\n    border-color: var(--nile-colors-button-caution-pressed-border);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution.button--disabled,\n  .button--standard.button--caution.button--disabled:hover,\n  .button--standard.button--caution.button--disabled:active {\n    background-color: var(--nile-colors-button-caution-disabled);\n    border-color: var(--nile-colors-button-caution-disabled);\n    color: var(--nile-colors-button-caution-disabled-text);\n  }\n\n  /* destructive */\n  .button--standard.button--destructive {\n    background-color: #d92d20;\n    border-color: #d92d20;\n    color: #fff;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--destructive:hover:not(.button--disabled) {\n    background-color: #b42318;\n    border-color: #b42318;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--destructive:active:not(.button--disabled) {\n    background-color: #d92d20;\n    border-color: #d92d20;\n    color: #fff;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n  .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n    background-color: #d92d20;\n    border-color: #d92d20;\n    color: #fff;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  .button--standard.button--destructive.button--disabled {\n    background-color: #f2f4f7;\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--destructive.button--disabled:hover,\n  .button--standard.button--destructive.button--disabled:active {\n    background-color: #f2f4f7;\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  /* secondary-Grey */\n  .button--standard.button--secondary-grey {\n    background-color: #fff;\n    border-color: #d0d5dd;\n    color: #344054;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n    background-color: #f9fafb;\n    border-color: #d0d5dd;\n    color: #182230;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:active:not(.button--disabled) {\n    background-color: #fff;\n    border-color: #d0d5dd;\n    color: #344054;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n  }\n\n  .button--standard.button--secondary-grey.button--disabled {\n    background-color: #eaecf0;\n    border-color: var(--nile-colors-button-primary-disabled);\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-grey.button--disabled:hover,\n  .button--standard.button--secondary-grey.button--disabled:active {\n    background-color: #eaecf0;\n    border-color: var(--nile-colors-button-primary-disabled);\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  /* secondary-blue */\n  .button--standard.button--secondary-blue {\n    background-color: #fff;\n    border-color: #85aad1;\n    color: #005291;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n    background-color: #eaf0f8;\n    border-color: #85aad1;\n    color: #004678;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:active:not(.button--disabled) {\n    background-color: #fff;\n    border-color: #85aad1;\n    color: #005291;\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n  }\n\n  .button--standard.button--secondary-blue.button--disabled {\n    background-color: #fff;\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-blue.button--disabled:hover,\n  .button--standard.button--secondary-blue.button--disabled:active {\n    background-color: #fff;\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  /* Primary Variant - Nile Icon Fill */\n  .button--standard.button--primary ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n  }\n  .button--standard.button--primary:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--primary:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;\n  }\n\n  /* Secondary Variant */\n  .button--standard.button--secondary ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n  }\n  .button--standard.button--secondary:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--secondary:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: var(\n      --nile-colors-button-secondary-disabled-text\n    ) !important;\n  }\n\n  /* Tertiary Variant */\n  .button--standard.button--tertiary ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n  }\n  .button--standard.button--tertiary:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--tertiary:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: var(\n      --nile-colors-button-tertiary-disabled-text\n    ) !important;\n  }\n\n  /* Ghost Variant */\n  .button--standard.button--ghost ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n  }\n  .button--standard.button--ghost:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--ghost:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n  }\n  .button--standard.button--ghost ::slotted(nile-icon) {\n    --nile-svg-fill: var(\n      --nile-colors-button-tertiary-disabled-text\n    ) !important;\n  }\n\n  /* Caution Variant */\n  .button--standard.button--caution ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n  }\n  .button--standard.button--caution:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n  }\n  .button--standard.button--caution.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;\n  }\n\n  /* destructive */\n  .button--standard.button--destructive ::slotted(nile-icon) {\n    --nile-svg-fill: #fff !important;\n  }\n  .button--standard.button--destructive:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: #fff !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: #fff !important;\n  }\n\n  /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* destructive  */\n  .button--outline.button--destructive {\n    border-color: #fda29b;\n    color: #b42318;\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--destructive:hover:not(.button--disabled),\n  .button--outline.button--destructive.button--checked:not(.button--disabled) {\n    border-color: #fda29b;\n    color: #912018;\n    background-color: #fef3f2;\n  }\n\n  .button--outline.button--destructive:active:not(.button--disabled) {\n    border-color: #fda29b;\n    color: #b42318;\n    background-color: #fff;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* destructive - focus-visible */\n  .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n    border-color: #fda29b;\n    color: #b42318;\n    background-color: #fff;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* secondary-grey  */\n  .button--outline.button--secondary-grey {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:hover:not(.button--disabled),\n  .button--outline.button--secondary-grey.button--checked:not(\n      .button--disabled\n    ) {\n    color: #344054;\n    background-color: #f9fafb;\n  }\n\n  .button--outline.button--secondary-grey:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  /* secondary-blue  */\n  .button--outline.button--secondary-blue {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:hover:not(.button--disabled),\n  .button--outline.button--secondary-blue.button--checked:not(.button--disabled) {\n    color: #004678;\n    background-color: #EAF0F8;\n  }\n\n  .button--outline.button--secondary-blue:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n  \n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: 24px;\n  }\n\n  .button--pill.button--medium {\n    border-radius: 32px;\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: 1em;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n  /* outline with no border */\n  .button--outline.button--hideborder {\n    border: 0px;\n  }\n`;\n"]}

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

@@ -33,7 +33,7 @@ export declare class NileButton extends NileElement implements NileFormControl {
     invalid: boolean;
     title: string;
     /** The button's theme variant. */
-    variant: 'primary' | 'secondary' | 'tertiary' | 'caution' | 'ghost';
+    variant: 'primary' | 'secondary' | 'tertiary' | 'caution' | 'ghost' | 'destructive' | 'secondary-grey' | 'secondary-blue';
     /** The button's size. */
     size: 'medium';
     /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
@@ -94,6 +94,7 @@ export declare class NileButton extends NileElement implements NileFormControl {
     formNoValidate: boolean;
     /** Used to override the form owner's `target` attribute. */
     formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
+    hideBorder: boolean;
     /** Gets the validity state object */
     get validity(): ValidityState;
     /** Gets the validation message */