@aquera/nile-elements 0.0.120 → 0.0.121

package/dist/nile-popover/nile-popover.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-popover.cjs.js","sources":["../../../src/nile-popover/nile-popover.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 {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n  PropertyValues,\n} from 'lit-element';\nimport { customElement, state } from 'lit/decorators.js';\nimport { styles } from './nile-popover.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\n\n/**\n * Nile icon component.\n *\n * @tag nile-popover\n *\n */\n@customElement('nile-popover')\nexport class NilePopover extends NileElement {\n  /**\n   * The styles for Popover\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  protected override BUBBLES: boolean=false;\n\n  /**\n   * The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @property() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** The distance in pixels from which to offset the popover away from its target. */\n  @property({ type: Number }) distance = 18;\n\n  @property({ type: Boolean, attribute: 'arrow' }) arrow = true;\n\n  /** Gives the title to the popover */\n  @property({ type: String }) title = '';\n\n  @property({type:Boolean }) open = false;\n  \n  @state() isShow:boolean = false;\n\n  @property({ attribute: 'arrow-placement' }) arrowPlacement:\n    | 'start'\n    | 'end'\n    | 'center'\n    | 'anchor' = 'anchor';\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n   */\n  @property({ type: Boolean }) hoist = false;\n\n  @property({ type: Boolean }) flip = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.emit('nile-init');\n    document.addEventListener('click', this.handleDocumentClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n    document.removeEventListener('click', this.handleDocumentClick);\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    if(_changedProperties.has('open')){\n      this.isShow=this.open;\n    }\n  }\n\n  @watch('isShow')\n  handleShowHide(){\n    if(this.isShow)this.emit('nile-show')\n    else this.emit('nile-hide')\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <nile-popup\n        active\n        .arrow=\"${this.arrow && this.isShow}\"\n        distance=\"${this.distance}\"\n        placement=\"${this.placement}\"\n        @click=${(e: Event) => e.stopPropagation()}\n        arrowPlacement=\"${this.arrowPlacement}\"\n        .flip=\"${this.flip}\"\n        shift\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n      >\n        <slot\n          slot=\"anchor\"\n          name=\"anchor\"\n          aria-describedby=\"tooltip\"\n          @click=${this.handleClick}\n        ></slot>\n        ${this.isShow\n          ? html` <div part=\"popover\" class=\"popover__box\">\n              <slot name=\"title\" class=\"popover__title\">${this.title}</slot>\n              <slot part=\"base\"></slot>\n              <slot name=\"action\" class=\"popover__action\"> </slot>\n            </div>`\n          : html``}\n      </nile-popup>\n    `;\n  }\n\n  private handleClick = () => {\n    this.isShow = !this.isShow;\n    const allPopovers = document.querySelectorAll('nile-popover');\n\n    allPopovers.forEach(popover => {\n      if (popover !== this) {\n        popover.isShow = false;\n      }\n    });\n  };\n\n  private handleDocumentClick = () => {\n    if (this.isShow) {\n      this.isShow = false;\n    }\n  };\n\n  /* #endregion */\n}\n\nexport default NilePopover;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-popover': NilePopover;\n  }\n}\n"],"names":["NilePopover","n","constructor","this","BUBBLES","placement","distance","arrow","title","open","isShow","arrowPlacement","hoist","flip","handleClick","document","querySelectorAll","forEach","popover","handleDocumentClick","_this","_inherits","_r","_createClass","key","value","connectedCallback","super","emit","addEventListener","disconnectedCallback","removeEventListener","updated","_changedProperties","has","handleShowHide","render","html","_templateObject","_taggedTemplateLiteral","e","stopPropagation","_templateObject2","_templateObject3","__decorate","get","styles","NileElement","property","prototype","type","Number","Boolean","attribute","String","state","watch","_export","customElement"],"mappings":"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"}
+{"version":3,"file":"nile-popover.cjs.js","sources":["../../../src/nile-popover/nile-popover.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 {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n  PropertyValues,\n} from 'lit-element';\nimport { customElement, state } from 'lit/decorators.js';\nimport { styles } from './nile-popover.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\n\n/**\n * Nile icon component.\n *\n * @tag nile-popover\n *\n */\n@customElement('nile-popover')\nexport class NilePopover extends NileElement {\n  /**\n   * The styles for Popover\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  protected override BUBBLES: boolean=false;\n\n  /**\n   * The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @property() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** The distance in pixels from which to offset the popover away from its target. */\n  @property({ type: Number }) distance = 18;\n\n  @property({ type: Boolean, reflect: true }) preventOverlayClose = false;\n\n  @property({ type: Boolean, attribute: 'arrow' }) arrow = true;\n\n  /** Gives the title to the popover */\n  @property({ type: String }) title = '';\n\n  @property({type:Boolean }) open = false;\n  \n  @state() isShow:boolean = false;\n\n  @property({ attribute: 'arrow-placement' }) arrowPlacement:\n    | 'start'\n    | 'end'\n    | 'center'\n    | 'anchor' = 'anchor';\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n   */\n  @property({ type: Boolean }) hoist = false;\n\n  @property({ type: Boolean }) flip = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.emit('nile-init');\n    document.addEventListener('click', this.handleDocumentClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n    document.removeEventListener('click', this.handleDocumentClick);\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    if(_changedProperties.has('open')){\n      this.isShow=this.open;\n    }\n  }\n\n  @watch('isShow')\n  handleShowHide(){\n    if(this.isShow)this.emit('nile-show')\n    else this.emit('nile-hide')\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <nile-popup\n        active\n        .arrow=\"${this.arrow && this.isShow}\"\n        distance=\"${this.distance}\"\n        placement=\"${this.placement}\"\n        @click=${(e: Event) => e.stopPropagation()}\n        arrowPlacement=\"${this.arrowPlacement}\"\n        .flip=\"${this.flip}\"\n        shift\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n      >\n        <slot\n          slot=\"anchor\"\n          name=\"anchor\"\n          aria-describedby=\"tooltip\"\n          @click=${this.handleClick}\n        ></slot>\n        ${this.isShow\n          ? html` <div part=\"popover\" class=\"popover__box\">\n              <slot name=\"title\" class=\"popover__title\">${this.title}</slot>\n              <slot part=\"base\"></slot>\n              <slot name=\"action\" class=\"popover__action\"> </slot>\n            </div>`\n          : html``}\n      </nile-popup>\n    `;\n  }\n\n  private handleClick = () => {\n    this.isShow = !this.isShow;\n    const allPopovers = document.querySelectorAll('nile-popover');\n\n    allPopovers.forEach(popover => {\n      if (popover !== this) {\n        popover.isShow = false;\n      }\n    });\n  };\n\n  private handleDocumentClick = () => {\n    if (this.isShow && !this.preventOverlayClose) {\n      this.isShow = false;\n    }\n  };\n\n  /* #endregion */\n}\n\nexport default NilePopover;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-popover': NilePopover;\n  }\n}\n"],"names":["NilePopover","_r","n","this","BUBBLES","placement","distance","preventOverlayClose","arrow","title","open","isShow","arrowPlacement","hoist","flip","handleClick","document","querySelectorAll","forEach","popover","handleDocumentClick","_this","_inherits","_createClass","key","value","connectedCallback","super","emit","addEventListener","disconnectedCallback","removeEventListener","updated","_changedProperties","has","handleShowHide","render","html","_templateObject","_taggedTemplateLiteral","e","stopPropagation","_templateObject2","_templateObject3","__decorate","get","styles","NileElement","property","prototype","type","Number","Boolean","reflect","attribute","String","state","watch","customElement"],"mappings":"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"}

package/dist/nile-popover/nile-popover.esm.js

@@ -1,4 +1,4 @@
-import{__decorate as t}from"tslib";import{x as i}from"../index-0a3007c5.esm.js";import{state as e,customElement as s}from"lit/decorators.js";import{s as o}from"./nile-popover.css.esm.js";import{N as r}from"../internal/nile-element.esm.js";import{w as l}from"../internal/watch.esm.js";import{n as a}from"../property-09139d3c.esm.js";import"lit";let n=class extends r{constructor(){super(...arguments),this.BUBBLES=!1,this.placement="top",this.distance=18,this.arrow=!0,this.title="",this.open=!1,this.isShow=!1,this.arrowPlacement="anchor",this.hoist=!1,this.flip=!1,this.handleClick=()=>{this.isShow=!this.isShow;document.querySelectorAll("nile-popover").forEach((t=>{t!==this&&(t.isShow=!1)}))},this.handleDocumentClick=()=>{this.isShow&&(this.isShow=!1)}}static get styles(){return[o]}connectedCallback(){super.connectedCallback(),this.emit("nile-init"),document.addEventListener("click",this.handleDocumentClick)}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy"),document.removeEventListener("click",this.handleDocumentClick)}updated(t){t.has("open")&&(this.isShow=this.open)}handleShowHide(){this.isShow?this.emit("nile-show"):this.emit("nile-hide")}render(){return i`
+import{__decorate as t}from"tslib";import{x as i}from"../index-0a3007c5.esm.js";import{state as e,customElement as o}from"lit/decorators.js";import{s}from"./nile-popover.css.esm.js";import{N as r}from"../internal/nile-element.esm.js";import{w as l}from"../internal/watch.esm.js";import{n as a}from"../property-09139d3c.esm.js";import"lit";let n=class extends r{constructor(){super(...arguments),this.BUBBLES=!1,this.placement="top",this.distance=18,this.preventOverlayClose=!1,this.arrow=!0,this.title="",this.open=!1,this.isShow=!1,this.arrowPlacement="anchor",this.hoist=!1,this.flip=!1,this.handleClick=()=>{this.isShow=!this.isShow;document.querySelectorAll("nile-popover").forEach((t=>{t!==this&&(t.isShow=!1)}))},this.handleDocumentClick=()=>{this.isShow&&!this.preventOverlayClose&&(this.isShow=!1)}}static get styles(){return[s]}connectedCallback(){super.connectedCallback(),this.emit("nile-init"),document.addEventListener("click",this.handleDocumentClick)}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy"),document.removeEventListener("click",this.handleDocumentClick)}updated(t){t.has("open")&&(this.isShow=this.open)}handleShowHide(){this.isShow?this.emit("nile-show"):this.emit("nile-hide")}render(){return i`
       <nile-popup
         active
         .arrow="${this.arrow&&this.isShow}"
@@ -22,4 +22,4 @@ import{__decorate as t}from"tslib";import{x as i}from"../index-0a3007c5.esm.js";
               <slot name="action" class="popover__action"> </slot>
             </div>`:i``}
       </nile-popup>
-    `}};t([a()],n.prototype,"placement",void 0),t([a({type:Number})],n.prototype,"distance",void 0),t([a({type:Boolean,attribute:"arrow"})],n.prototype,"arrow",void 0),t([a({type:String})],n.prototype,"title",void 0),t([a({type:Boolean})],n.prototype,"open",void 0),t([e()],n.prototype,"isShow",void 0),t([a({attribute:"arrow-placement"})],n.prototype,"arrowPlacement",void 0),t([a({type:Boolean})],n.prototype,"hoist",void 0),t([a({type:Boolean})],n.prototype,"flip",void 0),t([l("isShow")],n.prototype,"handleShowHide",null),n=t([s("nile-popover")],n);export{n as N};
+    `}};t([a()],n.prototype,"placement",void 0),t([a({type:Number})],n.prototype,"distance",void 0),t([a({type:Boolean,reflect:!0})],n.prototype,"preventOverlayClose",void 0),t([a({type:Boolean,attribute:"arrow"})],n.prototype,"arrow",void 0),t([a({type:String})],n.prototype,"title",void 0),t([a({type:Boolean})],n.prototype,"open",void 0),t([e()],n.prototype,"isShow",void 0),t([a({attribute:"arrow-placement"})],n.prototype,"arrowPlacement",void 0),t([a({type:Boolean})],n.prototype,"hoist",void 0),t([a({type:Boolean})],n.prototype,"flip",void 0),t([l("isShow")],n.prototype,"handleShowHide",null),n=t([o("nile-popover")],n);export{n as N};

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

@@ -67,10 +67,6 @@ export const styles = css `
     pointer-events: none;
   }
 
-  .button__label::slotted(nile-icon) {
-    /* vertical-align: -2px; */
-  }
-
   /* Primary */
   .button--standard.button--primary {
     background-color: var(--nile-colors-button-primary);
@@ -348,92 +344,92 @@ export const styles = css `
   }
 
   /* Primary Variant - Nile Icon Fill */
-  .button--standard.button--primary ::slotted(nile-icon) {
+  .button--standard.button--primary ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
   }
   .button--standard.button--primary:hover:not(.button--disabled)
-    ::slotted(nile-icon),
+    ::slotted(nile-icon:not([color])),
   .button--standard.button--primary:active:not(.button--disabled)
-    ::slotted(nile-icon) {
+    ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
   }
-  .button--standard.button--primary.button--disabled ::slotted(nile-icon) {
+  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;
   }
 
   /* Secondary Variant */
-  .button--standard.button--secondary ::slotted(nile-icon) {
+  .button--standard.button--secondary ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
   }
   .button--standard.button--secondary:hover:not(.button--disabled)
-    ::slotted(nile-icon),
+    ::slotted(nile-icon:not([color])),
   .button--standard.button--secondary:active:not(.button--disabled)
-    ::slotted(nile-icon) {
+    ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
   }
-  .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {
+  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(
       --nile-colors-button-secondary-disabled-text
     ) !important;
   }
 
   /* Tertiary Variant */
-  .button--standard.button--tertiary ::slotted(nile-icon) {
+  .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
   }
   .button--standard.button--tertiary:hover:not(.button--disabled)
-    ::slotted(nile-icon),
+    ::slotted(nile-icon:not([color])),
   .button--standard.button--tertiary:active:not(.button--disabled)
-    ::slotted(nile-icon) {
+    ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
   }
-  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {
+  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(
       --nile-colors-button-tertiary-disabled-text
     ) !important;
   }
 
   /* Ghost Variant */
-  .button--standard.button--ghost ::slotted(nile-icon) {
+  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
   }
   .button--standard.button--ghost:hover:not(.button--disabled)
-    ::slotted(nile-icon),
+    ::slotted(nile-icon:not([color])),
   .button--standard.button--ghost:active:not(.button--disabled)
-    ::slotted(nile-icon) {
+    ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
   }
-  .button--standard.button--ghost ::slotted(nile-icon) {
+  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(
       --nile-colors-button-tertiary-disabled-text
     ) !important;
   }
 
   /* Caution Variant */
-  .button--standard.button--caution ::slotted(nile-icon) {
+  .button--standard.button--caution ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
   }
   .button--standard.button--caution:hover:not(.button--disabled)
-    ::slotted(nile-icon),
+    ::slotted(nile-icon:not([color])),
   .button--standard.button--caution:active:not(.button--disabled)
-    ::slotted(nile-icon) {
+    ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
   }
-  .button--standard.button--caution.button--disabled ::slotted(nile-icon) {
+  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;
   }
 
   /* destructive */
-  .button--standard.button--destructive ::slotted(nile-icon) {
+  .button--standard.button--destructive ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: #fff !important;
   }
   .button--standard.button--destructive:hover:not(.button--disabled)
-    ::slotted(nile-icon),
+    ::slotted(nile-icon:not([color])),
   .button--standard.button--caution:active:not(.button--disabled)
-    ::slotted(nile-icon) {
+    ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: #fff !important;
   }
-  .button--standard.button--destructive.button--disabled ::slotted(nile-icon) {
+  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: #fff !important;
   }
 

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

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

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

@@ -47,9 +47,7 @@ export declare class NileCalendar extends NileElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    attributeChangedCallback(name: string, _old: string | null, newValue: string | null): void;
     checkValidAllowedDate(): void;
-    valueChanged(): void;
     /**
      * Render method
      */

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

@@ -57,6 +57,12 @@ let NileCalendar = class NileCalendar extends NileElement {
     updated(changedProperties) {
         super.updated(changedProperties);
         if (changedProperties.has('valueAttribute')) {
+            if (!this.valueAttribute) {
+                this.value = null;
+                this.startDate = null;
+                this.endDate = null;
+                this.isSelectingStart = true;
+            }
             const date = new Date(this.valueAttribute || '');
             if (!isNaN(date.getTime())) {
                 const offset = date.getTimezoneOffset();
@@ -64,14 +70,8 @@ let NileCalendar = class NileCalendar extends NileElement {
                 this.currentMonth = this.value.getMonth();
                 this.currentYear = this.value.getFullYear();
             }
-        }
-    }
-    attributeChangedCallback(name, _old, newValue) {
-        if (name === 'value') {
-            this.valueAttribute = newValue;
             this.initializeValue();
         }
-        super.attributeChangedCallback(name, _old, newValue);
     }
     checkValidAllowedDate() {
         let newDateRange;
@@ -95,19 +95,6 @@ let NileCalendar = class NileCalendar extends NileElement {
             this.allowedDatesLocal = newDateRange;
         }
     }
-    valueChanged() {
-        if (this.range && this.value) {
-            this.value = null;
-            return;
-        }
-        if (this.value && !isNaN(this.value.getTime())) {
-            const offset = this.value.getTimezoneOffset();
-            const localDate = new Date(this.value.getTime() - offset * 60 * 1000);
-            if (!isNaN(localDate.getTime())) {
-                this.valueAttribute = localDate.toISOString().split('T')[0];
-            }
-        }
-    }
     /**
      * Render method
      */
@@ -240,7 +227,7 @@ let NileCalendar = class NileCalendar extends NileElement {
         inputmode="numeric"
         type="number"
         value="${this.selectedValue}" 
-        @nile-input="${this.handleDurationChange}"
+        @nile-change="${this.handleDurationChange}"
         placeholder="Enter Value"
         ></nile-input>
 
@@ -408,11 +395,9 @@ let NileCalendar = class NileCalendar extends NileElement {
             this.valueAttribute = '';
             this.startDate = null;
             this.endDate = null;
-            this.emitChangedData(null);
         }
         else {
             this.value = null;
-            this.emitChangedData({ value: null });
         }
         this.emit('nile-clear');
     }
@@ -493,6 +478,7 @@ let NileCalendar = class NileCalendar extends NileElement {
      * Function to handle relative date selection
      */
     handleDurationChange(event) {
+        event.stopPropagation();
         event.detail.value = event.detail.value.replace(/e/gi, "");
         const duration = Number(event.detail.value);
         if (!duration) {
@@ -505,6 +491,7 @@ let NileCalendar = class NileCalendar extends NileElement {
         }
     }
     handleUnitChange(event) {
+        event.stopPropagation();
         this.selectedUnit = event.detail.value;
         if (this.selectedUnit && this.selectedValue) {
             this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
@@ -546,6 +533,7 @@ let NileCalendar = class NileCalendar extends NileElement {
      * Function to handle start time selecion
      */
     handleStartTimeInput(event) {
+        event.stopPropagation();
         if (!this.startDate) {
             this.startDate = null;
             return;
@@ -563,6 +551,7 @@ let NileCalendar = class NileCalendar extends NileElement {
      * Function to handle end time selecion
      */
     handleEndTimeInput(event) {
+        event.stopPropagation();
         if (!this.endDate) {
             this.endDate = null;
             return;
@@ -754,9 +743,6 @@ __decorate([
 __decorate([
     watch('allowedDates')
 ], NileCalendar.prototype, "checkValidAllowedDate", null);
-__decorate([
-    watch('value')
-], NileCalendar.prototype, "valueChanged", null);
 NileCalendar = __decorate([
     customElement('nile-calendar')
 ], NileCalendar);