@aquera/nile-elements 0.1.8 → 0.1.10

package/package.json

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

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

@@ -2,8 +2,6 @@ import { fixture, html, expect, oneEvent, elementUpdated } from '@open-wc/testin
 import './nile-accordion';
 import { NileAccordion } from './nile-accordion';
 import Sinon from 'sinon';
-const wait=(ms:number=50000)=>new Promise(resolve => setTimeout(resolve, ms))
-
 
 describe('NileAccordion', () => {
   it('should render correctly', async () => {
@@ -16,132 +14,107 @@ describe('NileAccordion', () => {
   it('should initialize closed by default', async () => {
     const el = await fixture<NileAccordion>(html`<nile-accordion summary="Test Summary"></nile-accordion>`);
     expect(el.open).to.be.false;
-    const body = el.shadowRoot?.querySelector<any>('.details__body');
+    const body = el.shadowRoot?.querySelector<HTMLElement>('.accordian__body');
     expect(body?.hidden).to.be.true;
   });
 
   it('should open when clicked', async () => {
     const el = await fixture<NileAccordion>(html`<nile-accordion summary="Test Summary"></nile-accordion>`);
-    
-    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;
+    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;
     header.click();
-    
     await elementUpdated(el);
-    
     expect(el.open).to.be.true;
-    const body = el.shadowRoot?.querySelector<any>('.details__body');
+    const body = el.shadowRoot?.querySelector<HTMLElement>('.accordian__body');
     expect(body?.hidden).to.be.false;
   });
 
   it('should emit "nile-show" and "nile-after-show" when opened', async () => {
     const el = await fixture<NileAccordion>(html`<nile-accordion summary="Test Summary"></nile-accordion>`);
-    
     const showSpy = Sinon.spy(el, 'emit');
-    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;
-		setTimeout(() => header.click());
-
-    // Wait for the "nile-show" and "nile-after-show" events to be emitted
+    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;
+    setTimeout(() => header.click());
     await oneEvent(el, 'nile-after-show');
-
     expect(showSpy.calledWith('nile-show')).to.be.true;
     expect(showSpy.calledWith('nile-after-show')).to.be.true;
   });
 
   it('should emit "nile-hide" and "nile-after-hide" when closed', async () => {
     const el = await fixture<NileAccordion>(html`<nile-accordion summary="Test Summary" open></nile-accordion>`);
-    
     const hideSpy = Sinon.spy(el, 'emit');
-    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;
-		setTimeout(() => header.click());
-
-    // Wait for the "nile-hide" and "nile-after-hide" events to be emitted
+    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;
+    setTimeout(() => header.click());
     await oneEvent(el, 'nile-after-hide');
-
     expect(hideSpy.calledWith('nile-hide')).to.be.true;
     expect(hideSpy.calledWith('nile-after-hide')).to.be.true;
   });
 
   it('should be disabled when the "disabled" property is set', async () => {
     const el = await fixture<NileAccordion>(html`<nile-accordion summary="Test Summary" disabled></nile-accordion>`);
-    
-    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;
+    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;
     header.click();
-
     await elementUpdated(el);
-    
     expect(el.open).to.be.false;
-    const body = el.shadowRoot?.querySelector<any>('.details__body');
-    expect(body?.hidden).to.be.true;
-  });
-
-  it('should open when pressing "Enter"', async () => {
-    const el = await fixture<NileAccordion>(html`<nile-accordion summary="Test Summary"></nile-accordion>`);
-    
-    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;
-
-    // Simulate pressing the "Enter" key
-    const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
-    header.dispatchEvent(enterEvent);
-
-    await elementUpdated(el);
-    expect(el.open).to.be.true;
   });
 
   it('should handle keyboard interaction (Enter and Space)', async () => {
     const el = await fixture<NileAccordion>(html`<nile-accordion summary="Test Summary"></nile-accordion>`);
-    
-    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;
+    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;
 
-    // Simulate pressing the "Enter" key
     const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
     header.dispatchEvent(enterEvent);
-
     await elementUpdated(el);
     expect(el.open).to.be.true;
 
-    // Simulate pressing the "Space" key
     const spaceEvent = new KeyboardEvent('keydown', { key: ' ' });
     header.dispatchEvent(spaceEvent);
-
     await elementUpdated(el);
     expect(el.open).to.be.false;
   });
 
   it('should handle ArrowUp/ArrowLeft to close and ArrowDown/ArrowRight to open', async () => {
     const el = await fixture<NileAccordion>(html`<nile-accordion summary="Test Summary"></nile-accordion>`);
-    
-    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;
+    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;
 
-    // Simulate pressing the "ArrowDown" key to open
     const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown' });
     header.dispatchEvent(arrowDownEvent);
-
     await elementUpdated(el);
     expect(el.open).to.be.true;
 
-    // Simulate pressing the "ArrowUp" key to close
     const arrowUpEvent = new KeyboardEvent('keydown', { key: 'ArrowUp' });
     header.dispatchEvent(arrowUpEvent);
-
     await elementUpdated(el);
     expect(el.open).to.be.false;
   });
 
+  it('should apply the "variant" class based on the variant property', async () => {
+    const el = await fixture<NileAccordion>(html`<nile-accordion summary="Test Summary" variant="dark"></nile-accordion>`);
+    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header');
+    expect(header).to.have.class('accordian__header--dark');
+  });
+
+  it('should apply the correct size class based on the size property', async () => {
+    const el = await fixture<NileAccordion>(html`<nile-accordion summary="Test Summary" size="lg"></nile-accordion>`);
+    const container = el.shadowRoot?.querySelector<HTMLElement>('.accordian');
+    expect(container).to.have.class('accordian--lg');
+  });
+
+  it('should apply the correct expand icon placement class based on the expandIconPlacement property', async () => {
+    const el = await fixture<NileAccordion>(html`<nile-accordion summary="Test Summary" expandIconPlacement="left"></nile-accordion>`);
+    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header');
+    expect(header).to.have.class('accordian__header--arrow-left');
+  });
+
   it('should animate when opening and closing', async () => {
     const el = await fixture<NileAccordion>(html`<nile-accordion summary="Test Summary"></nile-accordion>`);
-    
     const animateSpy = Sinon.spy(el, 'handleOpenChange');
+    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;
 
-    // Simulate opening
-    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;
     header.click();
-    
     await elementUpdated(el);
     expect(animateSpy.called).to.be.true;
 
-    // Simulate closing
     header.click();
     await elementUpdated(el);
     expect(animateSpy.calledTwice).to.be.true;
   });
-});
+});

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

@@ -30,77 +30,108 @@ export const styles = css`
     display: block;
   }
 
-  .details {
-    border: solid 1px hsl(240 5.9% 90%);
-    border-radius: 0.25rem;
+  .accordian {
+    border-top:solid 1px var(--nile-colors-neutral-500);
     background-color: #FFFFFF;
     overflow-anchor: none;
   }
 
-  .details--disabled {
+  .accordian--lg{
+    --accordian-text-size:var(--sm-tesx, 14px);
+    --accordian-heading-padding: 16px 12px;
+    --accordian-content-padding: 6px 12px 18px;
+  }
+
+  .accordian--md{
+    --accordian-text-size:var(--sm-tesx, 14px);
+    --accordian-heading-padding: 12px 12px;
+    --accordian-content-padding: 6px 12px 18px;
+  }
+
+  .accordian--sm{
+    --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);
+  }
+
+  .accordian--disabled {
     opacity: 0.5;
   }
 
-  .details__header {
+  .accordian__header {
     display: flex;
+    gap:12px;
     align-items: center;
     border-radius: inherit;
-    padding: 1rem;
+    font-weight:500;
+    padding: var(--accordian-heading-padding);
     user-select: none;
     cursor: pointer;
   }
 
-  .details__header:focus {
+  .accordian__header--dark{
+    background-color:var(--nile-colors-dark-200);
+  }
+
+  .accordian__header--arrow-left{
+    flex-direction: row-reverse;
+  }
+
+  .accordian__header:focus {
     outline: none;
   }
 
-  .details__header:focus-visible {
+  .accordian__header:focus-visible {
     outline: solid 3px hsl(200.4, 98%, 39.4%);
     outline-offset: calc(1px + 1px);
   }
 
-  .details--disabled .details__header {
+  .accordian--disabled .accordian__header {
     cursor: not-allowed;
   }
 
-  .details--disabled .details__header:focus-visible {
+  .accordian--disabled .accordian__header:focus-visible {
     outline: none;
     box-shadow: none;
   }
 
-  .details__summary {
+  .accordian__summary {
     flex: 1 1 auto;
     display: flex;
     align-items: center;
   }
 
-  .details__summary-icon {
+  .accordian__summary-icon {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
     transition: 250ms rotate ease;
   }
 
-  .details--open .details__summary-icon {
+  .accordian--open .accordian__summary-icon {
     rotate: 90deg;
   }
 
-  .details--open.details--rtl .details__summary-icon {
-    rotate: -90deg;
-  }
-
-  .details--open slot[name='expand-icon'],
-  .details:not(.details--open) slot[name='collapse-icon'] {
+  .accordian--open slot[name='expand-icon'],
+  .accordian:not(.accordian--open) slot[name='collapse-icon'] {
     display: none;
   }
 
-  .details__body {
+  .accordian__body {
     overflow: hidden;
   }
 
-  .details__content {
+  .accordian__content {
     display: block;
-    padding: 1rem;
+    padding: var(--accordian-content-padding);
+  }
+
+  .accordian__content--arrow-left{
+   margin-left:28px;
   }
 `;
 

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

@@ -26,48 +26,66 @@ import type { CSSResultGroup } from 'lit';
 export class NileAccordion extends NileElement {
 
 /**
- * @summary Details show a brief summary and expand to show additional content.
+ * @summary Accordian show a brief summary and expand to show additional content.
  *
  * @dependency nile-icon
  *
- * @slot - The details' main content.
- * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
+ * @slot - The accordian' main content.
+ * @slot summary - The accordian' summary. Alternatively, you can use the `summary` attribute.
  * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<nile-icon>`.
  * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<nile-icon>`.
  *
- * @event nile-show - Emitted when the details opens.
- * @event nile-after-show - Emitted after the details opens and all animations are complete.
- * @event nile-hide - Emitted when the details closes.
- * @event nile-after-hide - Emitted after the details closes and all animations are complete.
+ * @event nile-show - Emitted when the accordian opens.
+ * @event nile-after-show - Emitted after the accordian opens and all animations are complete.
+ * @event nile-hide - Emitted when the accordian closes.
+ * @event nile-after-hide - Emitted after the accordian closes and all animations are complete.
  *
  * @csspart base - The component's base wrapper.
  * @csspart header - The header that wraps both the summary and the expand/collapse icon.
  * @csspart summary - The container that wraps the summary.
  * @csspart summary-icon - The container that wraps the expand/collapse icons.
- * @csspart content - The details content.
+ * @csspart content - The accordian content.
  *
- * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
- * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
+ * @animation accordian.show - The animation to use when showing accordian. You can use `height: auto` with this animation.
+ * @animation accordian.hide - The animation to use when hiding accordian. You can use `height: auto` with this animation.
  */
 
 static styles: CSSResultGroup = styles;
 
 
-@query('.details') details: HTMLElement;
-@query('.details__header') header: HTMLElement;
-@query('.details__body') body: HTMLElement;
-@query('.details__expand-icon-slot') expandIconSlot: HTMLSlotElement;
+@query('.accordian') accordian: HTMLElement;
+@query('.accordian__header') header: HTMLElement;
+@query('.accordian__body') body: HTMLElement;
+@query('.accordian__expand-icon-slot') expandIconSlot: HTMLSlotElement;
 
 /**
- * Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
- * can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
+ * Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you
+ * can use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.
  */
 @property({ type: Boolean, reflect: true }) open = false;
 
+/**
+ * Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.
+ * Defaults to `'light'`.
+ */
+@property({ reflect: true }) variant: 'dark' | 'light' = 'light';
+
+/**
+ * Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.
+ * Defaults to `'right'`.
+ */
+@property({ reflect: true }) expandIconPlacement: 'left' | 'right' = 'right';
+
+/**
+ * Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.
+ * Defaults to `'md'`.
+ */
+@property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';
+
 /** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */
 @property() summary: string;
 
-/** Disables the details so it can't be toggled. */
+/** Disables the accordian so it can't be toggled. */
 @property({ type: Boolean, reflect: true }) disabled = false;
 
 firstUpdated() {
@@ -122,7 +140,7 @@ async handleOpenChange() {
     await stopAnimations(this.body);
     this.body.hidden = false;
 
-    const { keyframes, options } = getAnimation(this, 'details.show', { dir: 'ltr' });
+    const { keyframes, options } = getAnimation(this, 'accordian.show', { dir: 'ltr' });
     await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
     this.body.style.height = 'auto';
 
@@ -137,7 +155,7 @@ async handleOpenChange() {
 
     await stopAnimations(this.body);
 
-    const { keyframes, options } = getAnimation(this, 'details.hide', { dir: 'ltr' });
+    const { keyframes, options } = getAnimation(this, 'accordian.hide', { dir: 'ltr' });
     await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
     this.body.hidden = true;
     this.body.style.height = 'auto';
@@ -146,7 +164,7 @@ async handleOpenChange() {
   }
 }
 
-/** Shows the details. */
+/** Shows the accordian. */
 async show() {
   if (this.open || this.disabled) {
     return undefined;
@@ -156,7 +174,7 @@ async show() {
   return waitForEvent(this, 'nile-after-show');
 }
 
-/** Hides the details */
+/** Hides the accordian */
 async hide() {
   if (!this.open || this.disabled) {
     return undefined;
@@ -167,22 +185,28 @@ async hide() {
 }
 
 render() {
-  const isRtl = false;
+  const isRtl = true;
 
   return html`
     <div
       part="base"
       class=${classMap({
-        details: true,
-        'details--open': this.open,
-        'details--disabled': this.disabled,
-        'details--rtl': isRtl
+        accordian: true,
+        'accordian--open': this.open,
+        'accordian--disabled': this.disabled,
+        'accordian--sm':this.size=='sm',
+        'accordian--md':this.size=='md',
+        'accordian--lg':this.size=='lg',
       })}
     >
       <div
         part="header"
         id="header"
-        class="details__header"
+        class="${classMap({
+          'accordian__header':true,
+          'accordian__header--dark':this.variant=='dark',
+          'accordian__header--arrow-left':'left'==this.expandIconPlacement
+          })}"
         role="button"
         aria-expanded=${this.open ? 'true' : 'false'}
         aria-controls="content"
@@ -191,9 +215,9 @@ render() {
         @click=${this.handleSummaryClick}
         @keydown=${this.handleSummaryKeyDown}
       >
-        <slot name="summary" part="summary" class="details__summary">${this.summary}</slot>
+        <slot name="summary" part="summary" class="accordian__summary">${this.summary}</slot>
 
-        <span part="summary-icon" class="details__summary-icon">
+        <span part="summary-icon" class="accordian__summary-icon">
           <slot name="expand-icon">
             <nile-icon name="arrowright"></nile-icon>
           </slot>
@@ -203,15 +227,19 @@ render() {
         </span>
       </div>
 
-      <div class="details__body" role="region" aria-labelledby="header">
-        <slot part="content" id="content" class="details__content"></slot>
+      <div class="accordian__body" role="region" aria-labelledby="header">
+        <slot part="content" id="content" 
+          class="${classMap({
+            'accordian__content':true,
+            'accordian__content--arrow-left':this.expandIconPlacement=='left'
+            })}"></slot>
       </div>
     </div>
   `;
 }
 }
 
-setDefaultAnimation('details.show', {
+setDefaultAnimation('accordian.show', {
 keyframes: [
   { height: '0', opacity: '0' },
   { height: 'auto', opacity: '1' }
@@ -219,7 +247,7 @@ keyframes: [
 options: { duration: 250, easing: 'linear' }
 });
 
-setDefaultAnimation('details.hide', {
+setDefaultAnimation('accordian.hide', {
 keyframes: [
   { height: 'auto', opacity: '1' },
   { height: '0', opacity: '0' }

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

@@ -1,65 +1,116 @@
 import { html, fixture, expect } from '@open-wc/testing';
 import './nile-avatar';
-import {NileAvatar} from './nile-avatar';
+import '../nile-icon'
+import { NileAvatar } from './nile-avatar';
+const wait=(ms:number=50000)=>new Promise(resolve => setTimeout(resolve, ms))
+
 
 describe('NileAvatar', () => {
-  it('should display an image when the src is provided', async () => {
-    const el = await fixture<NileAvatar>(html`<nile-avatar src="https://example.com/avatar.png"></nile-avatar>`);
+  it('should display an image when the src is provided and variant is "image"', async () => {
+    const el = await fixture<NileAvatar>(
+      html`<nile-avatar src="https://example.com/avatar.png" variant="image"></nile-avatar>`
+    );
     const img = el.shadowRoot!.querySelector('img');
     expect(img).to.exist;
     expect(img!.getAttribute('src')).to.equal('https://example.com/avatar.png');
   });
 
-  it('should display initials when the image fails to load and name is provided', async () => {
-    const el = await fixture<NileAvatar>(html`<nile-avatar name="John Doe"></nile-avatar>`);
+  it('should fall back to text initials when image fails to load and variant is "text"', async () => {
+    const el = await fixture<NileAvatar>(
+      html`<nile-avatar name="John Doe" variant="image" src="https://example.com/avatar.png"></nile-avatar>`
+    );
     const img = el.shadowRoot!.querySelector('img');
     img!.dispatchEvent(new Event('error'));
     await el.updateComplete;
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon).to.exist;
+    expect(icon!.getAttribute('name')).to.equal('user');
+  });
+
+  it('should display initials when variant is "text" and name is provided', async () => {
+    const el = await fixture<NileAvatar>(
+      html`<nile-avatar name="John Doe" variant="text"></nile-avatar>`
+    );
     const initialsDiv = el.shadowRoot!.querySelector('.text__avatar');
     expect(initialsDiv).to.exist;
     expect(initialsDiv!.textContent!.trim()).to.equal('JD');
   });
 
-  it('should use provided background and text colors when bg-color and text-color are set', async () => {
-    const el = await fixture<NileAvatar>(html`<nile-avatar name="John Doe" bg-color="#ff0000" text-color="#00ff00"></nile-avatar>`);
-    const img = el.shadowRoot!.querySelector('img');
-    img!.dispatchEvent(new Event('error'));
-    await el.updateComplete;
-    const initialsDiv = el.shadowRoot!.querySelector('.text__avatar');
-    expect(initialsDiv).to.have.style('background-color', 'rgb(255, 0, 0)');
-    expect(initialsDiv).to.have.style('color', 'rgb(0, 255, 0)');
+  it('should display an icon when variant is "icon"', async () => {
+    const el = await fixture<NileAvatar>(
+      html`<nile-avatar variant="icon" icon="user"></nile-avatar>`
+    );
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon).to.exist;
+    expect(icon!.getAttribute('name')).to.equal('user');
   });
 
   it('should apply the appropriate size class based on the size property', async () => {
-    const el = await fixture<NileAvatar>(html`<nile-avatar size="large"></nile-avatar>`);
-    const img = el.shadowRoot!.querySelector('img');
-    expect(img).to.have.class('avatar__large');
+    const el = await fixture<NileAvatar>(html`<nile-avatar size="lg"></nile-avatar>`);
+    const div = el.shadowRoot!.querySelector('.text__avatar') || el.shadowRoot!.querySelector('img');
+    expect(div).to.have.class('avatar__large');
   });
 
-  it('should have rounded class when isRounded is true', async () => {
+  it('should have the rounded class when isRounded is true', async () => {
     const el = await fixture<NileAvatar>(html`<nile-avatar isRounded></nile-avatar>`);
-    const img = el.shadowRoot!.querySelector('img');
-    expect(img).to.have.class('avatar__rounded');
-  });
-
-  it('should display a default icon when image fails to load and no name is provided', async () => {
-    const el = await fixture<NileAvatar>(html`<nile-avatar></nile-avatar>`);
-    const img = el.shadowRoot!.querySelector('img');
-    img!.dispatchEvent(new Event('error'));
-    await el.updateComplete;
-    const defaultIcon = el.shadowRoot!.querySelector('nile-icon');
-    expect(defaultIcon).to.exist;
-    expect(defaultIcon!.getAttribute('name')).to.equal('user');
+    const div = el.shadowRoot!.querySelector('.text__avatar') || el.shadowRoot!.querySelector('img');
+    expect(div).to.have.class('avatar__rounded');
   });
 
-  it('should reflect properties to attributes', async () => {
-    const el = await fixture<NileAvatar>(html`<nile-avatar src="https://example.com/avatar.png" name="Jane Doe" bg-color="#123456" text-color="#654321" border-color="#abcdef" size="small" isRounded></nile-avatar>`);
+  it('should reflect properties to attributes correctly', async () => {
+    const el = await fixture<NileAvatar>(
+      html`<nile-avatar
+        src="https://example.com/avatar.png"
+        name="Jane Doe"
+        bg-color="#123456"
+        text-color="#654321"
+        border-color="#abcdef"
+        size="sm"
+        isRounded
+        variant="image"
+        icon="user"
+      ></nile-avatar>`
+    );
     expect(el.getAttribute('src')).to.equal('https://example.com/avatar.png');
     expect(el.getAttribute('name')).to.equal('Jane Doe');
     expect(el.getAttribute('bg-color')).to.equal('#123456');
     expect(el.getAttribute('text-color')).to.equal('#654321');
     expect(el.getAttribute('border-color')).to.equal('#abcdef');
-    expect(el.getAttribute('size')).to.equal('small');
+    expect(el.getAttribute('size')).to.equal('sm');
+    expect(el.getAttribute('variant')).to.equal('image');
+    expect(el.getAttribute('icon')).to.equal('user');
     expect(el.hasAttribute('isRounded')).to.be.true;
   });
-});
+
+  it('should use provided background and text colors when bg-color and text-color are set', async () => {
+    const el = await fixture<NileAvatar>(
+      html`<nile-avatar name="John Doe" bg-color="#ff0000" text-color="#00ff00"></nile-avatar>`
+    );
+    const initialsDiv = el.shadowRoot!.querySelector('.text__avatar');
+    expect(initialsDiv).to.have.style('background-color', 'rgb(255, 0, 0)');
+    expect(initialsDiv).to.have.style('color', 'rgb(0, 255, 0)');
+  });
+
+  it('should display a default icon when variant is "icon" and icon is not provided', async () => {
+    const el = await fixture<NileAvatar>(html`<nile-avatar variant="icon"></nile-avatar>`);
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon).to.exist;
+    expect(icon!.getAttribute('name')).to.equal('user');
+  });
+
+  it('should use the default initials if name is not provided and variant is "text"', async () => {
+    const el = await fixture<NileAvatar>(html`<nile-avatar variant="text"></nile-avatar>`);
+    const initialsDiv = el.shadowRoot!.querySelector('.text__avatar');
+    expect(initialsDiv).to.exist;
+    expect(initialsDiv!.textContent!.trim()).to.equal('');
+  });
+
+  it('should handle image error gracefully by switching to fallback content', async () => {
+    const el = await fixture<NileAvatar>(html`<nile-avatar variant="image" src="invalid_url"></nile-avatar>`);
+    const img = el.shadowRoot!.querySelector('img');
+    img!.dispatchEvent(new Event('error'));
+    await el.updateComplete;
+    const fallbackContent = el.shadowRoot!.querySelector('.text__avatar') || el.shadowRoot!.querySelector('nile-icon');
+    expect(fallbackContent).to.exist;
+  });
+});