@aquera/nile-elements 0.0.16 → 0.0.18

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

@@ -1,2 +1,2 @@
-System.register(["../index-cd83c5c8.cjs.js"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){o=_index001CjsJs.i;}],execute:function(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: 1px;\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default) border,\n      var(--nile-transition-duration-default) box-shadow;\n    cursor: inherit;\n    padding: var(--nile-spacing-2-x);\n    gap: var(--nile-spacing-2-x);\n    border-radius: var(--nile-radius-base-standard);\n    line-height: var(--nile-type-scale-3);\n    box-sizing: border-box;\n    height: 38px;\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  .button__label::slotted(nile-icon) {\n    /* vertical-align: -2px; */\n  }\n\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-900);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border : none;\n    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n    color: var(--nile-colors-neutral-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-neutral-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    box-shadow: 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  }\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    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\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  }\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-white-base);\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-white-base);\n    box-shadow: none;\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    box-shadow: 0px 2px 4px var(--nile-colors-dark-200);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-500);\n    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n    color: var(--nile-colors-neutral-700);\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-neutral-700);\n  }\n  .button--standard.button--tertiary.button--disabled {\n    border-color: #e5e9eb;\n    background-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-neutral-700);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    border-color: #e5e9eb;\n    background-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-neutral-700);\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  .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-500);\n    color: var(--nile-colors-white-base);\n  }\n\n    /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: 24px;\n  }\n\n  .button--pill.button--medium {\n    border-radius: 32px;\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: 1em;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n"]))));}};});
+System.register(["../index-cd83c5c8.cjs.js"],function(_export,_context){"use strict";var o,_templateObject,t;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){o=_index001CjsJs.i;}],execute:function(){_export("s",t=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: 1px;\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default) border,\n      var(--nile-transition-duration-default) box-shadow;\n    cursor: inherit;\n    padding: var(--nile-spacing-2-x);\n    gap: var(--nile-spacing-2-x);\n    border-radius: var(--nile-radius-base-standard);\n    line-height: var(--nile-type-scale-3);\n    box-sizing: border-box;\n    height: 38px;\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  .button__label::slotted(nile-icon) {\n    /* vertical-align: -2px; */\n  }\n\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-button-secondary);\n    border-color: var(--nile-colors-button-secondary-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-secondary-hover);\n    border-color: var(--nile-colors-button-secondary-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-secondary-pressed);\n    border-color: var(--nile-colors-button-secondary-pressed-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-button-secondary-disabled);\n    border-color: var(--nile-colors-button-secondary-disabled-border);\n    color: var(--nile-colors-button-secondary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-button-secondary-disabled);\n    border-color: var(--nile-colors-button-secondary-disabled-border);\n    color: var(--nile-colors-button-secondary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-button-primary);\n    border-color: var(--nile-colors-button-primary-border);\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-primary-hover);\n    border-color: var(--nile-colors-button-primary-hover);\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-primary-pressed);\n    border-color: var(--nile-colors-button-primary-pressed);\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-button-primary-disabled);\n    border-color: var(--nile-colors-button-primary-disabled);\n    color: var(--nile-colors-button-primary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-button-primary-disabled);\n    border-color: var(--nile-colors-button-primary-disabled);\n    color: var(--nile-colors-button-primary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-button-tertiary);\n    border-color: var(--nile-colors-button-tertiary-border);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-hover);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-pressed);\n    border-color: var(--nile-colors-button-tertiary-pressed-border);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    border-color: var(--nile-colors-neutral-500);\n    background-color: var(--nile-colors-button-tertiary-disabled);\n    color: var(--nile-colors-button-tertiary-disabled-text);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* 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);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution.button--disabled,\n  .button--standard.button--caution.button--disabled:hover,\n  .button--standard.button--caution.button--disabled:active {\n    background-color: var(--nile-colors-button-caution-disabled);\n    border-color: var(--nile-colors-button-caution-disabled);\n    color: var(--nile-colors-button-caution-disabled-text);\n  }\n\n\n        /* Primary Variant - Nile Icon Fill */\n        .button--standard.button--primary ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n      }\n      .button--standard.button--primary:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--primary:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n      }\n      .button--standard.button--primary.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;\n      }\n\n      /* Secondary Variant */\n      .button--standard.button--secondary ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n      }\n      .button--standard.button--secondary:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--secondary:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n      }\n      .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-secondary-disabled-text) !important;\n      }\n\n      /* Tertiary Variant */\n      .button--standard.button--tertiary ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n      }\n      .button--standard.button--tertiary:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--tertiary:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n      }\n      .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;\n      }\n\n      /* Caution Variant */\n      .button--standard.button--caution ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n      }\n      .button--standard.button--caution:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--caution:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n      }\n      .button--standard.button--caution.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;\n      }\n\n    /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: 24px;\n  }\n\n  .button--pill.button--medium {\n    border-radius: 32px;\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: 1em;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n"]))));}};});
 //# sourceMappingURL=nile-button.css.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-button.css.cjs.js","sources":["../../../src/nile-button/nile-button.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Button CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: 1px;\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default) border,\n      var(--nile-transition-duration-default) box-shadow;\n    cursor: inherit;\n    padding: var(--nile-spacing-2-x);\n    gap: var(--nile-spacing-2-x);\n    border-radius: var(--nile-radius-base-standard);\n    line-height: var(--nile-type-scale-3);\n    box-sizing: border-box;\n    height: 38px;\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  .button__label::slotted(nile-icon) {\n    /* vertical-align: -2px; */\n  }\n\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-900);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border : none;\n    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n    color: var(--nile-colors-neutral-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-neutral-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    box-shadow: 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  }\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    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\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  }\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-white-base);\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-white-base);\n    box-shadow: none;\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    box-shadow: 0px 2px 4px var(--nile-colors-dark-200);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-500);\n    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n    color: var(--nile-colors-neutral-700);\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-neutral-700);\n  }\n  .button--standard.button--tertiary.button--disabled {\n    border-color: #e5e9eb;\n    background-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-neutral-700);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    border-color: #e5e9eb;\n    background-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-neutral-700);\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  .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-500);\n    color: var(--nile-colors-white-base);\n  }\n\n    /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: 24px;\n  }\n\n  .button--pill.button--medium {\n    border-radius: 32px;\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: 1em;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"gXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-button.css.cjs.js","sources":["../../../src/nile-button/nile-button.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Button CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: 1px;\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default) border,\n      var(--nile-transition-duration-default) box-shadow;\n    cursor: inherit;\n    padding: var(--nile-spacing-2-x);\n    gap: var(--nile-spacing-2-x);\n    border-radius: var(--nile-radius-base-standard);\n    line-height: var(--nile-type-scale-3);\n    box-sizing: border-box;\n    height: 38px;\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  .button__label::slotted(nile-icon) {\n    /* vertical-align: -2px; */\n  }\n\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-button-secondary);\n    border-color: var(--nile-colors-button-secondary-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-secondary-hover);\n    border-color: var(--nile-colors-button-secondary-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-secondary-pressed);\n    border-color: var(--nile-colors-button-secondary-pressed-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-button-secondary-disabled);\n    border-color: var(--nile-colors-button-secondary-disabled-border);\n    color: var(--nile-colors-button-secondary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-button-secondary-disabled);\n    border-color: var(--nile-colors-button-secondary-disabled-border);\n    color: var(--nile-colors-button-secondary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-button-primary);\n    border-color: var(--nile-colors-button-primary-border);\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-primary-hover);\n    border-color: var(--nile-colors-button-primary-hover);\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-primary-pressed);\n    border-color: var(--nile-colors-button-primary-pressed);\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-button-primary-disabled);\n    border-color: var(--nile-colors-button-primary-disabled);\n    color: var(--nile-colors-button-primary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-button-primary-disabled);\n    border-color: var(--nile-colors-button-primary-disabled);\n    color: var(--nile-colors-button-primary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-button-tertiary);\n    border-color: var(--nile-colors-button-tertiary-border);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-hover);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-pressed);\n    border-color: var(--nile-colors-button-tertiary-pressed-border);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    border-color: var(--nile-colors-neutral-500);\n    background-color: var(--nile-colors-button-tertiary-disabled);\n    color: var(--nile-colors-button-tertiary-disabled-text);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* 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);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution.button--disabled,\n  .button--standard.button--caution.button--disabled:hover,\n  .button--standard.button--caution.button--disabled:active {\n    background-color: var(--nile-colors-button-caution-disabled);\n    border-color: var(--nile-colors-button-caution-disabled);\n    color: var(--nile-colors-button-caution-disabled-text);\n  }\n\n\n        /* Primary Variant - Nile Icon Fill */\n        .button--standard.button--primary ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n      }\n      .button--standard.button--primary:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--primary:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n      }\n      .button--standard.button--primary.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;\n      }\n\n      /* Secondary Variant */\n      .button--standard.button--secondary ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n      }\n      .button--standard.button--secondary:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--secondary:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n      }\n      .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-secondary-disabled-text) !important;\n      }\n\n      /* Tertiary Variant */\n      .button--standard.button--tertiary ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n      }\n      .button--standard.button--tertiary:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--tertiary:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n      }\n      .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;\n      }\n\n      /* Caution Variant */\n      .button--standard.button--caution ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n      }\n      .button--standard.button--caution:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--caution:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n      }\n      .button--standard.button--caution.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;\n      }\n\n    /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: 24px;\n  }\n\n  .button--pill.button--medium {\n    border-radius: 32px;\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: 1em;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"gXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

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

@@ -1,4 +1,4 @@
-import{i as o}from"../index-cd2f9c12.esm.js";const r=o`
+import{i as o}from"../index-cd2f9c12.esm.js";const t=o`
   :host {
     display: inline-block;
     position: relative;
@@ -62,127 +62,176 @@ import{i as o}from"../index-cd2f9c12.esm.js";const r=o`
   }
 
   .button--standard.button--secondary {
-    background-color: var(--nile-colors-neutral-400);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-neutral-900);
+    background-color: var(--nile-colors-button-secondary);
+    border-color: var(--nile-colors-button-secondary-border);
+    color: var(--nile-colors-button-secondary-text);
   }
 
   .button--standard.button--secondary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-500);
-    border : none;
-    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
-    color: var(--nile-colors-neutral-900);
+    background-color: var(--nile-colors-button-secondary-hover);
+    border-color: var(--nile-colors-button-secondary-border);
+    color: var(--nile-colors-button-secondary-text);
   }
 
   .button--standard.button--secondary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-500);
-    border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-neutral-900);
+    background-color: var(--nile-colors-button-secondary-pressed);
+    border-color: var(--nile-colors-button-secondary-pressed-border);
+    color: var(--nile-colors-button-secondary-text);
   }
 
   .button--standard.button--secondary.button--disabled {
-    background-color: var(--nile-colors-neutral-400);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-dark-500);
+    background-color: var(--nile-colors-button-secondary-disabled);
+    border-color: var(--nile-colors-button-secondary-disabled-border);
+    color: var(--nile-colors-button-secondary-disabled-text);
     cursor: not-allowed;
   }
 
   .button--standard.button--secondary.button--disabled:hover,
   .button--standard.button--secondary.button--disabled:active {
-    background-color: var(--nile-colors-neutral-400);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-dark-500);
-    box-shadow: none;
+    background-color: var(--nile-colors-button-secondary-disabled);
+    border-color: var(--nile-colors-button-secondary-disabled-border);
+    color: var(--nile-colors-button-secondary-disabled-text);
+    cursor: not-allowed;
   }
 
   /* Primary */
   .button--standard.button--primary {
-    background-color: var(--nile-colors-primary-600);
-    border-color: var(--nile-colors-primary-600);
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-button-primary);
+    border-color: var(--nile-colors-button-primary-border);
+    color: var(--nile-colors-button-primary-text);
   }
 
   .button--standard.button--primary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-primary-700);
-    border-color: var(--nile-colors-primary-700);
-    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-button-primary-hover);
+    border-color: var(--nile-colors-button-primary-hover);
+    color: var(--nile-colors-button-primary-text);
   }
 
   .button--standard.button--primary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-primary-700);
-    border-color: var(--nile-colors-primary-900);
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-button-primary-pressed);
+    border-color: var(--nile-colors-button-primary-pressed);
+    color: var(--nile-colors-button-primary-text);
   }
 
   .button--standard.button--primary.button--disabled {
-    background-color: var(--nile-colors-neutral-700);
-    border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-button-primary-disabled);
+    border-color: var(--nile-colors-button-primary-disabled);
+    color: var(--nile-colors-button-primary-disabled-text);
     cursor: not-allowed;
   }
 
   .button--standard.button--primary.button--disabled:hover,
   .button--standard.button--primary.button--disabled:active {
-    background-color: var(--nile-colors-neutral-700);
-    border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-white-base);
-    box-shadow: none;
+    background-color: var(--nile-colors-button-primary-disabled);
+    border-color: var(--nile-colors-button-primary-disabled);
+    color: var(--nile-colors-button-primary-disabled-text);
+    cursor: not-allowed;
   }
 
   /* Tertiary */
   .button--standard.button--tertiary {
-    background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-dark-900);
-    box-shadow: 0px 2px 4px var(--nile-colors-dark-200);
+    background-color: var(--nile-colors-button-tertiary);
+    border-color: var(--nile-colors-button-tertiary-border);
+    color: var(--nile-colors-button-tertiary-text);
   }
 
   .button--standard.button--tertiary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-100);
+    background-color: var(--nile-colors-button-tertiary-hover);
     border-color: var(--nile-colors-neutral-500);
-    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
-    color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-button-tertiary-text);
   }
 
   .button--standard.button--tertiary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-400);
-    border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-neutral-700);
-  }
-  .button--standard.button--tertiary.button--disabled {
-    border-color: #e5e9eb;
-    background-color: var(--nile-colors-white-base);
-    color: var(--nile-colors-neutral-700);
-    cursor: not-allowed;
-    box-shadow: none;
+    background-color: var(--nile-colors-button-tertiary-pressed);
+    border-color: var(--nile-colors-button-tertiary-pressed-border);
+    color: var(--nile-colors-button-tertiary-text);
   }
 
+  .button--standard.button--tertiary.button--disabled,
   .button--standard.button--tertiary.button--disabled:hover,
   .button--standard.button--tertiary.button--disabled:active {
-    border-color: #e5e9eb;
-    background-color: var(--nile-colors-white-base);
-    color: var(--nile-colors-neutral-700);
+    border-color: var(--nile-colors-neutral-500);
+    background-color: var(--nile-colors-button-tertiary-disabled);
+    color: var(--nile-colors-button-tertiary-disabled-text);
+    cursor: not-allowed;
     box-shadow: none;
   }
 
   /* caution */
   .button--standard.button--caution {
-    background-color: var(--nile-colors-red-500);
-    border-color: var(--nile-colors-red-500);
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-button-caution);
+    border-color: var(--nile-colors-button-caution);
+    color: var(--nile-colors-button-caution-text);
   }
+
   .button--standard.button--caution:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-red-700);
-    border-color: var(--nile-colors-red-700);
-    color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-button-caution-hover);
+    border-color: var(--nile-colors-button-caution-hover);
+    color: var(--nile-colors-button-caution-text);
   }
 
   .button--standard.button--caution:active:not(.button--disabled) {
-    background-color: var(--nile-colors-red-700);
-    border-color: var(--nile-colors-red-500);
-    color: var(--nile-colors-white-base);
-  }
+    background-color: var(--nile-colors-button-caution-pressed);
+    border-color: var(--nile-colors-button-caution-pressed);
+    color: var(--nile-colors-button-caution-text);
+  }
+
+  .button--standard.button--caution.button--disabled,
+  .button--standard.button--caution.button--disabled:hover,
+  .button--standard.button--caution.button--disabled:active {
+    background-color: var(--nile-colors-button-caution-disabled);
+    border-color: var(--nile-colors-button-caution-disabled);
+    color: var(--nile-colors-button-caution-disabled-text);
+  }
+
+
+        /* Primary Variant - Nile Icon Fill */
+        .button--standard.button--primary ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
+      }
+      .button--standard.button--primary:hover:not(.button--disabled) ::slotted(nile-icon),
+      .button--standard.button--primary:active:not(.button--disabled) ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
+      }
+      .button--standard.button--primary.button--disabled ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;
+      }
+
+      /* Secondary Variant */
+      .button--standard.button--secondary ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
+      }
+      .button--standard.button--secondary:hover:not(.button--disabled) ::slotted(nile-icon),
+      .button--standard.button--secondary:active:not(.button--disabled) ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
+      }
+      .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-secondary-disabled-text) !important;
+      }
+
+      /* Tertiary Variant */
+      .button--standard.button--tertiary ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+      }
+      .button--standard.button--tertiary:hover:not(.button--disabled) ::slotted(nile-icon),
+      .button--standard.button--tertiary:active:not(.button--disabled) ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+      }
+      .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;
+      }
+
+      /* Caution Variant */
+      .button--standard.button--caution ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
+      }
+      .button--standard.button--caution:hover:not(.button--disabled) ::slotted(nile-icon),
+      .button--standard.button--caution:active:not(.button--disabled) ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
+      }
+      .button--standard.button--caution.button--disabled ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;
+      }
 
     /*
    * Outline buttons
@@ -384,4 +433,4 @@ import{i as o}from"../index-cd2f9c12.esm.js";const r=o`
     pointer-events: none;
   }
 
-`;export{r as s};
+`;export{t as s};

package/dist/nile-calendar/index.cjs.js

@@ -1,2 +1,2 @@
-System.register(["./nile-calendar.cjs.js","tslib","../index-cd83c5c8.cjs.js","lit/decorators.js","./nile-calendar.css.cjs.js","../internal/watch.cjs.js","../internal/nile-element.cjs.js","lit","../nile-popup/nile-popup.cjs.js","lit/directives/class-map.js","../nile-popup/nile-popup.css.cjs.js","../property-0f6a51ec.cjs.js"],function(_export,_context){"use strict";return{setters:[function(_nileCalendarCjsJs){_export("NileCalendar",_nileCalendarCjsJs.N);},function(_tslib){},function(_index001CjsJs){},function(_litDecoratorsJs){},function(_nileCalendarCssCjsJs){},function(_internalWatchCjsJs){},function(_internalNileElementCjsJs){},function(_lit){},function(_nilePopupNilePopupCjsJs){},function(_litDirectivesClassMapJs){},function(_nilePopupNilePopupCssCjsJs){},function(_property002CjsJs){}],execute:function(){}};});
+System.register(["./nile-calendar.cjs.js","tslib","../index-cd83c5c8.cjs.js","lit/decorators.js","./nile-calendar.css.cjs.js","../internal/watch.cjs.js","../internal/nile-element.cjs.js","lit","../nile-popup/nile-popup.cjs.js","lit/directives/class-map.js","../nile-popup/nile-popup.css.cjs.js","./timezones.cjs.js","../property-0f6a51ec.cjs.js"],function(_export,_context){"use strict";return{setters:[function(_nileCalendarCjsJs){_export("NileCalendar",_nileCalendarCjsJs.N);},function(_tslib){},function(_index001CjsJs){},function(_litDecoratorsJs){},function(_nileCalendarCssCjsJs){},function(_internalWatchCjsJs){},function(_internalNileElementCjsJs){},function(_lit){},function(_nilePopupNilePopupCjsJs){},function(_litDirectivesClassMapJs){},function(_nilePopupNilePopupCssCjsJs){},function(_timezonesCjsJs){},function(_property002CjsJs){}],execute:function(){}};});
 //# sourceMappingURL=index.cjs.js.map

package/dist/nile-calendar/index.esm.js

@@ -1 +1 @@
-export{N as NileCalendar}from"./nile-calendar.esm.js";import"tslib";import"../index-cd2f9c12.esm.js";import"lit/decorators.js";import"./nile-calendar.css.esm.js";import"../internal/watch.esm.js";import"../internal/nile-element.esm.js";import"lit";import"../nile-popup/nile-popup.esm.js";import"lit/directives/class-map.js";import"../nile-popup/nile-popup.css.esm.js";import"../property-09139d3c.esm.js";
+export{N as NileCalendar}from"./nile-calendar.esm.js";import"tslib";import"../index-cd2f9c12.esm.js";import"lit/decorators.js";import"./nile-calendar.css.esm.js";import"../internal/watch.esm.js";import"../internal/nile-element.esm.js";import"lit";import"../nile-popup/nile-popup.esm.js";import"lit/directives/class-map.js";import"../nile-popup/nile-popup.css.esm.js";import"./timezones.esm.js";import"../property-09139d3c.esm.js";

package/dist/nile-calendar/nile-calendar.cjs.js

@@ -1,2 +1,2 @@
-System.register(["tslib","../index-cd83c5c8.cjs.js","lit/decorators.js","./nile-calendar.css.cjs.js","../internal/watch.cjs.js","../internal/nile-element.cjs.js","../nile-popup/nile-popup.cjs.js","../property-0f6a51ec.cjs.js","lit","lit/directives/class-map.js","../nile-popup/nile-popup.css.cjs.js"],function(_export,_context){"use strict";var t,i,s,e,n,a,h,l,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,r;function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1;}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r;}finally{try{if(!f&&null!=t.return&&(u=t.return(),Object(u)!==u))return;}finally{if(o)throw n;}}return a;}}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableSpread();}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _iterableToArray(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter);}function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _toPropertyKey(arg){var key=_toPrimitive(arg,"string");return typeof key==="symbol"?key:String(key);}function _toPrimitive(input,hint){if(typeof input!=="object"||input===null)return input;var prim=input[Symbol.toPrimitive];if(prim!==undefined){var res=prim.call(input,hint||"default");if(typeof res!=="object")return res;throw new TypeError("@@toPrimitive must return a primitive value.");}return(hint==="string"?String:Number)(input);}function _get(){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get.bind();}else{_get=function _get(target,property,receiver){var base=_superPropBase(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(arguments.length<3?target:receiver);}return desc.value;};}return _get.apply(this,arguments);}function _superPropBase(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_getPrototypeOf(object);if(object===null)break;}return object;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(typeof call==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_index001CjsJs){i=_index001CjsJs.x;},function(_litDecoratorsJs){s=_litDecoratorsJs.query;e=_litDecoratorsJs.customElement;},function(_nileCalendarCssCjsJs){n=_nileCalendarCssCjsJs.s;},function(_internalWatchCjsJs){a=_internalWatchCjsJs.w;},function(_internalNileElementCjsJs){h=_internalNileElementCjsJs.N;},function(_nilePopupNilePopupCjsJs){},function(_property002CjsJs){l=_property002CjsJs.n;},function(_lit){},function(_litDirectivesClassMapJs){},function(_nilePopupNilePopupCssCjsJs){}],execute:function(){_export("N",r=/*#__PURE__*/function(_h){_inherits(r,_h);var _super=_createSuper(r);function r(){var _this;_classCallCheck(this,r);_this=_super.apply(this,arguments),_this.currentMonth=new Date().getMonth(),_this.currentYear=new Date().getFullYear(),_this.dropDownOpened=!1,_this.valueAttribute=null,_this.formattedDate=null,_this.startDate=null,_this.endDate=null,_this.isSelectingStart=!0,_this.range=!1;return _this;}_createClass(r,[{key:"valueChanged",value:function valueChanged(){if(this.range&&this.value)return this.rangeValue=this.value,void(this.value=null);if(this.value&&!isNaN(this.value.getTime())){var _t=this.value.getTimezoneOffset(),_i=new Date(this.value.getTime()-60*_t*1e3);isNaN(_i.getTime())||(this.valueAttribute=_i.toISOString().split("T")[0],this.formattedDate="".concat(String(_i.getDate()).padStart(2,"0"),"/").concat(String(_i.getMonth()+1).padStart(2,"0"),"/").concat(_i.getFullYear()));}}},{key:"updated",value:function updated(t){if(_get(_getPrototypeOf(r.prototype),"updated",this).call(this,t),t.has("valueAttribute")){var _t2=new Date(this.valueAttribute||"");if(!isNaN(_t2.getTime())){var _i2=_t2.getTimezoneOffset();this.value=new Date(_t2.getTime()-60*_i2*1e3),this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear();}}}},{key:"attributeChangedCallback",value:function attributeChangedCallback(t,i,s){"value"===t?(this.valueAttribute=s,this.initializeValue()):"range"===t&&(this.range=null!==s);}},{key:"initializeValue",value:function initializeValue(){if(this.range)try{var _t3=JSON.parse(this.valueAttribute||"");this.startDate=new Date(_t3.startDate),this.endDate=new Date(_t3.endDate),this.startDate=new Date(this.startDate.getTime()),this.endDate=new Date(this.endDate.getTime()),this.rangeValue={startDate:this.startDate,endDate:this.endDate},this.value=null;}catch(t){}else if(this.valueAttribute){var _t4;_t4=new Date(this.valueAttribute),_t4=new Date(_t4.getTime()-6e4*_t4.getTimezoneOffset()),isNaN(_t4.getTime())||(this.value=_t4,this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear(),this.rangeValue=null);}this.requestUpdate();}},{key:"connectedCallback",value:function connectedCallback(){if(_get(_getPrototypeOf(r.prototype),"connectedCallback",this).call(this),this.initializeValue(),this.valueAttribute){var _t5=new Date(this.valueAttribute);isNaN(_t5.getTime())||(this.value=_t5,this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear());}this.emit("nile-init");}},{key:"disconnectedCallback",value:function disconnectedCallback(){_get(_getPrototypeOf(r.prototype),"disconnectedCallback",this).call(this),this.emit("nile-destroy");}},{key:"getDaysArray",value:function getDaysArray(t,i){var s=new Date(t,i+1,0).getDate();return Array.from({length:s},function(t,i){return i+1;});}},{key:"nextMonth",value:function nextMonth(){11===this.currentMonth?(this.currentMonth=0,this.currentYear++):this.currentMonth++,this.requestUpdate();}},{key:"prevMonth",value:function prevMonth(){0===this.currentMonth?(this.currentMonth=11,this.currentYear--):this.currentMonth--,this.requestUpdate();}},{key:"selectDate",value:function selectDate(t,i,s){var e=new Date(s,i,t);this.range?(this.startDate&&this.endDate&&(this.startDate=null,this.endDate=null),this.isSelectingStart?(this.startDate=e,this.endDate&&e>this.endDate&&(this.endDate=null),this.isSelectingStart=!1):(this.isSelectingStart=!0,this.startDate&&e<this.startDate?(this.startDate=e,this.endDate=null,this.isSelectingStart=!1):this.endDate=e)):(this.value=e,this.emit("nile-changed",{value:this.value}),this.dropdown&&this.dropdown.hide()),this.requestUpdate();}},{key:"confimRange",value:function confimRange(){this.startDate&&this.endDate&&(this.emit("nile-changed",{startDate:this.startDate,endDate:this.endDate}),this.dropdown&&this.dropdown.hide(),this.rangeValue={startDate:this.startDate,endDate:this.endDate});}},{key:"renderMonth",value:function renderMonth(t,s,e){var _this2=this;var n=new Date(t,s,1).getDay(),a=new Date(t,s+1,0).getDay(),h=this.getDaysArray(0===s?t-1:t,0===s?11:s-1),l=this.getDaysArray(11===s?t+1:t,11===s?0:s+1),_r=h.slice(h.length-n),d=l.slice(0,6-a),c=[].concat(_toConsumableArray(_r),_toConsumableArray(e),_toConsumableArray(d)),u=function u(t,i,s,e){if(!e)return"";if(!_this2.range&&_this2.value){if(t===_this2.value.getDate()&&i===_this2.value.getMonth()&&s===_this2.value.getFullYear())return"selected-date";}var n=_this2.startDate&&t===_this2.startDate.getDate()&&i===_this2.startDate.getMonth()&&s===_this2.startDate.getFullYear(),a=_this2.endDate&&t===_this2.endDate.getDate()&&i===_this2.endDate.getMonth()&&s===_this2.endDate.getFullYear();return n?"range-start":a?"range-end":"";},o=function o(t,i,s,e){if(!e)return!1;if(_this2.startDate&&_this2.endDate){var _e=new Date(s,i,t);return _e>=_this2.startDate&&_e<=_this2.endDate;}return!1;};return i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"calendar\">\n        <div class=\"calendar-header\">\n          <nile-icon class=\"calendar-header__month-navigation\" name=\"arrowleft\" color=\"black\" @click=\"","\">\n          </nile-icon>\n          <span\n            >","\n            ","</span\n          >\n          <nile-icon class=\"calendar-header__month-navigation\" name=\"arrowright\" color=\"black\" @click=\"","\">\n          </nile-icon>\n        </div>\n        <div class=\"day-names\">\n          <div class=\"day\">Sun</div>\n          <div class=\"day\">Mon</div>\n          <div class=\"day\">Tue</div>\n          <div class=\"day\">Wed</div>\n          <div class=\"day\">Thu</div>\n          <div class=\"day\">Fri</div>\n          <div class=\"day\">Sat</div>\n        </div>\n        <div class=\"days\">\n          ","\n        </div>\n      </div>\n    "])),this.prevMonth,new Date(t,s).toLocaleString("default",{month:"long"}),t,this.nextMonth,c.map(function(n,a){var h=a>=_r.length&&a<_r.length+e.length;return i(_templateObject2||(_templateObject2=_taggedTemplateLiteral([" <div\n              class=\"day "," "," ","\"\n              @click=\"","\"\n            >\n              ","\n            </div>"])),u(n,s,t,h),o(n,s,t,h)?"in-range":"",h?"":"filler",function(){h&&_this2.selectDate(n,s,t);},n);}));}},{key:"formatDate",value:function formatDate(t){if(!t)return"";return"".concat(String(t.getDate()).padStart(2,"0"),"/").concat(String(t.getMonth()+1).padStart(2,"0"),"/").concat(t.getFullYear());}},{key:"formatDateRange",value:function formatDateRange(t){return t?t.startDate&&t.endDate?"".concat(this.formatDate(t.startDate)," - ").concat(this.formatDate(t.endDate)):"":t;}},{key:"handleStartDateInput",value:function handleStartDateInput(t){var i=this.parseDate(t.detail.value);this.isValidDateInput(i)||(this.startDate=null),i&&(!this.endDate||i<=this.endDate)?this.startDate=i:(this.startDate=null,this.endDate=null),this.requestUpdate();}},{key:"handleEndDateInput",value:function handleEndDateInput(t){var i=this.parseDate(t.detail.value);this.isValidDateInput(i)||(this.endDate=null),i&&(!this.startDate||i>=this.startDate)?this.endDate=i:this.endDate=null,this.requestUpdate();}},{key:"parseDate",value:function parseDate(t){var _t$split$map=t.split("/").map(Number),_t$split$map2=_slicedToArray(_t$split$map,3),i=_t$split$map2[0],s=_t$split$map2[1],e=_t$split$map2[2],n=new Date(e,s-1,i);return isNaN(n.getTime())?null:n;}},{key:"isValidDateInput",value:function isValidDateInput(t){return /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/.test(t);}},{key:"formatTime",value:function formatTime(t){if(!t)return"";return"".concat(String(t.getHours()).padStart(2,"0"),":").concat(String(t.getMinutes()).padStart(2,"0"),":").concat(String(t.getSeconds()).padStart(2,"0"));}},{key:"isValidTimeInput",value:function isValidTimeInput(t){return /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/.test(t);}},{key:"parseTime",value:function parseTime(t,i){if(!this.isValidTimeInput(t))return null;var _t$split$map3=t.split(":").map(Number),_t$split$map4=_slicedToArray(_t$split$map3,3),s=_t$split$map4[0],e=_t$split$map4[1],n=_t$split$map4[2],a=new Date(i.getTime());return a.setHours(s,e,n),a;}},{key:"handleStartTimeInput",value:function handleStartTimeInput(t){if(!this.startDate)return void(this.startDate=null);var i=this.parseTime(t.detail.value,this.startDate);i?this.startDate=i:this.startDate.setHours(0,0,0),this.requestUpdate();}},{key:"handleEndTimeInput",value:function handleEndTimeInput(t){if(!this.endDate)return void(this.endDate=null);var i=this.parseTime(t.detail.value,this.endDate);i?this.endDate=i:this.endDate.setHours(0,0,0),this.requestUpdate();}},{key:"render",value:function render(){this.getDaysArray(this.currentYear,this.currentMonth);var t=(this.currentMonth+1)%12,s=11===this.currentMonth?this.currentYear+1:this.currentYear;return this.getDaysArray(s,t),i(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n\n        <div class=\"base ","\">\n          <div class=\"calendar-wrapper\" >\n            <div class=\"calendar-container ","\">\n              ","\n            </div>\n            <!-- "," -->\n\n          </div>\n          ","\n        </div>\n    "])),this.range?"base__range":"",this.range?"with-margin":"",this.renderMonth(this.currentYear,this.currentMonth,this.getDaysArray(this.currentYear,this.currentMonth)),this.range?i(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n                  <div class=\"calendar-container\">\n                    ","\n                  </div>\n                "])),this.renderMonth(this.currentYear,(this.currentMonth+1)%12,this.getDaysArray(this.currentYear,(this.currentMonth+1)%12))):"",this.range?i(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n          <div class=\"calender-input\">\n            <span class=\"manual-input-label\">From </span>\n            <div class=\"from\">\n              <nile-input class=\"manual-input\" value=\"","\" placeholder=\"DD/MM/YYYY\" @nile-change=\"","\"></nile-input>\n              <nile-input class=\"manual-input\" value=\"","\" placeholder=\"HH:MM:SS\" @nile-change=\"","\"> </nile-input>\n\n            </div>\n<br>\n            <span class=\"manual-input-label\">To </span>\n            <div class=\"from\">\n            <nile-input class=\"manual-input\" value=\"","\" placeholder=\"DD/MM/YYYY\" @nile-change=\"","\"></nile-input>\n            <nile-input class=\"manual-input\" value=\"","\" placeholder=\"HH:MM:SS\" @nile-change=\"","\"> </nile-input>\n          </div>\n          <div class=\"button-contaner\">\n            <nile-button class=\"apply-button\"  ?disabled=\"","\"  @click=\"","\"> Apply</nile-button>\n            </div>\n\n\n        </div>\n        </div>\n        "])),this.formatDate(this.startDate),this.handleStartDateInput,this.formatTime(this.startDate),this.handleStartTimeInput,this.formatDate(this.endDate),this.handleEndDateInput,this.formatTime(this.endDate),this.handleEndTimeInput,!this.startDate||!this.endDate,this.confimRange):"");}}],[{key:"styles",get:function get(){return[n];}},{key:"observedAttributes",get:function get(){return["value","range"];}}]);return r;}(h));t([s("nile-dropdown")],r.prototype,"dropdown",void 0),t([l({type:Boolean,reflect:!0})],r.prototype,"dropDownOpened",void 0),t([l({type:Object})],r.prototype,"value",void 0),t([l({type:Object})],r.prototype,"rangeValue",void 0),t([l({type:String,attribute:"value"})],r.prototype,"valueAttribute",void 0),t([l({type:String,attribute:"value"})],r.prototype,"formattedDate",void 0),t([l({type:Object})],r.prototype,"startDate",void 0),t([l({type:Object})],r.prototype,"endDate",void 0),t([l({type:Boolean})],r.prototype,"isSelectingStart",void 0),t([l({type:Boolean})],r.prototype,"range",void 0),t([a("value")],r.prototype,"valueChanged",null),_export("N",r=t([e("nile-calendar")],r));}};});
+System.register(["tslib","../index-cd83c5c8.cjs.js","lit/decorators.js","./nile-calendar.css.cjs.js","../internal/watch.cjs.js","../internal/nile-element.cjs.js","../nile-popup/nile-popup.cjs.js","./timezones.cjs.js","../property-0f6a51ec.cjs.js","lit","lit/directives/class-map.js","../nile-popup/nile-popup.css.cjs.js"],function(_export,_context){"use strict";var t,i,s,e,n,a,l,h,r,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,d;function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1;}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r;}finally{try{if(!f&&null!=t.return&&(u=t.return(),Object(u)!==u))return;}finally{if(o)throw n;}}return a;}}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableSpread();}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _iterableToArray(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter);}function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _toPropertyKey(arg){var key=_toPrimitive(arg,"string");return typeof key==="symbol"?key:String(key);}function _toPrimitive(input,hint){if(typeof input!=="object"||input===null)return input;var prim=input[Symbol.toPrimitive];if(prim!==undefined){var res=prim.call(input,hint||"default");if(typeof res!=="object")return res;throw new TypeError("@@toPrimitive must return a primitive value.");}return(hint==="string"?String:Number)(input);}function _get(){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get.bind();}else{_get=function _get(target,property,receiver){var base=_superPropBase(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(arguments.length<3?target:receiver);}return desc.value;};}return _get.apply(this,arguments);}function _superPropBase(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_getPrototypeOf(object);if(object===null)break;}return object;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(typeof call==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_index001CjsJs){i=_index001CjsJs.x;},function(_litDecoratorsJs){s=_litDecoratorsJs.query;e=_litDecoratorsJs.customElement;},function(_nileCalendarCssCjsJs){n=_nileCalendarCssCjsJs.s;},function(_internalWatchCjsJs){a=_internalWatchCjsJs.w;},function(_internalNileElementCjsJs){l=_internalNileElementCjsJs.N;},function(_nilePopupNilePopupCjsJs){},function(_timezonesCjsJs){h=_timezonesCjsJs.T;},function(_property002CjsJs){r=_property002CjsJs.n;},function(_lit){},function(_litDirectivesClassMapJs){},function(_nilePopupNilePopupCssCjsJs){}],execute:function(){_export("N",d=/*#__PURE__*/function(_l){_inherits(d,_l);var _super=_createSuper(d);function d(){var _this;_classCallCheck(this,d);_this=_super.apply(this,arguments),_this.currentMonth=new Date().getMonth(),_this.currentYear=new Date().getFullYear(),_this.dropDownOpened=!1,_this.valueAttribute=null,_this.formattedDate=null,_this.startDate=null,_this.endDate=null,_this.isSelectingStart=!0,_this.range=!1,_this.type="absolute",_this.selectedTimeZone="local";return _this;}_createClass(d,[{key:"valueChanged",value:function valueChanged(){if(this.range&&this.value)return this.rangeValue=this.value,void(this.value=null);if(this.value&&!isNaN(this.value.getTime())){var _t=this.value.getTimezoneOffset(),_i=new Date(this.value.getTime()-60*_t*1e3);isNaN(_i.getTime())||(this.valueAttribute=_i.toISOString().split("T")[0],this.formattedDate="".concat(String(_i.getDate()).padStart(2,"0"),"/").concat(String(_i.getMonth()+1).padStart(2,"0"),"/").concat(_i.getFullYear()));}}},{key:"updated",value:function updated(t){if(_get(_getPrototypeOf(d.prototype),"updated",this).call(this,t),t.has("valueAttribute")){var _t2=new Date(this.valueAttribute||"");if(!isNaN(_t2.getTime())){var _i2=_t2.getTimezoneOffset();this.value=new Date(_t2.getTime()-60*_i2*1e3),this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear();}}}},{key:"attributeChangedCallback",value:function attributeChangedCallback(t,i,s){"value"===t?(this.valueAttribute=s,this.initializeValue()):"range"===t&&(this.range=null!==s);}},{key:"initializeValue",value:function initializeValue(){if(this.range)try{var _t3=JSON.parse(this.valueAttribute||"");this.startDate=new Date(_t3.startDate),this.endDate=new Date(_t3.endDate),this.startDate=new Date(this.startDate.getTime()),this.endDate=new Date(this.endDate.getTime()),this.rangeValue={startDate:this.startDate,endDate:this.endDate},this.value=null;}catch(t){}else if(this.valueAttribute){var _t4;_t4=new Date(this.valueAttribute),_t4=new Date(_t4.getTime()-6e4*_t4.getTimezoneOffset()),isNaN(_t4.getTime())||(this.value=_t4,this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear(),this.rangeValue=null);}this.requestUpdate();}},{key:"connectedCallback",value:function connectedCallback(){if(_get(_getPrototypeOf(d.prototype),"connectedCallback",this).call(this),this.initializeValue(),this.valueAttribute){var _t5=new Date(this.valueAttribute);isNaN(_t5.getTime())||(this.value=_t5,this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear());}this.emit("nile-init");}},{key:"disconnectedCallback",value:function disconnectedCallback(){_get(_getPrototypeOf(d.prototype),"disconnectedCallback",this).call(this),this.emit("nile-destroy");}},{key:"getDaysArray",value:function getDaysArray(t,i){var s=new Date(t,i+1,0).getDate();return Array.from({length:s},function(t,i){return i+1;});}},{key:"nextMonth",value:function nextMonth(){11===this.currentMonth?(this.currentMonth=0,this.currentYear++):this.currentMonth++,this.requestUpdate();}},{key:"prevMonth",value:function prevMonth(){0===this.currentMonth?(this.currentMonth=11,this.currentYear--):this.currentMonth--,this.requestUpdate();}},{key:"selectDate",value:function selectDate(t,i,s){var e=new Date(s,i,t);this.range?(this.startDate&&this.endDate&&(this.startDate=null,this.endDate=null),this.isSelectingStart?(this.startDate=e,this.endDate&&e>this.endDate&&(this.endDate=null),this.isSelectingStart=!1):(this.isSelectingStart=!0,this.startDate&&e<this.startDate?(this.startDate=e,this.endDate=null,this.isSelectingStart=!1):this.endDate=e)):(this.value=e,this.emit("nile-changed",{value:this.value}),this.dropdown&&this.dropdown.hide()),this.requestUpdate();}},{key:"confimRange",value:function confimRange(){this.startDate&&this.endDate&&("local"!==this.selectedTimeZone&&(this.startDate=this.convertTZ(this.startDate,this.selectedTimeZone),this.endDate=this.convertTZ(this.endDate,this.selectedTimeZone)),this.emit("nile-changed",{startDate:this.startDate,endDate:this.endDate}),this.dropdown&&this.dropdown.hide(),this.rangeValue={startDate:this.startDate,endDate:this.endDate});}},{key:"convertTZ",value:function convertTZ(t,i){return new Date(("string"==typeof t?new Date(t):t).toLocaleString("en-US",{timeZone:i}));}},{key:"isCurrentDate",value:function isCurrentDate(t,i,s){var e=new Date();return t===e.getDate()&&i+1===e.getMonth()+1&&s===e.getFullYear();}},{key:"renderMonth",value:function renderMonth(t,s,e){var _this2=this;var n=new Date(t,s,1).getDay(),a=new Date(t,s+1,0).getDay(),l=this.getDaysArray(0===s?t-1:t,0===s?11:s-1),h=this.getDaysArray(11===s?t+1:t,11===s?0:s+1),r=l.slice(l.length-n),_d=h.slice(0,6-a),c=[].concat(_toConsumableArray(r),_toConsumableArray(e),_toConsumableArray(_d)),u=function u(t,i,s,e){if(!e)return"";if(!_this2.range&&_this2.value){if(t===_this2.value.getDate()&&i===_this2.value.getMonth()&&s===_this2.value.getFullYear())return"selected-date";}var n=_this2.startDate&&t===_this2.startDate.getDate()&&i===_this2.startDate.getMonth()&&s===_this2.startDate.getFullYear(),a=_this2.endDate&&t===_this2.endDate.getDate()&&i===_this2.endDate.getMonth()&&s===_this2.endDate.getFullYear();return n?"range-start":a?"range-end":"";},o=function o(t,i,s,e){if(!e)return!1;if(_this2.startDate&&_this2.endDate){var _e=new Date(s,i,t);return _e>=_this2.startDate&&_e<=_this2.endDate;}return!1;};return i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div class=\"calendar\">\n        <div class=\"calendar-header\">\n          <nile-icon\n            class=\"calendar-header__month-navigation\"\n            name=\"arrowleft\"\n            color=\"black\"\n            @click=\"","\"\n          >\n          </nile-icon>\n          <span\n            >","\n            ","</span\n          >\n          <nile-icon\n            class=\"calendar-header__month-navigation\"\n            name=\"arrowright\"\n            color=\"black\"\n            @click=\"","\"\n          >\n          </nile-icon>\n        </div>\n        <div class=\"day-names\">\n          <div class=\"day\">Sun</div>\n          <div class=\"day\">Mon</div>\n          <div class=\"day\">Tue</div>\n          <div class=\"day\">Wed</div>\n          <div class=\"day\">Thu</div>\n          <div class=\"day\">Fri</div>\n          <div class=\"day\">Sat</div>\n        </div>\n        <div class=\"days\">\n          ","\n        </div>\n      </div>\n    "])),this.prevMonth,new Date(t,s).toLocaleString("default",{month:"long"}),t,this.nextMonth,c.map(function(n,a){var l=a>=r.length&&a<r.length+e.length;return i(_templateObject2||(_templateObject2=_taggedTemplateLiteral([" <div\n              class=\"day "," "," ","\n                ","\n                \"\n              @click=\"","\"\n            >\n              ","\n            </div>"])),u(n,s,t,l),o(n,s,t,l)?"in-range":"",l?"":"filler",_this2.isCurrentDate(n,s,t)&&l?"current-date":"",function(){l&&_this2.selectDate(n,s,t);},n);}));}},{key:"formatDate",value:function formatDate(t){if(!t)return"";return"".concat(String(t.getDate()).padStart(2,"0"),"/").concat(String(t.getMonth()+1).padStart(2,"0"),"/").concat(t.getFullYear());}},{key:"formatDateRange",value:function formatDateRange(t){return t?t.startDate&&t.endDate?"".concat(this.formatDate(t.startDate)," - ").concat(this.formatDate(t.endDate)):"":t;}},{key:"handleStartDateInput",value:function handleStartDateInput(t){var i=this.parseDate(t.detail.value);this.isValidDateInput(i)||(this.startDate=null),i&&(!this.endDate||i<=this.endDate)?this.startDate=i:(this.startDate=null,this.endDate=null),this.requestUpdate();}},{key:"handleEndDateInput",value:function handleEndDateInput(t){var i=this.parseDate(t.detail.value);this.isValidDateInput(i)||(this.endDate=null),i&&(!this.startDate||i>=this.startDate)?this.endDate=i:this.endDate=null,this.requestUpdate();}},{key:"parseDate",value:function parseDate(t){var _t$split$map=t.split("/").map(Number),_t$split$map2=_slicedToArray(_t$split$map,3),i=_t$split$map2[0],s=_t$split$map2[1],e=_t$split$map2[2],n=new Date(e,s-1,i);return isNaN(n.getTime())?null:n;}},{key:"isValidDateInput",value:function isValidDateInput(t){return /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/.test(t);}},{key:"formatTime",value:function formatTime(t){if(!t)return"";return"".concat(String(t.getHours()).padStart(2,"0"),":").concat(String(t.getMinutes()).padStart(2,"0"),":").concat(String(t.getSeconds()).padStart(2,"0"));}},{key:"isValidTimeInput",value:function isValidTimeInput(t){return /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/.test(t);}},{key:"parseTime",value:function parseTime(t,i){if(!this.isValidTimeInput(t))return null;var _t$split$map3=t.split(":").map(Number),_t$split$map4=_slicedToArray(_t$split$map3,3),s=_t$split$map4[0],e=_t$split$map4[1],n=_t$split$map4[2],a=new Date(i.getTime());return a.setHours(s,e,n),a;}},{key:"handleStartTimeInput",value:function handleStartTimeInput(t){if(!this.startDate)return void(this.startDate=null);var i=this.parseTime(t.detail.value,this.startDate);i?this.startDate=i:this.startDate.setHours(0,0,0),this.requestUpdate();}},{key:"handleEndTimeInput",value:function handleEndTimeInput(t){if(!this.endDate)return void(this.endDate=null);var i=this.parseTime(t.detail.value,this.endDate);i?this.endDate=i:this.endDate.setHours(0,0,0),this.requestUpdate();}},{key:"setType",value:function setType(t){this.type=t;}},{key:"createRelativePeriod",value:function createRelativePeriod(t,i){var s=new Date(),e=new Date();switch(t){case"minutes":e.setMinutes(e.getMinutes()-i);break;case"hours":e.setHours(e.getHours()-i);break;case"days":e.setDate(e.getDate()-i);break;case"weeks":e.setDate(e.getDate()-7*i);break;case"months":e.setMonth(e.getMonth()-i);}return this.startDate=new Date(e.getTime()),this.endDate=new Date(s.getTime()),this.requestUpdate(),{startDate:this.startDate,endDate:this.endDate};}},{key:"handleTimeValueClick",value:function handleTimeValueClick(t,i,s){this.createRelativePeriod(t,i),this.selectedUnit=t,this.selectedValue=i,this.requestUpdate();}},{key:"renderTimeValues",value:function renderTimeValues(t,s){var _this3=this;return s.map(function(s){return i(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n          <div\n            class=\"time-value ","\"\n            @click=","\n          >\n            ","\n          </div>\n        "])),_this3.selectedUnit===t&&_this3.selectedValue===s?"time-value--selected":"",function(i){return _this3.handleTimeValueClick(t,s,i);},s);});}},{key:"handleDurationChange",value:function handleDurationChange(t){this.selectedValue=Number(t.detail.value),this.selectedUnit&&this.selectedValue&&this.handleTimeValueClick(this.selectedUnit,this.selectedValue,t);}},{key:"handleUnitChange",value:function handleUnitChange(t){this.selectedUnit=t.detail.value,this.selectedUnit&&this.selectedValue&&this.handleTimeValueClick(this.selectedUnit,this.selectedValue,t);}},{key:"handleTimeZoneChange",value:function handleTimeZoneChange(t){this.selectedTimeZone=t.detail.value,this.requestUpdate();}},{key:"render",value:function render(){var _this4=this;var t=h;this.getDaysArray(this.currentYear,this.currentMonth);var s=(this.currentMonth+1)%12,e=11===this.currentMonth?this.currentYear+1:this.currentYear;return this.getDaysArray(e,s),i(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n      <div\n        class=\"base "," ","\"\n      >\n        <div class=\"calendar-config ","\">\n          <div class=\"calendar-switcher\">\n            <div\n              class=\"calendar-switch","\"\n              @click=\"","\"\n            >\n              Absolute\n            </div>\n            <div\n              class=\"calendar-switch","\"\n              @click=\"","\"\n            >\n              Relative\n            </div>\n          </div>\n\n          <div class=\"calendar-timezone\">\n            <nile-select\n              searchEnabled\n              hoist\n              value=","\n              @nile-change=","\n            >\n              <nile-option value=\"local\">Local Time Zone</nile-option>\n              ","\n            </nile-select>\n          </div>\n        </div>\n\n        <div\n          class=\"calendar-wrapper  ","\"\n        >\n          <div class=\"calendar-container ","\">\n            ","\n          </div>\n        </div>\n\n        <div class=\"unit-container ","\">\n          <div class=\"time-unit-group\">\n            <div class=\"time-unit-name\"><span>Minutes</span></div>\n            <div class=\"time-unit-value\">\n              ","\n            </div>\n          </div>\n\n          <div class=\"time-unit-group\">\n            <div class=\"time-unit-name\"><span>Hours</span></div>\n            <div class=\"time-unit-value\">\n              ","\n            </div>\n          </div>\n\n          <div class=\"time-unit-group\">\n            <div class=\"time-unit-name\"><span>Days</span></div>\n            <div class=\"time-unit-value\">\n              ","\n            </div>\n          </div>\n\n          <div class=\"time-unit-group\">\n            <div class=\"time-unit-name\"><span>Weeks</span></div>\n            <div class=\"time-unit-value\">\n              ","\n            </div>\n          </div>\n\n          <div class=\"time-unit-group\">\n            <div class=\"time-unit-name\"><span>Months:</span></div>\n            <div class=\"time-unit-value\">\n              ","\n            </div>\n          </div>\n        </div>\n\n        ","\n        ","\n      </div>\n    "])),this.range?"base__range":"","relative"===this.type?"base__relative":"",this.range?"":"hidden","absolute"===this.type?"__active":"",function(){return _this4.setType("absolute");},"relative"===this.type?"__active":"",function(){return _this4.setType("relative");},this.selectedTimeZone,this.handleTimeZoneChange,t.map(function(t){return i(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n                  <nile-option value=\"","\">","</nile-option>\n                "])),t,t);}),"absolute"!==this.type?"hidden":"",this.range?"with-margin":"",this.renderMonth(this.currentYear,this.currentMonth,this.getDaysArray(this.currentYear,this.currentMonth)),"relative"!==this.type?"hidden":"",this.renderTimeValues("minutes",[1,3,5,15,30,45]),this.renderTimeValues("hours",[1,2,3,6,8,12]),this.renderTimeValues("days",[1,2,3,4,5,6]),this.renderTimeValues("weeks",[1,2,4,6]),this.renderTimeValues("months",[3,6,12,15]),this.range&&"relative"===this.type?i(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n          <div class=\"calender-input calender-input--relative\">\n            <div class=\"from\">\n              <nile-input class=\"manual-input\" label=\"Duration\"  value=\"","\"\n              @nile-input=\"","\"\n              placeholder=\"Enter Value\" ></nile-input>\n              <nile-select class=\"manual-input\"  label=\"Unit\" value=\"","\"\n              @nile-change=\"","\"\n              >\n                <nile-option value=\"minutes\"> Minutes </nile-option>\n                <nile-option value=\"hours\"> Hours </nile-option>\n                <nile-option value=\"days\"> Days </nile-option>\n                <nile-option value=\"weeks\"> Weeks </nile-option>\n                <nile-option value=\"months\"> Months </nile-option>\n          </nile-select>\n\n            </div>\n\n          <div class=\"button-contaner\">\n            <nile-button class=\"apply-button\"  ?disabled=\"","\"  @click=\"","\"> Apply</nile-button>\n            </div>\n\n\n        </div>\n        </div>\n        "])),this.selectedValue,this.handleDurationChange,this.selectedUnit,this.handleUnitChange,!this.startDate||!this.endDate,this.confimRange):"",this.range&&"absolute"===this.type?i(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n          <div class=\"calender-input\">\n            <span class=\"manual-input-label\">From </span>\n            <div class=\"from\">\n              <nile-input class=\"manual-input\" value=\"","\" placeholder=\"DD/MM/YYYY\" @nile-change=\"","\"></nile-input>\n              <nile-input class=\"manual-input\" value=\"","\" placeholder=\"HH:MM:SS\" @nile-change=\"","\"> </nile-input>\n\n            </div>\n<br>\n            <span class=\"manual-input-label\">To </span>\n            <div class=\"from\">\n            <nile-input class=\"manual-input\" value=\"","\" placeholder=\"DD/MM/YYYY\" @nile-change=\"","\"></nile-input>\n            <nile-input class=\"manual-input\" value=\"","\" placeholder=\"HH:MM:SS\" @nile-change=\"","\"> </nile-input>\n          </div>\n          <div class=\"button-contaner\">\n            <nile-button class=\"apply-button\"  ?disabled=\"","\"  @click=\"","\"> Apply</nile-button>\n            </div>\n\n\n        </div>\n        </div>\n        "])),this.formatDate(this.startDate),this.handleStartDateInput,this.formatTime(this.startDate),this.handleStartTimeInput,this.formatDate(this.endDate),this.handleEndDateInput,this.formatTime(this.endDate),this.handleEndTimeInput,!this.startDate||!this.endDate,this.confimRange):"");}}],[{key:"styles",get:function get(){return[n];}},{key:"observedAttributes",get:function get(){return["value","range"];}}]);return d;}(l));t([s("nile-dropdown")],d.prototype,"dropdown",void 0),t([r({type:Boolean,reflect:!0})],d.prototype,"dropDownOpened",void 0),t([r({type:Object})],d.prototype,"value",void 0),t([r({type:Object})],d.prototype,"rangeValue",void 0),t([r({type:String,attribute:"value"})],d.prototype,"valueAttribute",void 0),t([r({type:String,attribute:"value"})],d.prototype,"formattedDate",void 0),t([r({type:Object})],d.prototype,"startDate",void 0),t([r({type:Object})],d.prototype,"endDate",void 0),t([r({type:Boolean})],d.prototype,"isSelectingStart",void 0),t([r({type:Boolean})],d.prototype,"range",void 0),t([r({type:String})],d.prototype,"type",void 0),t([r({type:String})],d.prototype,"selectedUnit",void 0),t([r({type:Number})],d.prototype,"selectedValue",void 0),t([r({type:String})],d.prototype,"selectedTimeZone",void 0),t([a("value")],d.prototype,"valueChanged",null),_export("N",d=t([e("nile-calendar")],d));}};});
 //# sourceMappingURL=nile-calendar.cjs.js.map