@aquera/nile-elements 0.0.97 → 0.0.98

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

@@ -1,2 +1,2 @@
-System.register(["../index-c7ad3b47.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 execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: contents;\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: 0;\n  }\n\n  .alert {\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    border: solid 2px 2px;\n    border-radius: 8px;\n    margin: inherit;\n    padding: 16px;\n    gap: 16px;\n    width: max-content;\n    min-width: 400px;\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  .alert__prefix-icon-container {\n    background-color: red;\n    border-radius: 4px;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .alert__icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: 10px;\n  }\n\n  .alert--success {\n    border: 1px solid var(--nile-toast-color-border-success);\n    background: var(--nile-toast-color-background-success);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--success .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-success);\n  }\n\n  .alert--info {\n    border: 1px solid var(--nile-toast-color-border-info);\n    background: var(--nile-toast-color-background-info);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--info .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-info);\n  }\n\n  .alert--warning {\n    border: 1px solid var(--nile-toast-color-border-warning);\n    background: var(--nile-toast-color-background-warning);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--warning .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-warning);\n  }\n\n  .alert--error {\n    border: 1px solid var(--nile-toast-color-border-error);\n    background: var(--nile-toast-color-background-error);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--error .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-error);\n  }\n\n  .alert--gray {\n    border: 1px solid var(--nile-toast-color-border-gray);\n    background: var(--nile-toast-color-background-gray);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--gray .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-gray);\n  }\n\n  .alert--black {\n    border: 1px solid var(--nile-toast-color-border-black);\n    background: var(--nile-toast-color-background-black);\n    box-shadow: var(--nile-toast-color-box-black);\n  }\n\n  .alert--black .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-black);\n  }\n\n  .alert__message {\n    flex: 1 1 auto;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    align-items: flex-start;\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    line-height: 20px;\n    color: black;\n    gap:3px;\n  }\n\n  .alert__message--title {\n    font-weight: 600;\n    color:#344054;\n  }\n\n  .alert__message--content {\n    font-weight:400;\n    color:#475467;\n  }\n\n  .alert__message--content-only {\n    margin-top: 3px;\n  }\n\n  .alert__close-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .alert__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-top: 4px;\n  }\n\n  .alert__tag {\n    height: 24px;\n    display: flex;\n    border-radius: 4px;\n    border: 1px solid #e5e9eb;\n    background: var(--nile-colors-white-base);\n  }\n\n  .alert__tag-content {\n    border-left: 1px solid #e5e9eb;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 6px;\n\n    color: var(--nile-colors-dark-900);\n    font-family: var\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  .alert__tag-image {\n    height: 24px;\n    width: 24px;\n    border-radius: 4px 0 0 4px;\n  }\n\n  .alert__prefix-img {\n    height: 24px;\n    border-radius: 4px;\n  }\n\n  .alert--no-content{\n    align-items:center ;\n  }\n\n  [hidden] {\n    display: none;\n  }\n"]))));}};});
+System.register(["../index-c7ad3b47.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 execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: contents;\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: 0;\n  }\n\n  .alert {\n    max-width: 100%;\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    border: solid 2px 2px;\n    border-radius: 8px;\n    margin: inherit;\n    padding: 16px;\n    gap: 16px;\n    width: max-content;\n    min-width: 400px;\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  .alert__prefix-icon-container {\n    background-color: red;\n    border-radius: 4px;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .alert__icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: 10px;\n  }\n\n  .alert--success {\n    border: 1px solid var(--nile-toast-color-border-success);\n    background: var(--nile-toast-color-background-success);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--success .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-success);\n  }\n\n  .alert--info {\n    border: 1px solid var(--nile-toast-color-border-info);\n    background: var(--nile-toast-color-background-info);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--info .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-info);\n  }\n\n  .alert--warning {\n    border: 1px solid var(--nile-toast-color-border-warning);\n    background: var(--nile-toast-color-background-warning);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--warning .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-warning);\n  }\n\n  .alert--error {\n    border: 1px solid var(--nile-toast-color-border-error);\n    background: var(--nile-toast-color-background-error);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--error .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-error);\n  }\n\n  .alert--gray {\n    border: 1px solid var(--nile-toast-color-border-gray);\n    background: var(--nile-toast-color-background-gray);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--gray .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-gray);\n  }\n\n  .alert--black {\n    border: 1px solid var(--nile-toast-color-border-black);\n    background: var(--nile-toast-color-background-black);\n    box-shadow: var(--nile-toast-color-box-black);\n  }\n\n  .alert--black .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-black);\n  }\n\n  .alert__message {\n    flex: 1 1 auto;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    align-items: flex-start;\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    line-height: 20px;\n    color: black;\n    gap:3px;\n  }\n\n  .alert__message--title {\n    font-weight: 600;\n    color:#344054;\n  }\n\n  .alert__message--content {\n    font-weight:400;\n    color:#475467;\n  }\n\n  .alert__message--content-only {\n    margin-top: 3px;\n  }\n\n  .alert__close-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .alert__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-top: 4px;\n  }\n\n  .alert__tag {\n    height: 24px;\n    display: flex;\n    border-radius: 4px;\n    border: 1px solid #e5e9eb;\n    background: var(--nile-colors-white-base);\n  }\n\n  .alert__tag-content {\n    border-left: 1px solid #e5e9eb;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 6px;\n\n    color: var(--nile-colors-dark-900);\n    font-family:  var(--nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  .alert__tag-image {\n    height: 24px;\n    width: 24px;\n    border-radius: 4px 0 0 4px;\n  }\n\n  .alert__prefix-img {\n    height: 24px;\n    border-radius: 4px;\n  }\n\n  .alert--no-content{\n    align-items:center ;\n  }\n\n  [hidden] {\n    display: none;\n  }\n"]))));}};});
 //# sourceMappingURL=nile-toast.css.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-toast.css.cjs.js","sources":["../../../src/nile-toast/nile-toast.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 * Toast CSS\n */\nexport const styles = css`\n  :host {\n    display: contents;\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: 0;\n  }\n\n  .alert {\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    border: solid 2px 2px;\n    border-radius: 8px;\n    margin: inherit;\n    padding: 16px;\n    gap: 16px;\n    width: max-content;\n    min-width: 400px;\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  .alert__prefix-icon-container {\n    background-color: red;\n    border-radius: 4px;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .alert__icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: 10px;\n  }\n\n  .alert--success {\n    border: 1px solid var(--nile-toast-color-border-success);\n    background: var(--nile-toast-color-background-success);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--success .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-success);\n  }\n\n  .alert--info {\n    border: 1px solid var(--nile-toast-color-border-info);\n    background: var(--nile-toast-color-background-info);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--info .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-info);\n  }\n\n  .alert--warning {\n    border: 1px solid var(--nile-toast-color-border-warning);\n    background: var(--nile-toast-color-background-warning);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--warning .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-warning);\n  }\n\n  .alert--error {\n    border: 1px solid var(--nile-toast-color-border-error);\n    background: var(--nile-toast-color-background-error);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--error .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-error);\n  }\n\n  .alert--gray {\n    border: 1px solid var(--nile-toast-color-border-gray);\n    background: var(--nile-toast-color-background-gray);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--gray .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-gray);\n  }\n\n  .alert--black {\n    border: 1px solid var(--nile-toast-color-border-black);\n    background: var(--nile-toast-color-background-black);\n    box-shadow: var(--nile-toast-color-box-black);\n  }\n\n  .alert--black .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-black);\n  }\n\n  .alert__message {\n    flex: 1 1 auto;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    align-items: flex-start;\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    line-height: 20px;\n    color: black;\n    gap:3px;\n  }\n\n  .alert__message--title {\n    font-weight: 600;\n    color:#344054;\n  }\n\n  .alert__message--content {\n    font-weight:400;\n    color:#475467;\n  }\n\n  .alert__message--content-only {\n    margin-top: 3px;\n  }\n\n  .alert__close-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .alert__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-top: 4px;\n  }\n\n  .alert__tag {\n    height: 24px;\n    display: flex;\n    border-radius: 4px;\n    border: 1px solid #e5e9eb;\n    background: var(--nile-colors-white-base);\n  }\n\n  .alert__tag-content {\n    border-left: 1px solid #e5e9eb;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 6px;\n\n    color: var(--nile-colors-dark-900);\n    font-family: var\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  .alert__tag-image {\n    height: 24px;\n    width: 24px;\n    border-radius: 4px 0 0 4px;\n  }\n\n  .alert__prefix-img {\n    height: 24px;\n    border-radius: 4px;\n  }\n\n  .alert--no-content{\n    align-items:center ;\n  }\n\n  [hidden] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"wXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-toast.css.cjs.js","sources":["../../../src/nile-toast/nile-toast.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 * Toast CSS\n */\nexport const styles = css`\n  :host {\n    display: contents;\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: 0;\n  }\n\n  .alert {\n    max-width: 100%;\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    border: solid 2px 2px;\n    border-radius: 8px;\n    margin: inherit;\n    padding: 16px;\n    gap: 16px;\n    width: max-content;\n    min-width: 400px;\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  .alert__prefix-icon-container {\n    background-color: red;\n    border-radius: 4px;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .alert__icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: 10px;\n  }\n\n  .alert--success {\n    border: 1px solid var(--nile-toast-color-border-success);\n    background: var(--nile-toast-color-background-success);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--success .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-success);\n  }\n\n  .alert--info {\n    border: 1px solid var(--nile-toast-color-border-info);\n    background: var(--nile-toast-color-background-info);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--info .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-info);\n  }\n\n  .alert--warning {\n    border: 1px solid var(--nile-toast-color-border-warning);\n    background: var(--nile-toast-color-background-warning);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--warning .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-warning);\n  }\n\n  .alert--error {\n    border: 1px solid var(--nile-toast-color-border-error);\n    background: var(--nile-toast-color-background-error);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--error .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-error);\n  }\n\n  .alert--gray {\n    border: 1px solid var(--nile-toast-color-border-gray);\n    background: var(--nile-toast-color-background-gray);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--gray .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-gray);\n  }\n\n  .alert--black {\n    border: 1px solid var(--nile-toast-color-border-black);\n    background: var(--nile-toast-color-background-black);\n    box-shadow: var(--nile-toast-color-box-black);\n  }\n\n  .alert--black .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-black);\n  }\n\n  .alert__message {\n    flex: 1 1 auto;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    align-items: flex-start;\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    line-height: 20px;\n    color: black;\n    gap:3px;\n  }\n\n  .alert__message--title {\n    font-weight: 600;\n    color:#344054;\n  }\n\n  .alert__message--content {\n    font-weight:400;\n    color:#475467;\n  }\n\n  .alert__message--content-only {\n    margin-top: 3px;\n  }\n\n  .alert__close-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .alert__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-top: 4px;\n  }\n\n  .alert__tag {\n    height: 24px;\n    display: flex;\n    border-radius: 4px;\n    border: 1px solid #e5e9eb;\n    background: var(--nile-colors-white-base);\n  }\n\n  .alert__tag-content {\n    border-left: 1px solid #e5e9eb;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 6px;\n\n    color: var(--nile-colors-dark-900);\n    font-family:  var(--nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  .alert__tag-image {\n    height: 24px;\n    width: 24px;\n    border-radius: 4px 0 0 4px;\n  }\n\n  .alert__prefix-img {\n    height: 24px;\n    border-radius: 4px;\n  }\n\n  .alert--no-content{\n    align-items:center ;\n  }\n\n  [hidden] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"wXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

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

@@ -7,6 +7,8 @@ import{i as o}from"../index-0a3007c5.esm.js";const r=o`
   }
 
   .alert {
+    max-width: 100%;
+    box-sizing: border-box;
     position: relative;
     display: flex;
     align-items: flex-start;
@@ -157,7 +159,7 @@ import{i as o}from"../index-0a3007c5.esm.js";const r=o`
     padding: 0 6px;
 
     color: var(--nile-colors-dark-900);
-    font-family: var
+    font-family:  var(--nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

package/dist/src/nile-auto-complete/nile-auto-complete.js

@@ -62,7 +62,7 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
     }
     render() {
         return html `
-      <nile-dropdown class="nile-dropdown--input"  ?open=${this.isDropdownOpen} noOpenOnCLick>
+      <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick>
         <nile-input class="nile-auto-complete--input"
           ?no-border=${this.noBorder}
           .value=${this.value}
@@ -74,7 +74,7 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
         ></nile-input>
         ${this.menuItems.length > 0
             ? html `
-              <nile-menu @nile-select=${this.handleSelect}>
+              <nile-menu @nile-select=${this.handleSelect} exportparts="menu__items-wrapper:options__wrapper">
                 ${this.menuItems.map((item) => html `
                     <nile-menu-item value=${item}>${item}</nile-menu-item>
                   `)}

package/dist/src/nile-auto-complete/nile-auto-complete.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../watch';\nimport type { CSSResultGroup } from 'lit';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n\n  static styles: CSSResultGroup = styles;\n\n  // Define component properties\n  @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n  @property({ type: Boolean }) openOnFocus: boolean = false;\n\n  @property({ type: String }) value: string = '';\n\n  @property({ type: String }) placeholder: string = 'Type here ..';\n\n  @property({ type: Boolean }) noBorder: boolean = false;\n\n  @state() menuItems: any = [];\n\n  @property({ type: Array }) allMenuItems: any = [];\n\n  @query('nile-dropdown') dropdownElement: any;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.menuItems = [...this.allMenuItems];\n  }\n\n  // Watch for changes in 'allMenuItems' property\n  @watch('allMenuItems')\n  handleAllMenuItemsChange() {\n    this.menuItems = [...this.allMenuItems];\n  }\n\n  // Watch for changes in 'value' and 'isDropdownOpen' properties\n  @watch('value', { waitUntilFirstUpdate: true })\n\n  @watch('isDropdownOpen', { waitUntilFirstUpdate: true })\n  async handleValueChange() {\n    await this.updateComplete;\n    // Filter menu items based on the search value\n    this.menuItems = this.allMenuItems.filter((item: string) =>\n      item.toLowerCase().includes(this.value?.toLowerCase())\n    );\n  }\n\n  private handleSelect(event: CustomEvent) {\n    this.value = event.detail.value;\n    this.emit('nile-complete', { value: event.detail.value });\n    this.isDropdownOpen = false;\n    this.dropdownElement?.hide();\n  }\n\n  private handleSearch(event: CustomEvent) {\n    const searchValue = event.detail.value.toLowerCase();\n    this.value = searchValue;\n\n    // Filter menu items based on the search value\n    this.menuItems = this.allMenuItems.filter((item: string) =>\n      item?.toLowerCase().includes(searchValue)\n    );\n\n    this.isDropdownOpen = this.menuItems.length > 0;\n    if (this.isDropdownOpen) this.dropdownElement?.show();\n  }\n\n  public handleFocus() {\n    if (!this.openOnFocus) {\n      return;\n    }\n\n    // Delay opening the dropdown to allow focus to take effect\n    setTimeout(() => {\n      this.isDropdownOpen = true;\n      this.dropdownElement?.show();\n    }, 300);\n  }\n\n  private handleClick() {\n    this.isDropdownOpen = true;\n    this.dropdownElement?.show();\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <nile-dropdown class=\"nile-dropdown--input\"  ?open=${this.isDropdownOpen} noOpenOnCLick>\n        <nile-input class=\"nile-auto-complete--input\"\n          ?no-border=${this.noBorder}\n          .value=${this.value}\n          @nile-input=${this.handleSearch}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n          slot=\"trigger\"\n          placeholder=${this.placeholder}\n        ></nile-input>\n        ${this.menuItems.length > 0\n          ? html`\n              <nile-menu @nile-select=${this.handleSelect}>\n                ${this.menuItems.map(\n                  (item: unknown)  => html`\n                    <nile-menu-item value=${item}>${item}</nile-menu-item>\n                  `\n                )}\n              </nile-menu>\n            `\n          : ''}\n      </nile-dropdown>\n    `;\n  }\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-auto-complete': NileAutoComplete;\n  }\n}\n"]}
+{"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../watch';\nimport type { CSSResultGroup } from 'lit';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n\n  static styles: CSSResultGroup = styles;\n\n  // Define component properties\n  @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n  @property({ type: Boolean }) openOnFocus: boolean = false;\n\n  @property({ type: String }) value: string = '';\n\n  @property({ type: String }) placeholder: string = 'Type here ..';\n\n  @property({ type: Boolean }) noBorder: boolean = false;\n\n  @state() menuItems: any = [];\n\n  @property({ type: Array }) allMenuItems: any = [];\n\n  @query('nile-dropdown') dropdownElement: any;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.menuItems = [...this.allMenuItems];\n  }\n\n  // Watch for changes in 'allMenuItems' property\n  @watch('allMenuItems')\n  handleAllMenuItemsChange() {\n    this.menuItems = [...this.allMenuItems];\n  }\n\n  // Watch for changes in 'value' and 'isDropdownOpen' properties\n  @watch('value', { waitUntilFirstUpdate: true })\n\n  @watch('isDropdownOpen', { waitUntilFirstUpdate: true })\n  async handleValueChange() {\n    await this.updateComplete;\n    // Filter menu items based on the search value\n    this.menuItems = this.allMenuItems.filter((item: string) =>\n      item.toLowerCase().includes(this.value?.toLowerCase())\n    );\n  }\n\n  private handleSelect(event: CustomEvent) {\n    this.value = event.detail.value;\n    this.emit('nile-complete', { value: event.detail.value });\n    this.isDropdownOpen = false;\n    this.dropdownElement?.hide();\n  }\n\n  private handleSearch(event: CustomEvent) {\n    const searchValue = event.detail.value.toLowerCase();\n    this.value = searchValue;\n\n    // Filter menu items based on the search value\n    this.menuItems = this.allMenuItems.filter((item: string) =>\n      item?.toLowerCase().includes(searchValue)\n    );\n\n    this.isDropdownOpen = this.menuItems.length > 0;\n    if (this.isDropdownOpen) this.dropdownElement?.show();\n  }\n\n  public handleFocus() {\n    if (!this.openOnFocus) {\n      return;\n    }\n\n    // Delay opening the dropdown to allow focus to take effect\n    setTimeout(() => {\n      this.isDropdownOpen = true;\n      this.dropdownElement?.show();\n    }, 300);\n  }\n\n  private handleClick() {\n    this.isDropdownOpen = true;\n    this.dropdownElement?.show();\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick>\n        <nile-input class=\"nile-auto-complete--input\"\n          ?no-border=${this.noBorder}\n          .value=${this.value}\n          @nile-input=${this.handleSearch}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n          slot=\"trigger\"\n          placeholder=${this.placeholder}\n        ></nile-input>\n        ${this.menuItems.length > 0\n          ? html`\n              <nile-menu @nile-select=${this.handleSelect} exportparts=\"menu__items-wrapper:options__wrapper\">\n                ${this.menuItems.map(\n                  (item: unknown)  => html`\n                    <nile-menu-item value=${item}>${item}</nile-menu-item>\n                  `\n                )}\n              </nile-menu>\n            `\n          : ''}\n      </nile-dropdown>\n    `;\n  }\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-auto-complete': NileAutoComplete;\n  }\n}\n"]}

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

@@ -187,6 +187,7 @@ let NileChip = class NileChip extends NileElement {
               ?isDropdownOpen=${this.isDropdownOpen}
               .noBorder=${true}
               openOnFocus
+              exportparts="options__wrapper"
               .placeholder=${this.placeholder}
               @nile-input=${this.handleInputChange}
               @keydown=${this.handleInputKeydown}

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

@@ -1 +1 @@
-{"version":3,"file":"nile-chip.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-chip.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport { watch } from '../internal/watch';\nimport NileElement, { NileFormControl } from '../internal/nile-element';\n\ninterface CustomEventDetail {\n  value: string;\n}\n\n@customElement('nile-chip')\nexport class NileChip extends NileElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'help-text',\n    'label'\n  );\n\n  @state() tags: string[] = [];\n\n  @state() inputValue: string = '';\n\n  @state() isDropdownOpen: boolean = false;\n\n  @query('nile-auto-complete') autoComplete!: any;\n\n  /** Sets the input to a warning state, changing its visual appearance. */\n  @property({ type: Boolean }) warning = false;\n\n  /** Sets the input to an error state, changing its visual appearance. */\n  @property({ type: Boolean }) error = false;\n\n  /** Sets the input to a success state, changing its visual appearance. */\n  @property({ type: Boolean }) success = false;\n\n  /** Disables the duplicate entries. */\n  @property({ type: Boolean }) noDuplicates = false;\n\n  /** The input's label. If you need to display HTML, use the `label` slot instead. */\n  @property() label = '';\n\n  /** Adds a clear button when the input is not empty. */\n  @property({ type: Boolean }) acceptUserInput = false;\n\n  /** Adds a clear button when the input is not empty. */\n  @property({ type: Boolean }) clearable = false;\n\n  /** Placeholder text to show as a hint when the input is empty. */\n  @property() placeholder = 'type here...';\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  // Auto-complete options\n  @property({ type: Array }) autoCompleteOptions: any[] = [];\n\n  @property({ type: Array }) filteredAutoCompleteOptions: any[] = [];\n\n  @property({ type: Array }) value: any[] = [];\n\n  @property({ type: Boolean }) noWrap: boolean = false;\n\n  @property({ type: Array }) errorIndexes: number[] = [];\n\n  @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n\n  @watch('autoCompleteOptions')\n  onAutoCompleteOptionsChanged() {\n    this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];\n\n    if (this.noDuplicates) {\n      this.filteredAutoCompleteOptions =\n        this.filteredAutoCompleteOptions.filter(\n          option => !this.value.includes(option)\n        );\n    }\n  }\n\n  @watch('value')\n  onValueChanged() {\n    this.tags = [...this.value];\n    this.onTagsChanged();\n  }\n\n  @watch('tags')\n  onTagsChanged() {\n    if (this.noDuplicates) {\n      this.filteredAutoCompleteOptions =\n        this.filteredAutoCompleteOptions.filter(\n          option => !this.tags.includes(option)\n        );\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.noDuplicates) {\n      this.filteredAutoCompleteOptions =\n        this.filteredAutoCompleteOptions.filter(\n          option => !this.value.includes(option)\n        );\n    }\n    this.emit('nile-init');\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n  }\n\n  private handleSelect(event: CustomEvent<CustomEventDetail>) {\n    // Add the selected value to the tags array only if it doesn't already exist\n    if (!this.noDuplicates || !this.tags.includes(event.detail.value)) {\n      this.tags = [...this.tags, event.detail.value];\n      this.emit('nile-chip-change', { value: this.tags });\n      this.resetInput();\n    }\n  }\n\n  private handleRemove(value: string) {\n    // Remove the tag from the tags array\n    this.tags = this.tags.filter(tag => tag !== value);\n\n    if (this.noDuplicates && this.autoCompleteOptions.includes(value)) {\n      this.filteredAutoCompleteOptions = [\n        ...this.filteredAutoCompleteOptions,\n        value,\n      ];\n    }\n    this.emit('nile-chip-change', { value: this.tags });\n  }\n\n  private handleInputChange(event: CustomEvent<CustomEventDetail>) {\n    // Update the input value\n    this.inputValue = event.detail.value;\n  }\n\n  private handleInputKeydown(event: KeyboardEvent) {\n    if (!this.acceptUserInput) {\n      return;\n    }\n\n    if (\n      (event.key === 'Enter' || event.key === 'Tab' ) &&\n      this.inputValue &&\n      (!this.noDuplicates || !this.tags.includes(this.inputValue))\n    ) {\n      this.tags = [...this.tags, this.inputValue];\n      this.resetInput();\n      this.emit('nile-chip-change', { value: this.tags });\n    }\n\n    if((event.key === 'Enter'|| event.key === 'Tab' ) &&\n    this.inputValue &&\n    (this.noDuplicates || this.tags.includes(this.inputValue))){\n      this.emit('nile-duplicates-blocked');\n    }\n  }\n\n  private handleFocus() {\n    this.isDropdownOpen = true;\n  }\n\n  private resetInput() {\n    // Reset the input-related properties\n    this.inputValue = '';\n    this.isDropdownOpen = false;\n    this.autoComplete.value = '';\n    this.autoComplete.handleFocus();\n  }\n\n  render() {\n    // Check if slots are present\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n\n    // Check if label and help text are present\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n\n    const hasHelpText = this.helpText ? true : false;\n    const hasErrorMessage = this.errorMessage ? true : false;\n\n    return html`\n      <div\n        part=\"form-control\"\n        class=${classMap({\n          'form-control': true,\n          'form-control--medium': true,\n          'form-control--has-label': hasLabel,\n          'form-control--has-help-text': hasHelpText,\n          'nile-chip--disabled': this.disabled,\n        })}\n      >\n        <label\n          part=\"form-control-label\"\n          class=\"form-control__label\"\n          for=\"input\"\n          aria-hidden=${hasLabel ? 'false' : 'true'}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div\n          class=${classMap({\n            'nile-chip': true,\n            'nile-chip--warning': this.warning,\n            'nile-chip--error': this.error,\n            'nile-chip--success': this.success,\n            'nile-chip--no-wrap': this.noWrap,\n          })}\n        >\n          ${this.tags.map(\n            (tag, index) => html`\n              <nile-tag\n                class=${classMap({\n                  'nile-chip__tags': true,\n                })}\n                .variant=${this.errorIndexes.includes(index) ? 'error' : 'normal'}\n                @nile-remove=${() => this.handleRemove(tag)}\n                removable\n                pill\n              >\n                ${tag}\n              </nile-tag>\n            `\n          )}\n          <div class=\"nile-chip__auto-complete\">\n            <nile-auto-complete\n              .allMenuItems=${this.filteredAutoCompleteOptions}\n              .value=${this.inputValue}\n              ?isDropdownOpen=${this.isDropdownOpen}\n              .noBorder=${true}\n              openOnFocus\n              .placeholder=${this.placeholder}\n              @nile-input=${this.handleInputChange}\n              @keydown=${this.handleInputKeydown}\n              @nile-focus=${this.handleFocus}\n              @nile-complete=${this.handleSelect}\n            ></nile-auto-complete>\n          </div>\n          <slot\n            name=\"help-text\"\n            part=\"form-control-help-text\"\n            id=\"help-text\"\n            class=\"form-control__help-text\"\n            aria-hidden=${hasHelpText ? 'false' : 'true'}\n          >\n            ${this.helpText}\n          </slot>\n        </div>\n        ${\n          hasHelpText\n            ? html`\n                <nile-form-help-text>${this.helpText}</nile-form-help-text>\n              `\n            : ``\n        }\n\n        ${\n          hasErrorMessage\n            ? html`\n                <nile-form-error-message\n                  >${this.errorMessage}</nile-form-error-message\n                >\n              `\n            : ``\n        }\n      </div>\n    `;\n  }\n}\n\nexport default NileChip;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-chip': NileChip;\n  }\n}\n"]}
+{"version":3,"file":"nile-chip.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-chip.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport { watch } from '../internal/watch';\nimport NileElement, { NileFormControl } from '../internal/nile-element';\n\ninterface CustomEventDetail {\n  value: string;\n}\n\n@customElement('nile-chip')\nexport class NileChip extends NileElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'help-text',\n    'label'\n  );\n\n  @state() tags: string[] = [];\n\n  @state() inputValue: string = '';\n\n  @state() isDropdownOpen: boolean = false;\n\n  @query('nile-auto-complete') autoComplete!: any;\n\n  /** Sets the input to a warning state, changing its visual appearance. */\n  @property({ type: Boolean }) warning = false;\n\n  /** Sets the input to an error state, changing its visual appearance. */\n  @property({ type: Boolean }) error = false;\n\n  /** Sets the input to a success state, changing its visual appearance. */\n  @property({ type: Boolean }) success = false;\n\n  /** Disables the duplicate entries. */\n  @property({ type: Boolean }) noDuplicates = false;\n\n  /** The input's label. If you need to display HTML, use the `label` slot instead. */\n  @property() label = '';\n\n  /** Adds a clear button when the input is not empty. */\n  @property({ type: Boolean }) acceptUserInput = false;\n\n  /** Adds a clear button when the input is not empty. */\n  @property({ type: Boolean }) clearable = false;\n\n  /** Placeholder text to show as a hint when the input is empty. */\n  @property() placeholder = 'type here...';\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  // Auto-complete options\n  @property({ type: Array }) autoCompleteOptions: any[] = [];\n\n  @property({ type: Array }) filteredAutoCompleteOptions: any[] = [];\n\n  @property({ type: Array }) value: any[] = [];\n\n  @property({ type: Boolean }) noWrap: boolean = false;\n\n  @property({ type: Array }) errorIndexes: number[] = [];\n\n  @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n\n  @watch('autoCompleteOptions')\n  onAutoCompleteOptionsChanged() {\n    this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];\n\n    if (this.noDuplicates) {\n      this.filteredAutoCompleteOptions =\n        this.filteredAutoCompleteOptions.filter(\n          option => !this.value.includes(option)\n        );\n    }\n  }\n\n  @watch('value')\n  onValueChanged() {\n    this.tags = [...this.value];\n    this.onTagsChanged();\n  }\n\n  @watch('tags')\n  onTagsChanged() {\n    if (this.noDuplicates) {\n      this.filteredAutoCompleteOptions =\n        this.filteredAutoCompleteOptions.filter(\n          option => !this.tags.includes(option)\n        );\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.noDuplicates) {\n      this.filteredAutoCompleteOptions =\n        this.filteredAutoCompleteOptions.filter(\n          option => !this.value.includes(option)\n        );\n    }\n    this.emit('nile-init');\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n  }\n\n  private handleSelect(event: CustomEvent<CustomEventDetail>) {\n    // Add the selected value to the tags array only if it doesn't already exist\n    if (!this.noDuplicates || !this.tags.includes(event.detail.value)) {\n      this.tags = [...this.tags, event.detail.value];\n      this.emit('nile-chip-change', { value: this.tags });\n      this.resetInput();\n    }\n  }\n\n  private handleRemove(value: string) {\n    // Remove the tag from the tags array\n    this.tags = this.tags.filter(tag => tag !== value);\n\n    if (this.noDuplicates && this.autoCompleteOptions.includes(value)) {\n      this.filteredAutoCompleteOptions = [\n        ...this.filteredAutoCompleteOptions,\n        value,\n      ];\n    }\n    this.emit('nile-chip-change', { value: this.tags });\n  }\n\n  private handleInputChange(event: CustomEvent<CustomEventDetail>) {\n    // Update the input value\n    this.inputValue = event.detail.value;\n  }\n\n  private handleInputKeydown(event: KeyboardEvent) {\n    if (!this.acceptUserInput) {\n      return;\n    }\n\n    if (\n      (event.key === 'Enter' || event.key === 'Tab' ) &&\n      this.inputValue &&\n      (!this.noDuplicates || !this.tags.includes(this.inputValue))\n    ) {\n      this.tags = [...this.tags, this.inputValue];\n      this.resetInput();\n      this.emit('nile-chip-change', { value: this.tags });\n    }\n\n    if((event.key === 'Enter'|| event.key === 'Tab' ) &&\n    this.inputValue &&\n    (this.noDuplicates || this.tags.includes(this.inputValue))){\n      this.emit('nile-duplicates-blocked');\n    }\n  }\n\n  private handleFocus() {\n    this.isDropdownOpen = true;\n  }\n\n  private resetInput() {\n    // Reset the input-related properties\n    this.inputValue = '';\n    this.isDropdownOpen = false;\n    this.autoComplete.value = '';\n    this.autoComplete.handleFocus();\n  }\n\n  render() {\n    // Check if slots are present\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n\n    // Check if label and help text are present\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n\n    const hasHelpText = this.helpText ? true : false;\n    const hasErrorMessage = this.errorMessage ? true : false;\n\n    return html`\n      <div\n        part=\"form-control\"\n        class=${classMap({\n          'form-control': true,\n          'form-control--medium': true,\n          'form-control--has-label': hasLabel,\n          'form-control--has-help-text': hasHelpText,\n          'nile-chip--disabled': this.disabled,\n        })}\n      >\n        <label\n          part=\"form-control-label\"\n          class=\"form-control__label\"\n          for=\"input\"\n          aria-hidden=${hasLabel ? 'false' : 'true'}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div\n          class=${classMap({\n            'nile-chip': true,\n            'nile-chip--warning': this.warning,\n            'nile-chip--error': this.error,\n            'nile-chip--success': this.success,\n            'nile-chip--no-wrap': this.noWrap,\n          })}\n        >\n          ${this.tags.map(\n            (tag, index) => html`\n              <nile-tag\n                class=${classMap({\n                  'nile-chip__tags': true,\n                })}\n                .variant=${this.errorIndexes.includes(index) ? 'error' : 'normal'}\n                @nile-remove=${() => this.handleRemove(tag)}\n                removable\n                pill\n              >\n                ${tag}\n              </nile-tag>\n            `\n          )}\n          <div class=\"nile-chip__auto-complete\">\n            <nile-auto-complete\n              .allMenuItems=${this.filteredAutoCompleteOptions}\n              .value=${this.inputValue}\n              ?isDropdownOpen=${this.isDropdownOpen}\n              .noBorder=${true}\n              openOnFocus\n              exportparts=\"options__wrapper\"\n              .placeholder=${this.placeholder}\n              @nile-input=${this.handleInputChange}\n              @keydown=${this.handleInputKeydown}\n              @nile-focus=${this.handleFocus}\n              @nile-complete=${this.handleSelect}\n            ></nile-auto-complete>\n          </div>\n          <slot\n            name=\"help-text\"\n            part=\"form-control-help-text\"\n            id=\"help-text\"\n            class=\"form-control__help-text\"\n            aria-hidden=${hasHelpText ? 'false' : 'true'}\n          >\n            ${this.helpText}\n          </slot>\n        </div>\n        ${\n          hasHelpText\n            ? html`\n                <nile-form-help-text>${this.helpText}</nile-form-help-text>\n              `\n            : ``\n        }\n\n        ${\n          hasErrorMessage\n            ? html`\n                <nile-form-error-message\n                  >${this.errorMessage}</nile-form-error-message\n                >\n              `\n            : ``\n        }\n      </div>\n    `;\n  }\n}\n\nexport default NileChip;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-chip': NileChip;\n  }\n}\n"]}

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

@@ -86,6 +86,10 @@ export declare class NileDrawer extends NileElement {
      * its parent element, set this attribute and add `position: relative` to the parent.
      */
     contained: boolean;
+    /**
+     * Drawer doesnt close when clicled on overlay, the only way to close is to do by handling open property
+     */
+    preventOverlayClose: boolean;
     /**
      * Removes the header. This will also remove the default close button, so please ensure you provide an easy,
      * accessible way for users to dismiss the drawer.

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

@@ -95,6 +95,10 @@ let NileDrawer = class NileDrawer extends NileElement {
          * its parent element, set this attribute and add `position: relative` to the parent.
          */
         this.contained = false;
+        /**
+         * Drawer doesnt close when clicled on overlay, the only way to close is to do by handling open property
+         */
+        this.preventOverlayClose = false;
         /**
          * Removes the header. This will also remove the default close button, so please ensure you provide an easy,
          * accessible way for users to dismiss the drawer.
@@ -121,6 +125,8 @@ let NileDrawer = class NileDrawer extends NileElement {
         unlockBodyScrolling(this);
     }
     requestClose(source) {
+        if ((source == 'overlay' || source == 'keyboard') && this.preventOverlayClose)
+            return;
         const slRequestClose = this.emit('nile-request-close', {
             cancelable: true,
             detail: { source }
@@ -348,6 +354,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileDrawer.prototype, "contained", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileDrawer.prototype, "preventOverlayClose", void 0);
 __decorate([
     property({ attribute: 'no-header', type: Boolean, reflect: true })
 ], NileDrawer.prototype, "noHeader", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"nile-drawer.js","sourceRoot":"","sources":["../../../src/nile-drawer/nile-drawer.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport '../nile-icon-button/nile-icon-button';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';\nimport { HasSlotController } from '../internal/slot';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../internal/scroll';\nimport { uppercaseFirstLetter } from '../internal/string';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport Modal from '../internal/modal';\nimport NileElement from '../internal/nile-element';\nimport styles from './nile-drawer.css';\nimport type { CSSResultGroup, TemplateResult } from 'lit';\n\n/**\n * Nile drawer component.\n *\n * @tag nile-drawer\n *\n * @summary Drawers slide in from a container to expose additional options and information.\n *\n * @dependency nile-icon-button\n *\n * @slot - The drawer's main content.\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.\n * @slot header-actions - Optional actions to add to the header. Works best with `<nile-icon-button>`.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @event nile-show - Emitted when the drawer opens.\n * @event nile-after-show - Emitted after the drawer opens and all animations are complete.\n * @event nile-hide - Emitted when the drawer closes.\n * @event nile-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event nile-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling\n *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} nile-request-close - Emitted when the user attempts to\n *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n *   destructive behavior such as data loss.\n *\n * @csspart base - The component's base wrapper.\n * @csspart overlay - The overlay that covers the screen behind the drawer.\n * @csspart panel - The drawer's panel (where the drawer and its content are rendered).\n * @csspart header - The drawer's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<nile-icon-button>`.\n * @csspart title - The drawer's title.\n * @csspart close-button - The close button, an `<nile-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n * @csspart body - The drawer's body.\n * @csspart footer - The drawer's footer.\n *\n * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height\n *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.\n * @cssproperty --header-spacing - The amount of padding to use for the header.\n * @cssproperty --body-spacing - The amount of padding to use for the body.\n * @cssproperty --footer-spacing - The amount of padding to use for the footer.\n *\n * @animation drawer.showTop - The animation to use when showing a drawer with `top` placement.\n * @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.\n * @animation drawer.showBottom - The animation to use when showing a drawer with `bottom` placement.\n * @animation drawer.showStart - The animation to use when showing a drawer with `start` placement.\n * @animation drawer.hideTop - The animation to use when hiding a drawer with `top` placement.\n * @animation drawer.hideEnd - The animation to use when hiding a drawer with `end` placement.\n * @animation drawer.hideBottom - The animation to use when hiding a drawer with `bottom` placement.\n * @animation drawer.hideStart - The animation to use when hiding a drawer with `start` placement.\n * @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.\n * @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.\n * @animation drawer.overlay.hide - The animation to use when hiding the drawer's overlay.\n */\n@customElement('nile-drawer')\nexport class NileDrawer extends NileElement {\n\n\tstatic styles: CSSResultGroup = styles;\n\n  private readonly hasSlotController = new HasSlotController(this, 'footer');\n  private modal: Modal;\n  private originalTrigger: HTMLElement | null;\n\n  @query('.drawer') drawer: HTMLElement;\n  @query('.drawer__panel') panel: HTMLElement;\n  @query('.drawer__overlay') overlay: HTMLElement;\n\n  /**\n   * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @property({ reflect: true }) label = '';\n\n  /** The direction from which the drawer will open. */\n  @property({ reflect: true }) placement: 'top' | 'end' | 'bottom' | 'start' = 'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this attribute and add `position: relative` to the parent.\n   */\n  @property({ type: Boolean, reflect: true }) contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @property({ attribute: 'no-header', type: Boolean, reflect: true }) noHeader = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.modal = new Modal(this);\n  }\n\n  firstUpdated() {\n    this.drawer.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n\n      if (!this.contained) {\n        this.modal.activate();\n        lockBodyScrolling(this);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    unlockBodyScrolling(this);\n  }\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const slRequestClose = this.emit('nile-request-close', {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (slRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, 'drawer.denyClose', { dir: '' });\n      animateTo(this.panel, animation.keyframes, animation.options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  private addOpenListeners() {\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private handleDocumentKeyDown(event: KeyboardEvent) {\n    if (this.open && !this.contained && event.key === 'Escape') {\n      event.stopPropagation();\n      this.requestClose('keyboard');\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit('nile-show');\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      // Lock body scrolling only if the drawer isn't contained\n      if (!this.contained) {\n        this.modal.activate();\n        lockBodyScrolling(this);\n      }\n\n      // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n      // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n      // ourselves, and add the attribute back afterwards.\n      //\n      //\n      const autoFocusTarget = this.querySelector('[autofocus]');\n      if (autoFocusTarget) {\n        autoFocusTarget.removeAttribute('autofocus');\n      }\n\n      await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n      this.drawer.hidden = false;\n\n      // Set initial focus\n      requestAnimationFrame(() => {\n        const slInitialFocus = this.emit('nile-initial-focus', { cancelable: true });\n\n        if (!slInitialFocus.defaultPrevented) {\n          // Set focus to the autofocus target and restore the attribute\n          if (autoFocusTarget) {\n            (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });\n          } else {\n            this.panel.focus({ preventScroll: true });\n          }\n        }\n\n        // Restore the autofocus attribute\n        if (autoFocusTarget) {\n          autoFocusTarget.setAttribute('autofocus', '');\n        }\n      });\n\n      const panelAnimation = getAnimation(this, `drawer.show${uppercaseFirstLetter(this.placement)}`, {\n        dir: ''\n      });\n      const overlayAnimation = getAnimation(this, 'drawer.overlay.show', { dir: '' });\n      await Promise.all([\n        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n      ]);\n\n      this.emit('nile-after-show');\n    } else {\n      // Hide\n      this.emit('nile-hide');\n      this.removeOpenListeners();\n\n      if (!this.contained) {\n        this.modal.deactivate();\n        unlockBodyScrolling(this);\n      }\n\n      await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, `drawer.hide${uppercaseFirstLetter(this.placement)}`, {\n        dir: ''\n      });\n      const overlayAnimation = getAnimation(this, 'drawer.overlay.hide', { dir: '' });\n\n      // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n      // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n      // unexpectedly. We'll unhide them after all animations have completed.\n      await Promise.all([\n        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n          this.overlay.hidden = true;\n        }),\n        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n          this.panel.hidden = true;\n        })\n      ]);\n\n      this.drawer.hidden = true;\n\n      // Now that the dialog is hidden, restore the overlay and panel for next time\n      this.overlay.hidden = false;\n      this.panel.hidden = false;\n\n      // Restore focus to the original trigger\n      const trigger = this.originalTrigger;\n      if (typeof trigger?.focus === 'function') {\n        setTimeout(() => trigger.focus());\n      }\n\n      this.emit('nile-after-hide');\n    }\n  }\n\n  @watch('contained', { waitUntilFirstUpdate: true })\n  handleNoModalChange() {\n    if (this.open && !this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this);\n    }\n\n    if (this.open && this.contained) {\n      this.modal.deactivate();\n      unlockBodyScrolling(this);\n    }\n  }\n\n  /** Shows the drawer. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'nile-after-show');\n  }\n\n  /** Hides the drawer */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'nile-after-hide');\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          drawer: true,\n          'drawer--open': this.open,\n          'drawer--top': this.placement === 'top',\n          'drawer--end': this.placement === 'end',\n          'drawer--bottom': this.placement === 'bottom',\n          'drawer--start': this.placement === 'start',\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--rtl': 'rtl',\n          'drawer--has-footer': this.hasSlotController.test('footer'),\n        })}\n      >\n        <div\n          part=\"overlay\"\n          class=\"drawer__overlay\"\n          @click=${() => this.requestClose('overlay')}\n          tabindex=\"-1\"\n        ></div>\n\n        <div\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? 'false' : 'true'}\n          aria-label=${ifDefined(this.noHeader ? this.label : undefined)}\n          aria-labelledby=${ifDefined(!this.noHeader ? 'title' : undefined)}\n          tabindex=\"0\"\n        >\n          ${!this.noHeader\n            ? html`\n                <header part=\"header\" class=\"drawer__header\">\n                  <h2 part=\"title\" class=\"drawer__title\" id=\"title\">\n                    <!-- If there's no label, use an invisible character to prevent the header from collapsing -->\n                    <slot name=\"label\">\n                      ${this.label.length > 0\n                        ? this.label\n                        : String.fromCharCode(65279)}\n                    </slot>\n                  </h2>\n                  <div part=\"header-actions\" class=\"drawer__header-actions\">\n                    <slot name=\"header-actions\"></slot>\n                    <nile-icon\n                      class=\"drawer__close\"\n                      name=\"close\"\n                      label=\"close\"\n                      part=\"close-button\"\n                      exportparts=\"base:close-button__base\"\n                      color=\"var(--nile-drawer-remove-icon-color)\"\n                      @click=${() => this.requestClose('close-button')}\n                    ></nile-icon>\n                  </div>\n                </header>\n              `\n            : ''}\n\n          <slot part=\"body\" class=\"drawer__body\"></slot>\n\n          <footer part=\"footer\" class=\"drawer__footer\">\n            <slot name=\"footer\"></slot>\n          </footer>\n        </div>\n      </div>\n    `;\n  }\n}\n\n// Top\nsetDefaultAnimation('drawer.showTop', {\n  keyframes: [\n    { opacity: 0, translate: '0 -100%' },\n    { opacity: 1, translate: '0 0' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hideTop', {\n  keyframes: [\n    { opacity: 1, translate: '0 0' },\n    { opacity: 0, translate: '0 -100%' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\n// End\nsetDefaultAnimation('drawer.showEnd', {\n  keyframes: [\n    { opacity: 0, translate: '100%' },\n    { opacity: 1, translate: '0' }\n  ],\n  rtlKeyframes: [\n    { opacity: 0, translate: '-100%' },\n    { opacity: 1, translate: '0' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hideEnd', {\n  keyframes: [\n    { opacity: 1, translate: '0' },\n    { opacity: 0, translate: '100%' }\n  ],\n  rtlKeyframes: [\n    { opacity: 1, translate: '0' },\n    { opacity: 0, translate: '-100%' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\n// Bottom\nsetDefaultAnimation('drawer.showBottom', {\n  keyframes: [\n    { opacity: 0, translate: '0 100%' },\n    { opacity: 1, translate: '0 0' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hideBottom', {\n  keyframes: [\n    { opacity: 1, translate: '0 0' },\n    { opacity: 0, translate: '0 100%' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\n// Start\nsetDefaultAnimation('drawer.showStart', {\n  keyframes: [\n    { opacity: 0, translate: '-100%' },\n    { opacity: 1, translate: '0' }\n  ],\n  rtlKeyframes: [\n    { opacity: 0, translate: '100%' },\n    { opacity: 1, translate: '0' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hideStart', {\n  keyframes: [\n    { opacity: 1, translate: '0' },\n    { opacity: 0, translate: '-100%' }\n  ],\n  rtlKeyframes: [\n    { opacity: 1, translate: '0' },\n    { opacity: 0, translate: '100%' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\n// Deny close\nsetDefaultAnimation('drawer.denyClose', {\n  keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],\n  options: { duration: 250 }\n});\n\n// Overlay\nsetDefaultAnimation('drawer.overlay.show', {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 250 }\n});\n\nsetDefaultAnimation('drawer.overlay.hide', {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 250 }\n});\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-drawer': NileDrawer;\n  }\n}\n"]}
+{"version":3,"file":"nile-drawer.js","sourceRoot":"","sources":["../../../src/nile-drawer/nile-drawer.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport '../nile-icon-button/nile-icon-button';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';\nimport { HasSlotController } from '../internal/slot';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../internal/scroll';\nimport { uppercaseFirstLetter } from '../internal/string';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport Modal from '../internal/modal';\nimport NileElement from '../internal/nile-element';\nimport styles from './nile-drawer.css';\nimport type { CSSResultGroup, TemplateResult } from 'lit';\n\n/**\n * Nile drawer component.\n *\n * @tag nile-drawer\n *\n * @summary Drawers slide in from a container to expose additional options and information.\n *\n * @dependency nile-icon-button\n *\n * @slot - The drawer's main content.\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.\n * @slot header-actions - Optional actions to add to the header. Works best with `<nile-icon-button>`.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @event nile-show - Emitted when the drawer opens.\n * @event nile-after-show - Emitted after the drawer opens and all animations are complete.\n * @event nile-hide - Emitted when the drawer closes.\n * @event nile-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event nile-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling\n *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} nile-request-close - Emitted when the user attempts to\n *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n *   destructive behavior such as data loss.\n *\n * @csspart base - The component's base wrapper.\n * @csspart overlay - The overlay that covers the screen behind the drawer.\n * @csspart panel - The drawer's panel (where the drawer and its content are rendered).\n * @csspart header - The drawer's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<nile-icon-button>`.\n * @csspart title - The drawer's title.\n * @csspart close-button - The close button, an `<nile-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n * @csspart body - The drawer's body.\n * @csspart footer - The drawer's footer.\n *\n * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height\n *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.\n * @cssproperty --header-spacing - The amount of padding to use for the header.\n * @cssproperty --body-spacing - The amount of padding to use for the body.\n * @cssproperty --footer-spacing - The amount of padding to use for the footer.\n *\n * @animation drawer.showTop - The animation to use when showing a drawer with `top` placement.\n * @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.\n * @animation drawer.showBottom - The animation to use when showing a drawer with `bottom` placement.\n * @animation drawer.showStart - The animation to use when showing a drawer with `start` placement.\n * @animation drawer.hideTop - The animation to use when hiding a drawer with `top` placement.\n * @animation drawer.hideEnd - The animation to use when hiding a drawer with `end` placement.\n * @animation drawer.hideBottom - The animation to use when hiding a drawer with `bottom` placement.\n * @animation drawer.hideStart - The animation to use when hiding a drawer with `start` placement.\n * @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.\n * @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.\n * @animation drawer.overlay.hide - The animation to use when hiding the drawer's overlay.\n */\n@customElement('nile-drawer')\nexport class NileDrawer extends NileElement {\n\n\tstatic styles: CSSResultGroup = styles;\n\n  private readonly hasSlotController = new HasSlotController(this, 'footer');\n  private modal: Modal;\n  private originalTrigger: HTMLElement | null;\n\n  @query('.drawer') drawer: HTMLElement;\n  @query('.drawer__panel') panel: HTMLElement;\n  @query('.drawer__overlay') overlay: HTMLElement;\n\n  /**\n   * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @property({ reflect: true }) label = '';\n\n  /** The direction from which the drawer will open. */\n  @property({ reflect: true }) placement: 'top' | 'end' | 'bottom' | 'start' = 'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this attribute and add `position: relative` to the parent.\n   */\n  @property({ type: Boolean, reflect: true }) contained = false;\n\n  /**\n   * Drawer doesnt close when clicled on overlay, the only way to close is to do by handling open property\n   */\n  @property({ type: Boolean, reflect:true }) preventOverlayClose = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @property({ attribute: 'no-header', type: Boolean, reflect: true }) noHeader = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.modal = new Modal(this);\n  }\n\n  firstUpdated() {\n    this.drawer.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n\n      if (!this.contained) {\n        this.modal.activate();\n        lockBodyScrolling(this);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    unlockBodyScrolling(this);\n  }\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    if((source=='overlay' || source=='keyboard') && this.preventOverlayClose) return;\n    const slRequestClose = this.emit('nile-request-close', {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (slRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, 'drawer.denyClose', { dir: '' });\n      animateTo(this.panel, animation.keyframes, animation.options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  private addOpenListeners() {\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private handleDocumentKeyDown(event: KeyboardEvent) {\n    if (this.open && !this.contained && event.key === 'Escape') {\n      event.stopPropagation();\n      this.requestClose('keyboard');\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit('nile-show');\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      // Lock body scrolling only if the drawer isn't contained\n      if (!this.contained) {\n        this.modal.activate();\n        lockBodyScrolling(this);\n      }\n\n      // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n      // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n      // ourselves, and add the attribute back afterwards.\n      //\n      //\n      const autoFocusTarget = this.querySelector('[autofocus]');\n      if (autoFocusTarget) {\n        autoFocusTarget.removeAttribute('autofocus');\n      }\n\n      await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n      this.drawer.hidden = false;\n\n      // Set initial focus\n      requestAnimationFrame(() => {\n        const slInitialFocus = this.emit('nile-initial-focus', { cancelable: true });\n\n        if (!slInitialFocus.defaultPrevented) {\n          // Set focus to the autofocus target and restore the attribute\n          if (autoFocusTarget) {\n            (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });\n          } else {\n            this.panel.focus({ preventScroll: true });\n          }\n        }\n\n        // Restore the autofocus attribute\n        if (autoFocusTarget) {\n          autoFocusTarget.setAttribute('autofocus', '');\n        }\n      });\n\n      const panelAnimation = getAnimation(this, `drawer.show${uppercaseFirstLetter(this.placement)}`, {\n        dir: ''\n      });\n      const overlayAnimation = getAnimation(this, 'drawer.overlay.show', { dir: '' });\n      await Promise.all([\n        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n      ]);\n\n      this.emit('nile-after-show');\n    } else {\n      // Hide\n      this.emit('nile-hide');\n      this.removeOpenListeners();\n\n      if (!this.contained) {\n        this.modal.deactivate();\n        unlockBodyScrolling(this);\n      }\n\n      await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, `drawer.hide${uppercaseFirstLetter(this.placement)}`, {\n        dir: ''\n      });\n      const overlayAnimation = getAnimation(this, 'drawer.overlay.hide', { dir: '' });\n\n      // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n      // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n      // unexpectedly. We'll unhide them after all animations have completed.\n      await Promise.all([\n        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n          this.overlay.hidden = true;\n        }),\n        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n          this.panel.hidden = true;\n        })\n      ]);\n\n      this.drawer.hidden = true;\n\n      // Now that the dialog is hidden, restore the overlay and panel for next time\n      this.overlay.hidden = false;\n      this.panel.hidden = false;\n\n      // Restore focus to the original trigger\n      const trigger = this.originalTrigger;\n      if (typeof trigger?.focus === 'function') {\n        setTimeout(() => trigger.focus());\n      }\n\n      this.emit('nile-after-hide');\n    }\n  }\n\n  @watch('contained', { waitUntilFirstUpdate: true })\n  handleNoModalChange() {\n    if (this.open && !this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this);\n    }\n\n    if (this.open && this.contained) {\n      this.modal.deactivate();\n      unlockBodyScrolling(this);\n    }\n  }\n\n  /** Shows the drawer. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'nile-after-show');\n  }\n\n  /** Hides the drawer */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'nile-after-hide');\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          drawer: true,\n          'drawer--open': this.open,\n          'drawer--top': this.placement === 'top',\n          'drawer--end': this.placement === 'end',\n          'drawer--bottom': this.placement === 'bottom',\n          'drawer--start': this.placement === 'start',\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--rtl': 'rtl',\n          'drawer--has-footer': this.hasSlotController.test('footer'),\n        })}\n      >\n        <div\n          part=\"overlay\"\n          class=\"drawer__overlay\"\n          @click=${() => this.requestClose('overlay')}\n          tabindex=\"-1\"\n        ></div>\n\n        <div\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? 'false' : 'true'}\n          aria-label=${ifDefined(this.noHeader ? this.label : undefined)}\n          aria-labelledby=${ifDefined(!this.noHeader ? 'title' : undefined)}\n          tabindex=\"0\"\n        >\n          ${!this.noHeader\n            ? html`\n                <header part=\"header\" class=\"drawer__header\">\n                  <h2 part=\"title\" class=\"drawer__title\" id=\"title\">\n                    <!-- If there's no label, use an invisible character to prevent the header from collapsing -->\n                    <slot name=\"label\">\n                      ${this.label.length > 0\n                        ? this.label\n                        : String.fromCharCode(65279)}\n                    </slot>\n                  </h2>\n                  <div part=\"header-actions\" class=\"drawer__header-actions\">\n                    <slot name=\"header-actions\"></slot>\n                    <nile-icon\n                      class=\"drawer__close\"\n                      name=\"close\"\n                      label=\"close\"\n                      part=\"close-button\"\n                      exportparts=\"base:close-button__base\"\n                      color=\"var(--nile-drawer-remove-icon-color)\"\n                      @click=${() => this.requestClose('close-button')}\n                    ></nile-icon>\n                  </div>\n                </header>\n              `\n            : ''}\n\n          <slot part=\"body\" class=\"drawer__body\"></slot>\n\n          <footer part=\"footer\" class=\"drawer__footer\">\n            <slot name=\"footer\"></slot>\n          </footer>\n        </div>\n      </div>\n    `;\n  }\n}\n\n// Top\nsetDefaultAnimation('drawer.showTop', {\n  keyframes: [\n    { opacity: 0, translate: '0 -100%' },\n    { opacity: 1, translate: '0 0' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hideTop', {\n  keyframes: [\n    { opacity: 1, translate: '0 0' },\n    { opacity: 0, translate: '0 -100%' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\n// End\nsetDefaultAnimation('drawer.showEnd', {\n  keyframes: [\n    { opacity: 0, translate: '100%' },\n    { opacity: 1, translate: '0' }\n  ],\n  rtlKeyframes: [\n    { opacity: 0, translate: '-100%' },\n    { opacity: 1, translate: '0' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hideEnd', {\n  keyframes: [\n    { opacity: 1, translate: '0' },\n    { opacity: 0, translate: '100%' }\n  ],\n  rtlKeyframes: [\n    { opacity: 1, translate: '0' },\n    { opacity: 0, translate: '-100%' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\n// Bottom\nsetDefaultAnimation('drawer.showBottom', {\n  keyframes: [\n    { opacity: 0, translate: '0 100%' },\n    { opacity: 1, translate: '0 0' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hideBottom', {\n  keyframes: [\n    { opacity: 1, translate: '0 0' },\n    { opacity: 0, translate: '0 100%' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\n// Start\nsetDefaultAnimation('drawer.showStart', {\n  keyframes: [\n    { opacity: 0, translate: '-100%' },\n    { opacity: 1, translate: '0' }\n  ],\n  rtlKeyframes: [\n    { opacity: 0, translate: '100%' },\n    { opacity: 1, translate: '0' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('drawer.hideStart', {\n  keyframes: [\n    { opacity: 1, translate: '0' },\n    { opacity: 0, translate: '-100%' }\n  ],\n  rtlKeyframes: [\n    { opacity: 1, translate: '0' },\n    { opacity: 0, translate: '100%' }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\n// Deny close\nsetDefaultAnimation('drawer.denyClose', {\n  keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],\n  options: { duration: 250 }\n});\n\n// Overlay\nsetDefaultAnimation('drawer.overlay.show', {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 250 }\n});\n\nsetDefaultAnimation('drawer.overlay.hide', {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 250 }\n});\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-drawer': NileDrawer;\n  }\n}\n"]}

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

@@ -98,7 +98,7 @@ export const styles = css `
   .input--standard {
     background-color: var(--nile-input-standard-background-color);
     border: solid 1px var(--nile-input-standard-border-color);
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    box-shadow: var(--nile-input-shadow-standard);
   }
 
   .input--standard:hover:not(.input--disabled) {
@@ -109,8 +109,7 @@ export const styles = css `
   .input--standard.input--focused:not(.input--disabled) {
     background-color: hsl(0, 0%, 100%);
     border-color: #85aad1;
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
-      0px 0px 0px 4px rgba(133, 170, 209, 0.24);
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled);
   }
 
   .input--standard.input--focused:not(.input--disabled) .input__control {
@@ -150,35 +149,33 @@ export const styles = css `
 
   .input--standard.input--focused.input--destructive:not(.input--disabled) {
     border: 1px solid #fda29b;
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
-      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+    box-shadow: var(--nile-input-shadow-destructive-active);
   }
 
   .input--destructive:active {
     border: 1px solid #fda29b;
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
-      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+    box-shadow: var(--nile-input-shadow-destructive-active);
   }
 
   /* Filled inputs */
   .input--filled {
     border: none;
-    background-color: hsl(240 4.8% 95.9%);
+    background-color: #F1F1F2;
     color: hsl(240 5.3% 26.1%);
   }
 
   .input--filled:hover:not(.input--disabled) {
-    background-color: hsl(240 4.8% 95.9%);
+    background-color: #F1F1F2;
   }
 
   .input--filled.input--focused:not(.input--disabled) {
-    background-color: hsl(240 4.8% 95.9%);
+    background-color: #F1F1F2;
     outline: solid 3px hsl(200.4 98% 39.4%);
     outline-offset: 1px;
   }
 
   .input--filled.input--disabled {
-    background-color: hsl(240 4.8% 95.9%);
+    background-color: #F1F1F2;
     opacity: 0.5;
     cursor: not-allowed;
   }
@@ -212,42 +209,42 @@ export const styles = css `
 
   .input__control:-webkit-autofill {
     box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
-    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);
+    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
 
   .input__control:-webkit-autofill:hover {
     box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
-    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);
+    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
 
   .input__control:-webkit-autofill:focus {
     box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
-    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);
+    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
 
   .input__control:-webkit-autofill:active {
     box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
-    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);
+    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
 
   .input--filled .input__control:-webkit-autofill {
-    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;
+    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;
   }
 
   .input--filled .input__control:-webkit-autofill:hover {
-    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;
+    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;
   }
 
   .input--filled .input__control:-webkit-autofill:focus {
-    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;
+    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;
   }
 
   .input--filled .input__control:-webkit-autofill:active {
-    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;
+    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;
   }
 
   .input__control::placeholder {

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

@@ -1 +1 @@
-{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmfxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: inherit;\n    margin-bottom: 6px;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: 14px;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: #a4121c;\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: #7f7f7f;\n    margin-top: 6px;\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: #a4121c;\n    margin-top: 12px;\n    font-size: 12px;\n    font-style: normal;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: 10.24px;\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: 0.25rem;\n  }\n\n  .input {\n    flex: 1 1 auto;\n    display: inline-flex;\n    align-items: stretch;\n    justify-content: start;\n    position: relative;\n    width: 100%;\n    font-weight: 400;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n    box-sizing: border-box;\n    color: var(--nile-colors-dark-900);\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: var(--nile-input-standard-background-color);\n    border: solid 1px var(--nile-input-standard-border-color);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .input--standard:hover:not(.input--disabled) {\n    background-color: hsl(0, 0%, 100%);\n    border-color: #000;\n  }\n\n  .input--standard.input--focused:not(.input--disabled) {\n    background-color: hsl(0, 0%, 100%);\n    border-color: #85aad1;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(133, 170, 209, 0.24);\n  }\n\n  .input--standard.input--focused:not(.input--disabled) .input__control {\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--standard.input--disabled {\n    background-color: #fff;\n    border-color: #c7ced4;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input--standard.input--disabled .input__control {\n    color: hsl(240 5.9% 10%);\n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: var(--nile-input-standard-disabled-placeholder-font-color);\n  }\n\n  .input--standard.input--warning {\n    border-color: var(--nile-colors-yellow-500);\n  }\n\n  .input--standard.input--error {\n    border-color: #e5434d;\n  }\n\n  .input--standard.input--success {\n    border-color: #43e5c0;\n  }\n\n  .input--standard.input--destructive {\n    border-color: #fda29b;\n  }\n\n  .input--standard.input--focused.input--destructive:not(.input--disabled) {\n    border: 1px solid #fda29b;\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  .input--destructive:active {\n    border: 1px solid #fda29b;\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  /* Filled inputs */\n  .input--filled {\n    border: none;\n    background-color: hsl(240 4.8% 95.9%);\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled:hover:not(.input--disabled) {\n    background-color: hsl(240 4.8% 95.9%);\n  }\n\n  .input--filled.input--focused:not(.input--disabled) {\n    background-color: hsl(240 4.8% 95.9%);\n    outline: solid 3px hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .input--filled.input--disabled {\n    background-color: hsl(240 4.8% 95.9%);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input__control {\n    flex: 1 1 auto;\n    min-width: 0;\n    height: 100%;\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n    cursor: inherit;\n    -webkit-appearance: none;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-sans-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 16px;\n    letter-spacing: 0.2px;\n  }\n\n  .input__control::-webkit-search-decoration,\n  .input__control::-webkit-search-cancel-button,\n  .input__control::-webkit-search-results-button,\n  .input__control::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input__control::placeholder {\n    color: #667085;\n    user-select: none;\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: #000;\n  }\n\n  .input__control:focus {\n    outline: none;\n  }\n\n  .input__prefix,\n  .input__suffix {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    cursor: default;\n  }\n\n  .input__prefix::slotted(nile-icon) {\n    color: hsl(240 3.8% 46.1%);\n  }\n\n  .input__suffix::slotted(nile-icon) {\n    color: hsl(240 3.8% 46.1%);\n  }\n\n  .input--standard:focus {\n    border-radius: 4px;\n    border: 1px solid #85aad1;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: 0.25rem;\n    font-size: var(--nile-input-font-size-small);\n    height: 1.875rem;\n  }\n\n  .input--small .input__control {\n    height: calc(1.875rem);\n    padding: 0 0.75rem;\n  }\n\n  .input--small .input__clear {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__password-toggle {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__prefix::slotted(*) {\n    margin-inline-start: 0.75rem;\n  }\n\n  .input--small .input__suffix::slotted(*) {\n    margin-inline-end: 0.75rem;\n  }\n\n  .input--medium {\n    border-radius: 0.25rem;\n    font-size: var(--nile-input-font-size-medium);\n    height: 40px;\n  }\n\n  .input--medium .input__control {\n    height: 14px;\n    padding: 12px;\n  }\n\n  .input--medium .input__clear {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__password-toggle {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__prefix::slotted(*) {\n    margin-inline-start: 12px;\n  }\n\n  .input--medium .input__suffix::slotted(*) {\n    margin-inline-end: 12px;\n  }\n\n  .input--large {\n    border-radius: 0.25rem;\n    font-size: 1.25rem;\n    height: 3.125rem;\n  }\n\n  .input--large .input__control {\n    height: calc(3.125rem - 1px * 2);\n    padding: 0 1.25rem;\n  }\n\n  .input--large .input__clear {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__password-toggle {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__prefix::slotted(*) {\n    margin-inline-start: 1.25rem;\n  }\n\n  .input--large .input__suffix::slotted(*) {\n    margin-inline-end: 1.25rem;\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .input--pill.input--small {\n    border-radius: 1.875rem;\n  }\n\n  .input--pill.input--medium {\n    border-radius: 2.5rem;\n  }\n\n  .input--pill.input--large {\n    border-radius: 3.125rem;\n  }\n\n  /*\n   * Clearable + Password Toggle\n   */\n\n  .input__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: hsl(240 3.8% 46.1%);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__password-toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: hsl(240 3.8% 46.1%);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__clear:hover {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input__password-toggle:hover {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input__clear:focus,\n  .input__password-toggle:focus {\n    outline: none;\n  }\n\n  .input--empty .input__clear {\n    visibility: hidden;\n  }\n\n  /* Don't show the browser's password toggle in Edge */\n  ::-ms-reveal {\n    display: none;\n  }\n\n  /* Hide the built-in number spinner */\n  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n\n  .input--no-spin-buttons input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  :host([no-border]) .input--standard {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard:hover:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  .input__password {\n    font-family: 'disc';\n  }\n\n  .input__non-printable {\n    border-radius: 4px;\n    max-width: 400px;\n    background-color: var(--nile-colors-white-base);\n    border: 1px solid var(--nile-colors-red-500);\n    color: var(--nile-colors-red-500);\n    padding: 10px;\n    font-size: 12px;\n    max-height: 300px;\n    overflow-y: scroll;\n    line-height: 16px;\n  }\n\n  .input__remove-non-printable {\n    color: var(--nile-colors-red-500);\n    margin-left: 10px;\n    font-size: 14px;\n    color: var(--nile-colors-dark-900);\n    cursor: pointer;\n  }\n\n  .input__srtiked-text-container {\n    margin-top: 4px;\n    color: var(--nile-colors-dark-900);\n    word-break: break-all;\n    line-height: 16px;\n  }\n\n  .input__srtiked-text {\n    text-decoration: line-through;\n    text-decoration-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-white-base);\n    background-color: var(--nile-colors-red-500);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgfxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: inherit;\n    margin-bottom: 6px;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: 14px;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: #a4121c;\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: #7f7f7f;\n    margin-top: 6px;\n  }\n\n  /* Error message */\n  .form-control__error-message {\n    display: block;\n    color: #a4121c;\n    margin-top: 12px;\n    font-size: 12px;\n    font-style: normal;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: 10.24px;\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: 0.25rem;\n  }\n\n  .input {\n    flex: 1 1 auto;\n    display: inline-flex;\n    align-items: stretch;\n    justify-content: start;\n    position: relative;\n    width: 100%;\n    font-weight: 400;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n    box-sizing: border-box;\n    color: var(--nile-colors-dark-900);\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: var(--nile-input-standard-background-color);\n    border: solid 1px var(--nile-input-standard-border-color);\n    box-shadow: var(--nile-input-shadow-standard);\n  }\n\n  .input--standard:hover:not(.input--disabled) {\n    background-color: hsl(0, 0%, 100%);\n    border-color: #000;\n  }\n\n  .input--standard.input--focused:not(.input--disabled) {\n    background-color: hsl(0, 0%, 100%);\n    border-color: #85aad1;\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled);\n  }\n\n  .input--standard.input--focused:not(.input--disabled) .input__control {\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--standard.input--disabled {\n    background-color: #fff;\n    border-color: #c7ced4;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input--standard.input--disabled .input__control {\n    color: hsl(240 5.9% 10%);\n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: var(--nile-input-standard-disabled-placeholder-font-color);\n  }\n\n  .input--standard.input--warning {\n    border-color: var(--nile-colors-yellow-500);\n  }\n\n  .input--standard.input--error {\n    border-color: #e5434d;\n  }\n\n  .input--standard.input--success {\n    border-color: #43e5c0;\n  }\n\n  .input--standard.input--destructive {\n    border-color: #fda29b;\n  }\n\n  .input--standard.input--focused.input--destructive:not(.input--disabled) {\n    border: 1px solid #fda29b;\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  .input--destructive:active {\n    border: 1px solid #fda29b;\n    box-shadow: var(--nile-input-shadow-destructive-active);\n  }\n\n  /* Filled inputs */\n  .input--filled {\n    border: none;\n    background-color: #F1F1F2;\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled:hover:not(.input--disabled) {\n    background-color: #F1F1F2;\n  }\n\n  .input--filled.input--focused:not(.input--disabled) {\n    background-color: #F1F1F2;\n    outline: solid 3px hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .input--filled.input--disabled {\n    background-color: #F1F1F2;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input__control {\n    flex: 1 1 auto;\n    min-width: 0;\n    height: 100%;\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n    cursor: inherit;\n    -webkit-appearance: none;\n    color: var(--nile-colors-dark-900);\n    font-family: var(--nile-font-family-sans-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 16px;\n    letter-spacing: 0.2px;\n  }\n\n  .input__control::-webkit-search-decoration,\n  .input__control::-webkit-search-cancel-button,\n  .input__control::-webkit-search-results-button,\n  .input__control::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;\n  }\n\n  .input__control::placeholder {\n    color: #667085;\n    user-select: none;\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: #000;\n  }\n\n  .input__control:focus {\n    outline: none;\n  }\n\n  .input__prefix,\n  .input__suffix {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    cursor: default;\n  }\n\n  .input__prefix::slotted(nile-icon) {\n    color: hsl(240 3.8% 46.1%);\n  }\n\n  .input__suffix::slotted(nile-icon) {\n    color: hsl(240 3.8% 46.1%);\n  }\n\n  .input--standard:focus {\n    border-radius: 4px;\n    border: 1px solid #85aad1;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: 0.25rem;\n    font-size: var(--nile-input-font-size-small);\n    height: 1.875rem;\n  }\n\n  .input--small .input__control {\n    height: calc(1.875rem);\n    padding: 0 0.75rem;\n  }\n\n  .input--small .input__clear {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__password-toggle {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__prefix::slotted(*) {\n    margin-inline-start: 0.75rem;\n  }\n\n  .input--small .input__suffix::slotted(*) {\n    margin-inline-end: 0.75rem;\n  }\n\n  .input--medium {\n    border-radius: 0.25rem;\n    font-size: var(--nile-input-font-size-medium);\n    height: 40px;\n  }\n\n  .input--medium .input__control {\n    height: 14px;\n    padding: 12px;\n  }\n\n  .input--medium .input__clear {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__password-toggle {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__prefix::slotted(*) {\n    margin-inline-start: 12px;\n  }\n\n  .input--medium .input__suffix::slotted(*) {\n    margin-inline-end: 12px;\n  }\n\n  .input--large {\n    border-radius: 0.25rem;\n    font-size: 1.25rem;\n    height: 3.125rem;\n  }\n\n  .input--large .input__control {\n    height: calc(3.125rem - 1px * 2);\n    padding: 0 1.25rem;\n  }\n\n  .input--large .input__clear {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__password-toggle {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__prefix::slotted(*) {\n    margin-inline-start: 1.25rem;\n  }\n\n  .input--large .input__suffix::slotted(*) {\n    margin-inline-end: 1.25rem;\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .input--pill.input--small {\n    border-radius: 1.875rem;\n  }\n\n  .input--pill.input--medium {\n    border-radius: 2.5rem;\n  }\n\n  .input--pill.input--large {\n    border-radius: 3.125rem;\n  }\n\n  /*\n   * Clearable + Password Toggle\n   */\n\n  .input__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: hsl(240 3.8% 46.1%);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__password-toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: hsl(240 3.8% 46.1%);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__clear:hover {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input__password-toggle:hover {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input__clear:focus,\n  .input__password-toggle:focus {\n    outline: none;\n  }\n\n  .input--empty .input__clear {\n    visibility: hidden;\n  }\n\n  /* Don't show the browser's password toggle in Edge */\n  ::-ms-reveal {\n    display: none;\n  }\n\n  /* Hide the built-in number spinner */\n  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n\n  .input--no-spin-buttons input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  :host([no-border]) .input--standard {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard:hover:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none;\n    box-shadow: 0 0 0 0;\n  }\n\n  .input__password {\n    font-family: 'disc';\n  }\n\n  .input__non-printable {\n    border-radius: 4px;\n    max-width: 400px;\n    background-color: var(--nile-colors-white-base);\n    border: 1px solid var(--nile-colors-red-500);\n    color: var(--nile-colors-red-500);\n    padding: 10px;\n    font-size: 12px;\n    max-height: 300px;\n    overflow-y: scroll;\n    line-height: 16px;\n  }\n\n  .input__remove-non-printable {\n    color: var(--nile-colors-red-500);\n    margin-left: 10px;\n    font-size: 14px;\n    color: var(--nile-colors-dark-900);\n    cursor: pointer;\n  }\n\n  .input__srtiked-text-container {\n    margin-top: 4px;\n    color: var(--nile-colors-dark-900);\n    word-break: break-all;\n    line-height: 16px;\n  }\n\n  .input__srtiked-text {\n    text-decoration: line-through;\n    text-decoration-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-white-base);\n    background-color: var(--nile-colors-red-500);\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -27,7 +27,7 @@ export declare class NilePopover extends LitElement {
     arrow: boolean;
     /** Gives the title to the popover */
     title: string;
-    private isShow;
+    isShow: boolean;
     arrowPlacement: 'start' | 'end' | 'center' | 'anchor';
     /**
      * Enable this option to prevent the panel from being clipped when the component is placed inside a container with

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

@@ -6,7 +6,7 @@
  */
 import { __decorate } from "tslib";
 import { LitElement, html, property, } from 'lit-element';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators.js';
 import { styles } from './nile-popover.css';
 /**
  * Nile icon component.
@@ -115,7 +115,7 @@ __decorate([
     property({ type: String })
 ], NilePopover.prototype, "title", void 0);
 __decorate([
-    state()
+    property({ type: Boolean, attribute: 'open' })
 ], NilePopover.prototype, "isShow", void 0);
 __decorate([
     property({ attribute: 'arrow-placement' })