@aquera/nile-elements 0.1.14 → 0.1.16

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,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8rBxB,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';\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-family: var(--nile-font-family-serif);\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    font-size: 14px;\n    font-weight: 500;\n    border-radius: var(--nile-radius-base-standard);\n    padding: 10px 14px;\n    gap: 5px;\n    line-height: 20px;\n    box-sizing: border-box;\n    height: 40px;\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  /* 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    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\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    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--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  /*  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:not([color])) {\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:not([color])),\n  .button--standard.button--primary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\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:not([color])) {\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:not([color])),\n  .button--standard.button--secondary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\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:not([color])) {\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:not([color])),\n  .button--standard.button--tertiary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\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:not([color])) {\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:not([color])),\n  .button--standard.button--ghost:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n  }\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\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:not([color])) {\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:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n  }\n  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;\n  }\n\n  /* destructive */\n  .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: #fff !important;\n  }\n  .button--standard.button--destructive:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: #fff !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\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(\n      .button--disabled\n    ) {\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"]}
+{"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,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwrBxB,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';\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-family: var(--nile-font-family-serif);\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    font-size: 14px;\n    font-weight: 500;\n    border-radius: var(--nile-radius-base-standard);\n    padding: 10px 14px;\n    gap: 5px;\n    line-height: 20px;\n    box-sizing: border-box;\n    height: 40px;\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  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-primary-600);\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700);\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700);\n    border-color: var(--nile-colors-primary-900);\n    color: var(--nile-colors-white-base);\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--primary.button--disabled {\n    background-color: var(--nile-colors-neutral-700);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\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-neutral-700);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-500);\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-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-500);\n    cursor: not-allowed;\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-dark-900);\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-white-base);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost {\n    background-color: var(--nile-colors-white-base);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\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-white-base);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-red-500);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: #820B0B;\n    color: var(--nile-colors-white-base);\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-neutral-500);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-neutral-400);\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-neutral-700);\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-neutral-700);\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:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--primary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--primary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n  }\n\n  /* Secondary Variant */\n  .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--secondary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--secondary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-500) !important;\n  }\n\n  /* Tertiary Variant */\n  .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--tertiary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--tertiary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n  }\n\n  /* Ghost Variant */\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--ghost:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n  }\n\n  /* Caution Variant */\n  .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-400) !important;\n  }\n\n  /* destructive */\n  .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: #fff !important;\n  }\n  .button--standard.button--destructive:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: #fff !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\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(\n      .button--disabled\n    ) {\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-checkbox/nile-checkbox.js

@@ -167,7 +167,7 @@ let NileCheckbox = class NileCheckbox extends NileElement {
           @blur=${this.handleBlur}
           @focus=${this.handleFocus}
         />
- 
+
         <span
           part="control${this.checked ? ' control--checked' : ''}${this
             .indeterminate
@@ -200,24 +200,17 @@ let NileCheckbox = class NileCheckbox extends NileElement {
               `
             : ''}
         </span>
- 
+
         <div part="label" class="checkbox__label">
           ${typeof this.label === 'boolean' ? '' : this.label}
           <slot></slot>
         </div>
       </label>
- 
+
       ${hasHelpText
-            ? html `
-            <nile-tooltip content="${this.helpText}" placement="bottom">
-              <nile-icon
-                name="question"
-                class="checkbox__helptext-icon"
-              ></nile-icon>
-            </nile-tooltip>
-          `
+            ? html ` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
             : ``}
- 
+        
       ${hasErrorMessage
             ? html `
             <nile-form-error-message

package/dist/src/nile-checkbox/nile-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-checkbox.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.ts"],"names":[],"mappings":"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","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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-checkbox.css';\n \nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { defaultValue } from '../internal/default-value';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n \n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n *\n * @dependency nile-icon\n *\n * @slot - The checkbox's label.\n *\n * @event nile-blur - Emitted when the checkbox loses focus.\n * @event nile-change - Emitted when the checked state changes.\n * @event nile-focus - Emitted when the checkbox gains focus.\n * @event nile-input - Emitted when the checkbox receives input.\n * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<nile-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n */\n \n/**\n * Nile icon component.\n *\n * @tag nile-checkbox\n *\n */\n@customElement('nile-checkbox')\nexport class NileCheckbox extends NileElement {\n  constructor() {\n    super();\n  }\n \n  static styles: CSSResultGroup = styles;\n \n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n \n  @state() private hasFocus = false;\n \n  @property() title = ''; // make reactive to pass through\n \n  /** The name of the checkbox, submitted as a name/value pair with form data. */\n  @property() name = '';\n \n  /** The current value of the checkbox, submitted as a name/value pair with form data. */\n  @property() value: boolean;\n \n  /** The checkbox's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n \n  /** Disables the checkbox. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n \n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n \n  /** Label, declared this property for backward compatibility of old component  */\n  @property({ type: String, reflect: true }) label = '';\n \n  /**\n   * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n   * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n   */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n \n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue('checked') defaultChecked = false;\n \n  @property({ attribute: 'help-text', reflect: true }) helpText = '';\n \n  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n \n  @property({ type: Boolean }) showHelpText = false;\n \n \n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n \n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n \n  private toggleHelpText() {\n    this.showHelpText = !this.showHelpText;\n  }\n \n  private handleClick() {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    this.emit('nile-change',{checked: this.checked})\n    this.emit('valueChange',{checked: this.checked})\n  }\n \n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('blur');\n  }\n \n  private handleInput() {\n    this.emit('input');\n  }\n \n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('focus');\n  }\n \n  @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n  handleStateChange() {\n    this.input.checked = this.checked; // force a sync update\n    this.input.indeterminate = this.indeterminate; // force a sync update\n  }\n \n  /** Simulates a click on the checkbox. */\n  click() {\n    this.input.click();\n  }\n \n  /** Sets focus on the checkbox. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n \n  /** Removes focus from the checkbox. */\n  blur() {\n    this.input.blur();\n  }\n \n  connectedCallback() {\n    super.connectedCallback();\n    this.updateHostClass();\n    this.emit('nile-init');\n  }\n \n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n  }\n \n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('helpText')) {\n      this.updateHostClass();\n    }\n  }\n \n  private updateHostClass() {\n    if (this.helpText) {\n      this.classList.add('full-width');\n    } else {\n      this.classList.remove('full-width');\n    }\n  }\n \n  render() {\n    const hasHelpText = this.helpText ? true : false;\n    const hasErrorMessage = this.errorMessage ? true : false;\n \n    return html`\n      <label\n        part=\"base\"\n        class=${classMap({\n          checkbox: true,\n          'checkbox--checked': this.checked,\n          'checkbox--disabled': this.disabled,\n          'checkbox--focused': this.hasFocus,\n          'checkbox--indeterminate': this.indeterminate,\n          'checkbox--medium': this.size === 'medium',\n        })}\n      >\n        <input\n          class=\"checkbox__input\"\n          type=\"checkbox\"\n          title=${\n            this\n              .title /* An empty title prevents browser validation tooltips from appearing on hover */\n          }\n          name=${this.name}\n          value=${ifDefined(this.value)}\n          .indeterminate=${live(this.indeterminate)}\n          .checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          aria-checked=${this.checked ? 'true' : 'false'}\n          @click=${this.handleClick}\n          @input=${this.handleInput}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n        />\n \n        <span\n          part=\"control${this.checked ? ' control--checked' : ''}${this\n            .indeterminate\n            ? ' control--indeterminate'\n            : ''}\"\n          class=\"checkbox__control\"\n        >\n          ${this.checked\n            ? html`\n                <nile-icon\n                  part=\"checked-icon\"\n                  class=\"checkbox__checked-icon\"\n                  color=\"white\"\n                  library=\"system\"\n                  name=\"tick\"\n                  size=\"12\"\n                ></nile-icon>\n              `\n            : ''}\n          ${!this.checked && this.indeterminate\n            ? html`\n                <nile-icon\n                  part=\"indeterminate-icon\"\n                  class=\"checkbox__indeterminate-icon\"\n                  library=\"system\"\n                  color=\"white\"\n                  name=\"minus\"\n                  size=\"12\"\n                ></nile-icon>\n              `\n            : ''}\n        </span>\n \n        <div part=\"label\" class=\"checkbox__label\">\n          ${typeof this.label === 'boolean' ? '' : this.label}\n          <slot></slot>\n        </div>\n      </label>\n \n      ${hasHelpText\n        ? html`\n            <nile-tooltip content=\"${this.helpText}\" placement=\"bottom\">\n              <nile-icon\n                name=\"question\"\n                class=\"checkbox__helptext-icon\"\n              ></nile-icon>\n            </nile-tooltip>\n          `\n        : ``}\n \n      ${hasErrorMessage\n        ? html`\n            <nile-form-error-message\n              >${this.errorMessage}</nile-form-error-message\n            >\n          `\n        : ``}\n    `;\n  }\n}\n \nexport default NileCheckbox;\n \ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-checkbox': NileCheckbox;\n  }\n}"]}
+{"version":3,"file":"nile-checkbox.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.ts"],"names":[],"mappings":"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","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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-checkbox.css';\n \nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { defaultValue } from '../internal/default-value';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n \n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n *\n * @dependency nile-icon\n *\n * @slot - The checkbox's label.\n *\n * @event nile-blur - Emitted when the checkbox loses focus.\n * @event nile-change - Emitted when the checked state changes.\n * @event nile-focus - Emitted when the checkbox gains focus.\n * @event nile-input - Emitted when the checkbox receives input.\n * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<nile-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n */\n \n/**\n * Nile icon component.\n *\n * @tag nile-checkbox\n *\n */\n@customElement('nile-checkbox')\nexport class NileCheckbox extends NileElement {\n  constructor() {\n    super();\n  }\n \n  static styles: CSSResultGroup = styles;\n \n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n \n  @state() private hasFocus = false;\n \n  @property() title = ''; // make reactive to pass through\n \n  /** The name of the checkbox, submitted as a name/value pair with form data. */\n  @property() name = '';\n \n  /** The current value of the checkbox, submitted as a name/value pair with form data. */\n  @property() value: boolean;\n \n  /** The checkbox's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n \n  /** Disables the checkbox. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n \n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n \n  /** Label, declared this property for backward compatibility of old component  */\n  @property({ type: String, reflect: true }) label = '';\n \n  /**\n   * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n   * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n   */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n \n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue('checked') defaultChecked = false;\n \n  @property({ attribute: 'help-text', reflect: true }) helpText = '';\n \n  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n \n  @property({ type: Boolean }) showHelpText = false;\n \n \n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n \n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n \n  private toggleHelpText() {\n    this.showHelpText = !this.showHelpText;\n  }\n \n  private handleClick() {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    this.emit('nile-change',{checked: this.checked})\n    this.emit('valueChange',{checked: this.checked})\n  }\n \n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('blur');\n  }\n \n  private handleInput() {\n    this.emit('input');\n  }\n \n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('focus');\n  }\n \n  @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n  handleStateChange() {\n    this.input.checked = this.checked; // force a sync update\n    this.input.indeterminate = this.indeterminate; // force a sync update\n  }\n \n  /** Simulates a click on the checkbox. */\n  click() {\n    this.input.click();\n  }\n \n  /** Sets focus on the checkbox. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n \n  /** Removes focus from the checkbox. */\n  blur() {\n    this.input.blur();\n  }\n \n  connectedCallback() {\n    super.connectedCallback();\n    this.updateHostClass();\n    this.emit('nile-init');\n  }\n \n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n  }\n \n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('helpText')) {\n      this.updateHostClass();\n    }\n  }\n \n  private updateHostClass() {\n    if (this.helpText) {\n      this.classList.add('full-width');\n    } else {\n      this.classList.remove('full-width');\n    }\n  }\n \n  render() {\n    const hasHelpText = this.helpText ? true : false;\n    const hasErrorMessage = this.errorMessage ? true : false;\n \n    return html`\n      <label\n        part=\"base\"\n        class=${classMap({\n          checkbox: true,\n          'checkbox--checked': this.checked,\n          'checkbox--disabled': this.disabled,\n          'checkbox--focused': this.hasFocus,\n          'checkbox--indeterminate': this.indeterminate,\n          'checkbox--medium': this.size === 'medium',\n        })}\n      >\n        <input\n          class=\"checkbox__input\"\n          type=\"checkbox\"\n          title=${\n            this\n              .title /* An empty title prevents browser validation tooltips from appearing on hover */\n          }\n          name=${this.name}\n          value=${ifDefined(this.value)}\n          .indeterminate=${live(this.indeterminate)}\n          .checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          aria-checked=${this.checked ? 'true' : 'false'}\n          @click=${this.handleClick}\n          @input=${this.handleInput}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n        />\n\n        <span\n          part=\"control${this.checked ? ' control--checked' : ''}${this\n            .indeterminate\n            ? ' control--indeterminate'\n            : ''}\"\n          class=\"checkbox__control\"\n        >\n          ${this.checked\n            ? html`\n                <nile-icon\n                  part=\"checked-icon\"\n                  class=\"checkbox__checked-icon\"\n                  color=\"white\"\n                  library=\"system\"\n                  name=\"tick\"\n                  size=\"12\"\n                ></nile-icon>\n              `\n            : ''}\n          ${!this.checked && this.indeterminate\n            ? html`\n                <nile-icon\n                  part=\"indeterminate-icon\"\n                  class=\"checkbox__indeterminate-icon\"\n                  library=\"system\"\n                  color=\"white\"\n                  name=\"minus\"\n                  size=\"12\"\n                ></nile-icon>\n              `\n            : ''}\n        </span>\n\n        <div part=\"label\" class=\"checkbox__label\">\n          ${typeof this.label === 'boolean' ? '' : this.label}\n          <slot></slot>\n        </div>\n      </label>\n\n      ${hasHelpText\n        ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `\n        : ``}\n        \n      ${hasErrorMessage\n        ? html`\n            <nile-form-error-message\n              >${this.errorMessage}</nile-form-error-message\n            >\n          `\n        : ``}\n    `;\n  }\n}\n \nexport default NileCheckbox;\n \ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-checkbox': NileCheckbox;\n  }\n}"]}

package/dist/src/nile-checkbox/nile-checkbox.test.js

@@ -1,5 +1,8 @@
 import { fixture, html, expect, oneEvent } from '@open-wc/testing';
 import './nile-checkbox';
+function wait(ms = 50000) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
 describe('NileCheckbox', () => {
     it('renders correctly with default properties', async () => {
         const el = await fixture(html `<nile-checkbox></nile-checkbox>`);
@@ -68,8 +71,8 @@ describe('NileCheckbox', () => {
         const el = await fixture(html `<nile-checkbox help-text="test-help"></nile-checkbox>`);
         el.showHelpText = true;
         await el.updateComplete;
-        const helpTextIcon = el.shadowRoot.querySelector('.checkbox__helptext-icon');
-        expect(helpTextIcon).to.exist;
+        const helpText = el.shadowRoot?.querySelector("nile-form-help-text")?.textContent?.trim();
+        expect(helpText).to.equal('test-help');
     });
     it('updates host class based on helpText', async () => {
         const el = await fixture(html `<nile-checkbox></nile-checkbox>`);
@@ -133,20 +136,5 @@ describe('NileCheckbox', () => {
         expect(checkbox).to.not.be.null;
         expect(checkbox.getAttribute('form')).to.equal('test-form');
     });
-    it('displays and hides help text correctly', async () => {
-        const el = await fixture(html `<nile-checkbox help-text="test-help"></nile-checkbox>`);
-        // Initially, help text should not be shown
-        expect(el.showHelpText).to.be.false;
-        // Show the help text
-        el.showHelpText = true;
-        await el.updateComplete;
-        let helpTextIcon = el.shadowRoot.querySelector('.checkbox__helptext-icon');
-        expect(helpTextIcon).to.exist;
-        // Hide the help text
-        el.showHelpText = false;
-        await el.updateComplete;
-        helpTextIcon = el.shadowRoot.querySelector('.checkbox__helptext-icon');
-        expect(helpTextIcon).to.be.exist;
-    });
 });
 //# sourceMappingURL=nile-checkbox.test.js.map

package/dist/src/nile-checkbox/nile-checkbox.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-checkbox.test.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, html, expect, oneEvent } from '@open-wc/testing';\nimport './nile-checkbox';\nimport { NileCheckbox } from './nile-checkbox';\n\ndescribe('NileCheckbox', () => {\n  it('renders correctly with default properties', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n    expect(el).shadowDom.to.equalSnapshot();\n  });\n\n  it('toggles checked state on click', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n    const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n    input.click();\n    expect(el.checked).to.be.true;\n    input.click();\n    expect(el.checked).to.be.false;\n  });\n\n  it('emits nile-change event on click', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n    const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n    setTimeout(() => input.click());\n    const event = await oneEvent(el, 'valueChange');\n    expect(event.detail.checked).to.be.true;\n  });\n\n  it('handles focus and blur events', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n    const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n    // Focus the input and wait for the focus event\n    setTimeout(() => input.focus());\n    const focusEvent = await oneEvent(el, 'focus');\n    expect(focusEvent).to.exist;\n\n    // Blur the input and wait for the blur event\n    setTimeout(() => input.blur());\n    const blurEvent = await oneEvent(el, 'blur');\n    expect(blurEvent).to.exist;\n  });\n\n  it('handles indeterminate state', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox indeterminate></nile-checkbox>`);\n    const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n    expect(input.indeterminate).to.be.true;\n\n    el.checked = true;\n    el.indeterminate = false;\n    await el.updateComplete;\n    expect(input.indeterminate).to.be.false;\n    expect(input.checked).to.be.true;\n  });\n\n  it('reflects properties to attributes', async () => {\n    const el = await fixture<NileCheckbox>(html`\n      <nile-checkbox\n        name=\"test-name\"\n        title=\"test-title\"\n        disabled\n        required\n        label=\"test-label\"\n        sub-label=\"test-sublabel\"\n        help-text=\"test-help\"\n        error-message=\"test-error\"\n      ></nile-checkbox>\n    `);\n\n    expect(el.getAttribute('name')).to.equal('test-name');\n    expect(el.getAttribute('title')).to.equal('test-title');\n    expect(el.getAttribute('disabled')).to.equal('');\n    expect(el.getAttribute('required')).to.equal('');\n    expect(el.getAttribute('label')).to.equal('test-label');\n    expect(el.getAttribute('sub-label')).to.equal('test-sublabel');\n    expect(el.getAttribute('help-text')).to.equal('test-help');\n    expect(el.getAttribute('error-message')).to.equal('test-error');\n  });\n\n  it('displays help text when showHelpText is true', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox help-text=\"test-help\"></nile-checkbox>`);\n    el.showHelpText = true;\n    await el.updateComplete;\n\n    const helpTextIcon = el.shadowRoot!.querySelector('.checkbox__helptext-icon');\n    expect(helpTextIcon).to.exist;\n  });\n\n  it('updates host class based on helpText', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n    el.helpText = 'test-help';\n    await el.updateComplete;\n\n    expect(el.classList.contains('full-width')).to.be.true;\n\n    el.helpText = '';\n    await el.updateComplete;\n\n    expect(el.classList.contains('full-width')).to.be.false;\n  });\n\n  it('emits custom events on connected and disconnected', async () => {\n    const el = document.createElement('nile-checkbox');\n\n    // Wait for the connected event\n    const initEventPromise = oneEvent(el, 'nile-init');\n    document.body.appendChild(el);\n    const initEvent = await initEventPromise;\n    expect(initEvent).to.exist;\n\n    // Wait for the disconnected event\n    const destroyEventPromise = oneEvent(el, 'nile-destroy');\n    document.body.removeChild(el);\n    const destroyEvent = await destroyEventPromise;\n    expect(destroyEvent).to.exist;\n  });\n\n  it('handles required attribute', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox required></nile-checkbox>`);\n    const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n    expect(input.required).to.be.true;\n  });\n\n  it('simulates click using click method', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n    el.click();\n    expect(el.checked).to.be.true;\n  });\n\n  it('sets and removes focus using focus and blur methods', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n\n    // Call the focus method and wait for the focus event\n    setTimeout(() => el.focus());\n    const focusEvent = await oneEvent(el, 'focus');\n    expect(focusEvent).to.exist;\n\n    // Call the blur method and wait for the blur event\n    setTimeout(() => el.blur());\n    const blurEvent = await oneEvent(el, 'blur');\n    expect(blurEvent).to.exist;\n  });\n\n  it('reflects checked attribute to property', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox checked></nile-checkbox>`);\n    expect(el.checked).to.be.true;\n  });\n\n  it('reflects indeterminate attribute to property', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox indeterminate></nile-checkbox>`);\n    expect(el.indeterminate).to.be.true;\n  });\n\n  it('associates form using form attribute', async () => {\n    const el = await fixture(html`\n      <div>\n        <form id=\"test-form\"></form>\n        <nile-checkbox form=\"test-form\"></nile-checkbox>\n      </div>\n    `);\n    const checkbox = el.querySelector('nile-checkbox') as NileCheckbox;\n    expect(checkbox).to.not.be.null;\n    expect(checkbox.getAttribute('form')).to.equal('test-form');\n  });\n\n  it('displays and hides help text correctly', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox help-text=\"test-help\"></nile-checkbox>`);\n\n    // Initially, help text should not be shown\n    expect(el.showHelpText).to.be.false;\n\n    // Show the help text\n    el.showHelpText = true;\n    await el.updateComplete;\n    let helpTextIcon = el.shadowRoot!.querySelector('.checkbox__helptext-icon');\n    expect(helpTextIcon).to.exist;\n\n    // Hide the help text\n    el.showHelpText = false;\n    await el.updateComplete;\n    helpTextIcon = el.shadowRoot!.querySelector('.checkbox__helptext-icon');\n    expect(helpTextIcon).to.be.exist;\n  });\n});\n\n"]}
+{"version":3,"file":"nile-checkbox.test.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, html, expect, oneEvent } from '@open-wc/testing';\nimport './nile-checkbox';\nimport { NileCheckbox } from './nile-checkbox';\n\nfunction wait(ms:number=50000) {\n  return new Promise(resolve => setTimeout(resolve, ms));\n}\n\ndescribe('NileCheckbox', () => {\n  it('renders correctly with default properties', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n    expect(el).shadowDom.to.equalSnapshot();\n  });\n\n  it('toggles checked state on click', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n    const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n    input.click();\n    expect(el.checked).to.be.true;\n    input.click();\n    expect(el.checked).to.be.false;\n  });\n\n  it('emits nile-change event on click', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n    const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n    setTimeout(() => input.click());\n    const event = await oneEvent(el, 'valueChange');\n    expect(event.detail.checked).to.be.true;\n  });\n\n  it('handles focus and blur events', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n    const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n    // Focus the input and wait for the focus event\n    setTimeout(() => input.focus());\n    const focusEvent = await oneEvent(el, 'focus');\n    expect(focusEvent).to.exist;\n\n    // Blur the input and wait for the blur event\n    setTimeout(() => input.blur());\n    const blurEvent = await oneEvent(el, 'blur');\n    expect(blurEvent).to.exist;\n  });\n\n  it('handles indeterminate state', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox indeterminate></nile-checkbox>`);\n    const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n    expect(input.indeterminate).to.be.true;\n\n    el.checked = true;\n    el.indeterminate = false;\n    await el.updateComplete;\n    expect(input.indeterminate).to.be.false;\n    expect(input.checked).to.be.true;\n  });\n\n  it('reflects properties to attributes', async () => {\n    const el = await fixture<NileCheckbox>(html`\n      <nile-checkbox\n        name=\"test-name\"\n        title=\"test-title\"\n        disabled\n        required\n        label=\"test-label\"\n        sub-label=\"test-sublabel\"\n        help-text=\"test-help\"\n        error-message=\"test-error\"\n      ></nile-checkbox>\n    `);\n\n    expect(el.getAttribute('name')).to.equal('test-name');\n    expect(el.getAttribute('title')).to.equal('test-title');\n    expect(el.getAttribute('disabled')).to.equal('');\n    expect(el.getAttribute('required')).to.equal('');\n    expect(el.getAttribute('label')).to.equal('test-label');\n    expect(el.getAttribute('sub-label')).to.equal('test-sublabel');\n    expect(el.getAttribute('help-text')).to.equal('test-help');\n    expect(el.getAttribute('error-message')).to.equal('test-error');\n  });\n\n  it('displays help text when showHelpText is true', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox help-text=\"test-help\"></nile-checkbox>`);\n    el.showHelpText = true;\n    await el.updateComplete;\n    const helpText=el.shadowRoot?.querySelector(\"nile-form-help-text\")?.textContent?.trim()\n    expect(helpText).to.equal('test-help')\n  });\n\n  it('updates host class based on helpText', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n    el.helpText = 'test-help';\n    await el.updateComplete;\n\n    expect(el.classList.contains('full-width')).to.be.true;\n\n    el.helpText = '';\n    await el.updateComplete;\n\n    expect(el.classList.contains('full-width')).to.be.false;\n  });\n\n  it('emits custom events on connected and disconnected', async () => {\n    const el = document.createElement('nile-checkbox');\n\n    // Wait for the connected event\n    const initEventPromise = oneEvent(el, 'nile-init');\n    document.body.appendChild(el);\n    const initEvent = await initEventPromise;\n    expect(initEvent).to.exist;\n\n    // Wait for the disconnected event\n    const destroyEventPromise = oneEvent(el, 'nile-destroy');\n    document.body.removeChild(el);\n    const destroyEvent = await destroyEventPromise;\n    expect(destroyEvent).to.exist;\n  });\n\n  it('handles required attribute', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox required></nile-checkbox>`);\n    const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n    expect(input.required).to.be.true;\n  });\n\n  it('simulates click using click method', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n    el.click();\n    expect(el.checked).to.be.true;\n  });\n\n  it('sets and removes focus using focus and blur methods', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n\n    // Call the focus method and wait for the focus event\n    setTimeout(() => el.focus());\n    const focusEvent = await oneEvent(el, 'focus');\n    expect(focusEvent).to.exist;\n\n    // Call the blur method and wait for the blur event\n    setTimeout(() => el.blur());\n    const blurEvent = await oneEvent(el, 'blur');\n    expect(blurEvent).to.exist;\n  });\n\n  it('reflects checked attribute to property', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox checked></nile-checkbox>`);\n    expect(el.checked).to.be.true;\n  });\n\n  it('reflects indeterminate attribute to property', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox indeterminate></nile-checkbox>`);\n    expect(el.indeterminate).to.be.true;\n  });\n\n  it('associates form using form attribute', async () => {\n    const el = await fixture(html`\n      <div>\n        <form id=\"test-form\"></form>\n        <nile-checkbox form=\"test-form\"></nile-checkbox>\n      </div>\n    `);\n    const checkbox = el.querySelector('nile-checkbox') as NileCheckbox;\n    expect(checkbox).to.not.be.null;\n    expect(checkbox.getAttribute('form')).to.equal('test-form');\n  });\n\n});\n\n"]}

package/dist/src/nile-form-group/nile-form-group.css.js

@@ -20,7 +20,7 @@ export const styles = css `
     width: max-content;
     box-shadow: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);
     border-radius: var(--nile-radius-base-standard);
-    border: 1px solid var(--nile-colors-button-secondary);
+    border: 1px solid var(--nile-colors-neutral-400);
     background: var(--nile-colors-white-base);
     font-family: var(--nile-font-family-serif);
   }

package/dist/src/nile-form-group/nile-form-group.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-form-group.css.js","sourceRoot":"","sources":["../../../src/nile-form-group/nile-form-group.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwExB,CAAC;AACF,eAAe,CAAC,MAAM,CAAC,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';\n\n/**\n * FormGroup CSS\n */\nexport const styles = css`\n  :host {\n    --min-width: 288px;\n  }\n\n  .form__base {\n    display: flex;\n    flex-direction: column;\n    min-width: var(--min-width);\n    width: max-content;\n    box-shadow: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);\n    border-radius: var(--nile-radius-base-standard);\n    border: 1px solid var(--nile-colors-button-secondary);\n    background: var(--nile-colors-white-base);\n    font-family: var(--nile-font-family-serif);\n  }\n\n  .form__header {\n    width: 100%;\n    height: 82px;\n    box-sizing: border-box;\n    padding: var(--nile-spacing-3-x);\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--nile-spacing-1-x);\n    border-radius: var(--nile-radius-base-standard)\n      var(--nile-radius-base-standard) 0 0;\n    background: var(--nile-colors-neutral-100);\n  }\n\n  .form__title-content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--nile-spacing-1-x);\n    justify-content:centre;\n  }\n\n\n\n  .form__title {\n    display: block;\n    color: var(--nile-colors-dark-900);\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-4);\n    font-style: normal;\n    font-weight: 500;\n    line-height: var(--nile-type-scale-4);\n    letter-spacing: 0.2px;\n  }\n\n  .form__subtitle {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-type-scale-2);\n    letter-spacing: 0.2px;\n  }\n\n  .form__body {\n    width: 100%;\n    box-sizing: border-box;\n    padding: var(--nile-spacing-3-x);\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-3-x);\n  }\n`;\nexport default [styles];\n"]}
+{"version":3,"file":"nile-form-group.css.js","sourceRoot":"","sources":["../../../src/nile-form-group/nile-form-group.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwExB,CAAC;AACF,eAAe,CAAC,MAAM,CAAC,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';\n\n/**\n * FormGroup CSS\n */\nexport const styles = css`\n  :host {\n    --min-width: 288px;\n  }\n\n  .form__base {\n    display: flex;\n    flex-direction: column;\n    min-width: var(--min-width);\n    width: max-content;\n    box-shadow: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);\n    border-radius: var(--nile-radius-base-standard);\n    border: 1px solid var(--nile-colors-neutral-400);\n    background: var(--nile-colors-white-base);\n    font-family: var(--nile-font-family-serif);\n  }\n\n  .form__header {\n    width: 100%;\n    height: 82px;\n    box-sizing: border-box;\n    padding: var(--nile-spacing-3-x);\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--nile-spacing-1-x);\n    border-radius: var(--nile-radius-base-standard)\n      var(--nile-radius-base-standard) 0 0;\n    background: var(--nile-colors-neutral-100);\n  }\n\n  .form__title-content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--nile-spacing-1-x);\n    justify-content:centre;\n  }\n\n\n\n  .form__title {\n    display: block;\n    color: var(--nile-colors-dark-900);\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-4);\n    font-style: normal;\n    font-weight: 500;\n    line-height: var(--nile-type-scale-4);\n    letter-spacing: 0.2px;\n  }\n\n  .form__subtitle {\n    display: block;\n    color: var(--nile-colors-dark-500);\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-type-scale-2);\n    letter-spacing: 0.2px;\n  }\n\n  .form__body {\n    width: 100%;\n    box-sizing: border-box;\n    padding: var(--nile-spacing-3-x);\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-3-x);\n  }\n`;\nexport default [styles];\n"]}

package/dist/src/nile-stepper-item/nile-stepper-item.css.js

@@ -15,7 +15,6 @@ export const styles = css `
 		
 		display:inline-block;
 		flex-grow:var(--stepper-flex-val);
-		color: var(--nile-stepper-color-text-default);
 		min-width:var(--nile-stepper-min-width);
 	}
 	

package/dist/src/nile-stepper-item/nile-stepper-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-stepper-item.css.js","sourceRoot":"","sources":["../../../src/nile-stepper-item/nile-stepper-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkIxB,CAAC;AACF,eAAe,CAAC,MAAM,CAAC,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';\n\n/**\n * StepperItem CSS\n */\nexport const styles = css`\n\t:host {\n\t\t--stepper-flex-val:1;\n\t\t--bulletin--dot--seperation:30%;\n\t\t\n\t\tdisplay:inline-block;\n\t\tflex-grow:var(--stepper-flex-val);\n\t\tcolor: var(--nile-stepper-color-text-default);\n\t\tmin-width:var(--nile-stepper-min-width);\n\t}\n\t\n\t.stepper__item {\n\t\tmargin: 0 -1px;\n\t}\n\n\t.stepper__item--sm {\n\t\t--item-spacing: var(--nile-spacing-spacing-lg,12px);\n\t\t--stepper-item-title-size:14px;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:20px;\n\t\t--circle-height:16px;\n\t}\n\n\t.stepper__item--md {\n\t\t--item-spacing: var(--nile-spacing-spacing-xl, 16px);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:16px;\n\t\t--stepper-item-text-line-heightt:24px;\n\t\t--circle-height:20px;\n\t}\n\n\t.stepper__item--lg {\n\t\t--item-spacing: var(--nile-spacing-spacing-xl, 16px);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:16px;\n\t\t--stepper-item-text-line-height:24px;\n\t\t--circle-height:28px;\n\t}\n\n\t.stepper__line__content {\n\t\tdisplay:flex;\n\t\twidth:100%;\n\t\talign-items:center;\n\t}\n\n\t.stepper__line__container {\n\t\tflex-grow:1;\n\t\tpadding:0 1px;\n\t}\n\n\t.stepper__line--hastitle {\n\t\tdisplay:flex;\n\t\talign-items:center;\n\t}\n\n\t.stepper__line {\n\t\tdisplay: block;\n\t\tborder: 0;\n\t\tborder-top: 2px solid var(--nile-colors-gray-light-mode-200, #eaecf0);\n\t}\n\n\t.stepper__line--active {\n\t\tborder-top: 2px solid var(--nile-colors-primary-600,#005EA6);\n\t}\n\n\t.stepper__item__content--below {\n\t\tmargin-top: var(--item-spacing);\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\talign-items:center;\n\t}\n\t\n\t.stepper__item__bulletin {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\tmargin:0 -1px;\n\t}\n\n\t.stepper__content__title {\n\t\tcolor:var(--nile-colors-gray-light-mode-700, #344054);\n\t\tfont-size: var(--stepper-item-title-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-medium);\n\t\tfont-weight: 600;\n\t}\n\n\t.stepper__content__title--inline{\n\t\tpadding: 0 8px;\n\t\tcolor:var(--nile-colors-gray-light-mode-500, #667085);\n\t}\n\n\t.stepper__content__title--active{\n\t\tcolor:var(--nile-colors-primary-700, #005291);\n\t}\n\n\t.stepper__content__subtitle {\n\t\tcolor:var(--nile-colors-gray-light-mode-600, #475467);\n\t\tfont-size: var(--stepper-item-subtitle-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-sans-serif);\n\t\tfont-weight: 400;\n\t}\n\n\t.stepper__content__subtitle--active{\n\t\tcolor:var(--nile-colors-primary-600, #005EA6);\n\t}\n\n\t.stepper__bulletin--dot {\n\t\twidth: var(--circle-height);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground: radial-gradient(var(--nile-colors-gray-light-mode-300, #d0d5dd) var(--bulletin--dot--seperation), var(--nile-colors-gray-neutral-50, #f9fafb) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid var(--nile-colors-gray-light-mode-200, #eaecf0);\n\t}\n\n\t.stepper__bulletin__dot--active{\n\t\tbackground: radial-gradient(#fff var(--bulletin--dot--seperation), var(--nile-colors-primary-600, #005EA6) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid #85AAD18A;\n\t}\n\n\t.stepper__bulletin--icon {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\twidth: var(--circle-height);\n\t\tborder: 2px solid var(--nile-colors-primary-600, #005EA6);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground-color:var(--nile-colors-primary-600, #005EA6);\n\t\toverflow:hidden;\n\t}\n`;\nexport default [styles];"]}
+{"version":3,"file":"nile-stepper-item.css.js","sourceRoot":"","sources":["../../../src/nile-stepper-item/nile-stepper-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiIxB,CAAC;AACF,eAAe,CAAC,MAAM,CAAC,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';\n\n/**\n * StepperItem CSS\n */\nexport const styles = css`\n\t:host {\n\t\t--stepper-flex-val:1;\n\t\t--bulletin--dot--seperation:30%;\n\t\t\n\t\tdisplay:inline-block;\n\t\tflex-grow:var(--stepper-flex-val);\n\t\tmin-width:var(--nile-stepper-min-width);\n\t}\n\t\n\t.stepper__item {\n\t\tmargin: 0 -1px;\n\t}\n\n\t.stepper__item--sm {\n\t\t--item-spacing: var(--nile-spacing-spacing-lg,12px);\n\t\t--stepper-item-title-size:14px;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:20px;\n\t\t--circle-height:16px;\n\t}\n\n\t.stepper__item--md {\n\t\t--item-spacing: var(--nile-spacing-spacing-xl, 16px);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:16px;\n\t\t--stepper-item-text-line-heightt:24px;\n\t\t--circle-height:20px;\n\t}\n\n\t.stepper__item--lg {\n\t\t--item-spacing: var(--nile-spacing-spacing-xl, 16px);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:16px;\n\t\t--stepper-item-text-line-height:24px;\n\t\t--circle-height:28px;\n\t}\n\n\t.stepper__line__content {\n\t\tdisplay:flex;\n\t\twidth:100%;\n\t\talign-items:center;\n\t}\n\n\t.stepper__line__container {\n\t\tflex-grow:1;\n\t\tpadding:0 1px;\n\t}\n\n\t.stepper__line--hastitle {\n\t\tdisplay:flex;\n\t\talign-items:center;\n\t}\n\n\t.stepper__line {\n\t\tdisplay: block;\n\t\tborder: 0;\n\t\tborder-top: 2px solid var(--nile-colors-gray-light-mode-200, #eaecf0);\n\t}\n\n\t.stepper__line--active {\n\t\tborder-top: 2px solid var(--nile-colors-primary-600,#005EA6);\n\t}\n\n\t.stepper__item__content--below {\n\t\tmargin-top: var(--item-spacing);\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\talign-items:center;\n\t}\n\t\n\t.stepper__item__bulletin {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\tmargin:0 -1px;\n\t}\n\n\t.stepper__content__title {\n\t\tcolor:var(--nile-colors-gray-light-mode-700, #344054);\n\t\tfont-size: var(--stepper-item-title-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-medium);\n\t\tfont-weight: 600;\n\t}\n\n\t.stepper__content__title--inline{\n\t\tpadding: 0 8px;\n\t\tcolor:var(--nile-colors-gray-light-mode-500, #667085);\n\t}\n\n\t.stepper__content__title--active{\n\t\tcolor:var(--nile-colors-primary-700, #005291);\n\t}\n\n\t.stepper__content__subtitle {\n\t\tcolor:var(--nile-colors-gray-light-mode-600, #475467);\n\t\tfont-size: var(--stepper-item-subtitle-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-sans-serif);\n\t\tfont-weight: 400;\n\t}\n\n\t.stepper__content__subtitle--active{\n\t\tcolor:var(--nile-colors-primary-600, #005EA6);\n\t}\n\n\t.stepper__bulletin--dot {\n\t\twidth: var(--circle-height);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground: radial-gradient(var(--nile-colors-gray-light-mode-300, #d0d5dd) var(--bulletin--dot--seperation), var(--nile-colors-gray-neutral-50, #f9fafb) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid var(--nile-colors-gray-light-mode-200, #eaecf0);\n\t}\n\n\t.stepper__bulletin__dot--active{\n\t\tbackground: radial-gradient(#fff var(--bulletin--dot--seperation), var(--nile-colors-primary-600, #005EA6) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid #85AAD18A;\n\t}\n\n\t.stepper__bulletin--icon {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\twidth: var(--circle-height);\n\t\tborder: 2px solid var(--nile-colors-primary-600, #005EA6);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground-color:var(--nile-colors-primary-600, #005EA6);\n\t\toverflow:hidden;\n\t}\n`;\nexport default [styles];"]}

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

@@ -48,6 +48,7 @@ export declare class NileToast extends NileElement {
     hasSlottedContent: boolean;
     hasSlottedIcon: boolean;
     prefixImageUrl: string;
+    closeIconName: string;
     /** The alert's theme variant. */
     variant: 'success' | 'info' | 'warning' | 'error' | 'gray' | 'black';
     /**

package/dist/src/nile-toast/nile-toast.js

@@ -58,6 +58,7 @@ let NileToast = class NileToast extends NileElement {
         this.hasSlottedContent = false;
         this.hasSlottedIcon = false;
         this.prefixImageUrl = '';
+        this.closeIconName = 'close';
         /** The alert's theme variant. */
         this.variant = 'success';
         /**
@@ -294,7 +295,7 @@ let NileToast = class NileToast extends NileElement {
                 part="close-button"
                 exportparts="base:close-button__base"
                 class="alert__close-button"
-                name="close"
+                name="${this.closeIconName}"
                 label="close"
                 size="20"
                 color="#98A2B3"
@@ -328,6 +329,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], NileToast.prototype, "prefixImageUrl", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileToast.prototype, "closeIconName", void 0);
 __decorate([
     property({ reflect: true })
 ], NileToast.prototype, "variant", void 0);

package/dist/src/nile-toast/nile-toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-toast.js","sourceRoot":"","sources":["../../../src/nile-toast/nile-toast.ts"],"names":[],"mappings":"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","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 { LitElement, CSSResultArray, TemplateResult } from 'lit';\n\nimport '../nile-icon-button/nile-icon-button';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { HasSlotController } from '../internal/slot';\nimport { html } from 'lit';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport { styles } from './nile-toast.css';\nimport type { CSSResultGroup } from 'lit';\n\nconst toastStack = Object.assign(document.createElement('div'), {\n  className: 'nile-toast-stack',\n});\n\n/**\n * Nile icon component.\n *\n * @tag nile-toast\n *\n * @dependency nile-icon-button\n *\n * @slot - The alert's main content.\n * @slot icon - An icon to show in the alert. Works best with `<nile-icon>`.\n *\n * @event nile-show - Emitted when the alert opens.\n * @event nile-after-show - Emitted after the alert opens and all animations are complete.\n * @event nile-hide - Emitted when the alert closes.\n * @event nile-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart icon - The container that wraps the optional icon.\n * @csspart message - The container that wraps the alert's main content.\n * @csspart close-button - The close button, an `<nile-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\n\n@customElement('nile-toast')\nexport class NileToast extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private autoHideTimeout: number;\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'icon',\n    'suffix'\n  );\n\n  @query('[part~=\"base\"]') base: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ type: Boolean, reflect: true }) noIcon = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n\n  @property({ type: Boolean, reflect: true }) closable = false;\n\n  @property({ type: Boolean, reflect: true }) hasSlottedContent = false;\n\n  @property({ type: Boolean, reflect: true }) hasSlottedIcon = false;\n\n  @property({ type: String, reflect: true }) prefixImageUrl = '';\n\n  /** The alert's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'success'\n    | 'info'\n    | 'warning'\n    | 'error'\n    | 'gray'\n    | 'black' = 'success';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number }) duration = Infinity;\n\n  @property({ type: String }) title = '';\n\n  @property({ type: String }) content = '';\n\n  @property({ type: Array, reflect: true }) tags: any[] = [];\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.duration\n      );\n    }\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleMouseMove() {\n    this.restartAutoHide();\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit('nile-show');\n\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show', {\n        dir: 'ltr',\n      });\n      await animateTo(this.base, keyframes, options);\n\n      this.emit('nile-after-show');\n    } else {\n      // Hide\n      this.emit('nile-hide');\n\n      clearTimeout(this.autoHideTimeout);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide', {\n        dir: 'ltr',\n      });\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.emit('nile-after-hide');\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Shows the alert. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'nile-after-show');\n  }\n\n  /** Hides the alert */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'nile-after-hide');\n  }\n\n  getIconNameByVariant() {\n    switch (this.variant) {\n      case 'success':\n        return 'check-circle';\n      case 'info':\n        return 'info-circle';\n      case 'warning':\n        return 'alert-circle';\n      case 'error':\n        return 'alert-circle';\n      case 'gray':\n        return 'info-circle';\n      case 'black':\n        return 'info-circle';\n    }\n  }\n\n  getIconColorByVariant() {\n    switch (this.variant) {\n      case 'success':\n        return 'var(--nile-toast-color-icon-color-success)';\n      case 'info':\n        return 'var(--nile-toast-color-icon-color-info)';\n      case 'warning':\n        return 'var(--nile-toast-color-icon-color-warning)';\n      case 'error':\n        return 'var(--nile-toast-color-icon-color-error)';\n      case 'gray':\n        return 'var(--nile-toast-color-icon-color-gray)';\n      case 'black':\n        return 'var(--nile-toast-color-icon-color-black)';\n    }\n  }\n\n  handleSlotChange(e: any) {\n    const slot = e.target;\n    const nodes = slot.assignedNodes({ flatten: true });\n    if (slot.name === 'message') {\n      const nodes = slot.assignedNodes({ flatten: true });\n      this.hasSlottedContent = nodes.length > 0;\n    }\n\n    if (slot.name === 'icon') {\n      const nodes = slot.assignedNodes({ flatten: true });\n      this.hasSlottedIcon = nodes.length > 0;\n    }\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast() {\n    return new Promise<void>(resolve => {\n      if (toastStack.parentElement === null) {\n        document.body.append(toastStack);\n      }\n\n      toastStack.appendChild(this);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- force a reflow for the initial transition\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'nile-after-hide',\n        () => {\n          toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('nile-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  private toastTags(content: string, imageUrl: string) {\n    return html`\n      <div class=\"alert__tag\">\n        <img class=\"alert__tag-image\" src=\"${imageUrl}\" />\n        <span class=\"alert__tag-content\"> ${content} </span>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          alert: true,\n          'alert--open': this.open,\n          'alert--closable': this.closable,\n          'alert--has-icon': this.hasSlotController.test('icon'),\n          'alert--success': this.variant === 'success',\n          'alert--info': this.variant === 'info',\n          'alert--warning': this.variant === 'warning',\n          'alert--error': this.variant === 'error',\n          'alert--gray': this.variant === 'gray',\n          'alert--black': this.variant === 'black',\n          'alert--no-content': this.content === '',\n        })}\n        role=\"alert\"\n        aria-hidden=${this.open ? 'false' : 'true'}\n        @mousemove=${this.handleMouseMove}\n      >\n        <slot name=\"icon\" part=\"icon\" ?hidden=\"${this.noIcon === true}\">\n          ${!this.prefixImageUrl\n            ? html`\n                <div\n                  class=\"alert__prefix-icon-container\"\n                  ?hidden=\"${this.hasSlottedIcon ||\n                  this.prefixImageUrl.length > 0}\"\n                >\n                  <nile-icon\n                    name=\"${this.getIconNameByVariant()}\"\n                    size=\"20\"\n                    color=\"${this.getIconColorByVariant()}\"\n                    method=\"stroke\"\n                  ></nile-icon>\n                </div>\n              `\n            : html`\n                <img src=\"${this.prefixImageUrl}\" class=\"alert__prefix-img\" />\n              `}\n        </slot>\n\n        <slot\n          name=\"message\"\n          part=\"message\"\n          class=\"alert__message\"\n          aria-live=\"polite\"\n          @slotchange=\"${this.handleSlotChange}\"\n        >\n          <span\n            ?hidden=\"${this.hasSlottedContent && this.title === ''}\"\n            class=\"alert__message--title\"\n          >\n            ${this.title}\n          </span>\n          ${this.title\n            ? html` <span\n                ?hidden=\"${this.content === ''}\"\n                class=${classMap({\n                  'alert__message--content': true,\n                  'alert__message--content-only': !!this.title,\n                })}\n              >\n                ${this.content}\n              </span>`\n            : null}\n          ${this.tags?.length > 0\n            ? html`\n                <div class=\"alert__tags\">\n                  ${this.tags.map(\n                    tag =>\n                      html`<span\n                        >${this.toastTags(tag.content, tag.imageUrl)}</span\n                      >`\n                  )}\n                </div>\n              `\n            : ``}\n        </slot>\n\n        ${this.closable\n          ? html`\n              <nile-icon-button\n                part=\"close-button\"\n                exportparts=\"base:close-button__base\"\n                class=\"alert__close-button\"\n                name=\"close\"\n                label=\"close\"\n                size=\"20\"\n                color=\"#98A2B3\"\n                @click=${this.handleCloseClick}\n              ></nile-icon-button>\n            `\n          : null}\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nexport default NileToast;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-toast': NileToast;\n  }\n}\n"]}
+{"version":3,"file":"nile-toast.js","sourceRoot":"","sources":["../../../src/nile-toast/nile-toast.ts"],"names":[],"mappings":"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","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 { LitElement, CSSResultArray, TemplateResult } from 'lit';\n\nimport '../nile-icon-button/nile-icon-button';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { HasSlotController } from '../internal/slot';\nimport { html } from 'lit';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport { styles } from './nile-toast.css';\nimport type { CSSResultGroup } from 'lit';\n\nconst toastStack = Object.assign(document.createElement('div'), {\n  className: 'nile-toast-stack',\n});\n\n/**\n * Nile icon component.\n *\n * @tag nile-toast\n *\n * @dependency nile-icon-button\n *\n * @slot - The alert's main content.\n * @slot icon - An icon to show in the alert. Works best with `<nile-icon>`.\n *\n * @event nile-show - Emitted when the alert opens.\n * @event nile-after-show - Emitted after the alert opens and all animations are complete.\n * @event nile-hide - Emitted when the alert closes.\n * @event nile-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart icon - The container that wraps the optional icon.\n * @csspart message - The container that wraps the alert's main content.\n * @csspart close-button - The close button, an `<nile-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\n\n@customElement('nile-toast')\nexport class NileToast extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private autoHideTimeout: number;\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'icon',\n    'suffix'\n  );\n\n  @query('[part~=\"base\"]') base: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ type: Boolean, reflect: true }) noIcon = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n\n  @property({ type: Boolean, reflect: true }) closable = false;\n\n  @property({ type: Boolean, reflect: true }) hasSlottedContent = false;\n\n  @property({ type: Boolean, reflect: true }) hasSlottedIcon = false;\n\n  @property({ type: String, reflect: true }) prefixImageUrl = '';\n  \n  @property({ type: String, reflect: true }) closeIconName = 'close';\n\n  /** The alert's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'success'\n    | 'info'\n    | 'warning'\n    | 'error'\n    | 'gray'\n    | 'black' = 'success';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number }) duration = Infinity;\n\n  @property({ type: String }) title = '';\n\n  @property({ type: String }) content = '';\n\n  @property({ type: Array, reflect: true }) tags: any[] = [];\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.duration\n      );\n    }\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleMouseMove() {\n    this.restartAutoHide();\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit('nile-show');\n\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show', {\n        dir: 'ltr',\n      });\n      await animateTo(this.base, keyframes, options);\n\n      this.emit('nile-after-show');\n    } else {\n      // Hide\n      this.emit('nile-hide');\n\n      clearTimeout(this.autoHideTimeout);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide', {\n        dir: 'ltr',\n      });\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.emit('nile-after-hide');\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Shows the alert. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'nile-after-show');\n  }\n\n  /** Hides the alert */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'nile-after-hide');\n  }\n\n  getIconNameByVariant() {\n    switch (this.variant) {\n      case 'success':\n        return 'check-circle';\n      case 'info':\n        return 'info-circle';\n      case 'warning':\n        return 'alert-circle';\n      case 'error':\n        return 'alert-circle';\n      case 'gray':\n        return 'info-circle';\n      case 'black':\n        return 'info-circle';\n    }\n  }\n\n  getIconColorByVariant() {\n    switch (this.variant) {\n      case 'success':\n        return 'var(--nile-toast-color-icon-color-success)';\n      case 'info':\n        return 'var(--nile-toast-color-icon-color-info)';\n      case 'warning':\n        return 'var(--nile-toast-color-icon-color-warning)';\n      case 'error':\n        return 'var(--nile-toast-color-icon-color-error)';\n      case 'gray':\n        return 'var(--nile-toast-color-icon-color-gray)';\n      case 'black':\n        return 'var(--nile-toast-color-icon-color-black)';\n    }\n  }\n\n  handleSlotChange(e: any) {\n    const slot = e.target;\n    const nodes = slot.assignedNodes({ flatten: true });\n    if (slot.name === 'message') {\n      const nodes = slot.assignedNodes({ flatten: true });\n      this.hasSlottedContent = nodes.length > 0;\n    }\n\n    if (slot.name === 'icon') {\n      const nodes = slot.assignedNodes({ flatten: true });\n      this.hasSlottedIcon = nodes.length > 0;\n    }\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast() {\n    return new Promise<void>(resolve => {\n      if (toastStack.parentElement === null) {\n        document.body.append(toastStack);\n      }\n\n      toastStack.appendChild(this);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- force a reflow for the initial transition\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'nile-after-hide',\n        () => {\n          toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('nile-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  private toastTags(content: string, imageUrl: string) {\n    return html`\n      <div class=\"alert__tag\">\n        <img class=\"alert__tag-image\" src=\"${imageUrl}\" />\n        <span class=\"alert__tag-content\"> ${content} </span>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          alert: true,\n          'alert--open': this.open,\n          'alert--closable': this.closable,\n          'alert--has-icon': this.hasSlotController.test('icon'),\n          'alert--success': this.variant === 'success',\n          'alert--info': this.variant === 'info',\n          'alert--warning': this.variant === 'warning',\n          'alert--error': this.variant === 'error',\n          'alert--gray': this.variant === 'gray',\n          'alert--black': this.variant === 'black',\n          'alert--no-content': this.content === '',\n        })}\n        role=\"alert\"\n        aria-hidden=${this.open ? 'false' : 'true'}\n        @mousemove=${this.handleMouseMove}\n      >\n        <slot name=\"icon\" part=\"icon\" ?hidden=\"${this.noIcon === true}\">\n          ${!this.prefixImageUrl\n            ? html`\n                <div\n                  class=\"alert__prefix-icon-container\"\n                  ?hidden=\"${this.hasSlottedIcon ||\n                  this.prefixImageUrl.length > 0}\"\n                >\n                  <nile-icon\n                    name=\"${this.getIconNameByVariant()}\"\n                    size=\"20\"\n                    color=\"${this.getIconColorByVariant()}\"\n                    method=\"stroke\"\n                  ></nile-icon>\n                </div>\n              `\n            : html`\n                <img src=\"${this.prefixImageUrl}\" class=\"alert__prefix-img\" />\n              `}\n        </slot>\n\n        <slot\n          name=\"message\"\n          part=\"message\"\n          class=\"alert__message\"\n          aria-live=\"polite\"\n          @slotchange=\"${this.handleSlotChange}\"\n        >\n          <span\n            ?hidden=\"${this.hasSlottedContent && this.title === ''}\"\n            class=\"alert__message--title\"\n          >\n            ${this.title}\n          </span>\n          ${this.title\n            ? html` <span\n                ?hidden=\"${this.content === ''}\"\n                class=${classMap({\n                  'alert__message--content': true,\n                  'alert__message--content-only': !!this.title,\n                })}\n              >\n                ${this.content}\n              </span>`\n            : null}\n          ${this.tags?.length > 0\n            ? html`\n                <div class=\"alert__tags\">\n                  ${this.tags.map(\n                    tag =>\n                      html`<span\n                        >${this.toastTags(tag.content, tag.imageUrl)}</span\n                      >`\n                  )}\n                </div>\n              `\n            : ``}\n        </slot>\n\n        ${this.closable\n          ? html`\n              <nile-icon-button\n                part=\"close-button\"\n                exportparts=\"base:close-button__base\"\n                class=\"alert__close-button\"\n                name=\"${this.closeIconName}\"\n                label=\"close\"\n                size=\"20\"\n                color=\"#98A2B3\"\n                @click=${this.handleCloseClick}\n              ></nile-icon-button>\n            `\n          : null}\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nexport default NileToast;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-toast': NileToast;\n  }\n}\n"]}