@aquera/nile-elements 0.0.97 → 0.0.98

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.98",
   "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-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

@@ -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'

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;