@aquera/nile-elements 0.0.97 → 0.0.99

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.97",
+  "version": "0.0.99",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-auto-complete/nile-auto-complete.ts

@@ -96,7 +96,7 @@ export class NileAutoComplete extends NileElement {
 
   public render(): TemplateResult {
     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}
@@ -108,7 +108,7 @@ export 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: unknown)  => html`
                     <nile-menu-item value=${item}>${item}</nile-menu-item>

package/src/nile-chip/nile-chip.ts

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

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

@@ -110,6 +110,11 @@ export class NileDrawer extends NileElement {
    */
   @property({ type: Boolean, reflect: true }) contained = false;
 
+  /**
+   * Drawer doesnt close when clicled on overlay, the only way to close is to do by handling open property
+   */
+  @property({ type: Boolean, reflect:true }) 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.
@@ -141,6 +146,7 @@ export class NileDrawer extends NileElement {
   }
 
   private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {
+    if((source=='overlay' || source=='keyboard') && this.preventOverlayClose) return;
     const slRequestClose = this.emit('nile-request-close', {
       cancelable: true,
       detail: { source }

package/src/nile-icon/icons/svg/every.ts

@@ -2,4 +2,4 @@
  * Do not edit directly
  */
 
-export default "PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTgsLjVBNy41LDcuNSwwLDEsMCwxNS41LDgsNy41MSw3LjUxLDAsMCwwLDgsLjVabTAsMTRBNi41LDYuNSwwLDEsMSwxNC41LDgsNi41MSw2LjUxLDAsMCwxLDgsMTQuNVoiLz48cG9seWdvbiBwb2ludHM9IjguNSA0IDcuNSA0IDcuNSA4LjIxIDEwLjY1IDExLjM1IDExLjM1IDEwLjY1IDguNSA3Ljc5IDguNSA0Ii8+PC9zdmc+";
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQuMTExMDEgMi4xNzk3MUM1LjI2MjE1IDEuNDEwNTQgNi42MTU1MyAxIDggMUM5Ljg1NTc2IDEuMDAyNDcgMTEuNjM0OCAxLjc0MDc2IDEyLjk0NyAzLjA1Mjk4QzE0LjI1OTIgNC4zNjUyIDE0Ljk5NzUgNi4xNDQyNCAxNSA4QzE1IDkuMzg0NDcgMTQuNTg5NSAxMC43Mzc4IDEzLjgyMDMgMTEuODg5QzEzLjA1MTEgMTMuMDQwMSAxMS45NTc5IDEzLjkzNzMgMTAuNjc4OCAxNC40NjcyQzkuMzk5NyAxNC45OTcgNy45OTIyNCAxNS4xMzU2IDYuNjM0MzcgMTQuODY1NUM1LjI3NjUgMTQuNTk1NCA0LjAyOTIyIDEzLjkyODcgMy4wNTAyNiAxMi45NDk3QzIuMDcxMjkgMTEuOTcwOCAxLjQwNDYgMTAuNzIzNSAxLjEzNDUxIDkuMzY1NjNDMC44NjQ0MSA4LjAwNzc2IDEuMDAzMDMgNi42MDAzIDEuNTMyODUgNS4zMjEyMkMyLjA2MjY2IDQuMDQyMTMgMi45NTk4NyAyLjk0ODg4IDQuMTExMDEgMi4xNzk3MVpNNC42Mjk1NCAxMy4wNDQyQzUuNjI3MiAxMy43MTA5IDYuODAwMTMgMTQuMDY2NyA4IDE0LjA2NjdDOS42MDgyMiAxNC4wNjQyIDExLjE0OTkgMTMuNDI0MiAxMi4yODcxIDEyLjI4NzFDMTMuNDI0MiAxMS4xNDk5IDE0LjA2NDIgOS42MDgyMiAxNC4wNjY3IDhDMTQuMDY2NyA2LjgwMDEzIDEzLjcxMDkgNS42MjcyIDEzLjA0NDIgNC42Mjk1NEMxMi4zNzc2IDMuNjMxODggMTEuNDMwMiAyLjg1NDMgMTAuMzIxNiAyLjM5NTEzQzkuMjEzMDggMS45MzU5NiA3Ljk5MzI3IDEuODE1ODIgNi44MTY0NSAyLjA0OTlDNS42Mzk2NCAyLjI4Mzk5IDQuNTU4NjYgMi44NjE3OCAzLjcxMDIyIDMuNzEwMjJDMi44NjE3OCA0LjU1ODY2IDIuMjgzOTkgNS42Mzk2MyAyLjA0OTkxIDYuODE2NDVDMS44MTU4MiA3Ljk5MzI3IDEuOTM1OTYgOS4yMTMwNyAyLjM5NTEzIDEwLjMyMTZDMi44NTQzMSAxMS40MzAxIDMuNjMxODggMTIuMzc3NiA0LjYyOTU0IDEzLjA0NDJaTTcgNC41SDhWOC4yOUwxMC44NSAxMS4xNUwxMC4xNSAxMS44NUw3IDguNzFWNC41WiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/logout.ts

@@ -2,4 +2,4 @@
  * Do not edit directly
  */
 
-export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjEuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIJIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBkPSJNMjAsMC42QzkuMywwLjYsMC42LDkuMywwLjYsMjBTOS4zLDM5LjQsMjAsMzkuNFMzOS40LDMwLjcsMzkuNCwyMFMzMC43LDAuNiwyMCwwLjZ6IE0yMCwzNy45CQljLTkuOSwwLTE3LjktOC0xNy45LTE3LjlTMTAuMSwyLjEsMjAsMi4xczE3LjksOCwxNy45LDE3LjlTMjkuOSwzNy45LDIwLDM3Ljl6Ii8+PHBvbHlnb24gIHBvaW50cz0iMTMuMiwxMy4yIDE5LDEzLjIgMTksMTEuNyAxMS43LDExLjcgMTEuNywyOC4zIDE5LDI4LjMgMTksMjYuOCAxMy4yLDI2LjggCSIvPjxwb2x5Z29uICBwb2ludHM9IjIzLjMsMTUuMiAyNy40LDE5LjMgMTYuMiwxOS4zIDE2LjIsMjAuOCAyNy40LDIwLjggMjMuMywyNC44IDI0LjQsMjUuOCAzMC4zLDIwIDI0LjQsMTQuMiAJIi8+PC9nPjwvc3ZnPg==";
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMzc4Ml8xMDUyKSI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPjxwYXRoIGQ9Ik0xMC41IDEySDE4TTE4IDEyTDE0IDhNMTggMTJMMTQgMTZNMTEgNy41SDcuNVYxNi41SDExTTIyLjUgMTJDMjIuNSAxNy43OTkgMTcuNzk5IDIyLjUgMTIgMjIuNUM2LjIwMTAxIDIyLjUgMS41IDE3Ljc5OSAxLjUgMTJDMS41IDYuMjAxMDEgNi4yMDEwMSAxLjUgMTIgMS41QzE3Ljc5OSAxLjUgMjIuNSA2LjIwMTAxIDIyLjUgMTJaIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwXzM3ODJfMTA1MiI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/notscheduled.ts

@@ -2,4 +2,4 @@
  * Do not edit directly
  */
 
-export default "PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTgsLjVBNy41LDcuNSwwLDEsMCwxNS41LDgsNy41MSw3LjUxLDAsMCwwLDgsLjVabTAsMTRBNi41LDYuNSwwLDEsMSwxNC41LDgsNi41MSw2LjUxLDAsMCwxLDgsMTQuNVoiLz48cG9seWdvbiBwb2ludHM9IjEwLjY1IDQuNjUgOCA3LjI5IDUuMzUgNC42NSA0LjY1IDUuMzUgNy4yOSA4IDQuNjUgMTAuNjUgNS4zNSAxMS4zNSA4IDguNzEgMTAuNjUgMTEuMzUgMTEuMzUgMTAuNjUgOC43MSA4IDExLjM1IDUuMzUgMTAuNjUgNC42NSIvPjwvc3ZnPg==";
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggMUM0LjEzNDAxIDEgMSA0LjEzNDAxIDEgOEMxIDExLjg2NiA0LjEzNDAxIDE1IDggMTVDMTEuODY2IDE1IDE1IDExLjg2NiAxNSA4QzE1IDYuMTQzNDggMTQuMjYyNSA0LjM2MzAxIDEyLjk0OTcgMy4wNTAyNUMxMS42MzcgMS43Mzc1IDkuODU2NTIgMSA4IDFaTTggMTRDNC42ODYyOSAxNCAyIDExLjMxMzcgMiA4QzIgNC42ODYyOSA0LjY4NjI5IDIgOCAyQzExLjMxMzcgMiAxNCA0LjY4NjI5IDE0IDhDMTQgOS41OTEzIDEzLjM2NzkgMTEuMTE3NCAxMi4yNDI2IDEyLjI0MjZDMTEuMTE3NCAxMy4zNjc5IDkuNTkxMyAxNCA4IDE0Wk04IDcuMjlMMTAuNDcgNC44MkwxMS4xOCA1LjUzTDguNzEgOEwxMS4xOCAxMC40N0wxMC40NyAxMS4xOEw4IDguNzFMNS41MyAxMS4xOEw0LjgyIDEwLjQ3TDcuMjkgOEw0LjgyIDUuNTNMNS41MyA0LjgyTDggNy4yOVoiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/schedule.ts

@@ -2,4 +2,4 @@
  * Do not edit directly
  */
 
-export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjEuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cG9seWdvbiBwb2ludHM9IjguNSw1LjggNy41LDUuOCA3LjUsOS4xIDkuOCwxMS42IDEwLjYsMTEgOC41LDguNyAJIi8+PHBhdGggZD0iTTgsMi4xYy0zLjcsMC02LjgsMy02LjgsNi44YzAsMy43LDMsNi44LDYuOCw2LjhzNi44LTMsNi44LTYuOEMxNC44LDUuMSwxMS44LDIuMSw4LDIuMXogTTgsMTQuNmMtMy4yLDAtNS44LTIuNi01LjgtNS44CQljMC0zLjIsMi42LTUuOCw1LjgtNS44czUuOCwyLjYsNS44LDUuOEMxMy44LDEyLjEsMTEuMiwxNC42LDgsMTQuNnoiLz48cmVjdCB4PSI0LjkiIHk9IjAuNSIgd2lkdGg9IjYuMiIgaGVpZ2h0PSIxIi8+PC9nPjwvc3ZnPg==";
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjEgMC41SDQuODk5OTVWMS41SDExLjFWMC41Wk0xLjE5OTk1IDguOUMxLjE5OTk1IDUuMSA0LjI5OTk1IDIuMSA3Ljk5OTk1IDIuMUMxMS44IDIuMSAxNC44IDUuMSAxNC44IDguOUMxNC44IDEyLjcgMTEuOCAxNS43IDcuOTk5OTUgMTUuN0M0LjE5OTk1IDE1LjcgMS4xOTk5NSAxMi42IDEuMTk5OTUgOC45Wk0yLjE5OTk1IDguOEMyLjE5OTk1IDEyIDQuNzk5OTUgMTQuNiA3Ljk5OTk1IDE0LjZDMTEuMiAxNC42IDEzLjggMTIuMSAxMy44IDguOEMxMy44IDUuNiAxMS4yIDMgNy45OTk5NSAzQzQuNzk5OTUgMyAyLjE5OTk1IDUuNiAyLjE5OTk1IDguOFpNNy40OTk5NSA1LjhWOS4xTDkuNzk5OTUgMTEuNkwxMC42IDExTDguNDk5OTUgOC43VjUuOEg3LjQ5OTk1WiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=";

package/src/nile-input/nile-input.css.ts

@@ -100,7 +100,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) {
@@ -111,8 +111,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 {
@@ -152,35 +151,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;
   }
@@ -214,42 +211,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/src/nile-popover/nile-popover.ts

@@ -12,10 +12,10 @@ import {
   CSSResultArray,
   TemplateResult,
 } from 'lit-element';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators.js';
 import { styles } from './nile-popover.css';
-import type NilePopup from '../nile-popup/nile-popup';
-import { string } from '../nile-icon/icons/svg';
+import NileElement from '../internal/nile-element';
+import { watch } from '../internal/watch';
 
 /**
  * Nile icon component.
@@ -24,7 +24,7 @@ import { string } from '../nile-icon/icons/svg';
  *
  */
 @customElement('nile-popover')
-export class NilePopover extends LitElement {
+export class NilePopover extends NileElement {
   /**
    * The styles for Popover
    * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
@@ -59,7 +59,7 @@ export class NilePopover extends LitElement {
   /** Gives the title to the popover */
   @property({ type: String }) title = '';
 
-  @state() private isShow = false;
+  @property({type:Boolean, attribute:'open'}) isShow = false;
 
   @property({ attribute: 'arrow-placement' }) arrowPlacement:
     | 'start'
@@ -86,14 +86,22 @@ export class NilePopover extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
+    this.emit('nile-init');
     document.addEventListener('click', this.handleDocumentClick);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.emit('nile-destroy');
     document.removeEventListener('click', this.handleDocumentClick);
   }
 
+  @watch('isShow')
+  handleShowHide(){
+    if(this.isShow)this.emit('nile-show')
+    else this.emit('nile-hide')
+  }
+
   private handleClick = () => {
     this.isShow = !this.isShow;
     const allPopovers = document.querySelectorAll('nile-popover');
@@ -107,7 +115,7 @@ export class NilePopover extends LitElement {
 
   private handleDocumentClick = () => {
     if (this.isShow) {
-      this.isShow = !this.isShow;
+      this.isShow = false;
     }
   };
 

package/src/nile-select/nile-select.css.ts

@@ -264,7 +264,7 @@ export const styles = css`
     border-radius: 4px;
     font-size: 14px;
     padding: 12px;
-    height: 38px;
+    height: 40px;
     box-sizing: border-box;
   }
 

package/src/nile-table-header-item/nile-table-header-item.css.ts

@@ -14,6 +14,12 @@ export const styles = css`
   :host {
     display: table-cell;
     box-sizing: border-box;
+  }
+  
+  .header__item__wrapper{
+    display:flex;
+    align-items:center;
+    box-sizing: border-box;
     padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);
     min-height: 44px;
     height: 44px;

package/src/nile-table-header-item/nile-table-header-item.ts

@@ -69,7 +69,9 @@ export class NileTableHeaderItem extends NileElement {
 
   public render(): TemplateResult {
     return html` ${this.hasSlotController.test('[default]')
-      ? html` <div class="headers">
+      ? html`
+      <div class="header__item__wrapper">
+        <div class="headers">
           <slot> </slot>
           ${this.havesort && this.sorting_ct % 3 === 0
             ? html`<nile-icon
@@ -107,7 +109,8 @@ export class NileTableHeaderItem extends NileElement {
                 <slot name="filter__content" part="filter__content"></slot>
               </nile-popover>`
             : html``}
-        </div>`
+        </div>
+      </div>`
       : null}`;
   }
   /* #endregion */

package/src/nile-toast/nile-toast.css.ts

@@ -19,6 +19,8 @@ export const styles = css`
   }
 
   .alert {
+    max-width: 100%;
+    box-sizing: border-box;
     position: relative;
     display: flex;
     align-items: flex-start;
@@ -169,7 +171,7 @@ export const styles = css`
     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/src/nile-toolbar/nile-toolbar.css.ts

@@ -20,14 +20,14 @@ export const styles = css`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 16px;
+    padding: 0 48px;
     box-sizing: border-box;
     min-height: 64px;
-	line-height: var(--nile-toolbar-line-height);
-	font-weight: var(--nile-toolbar-font-weight);
+    line-height: var(--nile-toolbar-line-height);
+    font-weight: var(--nile-toolbar-font-weight);
     font-family: var(--nile-font-family-sans-serif);
-	font-size: var(--nile-toolbar-font-size);
-    background-color: var(--nile-toolbar-background-color, #f5f5f5);
+    font-size: var(--nile-toolbar-font-size);
+    background-color: var(--nile-toolbar-background-color, #FFFFFF);
     color: var(--nile-toolbar-text-color, rgba(0, 0, 0, 0.87));
   }
 `;