@aquera/nile-elements 0.1.49 → 0.1.50-beta-1.2

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

@@ -13,11 +13,15 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     --width: 31rem;
-    --header-spacing: 1.25rem;
-    --body-spacing: 1.25rem;
-    --footer-spacing: 1.25rem;
+    --header-spacing: var(--nile-spacing-small, var(--ng-spacing-3xl));
+    --body-spacing: var(--nile-spacing-small, var(--ng-spacing-3xl));
+    --footer-spacing: var(--nile-spacing-small, var(--ng-spacing-3xl));
     --nile-dialog-remove-icon-color: var(--nile-colors-dark-900);
+    --nile-border: 1px solid var(--nile-colors-neutral-400);
     display: contents;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   :host *,
@@ -49,9 +53,9 @@ export const styles = css`
     width: var(--width);
     max-width: calc(100% - 2.25rem);
     max-height: calc(100% - 2.25rem);
-    background-color: hsl(0, 0%, 100%);
-    border-radius: 4px;
-    box-shadow: 0 4px 16px rgb(0 0 0 / 24%);
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-2xl));
+    box-shadow: var(--nile-box-shadow-8, var(--ng-shadow-xl));
   }
 
   .dialog__panel:focus {
@@ -72,39 +76,39 @@ export const styles = css`
   .dialog__header {
     flex: 0 0 auto;
     display: flex;
-    padding: 12px 20px;
-    background-color: var(--nile-colors-neutral-100);
-    border-radius: 4px 4px 0 0;
-    border: 1px solid var(--nile-colors-neutral-400);
+    padding: var(--nile-spacing-lg, var(--ng-spacing-3xl)) var(--nile-spacing-2xl, var(--ng-spacing-3xl)) var(--nile-spacing-lg, var(--ng-spacing-none)) var(--nile-spacing-2xl, var(--ng-spacing-3xl)) ;
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-2xl)) var(--nile-radius-radius-xs, var(--ng-radius-2xl)) 0 0;
+    border: var(--nile-border, var(--ng-border-width-0));
   }
 
   .dialog__header__text {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
-    gap: 5px;
+    gap: var(--nile-spacing-5px, var(--ng-spacing-sm));
     justify-content: center;
-    margin: 0;
-    color: var(--nile-colors-dark-900);
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   slot[name="label"] {
-    font-family: Colfax-regular;
-    font-size: 16px;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-spacing-xl, var(--ng-font-size-text-md));
     font-style: normal;
-    font-weight: 500;
-    line-height: 16px;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
+    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));
     letter-spacing: 0.2px;
     display:block;
   }
 
   slot[name="sublabel"] {
-    color:var(--nile-colors-dark-500);
-    font-family: Colfax-regular;
-    font-size: 14px;
+    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: 400;
-    line-height: 14px;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
     letter-spacing: 0.2px;
     display:block;
   }
@@ -114,7 +118,7 @@ export const styles = css`
     display: flex;
     flex-wrap: wrap;
     justify-content: end;
-    gap: 24px;
+    gap: var(--nile-spacing-3-x, var(--ng-spacing-none));
   }
 
   .dialog__header-actions nile-icon-button,
@@ -122,29 +126,29 @@ export const styles = css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: 1rem;
+    font-size: var(--nile-type-scale-4);
   }
 
   .dialog__body {
     flex: 1 1 auto;
     display: block;
-    padding: 1.25rem;
+    padding: var(--nile-spacing-small, var(--ng-spacing-3xl));
     overflow: auto;
     -webkit-overflow-scrolling: touch;
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: var(--nile-border, var(--ng-border-width-0));
   }
 
   .dialog__body-noheader {
-    border-radius: 4px 4px 0px 0px;
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-2xl)) var(--nile-radius-radius-xs, var(--ng-radius-2xl)) var(--nile-radius-none, var(--ng-radius-2xl)) var(--nile-radius-none, var(--ng-radius-2xl));
   }
 
   .dialog__footer {
     flex: 0 0 auto;
     text-align: right;
-    padding: 12px 24px;
-    background-color: var(--nile-colors-neutral-100);
-    border-radius: 0 0 4px 4px;
-    border: 1px solid var(--nile-colors-neutral-400);
+    padding: var(--nile-spacing-lg, var(--ng-spacing-none)) var(--nile-spacing-3-x, var(--ng-spacing-3xl))  var(--nile-spacing-lg, var(--ng-spacing-3xl)) var(--nile-spacing-3-x, var(--ng-spacing-3xl));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
+    border-radius: 0 0 var(--nile-radius-radius-xs, var(--ng-radius-2xl)) var(--nile-radius-radius-xs, var(--ng-radius-2xl));
+    border: var(--nile-border, var(--ng-border-width-0));
   }
 
   .dialog__footer ::slotted(nile-button:not(:first-of-type)) {
@@ -161,7 +165,7 @@ export const styles = css`
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: hsl(0 0% 0% / 43%);
+    background-color: var(--nile-bg-color-dialog, var(--ng-componentcolors-alpha-black-70));
   }
   .dialog__close {
     cursor: pointer;

package/src/nile-dialog/nile-dialog.ts

@@ -321,7 +321,7 @@ export class NileDialog extends NileElement {
                       class="dialog__close"
                       name="close"
                       label="close"
-                      color="var(--nile-dialog-remove-icon-color)"
+                      color="var(--nile-dialog-remove-icon-color, var(--ng-colors-fg-quaternary-400))"
                       @click="${() => this.requestClose('close-button')}"
                     ></nile-icon>
                   </div>

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

@@ -14,29 +14,51 @@ export const styles = css`
 	:host {
 		display: block;
 		height: 100%;
+	-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
 	}
 
 	.divider {
-		background-color: var(--nile-colors-neutral-400);;
+		background-color: var(--nile-colors-neutral-400 , var(--ng-colors-border-secondary));
+		display: flex;
+    	align-items: center;
+    	justify-content: center;
 	}
 	
 	.horizontal {
-		height: 2px;
+		height: var(--nile-radius-radius-xxs , var(--ng-stroke-width-1));
 		/* width: 100%; */
 		margin: 8px 0;
 	}
 
 	.vertical {
 		height: 100%;
-		width: 2px;
+		width: var(--nile-radius-radius-xxs , var(--ng-stroke-width-1));
 		margin: 0 8px;
-		display: inline-block;
-		vertical-align: middle;
+		/* display: inline-block;
+		vertical-align: middle; */
 	}
 
 	.inset.horizontal {
 		margin-left: 72px;
 	}
+	.background-white{
+		background: var(--nile-colors-white-base , var(--ng-colors-fg-white));
+		font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+		font-size: var(--nile-type-scale-5 , var(--ng-font-size-text-lg));
+		font-weight: var(--nile-hero-text-font-weight , var(--ng-font-weight-semibold)) ;
+		max-width: var(--nile-sizes-width-xxs , var(--ng-spacing-80));
+		text-overflow: ellipsis;
+	}
+	.horizontal-content-padding{
+		padding: var(--nile-spacing-spacing-none , var(--ng-spacing-none)) var(--nile-type-scale-2 , var(--ng-spacing-md));
+		overflow: auto;
+	}
+	.vertical-content-padding{
+		padding: var(--nile-type-scale-2 , var(--ng-spacing-md)) var(--nile-spacing-spacing-none , var(--ng-spacing-none))
+	}
+
 `;
 
 export default [styles];

package/src/nile-divider/nile-divider.ts

@@ -29,6 +29,7 @@ export class NileDivider extends NileElement {
 	}
 	@property({ type: Boolean, reflect:true }) inset = false;
 	@property({ type: Boolean, reflect:true }) vertical = false;
+	@property({ reflect: true }) label = '';
 
 	/* #endregion */
 
@@ -40,8 +41,9 @@ export class NileDivider extends NileElement {
 	 */
 	public render(): TemplateResult {
 		return html`
-			<div part="divider" class="divider ${this.vertical ? 'vertical' : 'horizontal'} ${this.inset ? 'inset' : ''}"></div>
-			`;
+		<div part="divider" class="divider ${this.vertical ? 'vertical' : 'horizontal'} ${this.inset ? 'inset' : ''}">
+			<span part="dividier-label" class="background-white ${this.vertical ? 'vertical-content-padding' : 'horizontal-content-padding'}">${this.label}</span>
+		</div>`;
 	}
 
 	/* #endregion */

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

@@ -13,7 +13,10 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     box-sizing: border-box;
-    --nile-drawer-remove-icon-color:var(--nile-colors-dark-900);
+    --nile-drawer-remove-icon-color:var(--nile-colors-dark-900, var(--ng-componentcolors-alpha-black-100));
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   :host *,
@@ -28,9 +31,9 @@ export const styles = css`
 
   :host {
     --size: 25rem;
-    --header-spacing: 1.25rem;
-    --body-spacing: 1.25rem;
-    --footer-spacing: 1.25rem;
+    --header-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));
+    --body-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));
+    --footer-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));
 
     display: contents;
   }
@@ -61,8 +64,8 @@ export const styles = css`
     z-index: 2;
     max-width: 100%;
     max-height: 100%;
-    background-color: hsl(0, 0%, 100%);
-    box-shadow: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    box-shadow: var(--nile-box-shadow-2,  0px 20px 24px -4px var(--ng-colors-effects-shadow-xl-01), 0px 8px 8px -4px var(--ng-colors-effects-shadow-xl-02), 0px 3px 3px -1.5px var(--ng-colors-effects-shadow-xl-03));
     overflow: auto;
     pointer-events: all;
   }
@@ -113,8 +116,9 @@ export const styles = css`
 
   .drawer__title {
     flex: 1 1 auto;
-    font: inherit;
-    font-size: 1.25rem;
+    font-family: var(--nile-font-family-body, var(--ng-font-family-body));
+    font-size: var(--nile-font-size-rem-small, var(--ng-font-size-text-lg));
+    font-weight: inherit;
     line-height: 1.4;
     padding: var(--header-spacing);
     margin: 0;
@@ -134,7 +138,7 @@ export const styles = css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: 1rem;
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
   }
 
   .drawer__body {
@@ -147,7 +151,7 @@ export const styles = css`
 
   .drawer__footer {
     text-align: right;
-    padding: var(--footer-spacing);
+    padding: var(--footer-spacing, var(--ng-spacing-xl)) var(--footer-spacing, var(--ng-spacing-3xl)) var(--footer-spacing, var(--ng-spacing-xl)) var(--footer-spacing, var(--ng-spacing-3xl));
   }
 
   .drawer__footer ::slotted(nile-button:not(:last-of-type)) {
@@ -179,7 +183,7 @@ export const styles = css`
 
   @media (forced-colors: active) {
     .drawer__panel {
-      border: solid 1px hsl(0, 0%, 100%);
+      border: solid 1px var(--nile-colors-white-base, var(--ng-colors-border-tertiary));
     }
   }
 `;

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

@@ -13,6 +13,9 @@ import {css} from 'lit';
 export const styles = css`
 :host {
     display: inline-block;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .dropdown::part(popup) {
@@ -40,10 +43,10 @@ export const styles = css`
   }
 
   .dropdown__panel {
-    font-size: 1rem;
-    font-weight: 400;
-    box-shadow: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
-    border-radius: 0.25rem;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
+    box-shadow: var(--nile-box-shadow-9, var(--ng-shadow-lg));
+    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
     pointer-events: none;
   }
 

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

@@ -13,57 +13,58 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     display:inline-flex;
-    min-width:var(--nile-empty-state-max-width);
-    max-width:var(--nile-empty-state-min-width);
     width:100%;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .empty-state--sm {
-    --nile-es-text-size:16px;
-    --nile-es-text-line-height:24px;
-    --nile-es-subtext-size:14px;
+    --nile-es-text-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    --nile-es-text-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
+    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     --nile-es-subtext-line-height:20px;
     
-    --nile-es-icon-size:48px;
-    --nile-es-flat-option-border-radius:5px;
+    --nile-es-icon-size:var(--nile-height-48px, var(--ng-height-48px));
+    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));
     --nile-es-img-height:118px;
     --nile-es-img-width:152px;
 
-    --nile-es-gap:var(--nile-spacing-spacing-3xl);
-    --nile-es-body-gap:var(--nile-spacing-spacing-xl);
-    --nile-es-text-gap:0px;
+    --nile-es-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));
+    --nile-es-body-gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));
+    --nile-es-text-gap:var(--nile-spacing-none, var(--ng-spacing-xs));
   }
 
   .empty-state--md {
-    --nile-es-text-size:18px;
-    --nile-es-text-line-height:28px;
-    --nile-es-subtext-size:14px;
-    --nile-es-subtext-line-height:20px;
+    --nile-es-text-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));
+    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-lg));
+    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    --nile-es-subtext-line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
 
-    --nile-es-icon-size:48px;
-    --nile-es-flat-option-border-radius:5px;
+    --nile-es-icon-size: var(--nile-spacing-5-x, var(--ng-height-48px));
+    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));
     --nile-es-img-height:128px;
     --nile-es-img-width:172px;
 
-    --nile-es-gap:var(--nile-spacing-spacing-4xl);
-    --nile-es-body-gap:var(--nile-spacing-spacing-2xl);
-    --nile-es-text-gap:var(--nile-spacing-spacing-md);
+    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));
+    --nile-es-body-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));
+    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));
   }
 
   .empty-state--lg {
-    --nile-es-text-size:20px;
-    --nile-es-text-line-height:30px;
-    --nile-es-subtext-size:16px;
-    --nile-es-subtext-line-height:24px;
+    --nile-es-text-size: var(--nile-spacing-2xl, var(--ng-font-size-text-xl));
+    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-xl));
+    --nile-es-subtext-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    --nile-es-subtext-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
 
-    --nile-es-icon-size:56px;
-    --nile-es-flat-option-border-radius:10px;
+    --nile-es-icon-size:var(--nile-height-60px, var(--ng-height-60px));
+    --nile-es-flat-option-border-radius: var(--nile-border-size-10, var(--ng-radius-lg));
     --nile-es-img-height:160px;
     --nile-es-img-width:220px;
 
-    --nile-es-gap:var(--nile-spacing-spacing-4xl);
-    --nile-es-body-gap:var(--nile-spacing-spacing-3xl);
-    --nile-es-text-gap:var(--nile-spacing-spacing-md)
+    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));
+    --nile-es-body-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-2xl));
+    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));
   }
 
   .empty-state {
@@ -87,47 +88,23 @@ export const styles = css`
   .empty-state__body--content {
     position:relative;
   }
-  .empty-state__image {    
-    background:var(--nile-empty-state-image);
-    background-size: var(--nile-es-img-width) var(--nile-es-img-height);
-    height: var(--nile-es-img-height);
-    width: var(--nile-es-img-width);
-    max-width: 100%;
-  }
-
-  .empty-state__image--grayscale {
-    -webkit-filter: grayscale(100%);
-    -moz-filter: grayscale(100%);
-    -o-filter: grayscale(100%);
-    -ms-filter: grayscale(100%);
-    filter: grayscale(100%);
-  }
 
   .empty-state__img__icon {
-    height: var(--nile-es-icon-size);
-    aspect-ratio:1 / 1;
-    border-radius: 50%;
-    display: grid;
-    place-items: center;
-    background: var(--nile-colors-neutral-500);
-    position:absolute;
-    left: calc(50% - calc(var(--nile-es-icon-size) / 2));
-    top:calc(62.5% - calc(var(--nile-es-icon-size) / 2));
+    display: var(--ng-display-flex);
+    justify-content: center;
+    align-items: center;
   }
 
   .empty-state__body--tonal {
-    background: linear-gradient(180deg, var(--nile-colors-neutral-100) 0%, var(--nile-colors-neutral-400) 100%);
+    background:  var(--nile-gradient-1, var(--ng-white-gradient-6));
     width: 104px;
     height: 104px;
-    border-radius: 50%;
+    border-radius: var(--nile-radius-full, var(--ng-radius-full));
     display:flex;
     justify-content:center;
     align-items:center;
   }
 
-  .empty-state__body--flat {
-  }
-
   .nile-flat-type-icon {
     height:var(--nile-es-icon-size);
     aspect-ratio:1 / 1;
@@ -136,7 +113,7 @@ export const styles = css`
     background-color: white;
     display: grid;
     place-items: center;
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .empty__state__text-section {
@@ -148,7 +125,8 @@ export const styles = css`
 
   .empty-state__text {
     font-size: var(--nile-es-text-size);
-    font-weight: 600;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
     line-height: var(--nile-es-text-line-height);
     text-align: center;
     font-style: normal;
@@ -156,10 +134,11 @@ export const styles = css`
 
   .empty-state__subtext {
     font-size: var(--nile-es-subtext-size);
-    font-weight: 400;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     line-height: var(--nile-es-subtext-line-height);
     text-align: center;
-    color:var(--nile-colors-dark-500);
+    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
     font-style: normal;
   }
 
@@ -169,4 +148,4 @@ export const styles = css`
   }
 `;
 
-export default [styles];
+export default [styles];

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

@@ -10,7 +10,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './nile-empty-state.css';
 import NileElement from '../internal/nile-element';
-
+import { ifDefined } from 'lit/directives/if-defined.js';
 /**
  * Nile empty-state component.
  *
@@ -28,7 +28,7 @@ export class NileEmptyState extends NileElement {
     return [styles];
   }
 
-  @property() size: 'sm' | 'md' | 'lg' = 'md';
+  @property() size: 'sm' | 'md' | 'lg'  = 'md';
 
   @property() variant:
     | 'flat'
@@ -40,7 +40,9 @@ export class NileEmptyState extends NileElement {
 
   @property() text: String = 'Empty State';
   @property({attribute:'sub-text'}) subText: String = 'No Data';
-
+  @property() svgIconUrl: string;
+  @property({type: Number}) svgIconSize: number = 40;
+  @property({type: String}) svgIconColor: string;
 
   /* #endregion */
 
@@ -62,11 +64,14 @@ export class NileEmptyState extends NileElement {
 
         ${this.variant == 'content' ? html`
         <div class="empty-state__body--content">
-          
-          <div src="" class="${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale':this.grayscale  })}"></div>
-          ${!this.icon ? nothing : html`
+          ${!this.icon && !this.svgIconUrl ? nothing : html`
           <div class="empty-state__img__icon">
-            <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
+            ${this.svgIconUrl ? html`
+              <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
+              <!-- <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${this.svgIconColor ? this.svgIconColor : '#ddd'}"></nile-icon> -->
+            ` : html`
+              <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
+            `}
           </div>`
           }
         </div>`: nothing
@@ -74,14 +79,22 @@ export class NileEmptyState extends NileElement {
 				
 			  ${this.variant == 'tonal' ? html`
 				<div class="empty-state__body--tonal">
-					<nile-icon name="${this.icon}" size="40"></nile-icon>
+					${this.svgIconUrl ? html`
+            <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
+          ` : html`
+            <nile-icon name="${this.icon}" size="40"></nile-icon>
+          `}
 				</div>`: nothing
         }
 
 			  ${this.variant == 'flat' ? html`
 				<div class="empty-state__body--flat">
 					<span class="nile-flat-type-icon">
-						<nile-icon name="${this.icon}" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
+						${this.svgIconUrl ? html`
+              <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" variant="secondary" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
+            ` : html`
+              <nile-icon name="${this.icon}" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
+            `}
 					</span>
 				</div>`: nothing
         }