@aquera/nile-elements 0.0.71 → 0.0.73

package/package.json

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

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

@@ -48,42 +48,42 @@ export const styles = css`
   /* for v2 */
   .badge--pink {
     color: #c11574;
-    border: 1px solid #fcceee;
+    border: var(--nile-badge-color-border-width) solid #fcceee;
     background: #fdf2fa;
   }
 
   .badge--orange {
     color: #b93815;
-    border: 1px solid #f9dbaf;
+    border: var(--nile-badge-color-border-width) solid #f9dbaf;
     background: #fef6ee;
   }
 
   .badge--purple {
     color: #5925dc;
-    border: 1px solid #d9d6fe;
+    border: var(--nile-badge-color-border-width) solid #d9d6fe;
     background: #f4f3ff;
   }
 
   .badge--indigo {
     color: #3538cd;
-    border: 1px solid #c7d7fe;
+    border: var(--nile-badge-color-border-width) solid #c7d7fe;
     background: #eef4ff;
   }
 
   .badge--blue {
     color: #175cd3;
-    border: 1px solid #b2ddff;
+    border: var(--nile-badge-color-border-width) solid #b2ddff;
     background: #eff8ff;
   }
   .badge--blue-light {
     color: #026aa2;
-    border: 1px solid #b9e6fe;
+    border: var(--nile-badge-color-border-width) solid #b9e6fe;
     background: #f0f9ff;
   }
 
   .badge--gray-blue {
     color: #363f72;
-    border: 1px solid #d5d9eb;
+    border: var(--nile-badge-color-border-width) solid #d5d9eb;
     background: #f8f9fc;
   }
 
@@ -106,62 +106,62 @@ export const styles = css`
 
   .badge--brand {
     color: #005291;
-    border: 1px solid #b5c9e0;
+    border: var(--nile-badge-color-border-width) solid #b5c9e0;
     background: #eaf0f8;
   }
 
   .badge--gray {
     color: #344054;
-    border: 1px solid #eaecf0;
+    border: var(--nile-badge-color-border-width) solid #eaecf0;
     background: #f9fafb;
   }
 
   .badge--pink.badge--pill-outline {
-    border: 1px solid #dd2590;
+    border: var(--nile-badge-color-border-width-pill-outline) solid #dd2590;
   }
 
   .badge--orange.badge--pill-outline {
-    border: 1px solid #e04f16;
+    border: var(--nile-badge-color-border-width-pill-outline) solid #e04f16;
   }
 
   .badge--purple.badge--pill-outline {
-    border: 1px solid #6938ef;
+    border: var(--nile-badge-color-border-width-pill-outline) solid #6938ef;
   }
 
   .badge--indigo.badge--pill-outline {
-    border: 1px solid #444ce7;
+    border: var(--nile-badge-color-border-width-pill-outline) solid #444ce7;
   }
 
   .badge--blue.badge--pill-outline {
-    border: 1px solid #1570ef;
+    border: var(--nile-badge-color-border-width-pill-outline) solid #1570ef;
   }
 
   .badge--blue-light.badge--pill-outline {
-    border: 1px solid #0086c9;
+    border: var(--nile-badge-color-border-width-pill-outline) solid #0086c9;
   }
 
   .badge--gray-blue.badge--pill-outline {
-    border: 1px solid #3e4784;
+    border: var(--nile-badge-color-border-width-pill-outline) solid #3e4784;
   }
 
   .badge--success.badge--pill-outline {
-    border: 1px solid #079455;
+    border: var(--nile-badge-color-border-width-pill-outline) solid #079455;
   }
 
   .badge--warning.badge--pill-outline {
-    border: 1px solid #dc6803;
+    border: var(--nile-badge-color-border-width-pill-outline) solid #dc6803;
   }
 
   .badge--error.badge--pill-outline {
-    border: 1px solid #d92d20;
+    border: var(--nile-badge-color-border-width-pill-outline) solid #d92d20;
   }
 
   .badge--brand.badge--pill-outline {
-    border: 1px solid #005ea6;
+    border: var(--nile-badge-color-border-width-pill-outline) solid #005ea6;
   }
 
   .badge--gray.badge--pill-outline {
-    border: 1px solid #475467;
+    border: var(--nile-badge-color-border-width-pill-outline) solid #475467;
   }
 
   .badge--pill-outline {

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

@@ -107,11 +107,12 @@ export class NileCalendar extends NileElement {
   }
 
   @watch('allowedDates')
-  checkValidAllowedDate() {
+  checkValidAllowedDate() {    
     if (Object.keys(this.allowedDates).length ==0) {
       this.validAllowedDates = false;
       return;
     }
+    this.hideInput=true;
     const startDate = new Date(
       Date.UTC(
         this.allowedDates?.startDate?.slice(0, 4),
@@ -137,6 +138,8 @@ export class NileCalendar extends NileElement {
     }
   }
 
+  @state() hideInput: Boolean = false;
+
   @property({ type: Boolean,attribute:'hide-time-input' }) hideTimeInput: Boolean = false;
 
   @property({ type: Array, attribute: 'hide-duration-fields' })
@@ -871,12 +874,14 @@ export class NileCalendar extends NileElement {
           <div class="calender-input">
             <div>
                   <span class="manual-input-label">From </span>
-                  <div class="from">
-                        <nile-input class="manual-input" value="${this.formatDate(
+                  <div class="from"> 
+                    ${!this.hideInput ? html`<nile-input class="manual-input" value="${this.formatDate(
                           this.startDate
                         )}" placeholder="DD/MM/YYYY" @nile-change="${
                         this.handleStartDateInput
-                      }"></nile-input>
+                      }">
+                      </nile-input>`:html`` }
+                   
                         <nile-input class="manual-input  ${this.hideTimeInput ? 'hidden':''}" value="${this.formatTime(
                           this.startDate
                         )}" placeholder="HH:MM:SS" @nile-change="${
@@ -888,11 +893,12 @@ export class NileCalendar extends NileElement {
             <div>
                   <span class="manual-input-label">To </span>
                   <div class="from">
-                      <nile-input class="manual-input" value="${this.formatDate(
+                    ${!this.hideInput ? html`<nile-input class="manual-input" value="${this.formatDate(
                         this.endDate
                       )}" placeholder="DD/MM/YYYY" @nile-change="${
                         this.handleEndDateInput
-                      }"></nile-input>
+                      }"></nile-input>`:html``}
+                   
                       <nile-input class="manual-input  ${this.hideTimeInput ? 'hidden':''} " value="${this.formatTime(
                         this.endDate
                       )}" placeholder="HH:MM:SS" @nile-change="${

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

@@ -52,6 +52,9 @@ export const styles = css`
     padding: 12px 16px 0 16px;
   }
 
+  .body__wrapper_nf {
+    padding: 12px 16px 16px 16px;
+  }
   .card__header {
     display: block;
   }
@@ -74,6 +77,12 @@ export const styles = css`
   .card:not(.card--has-footer) .card__footer {
     display: none;
   }
+
+  .card:hover {
+    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
+      0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+    border: solid 1px var(--border-color);
+  }
 `;
 
 export default [styles];

package/src/nile-card/nile-card.ts

@@ -40,7 +40,12 @@ export class NileCard extends NileElements {
           'card--has-footer': this.hasSlotController.test('footer'),
         })}
       >
-        <div class="body__wrapper" part="body__wrapper">
+        <div class="body__wrapper" part="body__wrapper"
+        class=${classMap({
+          'body__wrapper':true,
+          'body__wrapper_nf': !this.hasSlotController.test('footer')
+        })}
+        >
           <slot name="header" part="header" class="card__header"></slot>
           <slot part="body" class="card__body"></slot>
         </div>

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

@@ -123,6 +123,11 @@ export const styles = css`
     box-sizing: border-box;
   }
 
+  .checkbox__icon__container{
+    display:flex;
+    align-items:center;
+  }
+
   .checkbox__label__text {
     display: block;
     font-size: 14px;

package/src/nile-checkbox/nile-checkbox.ts

@@ -112,6 +112,10 @@ export class NileCheckbox extends NileElement {
   /** Makes the checkbox a required field. */
   @property({ type: Boolean, reflect: true }) required = false;
 
+  @query('.checkbox__label__text') labelContainer:HTMLElement;
+
+  @query('div.checkbox__icon__container') checkboxIconContainer:HTMLElement;
+
   private handleClick() {
     this.checked = !this.checked;
     this.indeterminate = false;
@@ -177,6 +181,7 @@ export class NileCheckbox extends NileElement {
     if (changedProperties.has('helpText')) {
       this.updateHostClass();
     }
+    this.checkboxIconContainer.style.height=this.labelContainer.scrollHeight+'px';
   }
 
   private updateHostClass() {
@@ -200,57 +205,59 @@ export class NileCheckbox extends NileElement {
           'checkbox--disabled': this.disabled,
           'checkbox--focused': this.hasFocus,
           'checkbox--indeterminate': this.indeterminate
-        })}
+        })} 
       >
-        <span
-          part="control${this.checked ? ' control--checked' : ''}${this
-            .indeterminate
-            ? ' control--indeterminate'
-            : ''}"
-          class="checkbox__control"
-        >
-          <!-- An empty title prevents browser validation tooltips from appearing on hover -->
-          <input
-            class="checkbox__input"
-            type="checkbox"
-            title=${ this.title }
-            name=${this.name}
-            value=${ifDefined(this.value)}
-            .indeterminate=${live(this.indeterminate)}
-            .checked=${live(this.checked)}
-            .disabled=${this.disabled}
-            .required=${this.required}
-            aria-checked=${this.checked ? 'true' : 'false'}
-            @click=${this.handleClick}
-            @input=${this.handleInput}
-            @blur=${this.handleBlur}
-            @focus=${this.handleFocus}
-          />
-          ${this.checked
-            ? html`
-                <nile-icon
-                  part="checked-icon"
-                  class="checkbox__checked-icon"
-                  color="white"
-                  library="system"
-                  name="tick"
-                  size="12"
-                ></nile-icon>
-              `
-            : ''}
-          ${!this.checked && this.indeterminate
-            ? html`
-                <nile-icon
-                  part="indeterminate-icon"
-                  class="checkbox__indeterminate-icon"
-                  library="system"
-                  color="white"
-                  name="minus"
-                  size="12"
-                ></nile-icon>
-              `
-            : ''}
-        </span>
+        <div class="checkbox__icon__container">
+          <span
+            part="control${this.checked ? ' control--checked' : ''}${this
+              .indeterminate
+              ? ' control--indeterminate'
+              : ''}"
+            class="checkbox__control"
+          >
+            <!-- An empty title prevents browser validation tooltips from appearing on hover -->
+            <input
+              class="checkbox__input"
+              type="checkbox"
+              title=${ this.title }
+              name=${this.name}
+              value=${ifDefined(this.value)}
+              .indeterminate=${live(this.indeterminate)}
+              .checked=${live(this.checked)}
+              .disabled=${this.disabled}
+              .required=${this.required}
+              aria-checked=${this.checked ? 'true' : 'false'}
+              @click=${this.handleClick}
+              @input=${this.handleInput}
+              @blur=${this.handleBlur}
+              @focus=${this.handleFocus}
+            />
+            ${this.checked
+              ? html`
+                  <nile-icon
+                    part="checked-icon"
+                    class="checkbox__checked-icon"
+                    color="white"
+                    library="system"
+                    name="tick"
+                    size="12"
+                  ></nile-icon>
+                `
+              : ''}
+            ${!this.checked && this.indeterminate
+              ? html`
+                  <nile-icon
+                    part="indeterminate-icon"
+                    class="checkbox__indeterminate-icon"
+                    library="system"
+                    color="white"
+                    name="minus"
+                    size="12"
+                  ></nile-icon>
+                `
+              : ''}
+          </span>
+        </div>
 
         <div part="label" class="checkbox__label" style="${!this.label && !this.subLabel?'margin-left:0;':''}">
           ${this.label ? html`<span class="checkbox__label__text">${this.label}</span>` : ``}

package/src/nile-empty-state/nile-empty-state.ts

@@ -39,7 +39,7 @@ export class NileEmptyState extends NileElement {
   @property({type:Boolean}) grayscale: boolean = false;
 
   @property() text: String = 'Empty State';
-  @property() subText: String = 'No Data';
+  @property({attribute:'sub-text'}) subText: String = 'No Data';
 
 
   /* #endregion */

package/src/nile-hero/nile-hero.ts

@@ -50,7 +50,7 @@ export class NileHero extends NileElement {
 	@watch('collapse')
 	updateOnCollapseChange() {
 		if (!this.heroContainer) return;
-		const heroHeaderHeight = this.heroHeader.getBoundingClientRect().height;
+		const heroHeaderHeight = this.heroHeader.scrollHeight+1;
 		if (this.collapse) {
 			this.heroContainer.style.height = heroHeaderHeight + 'px';
 			this.heroContainer.style.background = "var(--nile-hero-collapsed-background,#fff)";
@@ -71,7 +71,7 @@ export class NileHero extends NileElement {
 			<div class="hero__slot__container" style="opacity:${this.collapse?0:1}">
 			 <div class="hero__slot">
 			 	<span class="icon__container">
-					<nile-icon size="16" name="${this.icon}"></nile-icon>
+					<nile-icon size="16" method="stroke" name="${this.icon}"></nile-icon>
 				</span>
 				<slot></slot>
 			 </div>

package/src/nile-hero-header/nile-hero-header.ts

@@ -41,7 +41,7 @@ export class NileHeroHeader extends NileElement {
 	public render(): TemplateResult {
 		return html`
 				<span class="icon__container">
-					<nile-icon size="16" name="${this.icon}"></nile-icon>
+					<nile-icon method="stroke" size="16" name="${this.icon}"></nile-icon>
 				</span>
 				<span class="hero__text">${this.heroText}</span>
 			`;

package/src/nile-icon/icons/svg/calendar-01.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjEgMTBIM00xNiAyVjZNOCAyVjZNNy44IDIySDE2LjJDMTcuODgwMiAyMiAxOC43MjAyIDIyIDE5LjM2MiAyMS42NzNDMTkuOTI2NSAyMS4zODU0IDIwLjM4NTQgMjAuOTI2NSAyMC42NzMgMjAuMzYyQzIxIDE5LjcyMDIgMjEgMTguODgwMiAyMSAxNy4yVjguOEMyMSA3LjExOTg0IDIxIDYuMjc5NzYgMjAuNjczIDUuNjM4MDNDMjAuMzg1NCA1LjA3MzU0IDE5LjkyNjUgNC42MTQ2IDE5LjM2MiA0LjMyNjk4QzE4LjcyMDIgNCAxNy44ODAyIDQgMTYuMiA0SDcuOEM2LjExOTg0IDQgNS4yNzk3NiA0IDQuNjM4MDMgNC4zMjY5OEM0LjA3MzU0IDQuNjE0NiAzLjYxNDYgNS4wNzM1NCAzLjMyNjk4IDUuNjM4MDNDMyA2LjI3OTc2IDMgNy4xMTk4NCAzIDguOFYxNy4yQzMgMTguODgwMiAzIDE5LjcyMDIgMy4zMjY5OCAyMC4zNjJDMy42MTQ2IDIwLjkyNjUgNC4wNzM1NCAyMS4zODU0IDQuNjM4MDMgMjEuNjczQzUuMjc5NzYgMjIgNi4xMTk4NCAyMiA3LjggMjJaIiBzdHJva2U9ImJsYWNrIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/download-01.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjEgMTVWMTYuMkMyMSAxNy44ODAyIDIxIDE4LjcyMDIgMjAuNjczIDE5LjM2MkMyMC4zODU0IDE5LjkyNjUgMTkuOTI2NSAyMC4zODU0IDE5LjM2MiAyMC42NzNDMTguNzIwMiAyMSAxNy44ODAyIDIxIDE2LjIgMjFINy44QzYuMTE5ODQgMjEgNS4yNzk3NiAyMSA0LjYzODAzIDIwLjY3M0M0LjA3MzU0IDIwLjM4NTQgMy42MTQ2IDE5LjkyNjUgMy4zMjY5OCAxOS4zNjJDMyAxOC43MjAyIDMgMTcuODgwMiAzIDE2LjJWMTVNMTcgMTBMMTIgMTVNMTIgMTVMNyAxME0xMiAxNVYzIiBzdHJva2U9ImJsYWNrIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/folder-01.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTMgN0wxMS44ODQ1IDQuNzY4OTJDMTEuNTYzNCA0LjEyNjggMTEuNDAyOSAzLjgwNTczIDExLjE2MzQgMy41NzExNkMxMC45NTE2IDMuMzYzNzMgMTAuNjk2MyAzLjIwNTk3IDEwLjQxNjEgMy4xMDkzMUMxMC4wOTkyIDMgOS43NDAyMSAzIDkuMDIyMjkgM0g1LjJDNC4wNzk5IDMgMy41MTk4NCAzIDMuMDkyMDIgMy4yMTc5OUMyLjcxNTY5IDMuNDA5NzMgMi40MDk3MyAzLjcxNTY5IDIuMjE3OTkgNC4wOTIwMkMyIDQuNTE5ODQgMiA1LjA3OTkgMiA2LjJWN00yIDdIMTcuMkMxOC44ODAyIDcgMTkuNzIwMiA3IDIwLjM2MiA3LjMyNjk4QzIwLjkyNjUgNy42MTQ2IDIxLjM4NTQgOC4wNzM1NCAyMS42NzMgOC42MzgwM0MyMiA5LjI3OTc2IDIyIDEwLjExOTggMjIgMTEuOFYxNi4yQzIyIDE3Ljg4MDIgMjIgMTguNzIwMiAyMS42NzMgMTkuMzYyQzIxLjM4NTQgMTkuOTI2NSAyMC45MjY1IDIwLjM4NTQgMjAuMzYyIDIwLjY3M0MxOS43MjAyIDIxIDE4Ljg4MDIgMjEgMTcuMiAyMUg2LjhDNS4xMTk4NCAyMSA0LjI3OTc2IDIxIDMuNjM4MDMgMjAuNjczQzMuMDczNTQgMjAuMzg1NCAyLjYxNDYgMTkuOTI2NSAyLjMyNjk4IDE5LjM2MkMyIDE4LjcyMDIgMiAxNy44ODAyIDIgMTYuMlY3WiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

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

@@ -54,6 +54,7 @@ export { default as buttonloadingblack } from './button-loading-black';
 export { default as buttonloadingblueanimated } from './button-loading-blue-animated';
 export { default as buttonloadingblue } from './button-loading-blue';
 export { default as buttonloadingwhite } from './button-loading-white';
+export { default as calendar01 } from './calendar-01';
 export { default as calendar } from './calendar';
 export { default as cancel } from './cancel';
 export { default as cases } from './cases';
@@ -136,6 +137,7 @@ export { default as doublearrowright } from './doublearrowright';
 export { default as dowhileloop } from './dowhileloop';
 export { default as downarrow } from './downarrow';
 export { default as downgrade } from './downgrade';
+export { default as download01 } from './download-01';
 export { default as download02 } from './download-02';
 export { default as download } from './download';
 export { default as drag } from './drag';
@@ -197,6 +199,7 @@ export { default as flowmaptext } from './flowmap-text';
 export { default as flowmapundo } from './flowmap-undo';
 export { default as flowmapworkflow } from './flowmap-workflow';
 export { default as flowmap } from './flowmap';
+export { default as folder01 } from './folder-01';
 export { default as folder } from './folder';
 export { default as foreach } from './foreach';
 export { default as form } from './form';
@@ -440,6 +443,7 @@ export { default as tick } from './tick';
 export { default as timeupdate } from './timeupdate';
 export { default as timezone } from './timezone';
 export { default as trash01 } from './trash-01';
+export { default as trash03 } from './trash-03';
 export { default as trashnofill } from './trash-no-fill';
 export { default as trash } from './trash';
 export { default as trendup02 } from './trend-up-02';
@@ -496,6 +500,7 @@ export { default as wait } from './wait';
 export { default as warning } from './warning';
 export { default as while } from './while';
 export { default as whileloop } from './whileloop';
+export { default as workflow01 } from './workflow-01';
 export { default as workflowapplication } from './workflow-application';
 export { default as workfloworchestration } from './workflow-orchestration';
 export { default as workflowsection } from './workflow-section';

package/src/nile-icon/icons/svg/trash-03.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOSAzSDE1TTMgNkgyMU0xOSA2TDE4LjI5ODcgMTYuNTE5M0MxOC4xOTM1IDE4LjA5NzUgMTguMTQwOSAxOC44ODY3IDE3LjggMTkuNDg1QzE3LjQ5OTkgMjAuMDExOCAxNy4wNDcyIDIwLjQzNTMgMTYuNTAxNyAyMC42OTk3QzE1Ljg4MiAyMSAxNS4wOTExIDIxIDEzLjUwOTMgMjFIMTAuNDkwN0M4LjkwODkxIDIxIDguMTE4MDMgMjEgNy40OTgzNCAyMC42OTk3QzYuOTUyNzYgMjAuNDM1MyA2LjUwMDA5IDIwLjAxMTggNi4xOTk5OCAxOS40ODVDNS44NTkxMSAxOC44ODY3IDUuODA2NSAxOC4wOTc1IDUuNzAxMjkgMTYuNTE5M0w1IDZNMTAgMTAuNVYxNS41TTE0IDEwLjVWMTUuNSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/workflow-01.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNiAxNS41VjE0QzYgMTIuODk1NCA2Ljg5NTQzIDEyIDggMTJIMTJNMTIgMTJWNy41TTEyIDEySDE2QzE3LjEwNDYgMTIgMTggMTIuODk1NCAxOCAxNFYxNS41TTcuNSA4SDE2LjVDMTcuODgwNyA4IDE5IDYuODgwNzEgMTkgNS41VjQuNUMxOSAzLjExOTI5IDE3Ljg4MDcgMiAxNi41IDJINy41QzYuMTE5MjkgMiA1IDMuMTE5MjkgNSA0LjVWNS41QzUgNi44ODA3MSA2LjExOTI5IDggNy41IDhaTTQuNSAyMkg3LjVDOC44ODA3MSAyMiAxMCAyMC44ODA3IDEwIDE5LjVWMTcuNUMxMCAxNi4xMTkzIDguODgwNzEgMTUgNy41IDE1SDQuNUMzLjExOTI5IDE1IDIgMTYuMTE5MyAyIDE3LjVWMTkuNUMyIDIwLjg4MDcgMy4xMTkyOSAyMiA0LjUgMjJaTTE2LjUgMjJIMTkuNUMyMC44ODA3IDIyIDIyIDIwLjg4MDcgMjIgMTkuNVYxNy41QzIyIDE2LjExOTMgMjAuODgwNyAxNSAxOS41IDE1SDE2LjVDMTUuMTE5MyAxNSAxNCAxNi4xMTkzIDE0IDE3LjVWMTkuNUMxNCAyMC44ODA3IDE1LjExOTMgMjIgMTYuNSAyMloiIHN0cm9rZT0iYmxhY2siLz48L3N2Zz4=";

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

@@ -23,7 +23,8 @@ export const styles = css`
   }
   
   .search__wrapper {
-    padding: 12px 9px;
+    box-sizing:border-box;
+    padding: 12px 6px;
   }
 
   ::slotted(nile-divider) {

package/src/nile-menu/nile-menu.ts

@@ -185,16 +185,16 @@ export class NileMenu extends NileElement {
     return html`
       <div>
         ${this.searchEnabled
-          ? html`<div class="search__wrapper">
+          ? html`<div class="search__wrapper" part="search__wrapper">
               <nile-input
                 size="medium"
-                clearable
                 style=${this.searchWidth
                   ? `width: ${this.searchWidth}px;`
                   : 'width: 100%;'}
                 .value=${this.searchValue}
                 placeholder="Search..."
                 @nile-input=${this.handleSearchChange}
+                part="menu__input"
               >
                 <nile-icon name="search" slot="suffix"> </nile-icon>
               </nile-input>

package/src/nile-menu-item/nile-menu-item.css.ts

@@ -59,9 +59,8 @@ export const styles = css`
 
   .menu-item .menu-item__label {
     flex: 1 1 auto;
-    display: flex;
-    align-items:center;
-    justify-content:center;
+    margin: auto 0;
+    display: inline-flex;
   }
 
   .menu-item .menu-item__prefix {

package/src/nile-tab-group/nile-tab-group.ts

@@ -313,8 +313,8 @@ export class NileTabGroup extends NileElement {
     const precedingTabs = allTabs.slice(0, allTabs.indexOf(currentTab));
     const offset = precedingTabs.reduce(
       (previous, current) => ({
-        left: previous.left + current.clientWidth + 10,
-        top: previous.top + current.clientHeight + 10
+        left: previous.left + current.clientWidth + 12,
+        top: previous.top + current.clientHeight + 12
       }),
       { left: 0, top: 0 }
     );
@@ -322,9 +322,9 @@ export class NileTabGroup extends NileElement {
     switch (this.placement) {
       case 'top':
       case 'bottom':
-        this.indicator.style.width = `${width}px`;
+        this.indicator.style.width = `${width - 5}px`;
         this.indicator.style.height = 'auto';
-        this.indicator.style.translate = `${offset.left}px`;
+        this.indicator.style.translate = `${offset.left + 2}px`;
         break;
 
       case 'start':