@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.4

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8wBxB,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    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: var(--nile-border-size-1, var(--ng-border-width-1));\n    font-style: normal;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\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, var(--ng-transition-duration-default)) background-color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n    cursor: inherit;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));\n    padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));\n    gap: var(--nile-spacing-5px, var(--ng-spacing-xs));\n    line-height: var(--nile-type-scale-6, var(--ng-spacing-5));\n    box-sizing: border-box;\n    height: var(--nile-height-40px, var(--ng-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: var(--nile-outline-5px, --ng-outline-5px) auto var(--ng-colors-bg-brand-solid, -webkit-focus-ring-color);\n    outline-offset: var(--ng-outline-2px, --ng-outline-4px);\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  position: relative;\n  overflow: hidden; \n  background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  border-color: var(--nile-colors-primary-600);\n  border-width: var(--nile-border-width-1, var(--ng-border-width-0));\n  border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n  box-shadow: var(--nile-textarea-standard-disabled-box-shadow, var(--ng-shadow-none));\n}\n\n.button--standard.button--primary::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background:  var(--ng-skeuemorphic-gradient-border);\n  mask: var(--ng-mask-rim);\n  mask-composite: var(--ng-mask-composite-exclude);  \n  padding: var(--ng-spacing-xxs); \n}\n\n \n.button--standard.button--primary::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--ng-shadow-xs-skeuomorphic)\n}\n\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n    border-color: var(--nile-colors-primary-700, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-900, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\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, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-border-none));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-shadow-xs-skeuomorphic));\n    border-width:var(--nile-border-width-1, var(--ng-border-width-0));\n    border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\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, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\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    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--tertiary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring));\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary)) ;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n    border-color:  var(--nile-border-color-transparent,  var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\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: var(--nile-border-color-transparent,var(--ng-colors-bg-primary));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-neutral-500,var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\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: var(--nile-colors-red-700);\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    position: relative;\n    overflow: hidden; \n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color: var(--nile-colors-red-500);\n    border-width: var(--nile-border-width-1, var(--ng-border-width-0));\n    border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-none));\n  }\n\n\n  .button--standard.button--destructive::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background:  var(--ng-skeuemorphic-gradient-border);\n  mask: var(--ng-mask-rim);\n  mask-composite: var(--ng-mask-composite-exclude);  \n  padding: var(--ng-spacing-xxs); \n}\n\n \n.button--standard.button--destructive::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--ng-shadow-xs-skeuomorphic)\n}\n\n  .button--standard.button--destructive:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));\n    border-color: var(--nile-colors-red-700, var(--ng-primary-standard));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .button--standard.button--destructive:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n  .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-error-shadow-xs-skeumorphic))\n  }\n\n  .button--standard.button--destructive.button--disabled {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--destructive.button--disabled:active {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-primary-standard));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--destructive.button--disabled:hover {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  /* secondary-Grey */\n  .button--standard.button--secondary-grey {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\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: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\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: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\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: var(--nile-colors-neutral-400);\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--secondary-grey.button--disabled:hover,\n  .button--standard.button--secondary-grey.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* secondary-blue */\n  .button--standard.button--secondary-blue {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\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: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\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: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\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: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\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: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\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, var(--ng-componentcolors-components-button-primary-icon)) !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, var(--ng-componentcolors-components-button-primary-icon-hover)) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !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, var(--ng-colors-fg-quaternary-400)) !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, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled-subtle)) !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, var(--ng-colors-fg-quaternary-400)) !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, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-quaternary-400)) !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: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon)) !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: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !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: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\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: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-100);\n  }\n\n  .button--outline.button--destructive:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\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: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\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: var(--nile-colors-primary-900);\n    background-color: var(--nile-colors-neutral-100);\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: var(--nile-colors-primary-700);\n    background-color: var(--nile-colors-blue-100);\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: var(--nile-radius-2xl);\n  }\n\n  .button--pill.button--medium {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: var(--nile-spacing-none);\n    padding-right: var(--nile-spacing-none);\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: var(--nile-type-scale-3);\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n  /* outline with no border */\n  .button--outline.button--hideborder {\n    border: 0px;\n  }\n`;\n"]}

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

@@ -0,0 +1,426 @@
+import { __decorate } from "tslib";
+import '../nile-icon';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { FormControlController, validValidityState } from '../internal/form';
+import { HasSlotController } from '../internal/slot';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { watch } from '../internal/watch';
+import { styles } from './nile-button.css';
+import NileElement from '../internal/nile-element';
+import { literal } from 'lit/static-html.js';
+/**
+ * @summary Buttons represent actions that are available to the user.
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency nile-icon
+ * @dependency nile-spinner
+ *
+ * @event nile-blur - Emitted when the button loses focus.
+ * @event nile-focus - Emitted when the button gains focus.
+ * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @slot - The button's label.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart label - The button's label.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart caret - The button's caret icon, an `<nile-icon>` element.
+ */
+let NileButton = class NileButton extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.formControlController = new FormControlController(this, {
+            form: input => {
+                // Buttons support a form attribute that points to an arbitrary form, so if this attribute is set we need to query
+                // the form from the same root using its id
+                if (input.hasAttribute('form')) {
+                    const doc = input.getRootNode();
+                    const formId = input.getAttribute('form');
+                    return doc.getElementById(formId);
+                }
+                // Fall back to the closest containing form
+                return input.closest('form');
+            },
+            assumeInteractionOn: ['click'],
+        });
+        this.hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
+        this.hasFocus = false;
+        this.invalid = false;
+        this.title = ''; // make reactive to pass through
+        /** The button's theme variant. */
+        this.variant = 'primary';
+        /** The button's size. */
+        this.size = 'medium';
+        /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
+        this.caret = false;
+        /** Disables the button. */
+        this.disabled = false;
+        /** Draws the button in a loading state. */
+        this.loading = false;
+        /** Draws an outlined button. */
+        this.outline = false;
+        /** Draws a pill-style button with rounded edges. */
+        this.pill = false;
+        /**
+         * Draws a circular icon button. When this attribute is present, the button expects a single `<nile-icon>` in the
+         * default slot.
+         */
+        this.circle = false;
+        /**
+         * The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native
+         * `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.
+         */
+        this.type = 'button';
+        /**
+         * The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.
+         * This attribute is ignored when `href` is present.
+         */
+        this.name = '';
+        /**
+         * The value of the button, submitted as a pair with the button's name as part of the form data, but only when this
+         * button is the submitter. This attribute is ignored when `href` is present.
+         */
+        this.value = '';
+        /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
+        this.href = '';
+        /**
+         * When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the
+         * default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a
+         * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by
+         * setting the attribute to an empty string or a value of your choice, respectively.
+         */
+        this.rel = 'noreferrer noopener';
+        this.hideBorder = false;
+    }
+    /** Gets the validity state object */
+    get validity() {
+        if (this.isButton()) {
+            return this.button.validity;
+        }
+        return validValidityState;
+    }
+    /** Gets the validation message */
+    get validationMessage() {
+        if (this.isButton()) {
+            return this.button.validationMessage;
+        }
+        return '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleHostClick = this.handleHostClick.bind(this);
+        this.addEventListener('click', this.handleHostClick);
+        this.emit('nile-init');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.handleHostClick);
+        this.emit('nile-destroy');
+    }
+    firstUpdated() {
+        if (this.isButton()) {
+            this.formControlController.updateValidity();
+        }
+    }
+    handleBlur() {
+        this.hasFocus = false;
+        this.emit('nile-blur');
+    }
+    handleFocus() {
+        this.hasFocus = true;
+        this.emit('nile-focus');
+    }
+    handleClick() {
+        if (this.type === 'submit') {
+            this.formControlController.submit(this);
+        }
+        if (this.type === 'reset') {
+            this.formControlController.reset(this);
+        }
+    }
+    handleHostClick(event) {
+        // Prevent the click event from being emitted when the button is disabled or loading
+        if (this.disabled || this.loading) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    handleInvalid(event) {
+        this.formControlController.setValidity(false);
+        this.formControlController.emitInvalidEvent(event);
+    }
+    isButton() {
+        return this.href ? false : true;
+    }
+    isLink() {
+        return this.href ? true : false;
+    }
+    handleDisabledChange() {
+        if (this.isButton()) {
+            // Disabled form controls are always valid
+            this.formControlController.setValidity(this.disabled);
+        }
+    }
+    /** Simulates a click on the button. */
+    click() {
+        this.button.click();
+    }
+    /** Sets focus on the button. */
+    focus(options) {
+        this.button.focus(options);
+    }
+    /** Removes focus from the button. */
+    blur() {
+        this.button.blur();
+    }
+    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+    checkValidity() {
+        if (this.isButton()) {
+            return this.button.checkValidity();
+        }
+        return true;
+    }
+    /** Gets the associated form, if one exists. */
+    getForm() {
+        return this.formControlController.getForm();
+    }
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity() {
+        if (this.isButton()) {
+            return this.button.reportValidity();
+        }
+        return true;
+    }
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(message) {
+        if (this.isButton()) {
+            this.button.setCustomValidity(message);
+            this.formControlController.updateValidity();
+        }
+    }
+    render() {
+        const isLink = this.isLink();
+        const tag = isLink ? literal `a` : literal `button`;
+        const variantCaretColors = {
+            primary: this.disabled ? 'var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon))',
+            secondary: this.disabled ? 'var(--nile-colors-dark-900, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400))',
+            tertiary: this.disabled ? 'var(--nile-colors-dark-900, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400))',
+            caution: 'white',
+            ghost: 'black',
+            destructive: this.disabled ? 'var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon))',
+            'secondary-grey': 'black',
+            'secondary-blue': 'black',
+            'tertiary-blue': 'black',
+        };
+        if (this.isLink()) {
+            return html `
+        <a
+          part="base"
+          class=${classMap({
+                button: true,
+                'button--primary': this.variant === 'primary',
+                'button--secondary': this.variant === 'secondary',
+                'button--tertiary': this.variant === 'tertiary',
+                'button--caution': this.variant === 'caution',
+                'button--ghost': this.variant === 'ghost',
+                'button--destructive': this.variant === 'destructive',
+                'button--secondary-grey': this.variant === 'secondary-grey',
+                'button--secondary-blue': this.variant === 'secondary-blue',
+                'button--hideborder': this.hideBorder,
+                'button--medium': this.size === 'medium',
+                'button--caret': this.caret,
+                'button--circle': this.circle,
+                'button--disabled': this.disabled,
+                'button--focused': this.hasFocus,
+                'button--loading': this.loading,
+                'button--standard': !this.outline,
+                'button--outline': this.outline,
+                'button--pill': this.pill,
+                'button--has-label': this.hasSlotController.test('[default]'),
+                'button--has-prefix': this.hasSlotController.test('prefix'),
+                'button--has-suffix': this.hasSlotController.test('suffix'),
+            })}
+          href=${ifDefined(this.href)}
+          target=${ifDefined(this.target)}
+          download=${ifDefined(this.download)}
+          rel=${ifDefined(this.rel)}
+          title=${this.title}
+          role="button"
+          aria-disabled=${this.disabled ? 'true' : 'false'}
+          tabindex=${this.disabled ? '-1' : '0'}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @click=${this.handleClick}
+        >
+          <slot name="prefix" part="prefix" class="button__prefix"></slot>
+          <slot part="label" class="button__label"></slot>
+          <slot name="suffix" part="suffix" class="button__suffix"></slot>
+          ${this.caret
+                ? html `
+                <nile-icon
+                  part="caret"
+                  class="button__caret"
+                  color="${variantCaretColors[this.variant]}"
+                  name="var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))"
+                  method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+                ></nile-icon>
+              `
+                : ''}
+          ${this.loading ? html `<nile-spinner></nile-spinner>` : ''}
+        </a>
+      `;
+        }
+        else {
+            return html `
+      <button
+        part="base"
+        class=${classMap({
+                button: true,
+                'button--primary': this.variant === 'primary',
+                'button--secondary': this.variant === 'secondary',
+                'button--tertiary': this.variant === 'tertiary',
+                'button--caution': this.variant === 'caution',
+                'button--ghost': this.variant === 'ghost',
+                'button--destructive': this.variant === 'destructive',
+                'button--secondary-grey': this.variant === 'secondary-grey',
+                'button--secondary-blue': this.variant === 'secondary-blue',
+                'button--hideborder': this.hideBorder,
+                'button--medium': this.size === 'medium',
+                'button--caret': this.caret,
+                'button--circle': this.circle,
+                'button--disabled': this.disabled,
+                'button--focused': this.hasFocus,
+                'button--loading': this.loading,
+                'button--standard': !this.outline,
+                'button--outline': this.outline,
+                'button--pill': this.pill,
+                'button--has-label': this.hasSlotController.test('[default]'),
+                'button--has-prefix': this.hasSlotController.test('prefix'),
+                'button--has-suffix': this.hasSlotController.test('suffix'),
+            })}
+        ?disabled=${this.disabled}
+        type=${this.type}
+        name=${ifDefined(this.name)}
+        value=${ifDefined(this.value)}
+        title=${this.title}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @invalid=${this.handleInvalid}
+        @click=${this.handleClick}
+      >
+        <slot name="prefix" part="prefix" class="button__prefix"></slot>
+        <slot part="label" class="button__label"></slot>
+        <slot name="suffix" part="suffix" class="button__suffix"></slot>
+        ${this.caret
+                ? html `
+              <nile-icon
+                part="caret"
+                class="button__caret"
+                color="${variantCaretColors[this.variant]}"
+                name="var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))"
+                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+              ></nile-icon>
+            `
+                : ''}
+        ${this.loading ? html `<nile-spinner></nile-spinner>` : ''}
+      </button>
+    `;
+        }
+    }
+};
+NileButton.styles = styles;
+__decorate([
+    query('.button')
+], NileButton.prototype, "button", void 0);
+__decorate([
+    state()
+], NileButton.prototype, "hasFocus", void 0);
+__decorate([
+    state()
+], NileButton.prototype, "invalid", void 0);
+__decorate([
+    property()
+], NileButton.prototype, "title", void 0);
+__decorate([
+    property({ reflect: true })
+], NileButton.prototype, "variant", void 0);
+__decorate([
+    state()
+], NileButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileButton.prototype, "caret", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileButton.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileButton.prototype, "outline", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileButton.prototype, "pill", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileButton.prototype, "circle", void 0);
+__decorate([
+    property()
+], NileButton.prototype, "type", void 0);
+__decorate([
+    property()
+], NileButton.prototype, "name", void 0);
+__decorate([
+    property()
+], NileButton.prototype, "value", void 0);
+__decorate([
+    property()
+], NileButton.prototype, "href", void 0);
+__decorate([
+    property()
+], NileButton.prototype, "target", void 0);
+__decorate([
+    property()
+], NileButton.prototype, "rel", void 0);
+__decorate([
+    property()
+], NileButton.prototype, "download", void 0);
+__decorate([
+    property()
+], NileButton.prototype, "form", void 0);
+__decorate([
+    property({ attribute: 'formaction' })
+], NileButton.prototype, "formAction", void 0);
+__decorate([
+    property({ attribute: 'formenctype' })
+], NileButton.prototype, "formEnctype", void 0);
+__decorate([
+    property({ attribute: 'formmethod' })
+], NileButton.prototype, "formMethod", void 0);
+__decorate([
+    property({ attribute: 'formnovalidate', type: Boolean })
+], NileButton.prototype, "formNoValidate", void 0);
+__decorate([
+    property({ attribute: 'formtarget' })
+], NileButton.prototype, "formTarget", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-border' })
+], NileButton.prototype, "hideBorder", void 0);
+__decorate([
+    watch('disabled', { waitUntilFirstUpdate: true })
+], NileButton.prototype, "handleDisabledChange", null);
+NileButton = __decorate([
+    customElement('nile-button')
+], NileButton);
+export { NileButton };
+export default NileButton;
+//# sourceMappingURL=nile-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-button.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.ts"],"names":[],"mappings":"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","sourcesContent":["import '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { FormControlController, validValidityState } from '../internal/form';\nimport { HasSlotController } from '../internal/slot';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../internal/watch';\nimport { styles } from './nile-button.css';\nimport type { CSSResultGroup, TemplateResult } from 'lit';\nimport type { NileFormControl } from '../internal/nile-element';\nimport NileElement from '../internal/nile-element';\nimport { literal } from 'lit/static-html.js';\n/**\n * @summary Buttons represent actions that are available to the user.\n * @status stable\n * @since 2.0\n *\n * @dependency nile-icon\n * @dependency nile-spinner\n *\n * @event nile-blur - Emitted when the button loses focus.\n * @event nile-focus - Emitted when the button gains focus.\n * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @slot - The button's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The button's label.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart caret - The button's caret icon, an `<nile-icon>` element.\n */\n\n@customElement('nile-button')\nexport class NileButton extends NileElement implements NileFormControl {\n  static styles: CSSResultGroup = styles;\n\n  private readonly formControlController = new FormControlController(this, {\n    form: input => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute is set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute('form')) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute('form')!;\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest('form');\n    },\n    assumeInteractionOn: ['click'],\n  });\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    '[default]',\n    'prefix',\n    'suffix'\n  );\n\n  @query('.button') button: HTMLButtonElement | HTMLLinkElement;\n\n  @state() private hasFocus = false;\n  @state() invalid = false;\n  @property() title = ''; // make reactive to pass through\n\n  /** The button's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'caution'\n    | 'ghost'\n    | 'destructive'\n    | 'secondary-grey'\n    | 'secondary-blue' = 'primary';\n\n  /** The button's size. */\n  @state() size = 'medium';\n\n  /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */\n  @property({ type: Boolean, reflect: true }) caret = false;\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the button in a loading state. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Draws an outlined button. */\n  @property({ type: Boolean, reflect: true }) outline = false;\n\n  /** Draws a pill-style button with rounded edges. */\n  @property({ type: Boolean, reflect: true }) pill = false;\n\n  /**\n   * Draws a circular icon button. When this attribute is present, the button expects a single `<nile-icon>` in the\n   * default slot.\n   */\n  @property({ type: Boolean, reflect: true }) circle = false;\n\n  /**\n   * The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native\n   * `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.\n   */\n  @property() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.\n   * This attribute is ignored when `href` is present.\n   */\n  @property() name = '';\n\n  /**\n   * The value of the button, submitted as a pair with the button's name as part of the form data, but only when this\n   * button is the submitter. This attribute is ignored when `href` is present.\n   */\n  @property() value = '';\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @property() href = '';\n\n  /** Tells the browser where to open the link. Only used when `href` is present. */\n  @property() target: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the\n   * default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a\n   * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by\n   * setting the attribute to an empty string or a value of your choice, respectively.\n   */\n  @property() rel = 'noreferrer noopener';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */\n  @property() download?: string;\n\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property() form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ attribute: 'formaction' }) formAction: string;\n\n  /** Used to override the form owner's `enctype` attribute.  */\n  @property({ attribute: 'formenctype' })\n  formEnctype:\n    | 'application/x-www-form-urlencoded'\n    | 'multipart/form-data'\n    | 'text/plain';\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ attribute: 'formmethod' }) formMethod: 'post' | 'get';\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: 'formnovalidate', type: Boolean })\n  formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ attribute: 'formtarget' }) formTarget:\n    | '_self'\n    | '_blank'\n    | '_parent'\n    | '_top'\n    | string;\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-border' })\n  hideBorder = false;\n\n  /** Gets the validity state object */\n  get validity() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).validity;\n    }\n\n    return validValidityState;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).validationMessage;\n    }\n\n    return '';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleHostClick = this.handleHostClick.bind(this);\n    this.addEventListener('click', this.handleHostClick);\n    this.emit('nile-init');\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleHostClick);\n    this.emit('nile-destroy');\n  }\n\n  firstUpdated() {\n    if (this.isButton()) {\n      this.formControlController.updateValidity();\n    }\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('nile-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('nile-focus');\n  }\n\n  private handleClick() {\n    if (this.type === 'submit') {\n      this.formControlController.submit(this);\n    }\n\n    if (this.type === 'reset') {\n      this.formControlController.reset(this);\n    }\n  }\n\n  private handleHostClick(event: MouseEvent) {\n    // Prevent the click event from being emitted when the button is disabled or loading\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private isButton() {\n    return this.href ? false : true;\n  }\n\n  private isLink() {\n    return this.href ? true : false;\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    if (this.isButton()) {\n      // Disabled form controls are always valid\n      this.formControlController.setValidity(this.disabled);\n    }\n  }\n\n  /** Simulates a click on the button. */\n  click() {\n    this.button.click();\n  }\n\n  /** Sets focus on the button. */\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  blur() {\n    this.button.blur();\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).checkValidity();\n    }\n\n    return true;\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).reportValidity();\n    }\n\n    return true;\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  setCustomValidity(message: string) {\n    if (this.isButton()) {\n      (this.button as HTMLButtonElement).setCustomValidity(message);\n      this.formControlController.updateValidity();\n    }\n  }\n\n  render(): TemplateResult {\n    const isLink = this.isLink();\n    const tag = isLink ? literal`a` : literal`button`;\n\n    const variantCaretColors = {\n      primary: this.disabled ? 'var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon))',\n      secondary:  this.disabled ? 'var(--nile-colors-dark-900, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400))',\n      tertiary: this.disabled ? 'var(--nile-colors-dark-900, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400))',\n      caution: 'white',\n      ghost: 'black',\n      destructive:  this.disabled ? 'var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon))',\n      'secondary-grey': 'black',\n      'secondary-blue': 'black',\n      'tertiary-blue': 'black',\n    };\n\n    if(this.isLink()){\n      return html`\n        <a\n          part=\"base\"\n          class=${classMap({\n            button: true,\n            'button--primary': this.variant === 'primary',\n            'button--secondary': this.variant === 'secondary',\n            'button--tertiary': this.variant === 'tertiary',\n            'button--caution': this.variant === 'caution',\n            'button--ghost': this.variant === 'ghost',\n            'button--destructive': this.variant === 'destructive',\n            'button--secondary-grey': this.variant === 'secondary-grey',\n            'button--secondary-blue': this.variant === 'secondary-blue',\n            'button--hideborder': this.hideBorder,\n            'button--medium': this.size === 'medium',\n            'button--caret': this.caret,\n            'button--circle': this.circle,\n            'button--disabled': this.disabled,\n            'button--focused': this.hasFocus,\n            'button--loading': this.loading,\n            'button--standard': !this.outline,\n            'button--outline': this.outline,\n            'button--pill': this.pill,\n            'button--has-label': this.hasSlotController.test('[default]'),\n            'button--has-prefix': this.hasSlotController.test('prefix'),\n            'button--has-suffix': this.hasSlotController.test('suffix'),\n          })}\n          href=${ifDefined(this.href)}\n          target=${ifDefined(this.target)}\n          download=${ifDefined(this.download)}\n          rel=${ifDefined(this.rel)}\n          title=${this.title}\n          role=\"button\"\n          aria-disabled=${this.disabled ? 'true' : 'false'}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n        >\n          <slot name=\"prefix\" part=\"prefix\" class=\"button__prefix\"></slot>\n          <slot part=\"label\" class=\"button__label\"></slot>\n          <slot name=\"suffix\" part=\"suffix\" class=\"button__suffix\"></slot>\n          ${this.caret\n            ? html`\n                <nile-icon\n                  part=\"caret\"\n                  class=\"button__caret\"\n                  color=\"${variantCaretColors[this.variant]}\"\n                  name=\"var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))\"\n                  method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n                ></nile-icon>\n              `\n            : ''}\n          ${this.loading ? html`<nile-spinner></nile-spinner>` : ''}\n        </a>\n      `;\n    }\n    else{\n      return html`\n      <button\n        part=\"base\"\n        class=${classMap({\n          button: true,\n          'button--primary': this.variant === 'primary',\n          'button--secondary': this.variant === 'secondary',\n          'button--tertiary': this.variant === 'tertiary',\n          'button--caution': this.variant === 'caution',\n          'button--ghost': this.variant === 'ghost',\n          'button--destructive': this.variant === 'destructive',\n          'button--secondary-grey': this.variant === 'secondary-grey',\n          'button--secondary-blue': this.variant === 'secondary-blue',\n          'button--hideborder': this.hideBorder,\n          'button--medium': this.size === 'medium',\n          'button--caret': this.caret,\n          'button--circle': this.circle,\n          'button--disabled': this.disabled,\n          'button--focused': this.hasFocus,\n          'button--loading': this.loading,\n          'button--standard': !this.outline,\n          'button--outline': this.outline,\n          'button--pill': this.pill,\n          'button--has-label': this.hasSlotController.test('[default]'),\n          'button--has-prefix': this.hasSlotController.test('prefix'),\n          'button--has-suffix': this.hasSlotController.test('suffix'),\n        })}\n        ?disabled=${this.disabled}\n        type=${this.type}\n        name=${ifDefined(this.name)}\n        value=${ifDefined(this.value)}\n        title=${this.title}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        tabindex=${this.disabled ? '-1' : '0'}\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        @invalid=${this.handleInvalid}\n        @click=${this.handleClick}\n      >\n        <slot name=\"prefix\" part=\"prefix\" class=\"button__prefix\"></slot>\n        <slot part=\"label\" class=\"button__label\"></slot>\n        <slot name=\"suffix\" part=\"suffix\" class=\"button__suffix\"></slot>\n        ${this.caret\n          ? html`\n              <nile-icon\n                part=\"caret\"\n                class=\"button__caret\"\n                color=\"${variantCaretColors[this.variant]}\"\n                name=\"var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))\"\n                method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n              ></nile-icon>\n            `\n          : ''}\n        ${this.loading ? html`<nile-spinner></nile-spinner>` : ''}\n      </button>\n    `;\n    }\n  }\n}\n\nexport default NileButton;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-button': NileButton;\n  }\n}\n"]}

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

@@ -0,0 +1,86 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './nile-button'; // Adjust the import path as necessary
+describe('NileButton', () => {
+    it('should render with default properties', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        expect(el).to.exist;
+        expect(el.variant).to.equal('primary');
+        expect(el.size).to.equal('medium');
+        expect(el.type).to.equal('button');
+        expect(el.disabled).to.be.false;
+        expect(el.loading).to.be.false;
+    });
+    it('should apply the correct classes based on properties', async () => {
+        const el = await fixture(html `<nile-button variant="secondary" pill outline caret></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--secondary')).to.be.true;
+        expect(button.classList.contains('button--pill')).to.be.true;
+        expect(button.classList.contains('button--outline')).to.be.true;
+        expect(button.classList.contains('button--caret')).to.be.true;
+    });
+    it('should be disabled when the disabled property is set', async () => {
+        const el = await fixture(html `<nile-button disabled></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.hasAttribute('disabled')).to.be.true;
+        expect(button.getAttribute('aria-disabled')).to.equal('true');
+    });
+    it('should render a link when the href property is set', async () => {
+        const el = await fixture(html `<nile-button
+        href="https://example.com"
+        target="_blank"
+      ></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.tagName).to.equal('A');
+        expect(button.getAttribute('href')).to.equal('https://example.com');
+        expect(button.getAttribute('target')).to.equal('_blank');
+    });
+    it('should show a spinner when the loading property is set', async () => {
+        const el = await fixture(html `<nile-button loading></nile-button>`);
+        const spinner = el.shadowRoot.querySelector('nile-spinner');
+        expect(spinner).to.exist;
+    });
+    it('should emit nile-focus and nile-blur events', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        let focusEventEmitted = false;
+        el.addEventListener('nile-focus', () => (focusEventEmitted = true));
+        button.dispatchEvent(new FocusEvent('focus'));
+        expect(focusEventEmitted).to.be.true;
+        let blurEventEmitted = false;
+        el.addEventListener('nile-blur', () => (blurEventEmitted = true));
+        button.dispatchEvent(new FocusEvent('blur'));
+        expect(blurEventEmitted).to.be.true;
+    });
+    it('should simulate a click on the button', async () => {
+        const el = await fixture(html `<nile-button>Click Me</nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        let clicked = false;
+        el.addEventListener('click', () => (clicked = true));
+        el.click();
+        expect(clicked).to.be.true;
+    });
+    it('should focus and blur the button programmatically', async () => {
+        const el = await fixture(html `<nile-button>Click Me</nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        el.focus();
+        await el.updateComplete;
+        const focusButton = el.shadowRoot.querySelector('.button--focused');
+        expect(focusButton.classList.contains('button--focused')).to.be.true;
+        el.blur();
+        await el.updateComplete;
+        const blurButton = el.shadowRoot.querySelector('.button');
+        expect(blurButton.classList.contains('button--focused')).to.be.false;
+    });
+    it('should set a custom validation message', async () => {
+        const el = await fixture(html `<nile-button type="submit"></nile-button>`);
+        const form = document.createElement('form');
+        form.appendChild(el);
+        document.body.appendChild(form);
+        el.setCustomValidity('Invalid input');
+        expect(el.validationMessage).to.equal('Invalid input');
+        el.setCustomValidity('');
+        expect(el.validationMessage).to.equal('');
+        document.body.removeChild(form);
+    });
+});
+//# sourceMappingURL=nile-button.test.js.map