@aquera/nile-elements 0.0.80 → 0.0.82

package/package.json

@@ -3,12 +3,81 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.80",
+  "version": "0.0.82",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
   "exports": {
-    ".": "./dist/src/index.js"
+    ".": "./dist/src/index.js",
+    "./nile-button": "./dist/src/nile-button/index.js",
+    "./nile-heading": "./dist/src/nile-heading/index.js",
+    "./nile-icon": "./dist/src/nile-icon/index.js",
+    "./nile-input": "./dist/src/nile-input/index.js",
+    "./nile-sidebar": "./dist/src/nile-sidebar/index.js",
+    "./nile-menu": "./dist/src/nile-menu/index.js",
+    "./nile-badge": "./dist/src/nile-badge/index.js",
+    "./nile-drawer": "./dist/src/nile-drawer/index.js",
+    "./nile-checkbox": "./dist/src/nile-checkbox/index.js",
+    "./nile-radio": "./dist/src/nile-radio/index.js",
+    "./nile-radio-group": "./dist/src/nile-radio-group/index.js",
+    "./nile-popup": "./dist/src/nile-popup/index.js",
+    "./nile-tooltip": "./dist/src/nile-tooltip/index.js",
+    "./nile-slide-toggle": "./dist/src/nile-slide-toggle/index.js",
+    "./nile-loader": "./dist/src/nile-loader/index.js",
+    "./nile-progress-bar": "./dist/src/nile-progress-bar/index.js",
+    "./nile-spinner": "./dist/src/nile-spinner/index.js",
+    "./nile-select": "./dist/src/nile-select/index.js",
+    "./nile-option": "./dist/src/nile-option/index.js",
+    "./nile-tag": "./dist/src/nile-tag/index.js",
+    "./nile-icon-button": "./dist/src/nile-icon-button/index.js",
+    "./nile-menu-item": "./dist/src/nile-menu-item/index.js",
+    "./nile-dropdown": "./dist/src/nile-dropdown/index.js",
+    "./nile-auto-complete": "./dist/src/nile-auto-complete/index.js",
+    "./nile-chip": "./dist/src/nile-chip/index.js",
+    "./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-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",
+    "./nile-link": "./dist/src/nile-link/index.js",
+    "./nile-button-toggle-group": "./dist/src/nile-button-toggle-group/index.js",
+    "./nile-button-toggle": "./dist/src/nile-button-toggle/index.js",
+    "./nile-switcher": "./dist/src/nile-switcher/index.js",
+    "./nile-content-editor": "./dist/src/nile-content-editor/index.js",
+    "./nile-dialog": "./dist/src/nile-dialog/index.js",
+    "./nile-error-notification": "./dist/src/nile-error-notification/index.js",
+    "./nile-tab-group": "./dist/src/nile-tab-group/index.js",
+    "./nile-tab": "./dist/src/nile-tab/index.js",
+    "./nile-tab-panel": "./dist/src/nile-tab-panel/index.js",
+    "./nile-code-editor": "./dist/src/nile-code-editor/index.js",
+    "./nile-toast": "./dist/src/nile-toast/index.js",
+    "./nile-breadcrumb": "./dist/src/nile-breadcrumb/index.js",
+    "./nile-breadcrumb-item": "./dist/src/nile-breadcrumb-item/index.js",
+    "./nile-form-group": "./dist/src/nile-form-group/index.js",
+    "./nile-card": "./dist/src/nile-card/index.js",
+    "./nile-popover": "./dist/src/nile-popover/index.js",
+    "./nile-button-filter": "./dist/src/nile-button-filter/index.js",
+    "./nile-circular-progressbar": "./dist/src/nile-circular-progressbar/index.js",
+    "./nile-sidebar-menu": "./dist/src/nile-sidebar-menu/index.js",
+    "./nile-sidebar-menu-items": "./dist/src/nile-sidebar-menu-items/index.js",
+    "./nile-sidebar-wrapper": "./dist/src/nile-sidebar-wrapper/index.js",
+    "./nile-table-cell-item": "./dist/src/nile-table-cell-item/index.js",
+    "./nile-table-row": "./dist/src/nile-table-row/index.js",
+    "./nile-table-body": "./dist/src/nile-table-body/index.js",
+    "./nile-table-header-item": "./dist/src/nile-table-header-item/index.js",
+    "./nile-avatar": "./dist/src/nile-avatar/index.js",
+    "./nile-page-header": "./dist/src/nile-page-header/index.js",
+    "./nile-empty-state": "./dist/src/nile-empty-state/index.js",
+    "./nile-hero": "./dist/src/nile-hero/index.js",
+    "./nile-stepper-item": "./dist/src/nile-stepper-item/index.js",
+    "./nile-stepper": "./dist/src/nile-stepper/index.js",
+    "./nile-hero-header": "./dist/src/nile-hero-header/index.js",
+    "./nile-vertical-stepper-item": "./dist/src/nile-vertical-stepper-item/index.js",
+    "./nile-format-date": "./dist/src/nile-format-date/index.js",
+    "./nile-split-panel": "./dist/src/nile-split-panel/index.js",
+    "./nile-list": "./dist/src/nile-list/index.js",
+    "./nile-list-item": "./dist/src/nile-list-item/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",

package/plopfile.js

@@ -30,6 +30,17 @@ export default function (plop) {
         path: 'src/nile-{{name}}/nile-{{name}}.css.ts',
         templateFile: 'plop-templates/lit/lit.css.ts.hbs',
       },
+      {
+        type: 'modify',
+        path: 'package.json',
+        transform: (content, data) => {
+          const packageJson = JSON.parse(content);
+          const newName = `./nile-${data.name}`;
+          packageJson.exports[newName] = `./dist/src/nile-${data.name}/index.js`;
+
+          return JSON.stringify(packageJson, null, 2);
+        },
+      },
     ],
   });
 }

package/src/index.ts

@@ -63,4 +63,9 @@ export { NileStepperItem } from './nile-stepper-item';
 export { NileStepper } from './nile-stepper';
 export { NileHeroHeader } from './nile-hero-header';
 export { NileVerticalStepperItem } from './nile-vertical-stepper-item';
-export { NileFormatDate } from './nile-format-date';
+export { NileFormatDate } from './nile-format-date';
+export { NileSplitPanel } from './nile-split-panel';
+export { NileTree } from './nile-tree';
+export { NileTreeItem } from './nile-tree-item';
+export { NileListItem } from './nile-list-item';
+export { NileList } from './nile-list';

package/src/internal/drag.ts

@@ -0,0 +1,45 @@
+interface DragOptions {
+  /** Callback that runs as dragging occurs. */
+  onMove: (x: number, y: number) => void;
+  /** Callback that runs when dragging stops. */
+  onStop: () => void;
+  /**
+   * When an initial event is passed, the first drag will be triggered immediately using the coordinates therein. This
+   * is useful when the drag is initiated by a mousedown/touchstart event but you want the initial "click" to activate
+   * a drag (e.g. positioning a handle initially at the click target).
+   */
+  initialEvent: PointerEvent;
+}
+
+/** Begins listening for dragging. */
+export function drag(container: HTMLElement, options?: Partial<DragOptions>) {
+  function move(pointerEvent: PointerEvent) {
+    const dims = container.getBoundingClientRect();
+    const defaultView = container.ownerDocument.defaultView!;
+    const offsetX = dims.left + defaultView.pageXOffset;
+    const offsetY = dims.top + defaultView.pageYOffset;
+    const x = pointerEvent.pageX - offsetX;
+    const y = pointerEvent.pageY - offsetY;
+
+    if (options?.onMove) {
+      options.onMove(x, y);
+    }
+  }
+
+  function stop() {
+    document.removeEventListener('pointermove', move);
+    document.removeEventListener('pointerup', stop);
+
+    if (options?.onStop) {
+      options.onStop();
+    }
+  }
+
+  document.addEventListener('pointermove', move, { passive: true });
+  document.addEventListener('pointerup', stop);
+
+  // If an initial event is set, trigger the first drag immediately
+  if (options?.initialEvent instanceof PointerEvent) {
+    move(options.initialEvent);
+  }
+}

package/src/internal/math.ts

@@ -0,0 +1,14 @@
+/** Ensures a number stays within a minimum and maximum value */
+export function clamp(value: number, min: number, max: number) {
+  const noNegativeZero = (n: number) => (Object.is(n, -0) ? 0 : n);
+
+  if (value < min) {
+    return noNegativeZero(min);
+  }
+
+  if (value > max) {
+    return noNegativeZero(max);
+  }
+
+  return noNegativeZero(value);
+}

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

@@ -16,7 +16,6 @@ export const styles = css`
 
   .text__avatar {
     box-sizing: border-box;
-    font-feature-settings: 'clig' off, 'liga' off;
     font-family: var(--nile-font-family-serif);
     font-style: normal;
     font-weight: 600;
@@ -78,23 +77,23 @@ export const styles = css`
   }
 
   .variant__orange {
-    background: #e04f16;
+    background:var(--nile-avatar-background-color-orange);
   }
 
   .variant__pink {
-    background: #c11574;
+    background: var(--nile-avatar-background-color-pink);
   }
 
   .variant__blue {
-    background: #3538cd;
+    background: var(--nile-avatar-background-color-blue);
   }
 
   .variant__light_blue {
-    background: #0086c9;
+    background: var(--nile-avatar-background-color-lightblue);
   }
 
   .variant__green {
-    background: #079455;
+    background: var(--nile-avatar-background-color-green);
   }
 `;
 

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

@@ -0,0 +1,65 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import './nile-avatar';
+import {NileAvatar} from './nile-avatar';
+
+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>`);
+    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>`);
+    const img = el.shadowRoot!.querySelector('img');
+    img!.dispatchEvent(new Event('error'));
+    await el.updateComplete;
+    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 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');
+  });
+
+  it('should have 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');
+  });
+
+  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>`);
+    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.hasAttribute('isRounded')).to.be.true;
+  });
+});

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

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

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

@@ -0,0 +1,48 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import './nile-badge';
+
+describe('NileBadge', () => {
+  it('should display the default slot content', async () => {
+    const el = await fixture(html`<nile-badge>Badge Content</nile-badge>`);
+    expect(el).shadowDom.to.equalSnapshot();
+    expect(el.textContent).to.equal('Badge Content');
+  });
+
+  it('should apply the correct variant class based on the variant property', async () => {
+    const el = await fixture(html`<nile-badge variant="success">Success Badge</nile-badge>`);
+    const badge = el.shadowRoot!.querySelector('span');
+    expect(badge).to.have.class('badge--success');
+  });
+
+  it('should apply the rounded class when rounded is true', async () => {
+    const el = await fixture(html`<nile-badge rounded>Rounded Badge</nile-badge>`);
+    const badge = el.shadowRoot!.querySelector('span');
+    expect(badge).to.have.class('badge--rounded');
+  });
+
+  it('should apply the pill-outline class when pilltype is pill-outline', async () => {
+    const el = await fixture(html`<nile-badge pilltype="pill-outline">Pill Outline Badge</nile-badge>`);
+    const badge = el.shadowRoot!.querySelector('span');
+    expect(badge).to.have.class('badge--pill-outline');
+  });
+
+  it('should apply the badge-color class when pilltype is badge-color', async () => {
+    const el = await fixture(html`<nile-badge pilltype="badge-color">Badge Color Badge</nile-badge>`);
+    const badge = el.shadowRoot!.querySelector('span');
+    expect(badge).to.have.class('badge--badge-color');
+  });
+
+  it('should apply the correct classes when multiple properties are set', async () => {
+    const el = await fixture(html`<nile-badge variant="warning" rounded pilltype="pill-color">Warning Badge</nile-badge>`);
+    const badge = el.shadowRoot!.querySelector('span');
+    expect(badge).to.have.class('badge--warning');
+    expect(badge).to.have.class('badge--rounded');
+  });
+
+  it('should reflect properties to attributes', async () => {
+    const el = await fixture(html`<nile-badge variant="error" rounded pilltype="pill-outline"></nile-badge>`);
+    expect(el.getAttribute('variant')).to.equal('error');
+    expect(el.hasAttribute('rounded')).to.be.true;
+    expect(el.getAttribute('pilltype')).to.equal('pill-outline');
+  });
+});

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

@@ -15,12 +15,11 @@ export const styles = css`
     display: flex;
     align-items: center;
     text-align: center;
-    font-feature-settings: 'clig' off, 'liga' off;
-    font-family: var(--nile-font-family-serif); 
+    font-family: var(--nile-font-family-serif);
     font-size: var(--nile-font-size-small);
     font-style: normal;
     font-weight: var(--nile-font-weight-regular);
-    line-height:16.8px;
+    line-height: 16.8px;
     letter-spacing: 0.2px;
   }
 
@@ -42,7 +41,7 @@ export const styles = css`
   }
 
   .nile-breadcrumb-item__last-slot-text {
-    color: #026e78;
+    color: var(--nile-breadcrumb-color);
   }
 `;
 

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

@@ -0,0 +1,117 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './nile-button'; // Adjust the import path as necessary
+import NileButton from './nile-button';
+import sinon from 'sinon';
+
+describe('NileButton', () => {
+  it('should render with default properties', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    expect(el).to.exist;
+    expect(el.variant).to.equal('primary');
+    expect(el.size).to.equal('medium');
+    expect(el.type).to.equal('button');
+    expect(el.disabled).to.be.false;
+    expect(el.loading).to.be.false;
+  });
+
+  it('should apply the correct classes based on properties', async () => {
+    const el = await fixture<NileButton>(
+      html`<nile-button variant="secondary" pill outline caret></nile-button>`
+    );
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.classList.contains('button--secondary')).to.be.true;
+    expect(button!.classList.contains('button--pill')).to.be.true;
+    expect(button!.classList.contains('button--outline')).to.be.true;
+    expect(button!.classList.contains('button--caret')).to.be.true;
+  });
+
+  it('should be disabled when the disabled property is set', async () => {
+    const el = await fixture<NileButton>(
+      html`<nile-button disabled></nile-button>`
+    );
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.hasAttribute('disabled')).to.be.true;
+    expect(button!.getAttribute('aria-disabled')).to.equal('true');
+  });
+
+  it('should render a link when the href property is set', async () => {
+    const el = await fixture<NileButton>(
+      html`<nile-button
+        href="https://example.com"
+        target="_blank"
+      ></nile-button>`
+    );
+    const button = el.shadowRoot!.querySelector('.button');
+    expect(button!.tagName).to.equal('A');
+    expect(button!.getAttribute('href')).to.equal('https://example.com');
+    expect(button!.getAttribute('target')).to.equal('_blank');
+  });
+
+  it('should show a spinner when the loading property is set', async () => {
+    const el = await fixture<NileButton>(
+      html`<nile-button loading></nile-button>`
+    );
+    const spinner = el.shadowRoot!.querySelector('nile-spinner');
+    expect(spinner).to.exist;
+  });
+
+  it('should emit nile-focus and nile-blur events', async () => {
+    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);
+    const button = el.shadowRoot!.querySelector('.button');
+
+    let focusEventEmitted = false;
+    el.addEventListener('nile-focus', () => (focusEventEmitted = true));
+    button!.dispatchEvent(new FocusEvent('focus'));
+    expect(focusEventEmitted).to.be.true;
+
+    let blurEventEmitted = false;
+    el.addEventListener('nile-blur', () => (blurEventEmitted = true));
+    button!.dispatchEvent(new FocusEvent('blur'));
+    expect(blurEventEmitted).to.be.true;
+  });
+
+  it('should simulate a click on the button', async () => {
+    const el = await fixture<NileButton>(
+      html`<nile-button>Click Me</nile-button>`
+    );
+    const button = el.shadowRoot!.querySelector('.button');
+
+    let clicked = false;
+    el.addEventListener('click', () => (clicked = true));
+    el.click();
+    expect(clicked).to.be.true;
+  });
+
+  it('should focus and blur the button programmatically', async () => {
+    const el = await fixture<NileButton>(
+      html`<nile-button>Click Me</nile-button>`
+    );
+    const button = el.shadowRoot!.querySelector('.button');
+    el.focus();
+    await el.updateComplete;
+    const focusButton = el.shadowRoot!.querySelector('.button--focused');
+    expect(focusButton!.classList.contains('button--focused')).to.be.true;
+
+    el.blur();
+    await el.updateComplete;
+    const blurButton = el.shadowRoot!.querySelector('.button');
+    expect(blurButton!.classList.contains('button--focused')).to.be.false;
+  });
+
+  it('should set a custom validation message', async () => {
+    const el = await fixture<NileButton>(
+      html`<nile-button type="submit"></nile-button>`
+    );
+    const form = document.createElement('form');
+    form.appendChild(el);
+    document.body.appendChild(form);
+
+    el.setCustomValidity('Invalid input');
+    expect(el.validationMessage).to.equal('Invalid input');
+
+    el.setCustomValidity('');
+    expect(el.validationMessage).to.equal('');
+
+    document.body.removeChild(form);
+  });
+});