@aquera/nile-elements 1.0.1-beta-1.9 → 1.1.0-beta-1.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.0.1-beta-1.9",
+  "version": "1.1.0-beta-1.0",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -37,7 +37,6 @@
     "./nile-textarea": "./dist/src/nile-textarea/index.js",
     "./nile-date-picker": "./dist/src/nile-date-picker/index.js",
     "./nile-error-message": "./dist/src/nile-error-message/index.js",
-    "./nile-filter-chip": "./dist/src/nile-filter-chip/index.js",
     "./nile-form-error-message": "./dist/src/nile-form-error-message/index.js",
     "./nile-form-help-text": "./dist/src/nile-form-help-text/index.js",
     "./nile-calendar": "./dist/src/nile-calendar/index.js",
@@ -85,10 +84,10 @@
     "./nile-section-message": "./dist/src/nile-section-message/index.js",
     "./nile-toolbar": "./dist/src/nile-toolbar/index.js",
     "./nile-inline-edit": "./dist/src/nile-inline-edit/index.js",
+    "./nile-tour": "./dist/src/nile-tour/index.js",
     "./nile-table": "./dist/src/nile-table/index.js",
     "./nile-pagination": "./dist/src/nile-pagination/index.js",
-    "./nile-slider": "./dist/src/nile-slider/index.js",
-    "./nile-option-group": "./dist/src/nile-option-group/index.js"
+    "./nile-slider": "./dist/src/nile-slider/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -107,22 +106,23 @@
     "postinstall": "node postinstall.js"
   },
   "dependencies": {
-    "@open-wc/form-control": "^0.5.0",
-    "@open-wc/form-helpers": "^0.2.1",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-commonjs": "^25.0.3",
-    "element-internals-polyfill": "^1.1.20",
-    "lit": "^3.0.0",
-    "@floating-ui/dom": "^1.2.1",
-    "composed-offset-position": "^0.0.4",
+    "@aquera/nile": "latest",
+    "@codemirror/lang-html": "6.4.9",
     "@codemirror/lang-javascript": "6.2.1",
-    "@codemirror/lang-sql": "6.7.0",
     "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-html": "6.4.9",
+    "@codemirror/lang-sql": "6.7.0",
+    "@floating-ui/dom": "^1.2.1",
     "@lit-labs/virtualizer": "^2.0.15",
-    "codemirror": "6.0.1",
+    "@open-wc/form-control": "^0.5.0",
+    "@open-wc/form-helpers": "^0.2.1",
+    "@rollup/plugin-commonjs": "^25.0.3",
+    "@rollup/plugin-node-resolve": "^15.0.1",
     "chalk": "5.3.0",
-    "figlet": "1.7.0"
+    "codemirror": "6.0.1",
+    "composed-offset-position": "^0.0.4",
+    "element-internals-polyfill": "^1.1.20",
+    "figlet": "1.7.0",
+    "lit": "^3.0.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
@@ -137,6 +137,7 @@
     "@web/dev-server": "^0.1.34",
     "@web/dev-server-storybook": "^0.5.4",
     "@web/test-runner": "^0.14.0",
+    "@web/test-runner-puppeteer": "0.16.0",
     "concurrently": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
@@ -151,10 +152,9 @@
     "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-summary": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "tslib": "^2.3.1",
+    "tslib": "^2.8.1",
     "typescript": "^5.6.2",
-    "x": "^0.1.2",
-    "@web/test-runner-puppeteer": "0.16.0"
+    "x": "^0.1.2"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {

package/rollup.config.js

@@ -15,9 +15,6 @@ const { LERNA_PACKAGE_NAME } = process.env;
 const PACKAGE_ROOT_PATH = process.cwd();
 
 export default [
-  // ------------------------------------------------------------------------
-  // 1) Monorepo build: glob all .ts under /src → per-file ESM + legacy SystemJS
-  // ------------------------------------------------------------------------
   {
     input: Object.fromEntries(
       glob.sync('src/**/*.ts').map(file => [
@@ -30,7 +27,7 @@ export default [
     external: ['tslib', 'lit', /^lit\/.*/],
     output: [
       {
-        // Modern (ESM) build
+        // Modern JS bundles (no JS compilation, ES module output)
         format: 'es',
         chunkFileNames: '[name]-[hash].esm.js',
         entryFileNames: '[name].esm.js',
@@ -38,7 +35,7 @@ export default [
         sourcemap: false,
       },
       {
-        // Legacy (SystemJS) build
+        // Legacy JS bundles (ES5 compilation and SystemJS module output)
         format: 'esm',
         chunkFileNames: '[name]-[hash].cjs.js',
         entryFileNames: '[name].cjs.js',
@@ -88,10 +85,6 @@ export default [
       summary(),
     ],
   },
-
-  // ------------------------------------------------------------------------
-  // 2) Simple single-entry build: src/index.ts → dist/*.js + types
-  // ------------------------------------------------------------------------
   {
     input: 'src/index.ts',
    output: {
@@ -113,4 +106,4 @@ export default [
       terser(),
     ],
   },
-];
+];

package/src/index.ts

@@ -82,4 +82,4 @@ export {NilePagination } from './nile-pagination';
 export { NileSlider } from './nile-slider';
 export { NileFileUpload } from './nile-file-upload';
 export { NileFilePreview } from './nile-file-preview';
-export { NileOptionGroup } from './nile-option-group';
+export { NileRichTextEditor } from './nile-rich-text-editor';

package/src/internal/resizable-table-helper.ts

@@ -103,23 +103,6 @@ export function synchronizeColumnWidth(sourceElement: HTMLElement, newWidth: num
   });
 }
 
-/**
- * Resets all column widths in a table to their default values
- * @param tableBody The table body element to reset
- */
-export function resetAllColumnWidths(tableBody: HTMLElement): void {
-  const headerItems = tableBody.querySelectorAll('nile-table-header-item');
-  const cellItems = tableBody.querySelectorAll('nile-table-cell-item');
-  
-  headerItems.forEach(header => {
-    header.style.removeProperty('width');
-  });
-  
-  cellItems.forEach(cell => {
-    cell.style.removeProperty('width');
-  });
-}
-
 /**
  * Checks if an element has the resizable attribute
  * @param element The element to check
@@ -154,21 +137,15 @@ export function createResizeHandler(element: HTMLElement, minWidth: number = 50)
  * @returns True if any columns have resizable attribute
  */
 export function hasResizableColumns(tableBody: HTMLElement): boolean {
-  const directChildren = Array.from(tableBody.children);
-  
-  const hasResizableHeaders = directChildren.some(child => {
-    if (child.tagName.toLowerCase() === 'nile-table-header-item') {
-      return child.hasAttribute('resizable');
-    }
-    return false;
-  });
+  const headerItems = tableBody.querySelectorAll('nile-table-header-item');
+  const cellItems = tableBody.querySelectorAll('nile-table-cell-item');
   
-  const hasResizableCells = directChildren.some(child => {
-    if (child.tagName.toLowerCase() === 'nile-table-cell-item') {
-      return child.hasAttribute('resizable');
-    }
-    return false;
-  });
+  const hasResizableHeaders = Array.from(headerItems).some(item => 
+    isResizable(item)
+  );
+  const hasResizableCells = Array.from(cellItems).some(item => 
+    isResizable(item)
+  );
   
   return hasResizableHeaders || hasResizableCells;
 } 

package/src/internal/resizable-table-styles.ts

@@ -26,7 +26,7 @@ export const resizableHeaderStyles = css`
   }
 
   :host([resizable]) .header__item__wrapper {
-    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-right: 1px solid var(--nile-colors-neutral-400);
     position: relative;
   }
 `;
@@ -40,7 +40,7 @@ export const resizerStyles = css`
     width: 8px;
     cursor: col-resize;
     user-select: none;
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100);
     transition: background-color 0.2s;
     z-index: 10;
     opacity: 0;
@@ -60,27 +60,27 @@ export const resizerStyles = css`
     top: 0;
     width: 2px;
     height: 100%;
-    background-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+    background-color: var(--nile-colors-neutral-500);
     opacity: 0.8;
   }
 
   .resizer:hover {
-    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    background-color: var(--nile-colors-neutral-400);
   }
 
   .resizer:hover::before {
-    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));
+    background-color: var(--nile-colors-neutral-700);
     opacity: 1;
   }
 
   .resizer.resizing {
-    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    background-color: var(--nile-colors-neutral-400);
     opacity: 1;
     pointer-events: auto;
   }
 
   .resizer.resizing::before {
-    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));
+    background-color: var(--nile-colors-neutral-700);
     opacity: 1;
     width: 3px;
   }
@@ -120,7 +120,7 @@ export const headerResizerStyles = css`
   }
 
   .resizer.resizing {
-    border-right: 4px double var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-right: 4px double var(--nile-colors-neutral-400);
     background-color: transparent;
     opacity: 1;
   }

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

@@ -14,9 +14,6 @@ export const styles = css`
 
   :host {
     box-sizing: border-box;
-    -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 *,
@@ -34,36 +31,31 @@ export const styles = css`
   }
 
   .accordian {
-    border-top:solid 1px var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));
-    background-color: var(--nile-colors-white-base , var(--ng-colors-bg-primary));
+    border-top:solid 1px var(--nile-colors-neutral-500);
+    background-color: var(--nile-colors-white-base);
     overflow-anchor: none;
-    line-height: var(--nile-line-height-inherit , var(--ng-line-height-text-sm));
   }
 
   .accordian--lg{
-    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
-    --accordian-heading-padding: var(--nile-spacing-xl , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg));
-    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-xl , var(--ng-spacing-3xl));
-    --accordion-font-family : var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    --accordian-text-size:var(--sm-tesx, 14px);
+    --accordian-heading-padding: 16px 12px;
+    --accordian-content-padding: 6px 12px 18px;
   }
 
   .accordian--md{
-    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
-    --accordian-heading-padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-lg , var(--ng-spacing-lg));
-    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-type-scale-5 , var(--ng-spacing-3xl));
-    --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    --accordian-text-size:var(--sm-tesx, 14px);
+    --accordian-heading-padding: 12px 12px;
+    --accordian-content-padding: 6px 12px 18px;
   }
 
   .accordian--sm{
-    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
-    --accordian-heading-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg));
-    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg));
-    --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    --accordian-text-size:var(--sm-tesx, 12px);
+    --accordian-heading-padding: 6px 12px;
+    --accordian-content-padding: 6px 12px 12px;
   }
   
   .accordian {
     font-size: var(--accordian-text-size);
-    font-family: var(--accordion-font-family)
   }
 
   .accordian--disabled {
@@ -72,17 +64,17 @@ export const styles = css`
 
   .accordian__header {
     display: flex;
-    gap:var(--nile-spacing-lg , var(--ng-spacing-lg));
+    gap:12px;
     align-items: center;
     border-radius: inherit;
-    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-semibold));
+    font-weight:500;
     padding: var(--accordian-heading-padding);
     user-select: none;
     cursor: pointer;
   }
 
   .accordian__header--dark{
-    background-color:var(--nile-colors-dark-200 , var(--ng-colors-bg-tertiary));
+    background-color:var(--nile-colors-dark-200);
   }
 
   .accordian__header--arrow-left{
@@ -94,8 +86,7 @@ export const styles = css`
   }
 
   .accordian__header:focus-visible {
-    outline: solid 3px var(--nile-colors-blue-500);
-    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-shadow-xs));
+    outline: solid 3px hsl(200.4, 98%, 39.4%);
     outline-offset: calc(1px + 1px);
   }
 
@@ -140,7 +131,7 @@ export const styles = css`
   }
 
   .accordian__content--arrow-left{
-   margin-left: var(--nile-spacing-4-x , var(--ng-spacing-3xl-alt));  
+   margin-left:28px;
   }
 `;
 

package/src/nile-accordion/nile-accordion.ts

@@ -219,10 +219,10 @@ render() {
 
         <span part="summary-icon" class="accordian__summary-icon">
           <slot name="expand-icon">
-            <nile-icon name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>
+            <nile-icon name="arrowright"></nile-icon>
           </slot>
           <slot name="collapse-icon">
-            <nile-icon name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>
+            <nile-icon name="arrowright"></nile-icon>
           </slot>
         </span>
       </div>

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

@@ -14,9 +14,6 @@ export const styles = css`
   :host {
     --virtual-scroll-container-width:110px;
     --virtual-scroll-container-height:200px;
-    -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));
   }
 
   .nile-dropdown--input {

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

@@ -36,10 +36,6 @@ export class NileAutoComplete extends NileElement {
   @property({ type: String }) placeholder: string = 'Type here ..';
 
   @property({ type: Boolean }) noBorder: boolean = false;
-  
-  @property({ type: Boolean }) noOutline: boolean = false;
-
-  @property({ type: Boolean }) noPadding: boolean = false;
 
   @property({ type: Boolean }) loading: boolean = false;
 
@@ -71,11 +67,9 @@ export class NileAutoComplete extends NileElement {
   public render(): TemplateResult {
     const content=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();
     return html`
-      <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick exportparts="input">
+      <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick>
         <nile-input class="nile-auto-complete--input"
           ?no-border=${this.noBorder}
-          ?no-outline=${this.noOutline}
-          ?no-padding=${this.noPadding}
           .disabled=${this.disabled}
           .value=${this.value}
           @nile-input=${this.handleSearch}
@@ -83,9 +77,8 @@ export class NileAutoComplete extends NileElement {
           @click=${this.handleClick}
           slot="trigger"
           placeholder=${this.placeholder}
-          exportparts="input"
         >
-          ${this.loading?html`<nile-icon slot="suffix" color="var(--nile-colors-primary-600)" name="var(--nile-icon-button-loading-blue-animated, var(--ng-icon-button-loading-blue-animated))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>`:nothing}
+          ${this.loading?html`<nile-icon slot="suffix" color="var(--nile-colors-primary-600)" name="button-loading-blue-animated"></nile-icon>`:nothing}
         </nile-input>
         ${this.menuItems.length > 0 && !this.loading
           ? content
@@ -183,4 +176,4 @@ declare global {
   interface HTMLElementTagNameMap {
     'nile-auto-complete': NileAutoComplete;
   }
-}
+}

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

@@ -12,19 +12,15 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    -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));
   }
 
   .text__avatar {
     box-sizing: border-box;
-    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));
+    font-family: var(--nile-font-family-serif);
     font-style: normal;
-    aspect-ratio: 1 / 1;
-    font-weight: var(--nile-font-weight-semi-bold , var(--ng-font-weight-semibold));
-    color: var(--nile-colors-white-base , var(--ng-colors-text-quaternary-500));
-    border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));
+    font-weight: 600;
+    color: var(--nile-colors-white-base);
+    border-radius: 4px;
     text-transform: uppercase;
     display: flex;
     flex-direction: column;
@@ -35,54 +31,47 @@ export const styles = css`
 
   .avatar {
     box-sizing: border-box;
-    border: 0.5px solid var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary));
-    border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));
+    border: 0.5px solid var(--nile-colors-neutral-500);
+    border-radius: 4px;
     background-position: 50% 50%;
     background-size: cover;
     background-repeat: no-repeat;
     overflow: hidden;
   }
 
-  .avatar__xs {
-    width: var(--nile-type-scale-4, var(--ng-height-24px));
-    height: var(--nile-type-scale-4), var(--ng-height-24px);
-    font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-xs));
-    line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-xs));
-  }
-  
   .avatar__small {
-    width: var(--nile-type-scale-4, var(--ng-height-32px));
-    height: var(--nile-type-scale-4, var(--ng-height-32px));
-    font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-sm));
-    line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-sm));
+    width: var(--nile-type-scale-4);
+    height: var(--nile-type-scale-4);
+    font-size: 6.516px;
+    line-height: 6.516px;
   }
 
   .avatar__medium {
-    width: var(--nile-spacing-3-x, var(--ng-height-40px));
-    height: var(--nile-spacing-3-x, var(--ng-height-40px));
-    font-size: var(--nile-spacing-2-x, var(--ng-font-size-text-md));
-    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-md));
+    width: var(--nile-spacing-3-x);
+    height: var(--nile-spacing-3-x);
+    font-size: 12px;
+    line-height: 18px;
   }
 
   .avatar__large {
-    width: var(--nile-spacing-4xl, var(--ng-height-48px));
-    height: var(--nile-spacing-4xl, var(--ng-height-48px));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-lg));
-    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-lg));
+    width: 32px;
+    height: 32px;
+    font-size: 14px;
+    line-height: 20px;
   }
 
   .avatar__extralarge {
-    height: var(--nile-spacing-5xl, 56px);
-    width: var(--nile-spacing-5xl, 56px);
-    font-size: var(--nile-spacing-xl, var(--ng-font-size-text-xl));
-    line-height: var(--nile-spacing-3xl , var(--ng-line-height-text-xl));
+    height: 40px;
+    width: 40px;
+    font-size: 16px;
+    line-height: 24px;
   }
 
   .avatar__2xl {
-    height: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));
-    width: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));
-    font-size: var(--nile-spacing-3xl, var(--ng-line-height-display-xs));
-    line-height: var(--nile-spacing-4xl, var(--ng-line-height-display-xs));
+    height: 64px;
+    width: 64px;
+    font-size: 24px;
+    line-height: 32px;
   }
 
   .avatar__rounded {
@@ -90,23 +79,23 @@ export const styles = css`
   }
 
   .variant__orange {
-    background:var(--nile-avatar-background-color-orange , var(--ng-colors-bg-tertiary));
+    background:var(--nile-avatar-background-color-orange);
   }
 
   .variant__pink {
-    background: var(--nile-avatar-background-color-pink, var(--ng-colors-bg-tertiary));
+    background: var(--nile-avatar-background-color-pink);
   }
 
   .variant__blue {
-    background: var(--nile-avatar-background-color-blue, var(--ng-colors-bg-tertiary));
+    background: var(--nile-avatar-background-color-blue);
   }
 
   .variant__light_blue {
-    background: var(--nile-avatar-background-color-lightblue , var(--ng-colors-bg-tertiary));
+    background: var(--nile-avatar-background-color-lightblue);
   }
 
   .variant__green {
-    background: var(--nile-avatar-background-color-green, var(--ng-colors-bg-tertiary));
+    background: var(--nile-avatar-background-color-green);
   }
 `;
 

package/src/nile-avatar/nile-avatar.ts

@@ -41,7 +41,7 @@ export class NileAvatar extends NileElement {
   @property({ type: String, reflect: true }) variant:'icon' | 'image' | 'text' = 'text';
 
   /** Gives the icon to the Avatar */
-  @property({ type: String, reflect: true }) icon = 'var(--nile-icon-user, var(--ng-icon-user-01))';
+  @property({ type: String, reflect: true }) icon = 'user';
 
   /** Gives the default Image Letters to the Avatar */
   @property({ type: String, reflect: true }) name: String = '';
@@ -50,13 +50,13 @@ export class NileAvatar extends NileElement {
   @property({ type: String, reflect: true, attribute: 'bg-color' }) bgColor = '';
 
   /** Gives the default text color  to the Avatar */
-  @property({ type: String, reflect: true, attribute: 'text-color' }) textColor = '';
+  @property({ type: String, reflect: true, attribute: 'text-color' }) textColor = '#fff';
 
   /** Gives the default border color  to the Avatar */
   @property({ type: String, reflect: true, attribute: 'border-color' }) borderColor = '';
 
   /** Size of the Avatar */
-  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';
+  @property({ reflect: true }) size: | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';
 
   /** Gives a border radius of 50% to the Avatar */
   @property({ type: Boolean, reflect: true }) isRounded = true;
@@ -88,8 +88,6 @@ export class NileAvatar extends NileElement {
 
   private getDefaultIconSize() {
     switch (this.size) {
-      case 'xs':
-        return '6';
       case 'sm':
         return '10';
       case 'md':
@@ -126,7 +124,6 @@ export class NileAvatar extends NileElement {
     <div
       class=${classMap({
         text__avatar: true,
-        avatar__xs: this.size === 'xs',
         avatar__small: this.size === 'sm',
         avatar__medium: this.size === 'md',
         avatar__large: this.size === 'lg',
@@ -142,9 +139,9 @@ export class NileAvatar extends NileElement {
       part="avatar__content"
       style="
         background-color: ${this.bgColor};
-        color:${this.textColor?this.textColor:"var(--nile-colors-white-base, var(--ng-colors-text-quaternary-500))"};
-        border: 1px solid ${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'};
-        border-color:${defaultInitials ? `${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}` : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}"
+        color:${this.textColor};
+        border: 1px solid ${this.borderColor};
+        border-color:${defaultInitials ? `${this.borderColor}` : 'var(--nile-colors-neutral-500)'}"
     >
       ${content}
     </div>`
@@ -154,8 +151,7 @@ export class NileAvatar extends NileElement {
     return html`
     <nile-icon
       name="${this.icon}"
-      method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-      color="${this.textColor?this.textColor:'var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500))'}"
+      color="${this.textColor && "#fff"!==this.textColor?this.textColor:'var(--nile-colors-dark-500)'}"
       size="${this.getDefaultIconSize()}"
     ></nile-icon>`
   }
@@ -167,7 +163,6 @@ export class NileAvatar extends NileElement {
       class="avatar"
       class=${classMap({
         avatar: true,
-        avatar__xs: this.size === 'xs',
         avatar__small: this.size === 'sm',
         avatar__medium: this.size === 'md',
         avatar__large: this.size === 'lg',