@aquera/nile-elements 0.0.81 → 0.0.82

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

@@ -0,0 +1,106 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import sinon from 'sinon';
+import './nile-drawer'; // Adjust the import path as necessary
+import { NileDrawer } from './nile-drawer';
+describe('Nile-drawer', () => {
+  it('should be visible with the open attribute', async () => {
+    const el = await fixture<NileDrawer>(html`
+      <nile-drawer open>I am content inside nile drawer</nile-drawer>
+    `);
+    const panel = el.shadowRoot!.querySelector<HTMLElement>('[part="panel"]')!;
+    expect(panel.ariaHidden).to.equal('false');
+  });
+
+  it('should not be visible without the open attribute', async () => {
+    const el = await fixture<NileDrawer>(html`
+      <nile-drawer>I am content inside nile drawer</nile-drawer>
+    `);
+    const panel = el.shadowRoot!.querySelector<HTMLElement>('[part="panel"]')!;
+    expect(panel.ariaHidden).to.equal('true');
+  });
+
+  it('should emit nile-show and nile-after-show when calling show()', async () => {
+    const el = await fixture<NileDrawer>(html`
+      <nile-drawer>I am Nile Drawer Content.</nile-drawer>
+    `);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
+    const showHandler = sinon.spy();
+    const afterShowHandler = sinon.spy();
+
+    el.addEventListener('nile-show', showHandler);
+    el.addEventListener('nile-after-show', afterShowHandler);
+    el.show();
+
+    await waitUntil(() => showHandler.calledOnce);
+    await waitUntil(() => afterShowHandler.calledOnce);
+
+    expect(showHandler).to.have.been.calledOnce;
+    expect(afterShowHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.false;
+  });
+
+  it('should emit nile-hide and nile-after-hide when calling hide()', async () => {
+    const el = await fixture<NileDrawer>(html`
+      <nile-drawer open>I am nile drawer content</nile-drawer>
+    `);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
+    const hideHandler = sinon.spy();
+    const afterHideHandler = sinon.spy();
+
+    el.addEventListener('nile-hide', hideHandler);
+    el.addEventListener('nile-after-hide', afterHideHandler);
+    el.hide();
+
+    await waitUntil(() => hideHandler.calledOnce);
+    await waitUntil(() => afterHideHandler.calledOnce);
+
+    expect(hideHandler).to.have.been.calledOnce;
+    expect(afterHideHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.true;
+  });
+
+  it('should emit nile-show and nile-after-show when setting open = true', async () => {
+    const el = await fixture<NileDrawer>(html`
+      <nile-drawer
+        >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</nile-drawer
+      >
+    `);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
+    const showHandler = sinon.spy();
+    const afterShowHandler = sinon.spy();
+
+    el.addEventListener('nile-show', showHandler);
+    el.addEventListener('nile-after-show', afterShowHandler);
+    el.open = true;
+
+    await waitUntil(() => showHandler.calledOnce);
+    await waitUntil(() => afterShowHandler.calledOnce);
+
+    expect(showHandler).to.have.been.calledOnce;
+    expect(afterShowHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.false;
+  });
+
+  it('should emit nile-hide and nile-after-hide when setting open = false', async () => {
+    const el = await fixture<NileDrawer>(html`
+      <nile-drawer open
+        >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</nile-drawer
+      >
+    `);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
+    const hideHandler = sinon.spy();
+    const afterHideHandler = sinon.spy();
+
+    el.addEventListener('nile-hide', hideHandler);
+    el.addEventListener('nile-after-hide', afterHideHandler);
+    el.open = false;
+
+    await waitUntil(() => hideHandler.calledOnce);
+    await waitUntil(() => afterHideHandler.calledOnce);
+
+    expect(hideHandler).to.have.been.calledOnce;
+    expect(afterHideHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.true;
+  });
+});

package/src/nile-error-message/nile-error-message.test.ts

@@ -0,0 +1,69 @@
+import { html, fixture, expect, oneEvent } from '@open-wc/testing';
+import './nile-error-message';
+import { NileErrorMessage } from './nile-error-message';
+describe('NileErrorMessage', () => {
+  it('should render the error message', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorMessage="An error occurred"></nile-error-message>`);
+    const errorMessage = el.shadowRoot!.querySelector('.nile-error-message__error');
+    expect(errorMessage!.textContent).to.equal('An error occurred');
+  });
+
+  it('should truncate the error response if it is too long', async () => {
+    const longErrorResponse = 'a'.repeat(150);
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="${longErrorResponse}"></nile-error-message>`);
+    const truncatedResponse = el.getTruncatedResponse();
+    expect(truncatedResponse).to.equal(`${longErrorResponse.substring(0, 100)}...`);
+  });
+
+  it('should not truncate the error response if it is within the maximum length', async () => {
+    const shortErrorResponse = 'Short error message';
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="${shortErrorResponse}"></nile-error-message>`);
+    const truncatedResponse = el.getTruncatedResponse();
+    expect(truncatedResponse).to.equal(shortErrorResponse);
+  });
+
+  it('should toggle the expanded state when the button is clicked', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="Short error message" errorResponseLong="Detailed error information"></nile-error-message>`);
+    const button :HTMLButtonElement = el.shadowRoot!.querySelector('.nile-error-message__more-button') ??{} as HTMLButtonElement;
+    button.click();
+    expect(el.isExpanded).to.be.true;
+    button.click();
+    expect(el.isExpanded).to.be.false;
+  });
+
+  it('should display the "View More" button if there is extended error information', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="Short error message" errorResponseLong="Detailed error information"></nile-error-message>`);
+    const button = el.shadowRoot!.querySelector('.nile-error-message__more-button');
+    expect(button).to.exist;
+  });
+
+  it('should not display the "View More" button if there is no extended error information', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="Short error message"></nile-error-message>`);
+    const button = el.shadowRoot!.querySelector('.nile-error-message__more-button');
+    expect(button).to.not.exist;
+  });
+
+  it('should show the extended error information when expanded', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="Short error message" errorResponseLong="Detailed error information"></nile-error-message>`);
+    el.isExpanded = true;
+    await el.updateComplete;
+    const expandedResponse = el.shadowRoot!.querySelector('.nile-error-message__response-expanded');
+    expect(expandedResponse?.textContent).to.include('Detailed error information');
+  });
+
+  it('should hide the extended error information when collapsed', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorResponse="Short error message" errorResponseLong="Detailed error information"></nile-error-message>`);
+    el.isExpanded = false;
+    await el.updateComplete;
+    const expandedResponse = el.shadowRoot!.querySelector('.nile-error-message__response-expanded');
+    expect(expandedResponse).to.have.class('collapsed');
+  });
+
+  it('should render icon and error message parts', async () => {
+    const el = await fixture<NileErrorMessage>(html`<nile-error-message errorMessage="An error occurred"></nile-error-message>`);
+    const icon = el.shadowRoot!.querySelector('nile-icon');
+    expect(icon).to.exist;
+    const errorMessage = el.shadowRoot!.querySelector('.nile-error-message__error');
+    expect(errorMessage).to.exist;
+  });
+});

package/src/nile-form-group/nile-form-group.test.ts

@@ -0,0 +1,63 @@
+import { fixture, html, expect } from '@open-wc/testing';
+import './nile-form-group'; // Make sure to import the component to be tested
+import NileFormGroup from './nile-form-group';
+
+describe('NileFormGroup', () => {
+  it('should have default properties', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group></nile-form-group>`);
+    expect(el.title).to.equal('');
+    expect(el.subtitle).to.equal('');
+  });
+
+  it('should render title when set', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group title="Test Title"></nile-form-group>`);
+    const titleSlot = el.shadowRoot!.querySelector('slot[name="title"]');
+    expect(titleSlot).to.exist;
+    expect(titleSlot?.textContent?.trim()).to.equal('Test Title');
+  });
+
+  it('should render subtitle when set', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group title="Test Title" subtitle="Test Subtitle"></nile-form-group>`);
+    const subtitleSlot = el.shadowRoot!.querySelector('slot[name="subtitle"]');
+    expect(subtitleSlot).to.exist;
+    expect(subtitleSlot?.textContent?.trim()).to.equal('Test Subtitle');
+  });
+
+  it('should not render title and subtitle if not set', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group></nile-form-group>`);
+    const titleSlot = el.shadowRoot!.querySelector('slot[name="title"]');
+    const subtitleSlot = el.shadowRoot!.querySelector('slot[name="subtitle"]');
+    expect(titleSlot).to.not.exist;
+    expect(subtitleSlot).to.not.exist;
+  });
+
+  it('should render content inside the form body slot', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group><p>Form Content</p></nile-form-group>`);
+    const bodySlot = el.shadowRoot!.querySelector<HTMLSlotElement>('.form__body slot');
+    const assignedNodes = bodySlot?.assignedNodes() ?? [] as any;
+    expect(assignedNodes.length).to.equal(1);
+    expect(assignedNodes[0].textContent.trim()).to.equal('Form Content');
+  });
+
+  it('should reflect title and subtitle attributes', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group title="Test Title" subtitle="Test Subtitle"></nile-form-group>`);
+    expect(el.getAttribute('title')).to.equal('Test Title');
+    expect(el.getAttribute('subtitle')).to.equal('Test Subtitle');
+  });
+
+  it('should update the title dynamically', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group title="Initial Title"></nile-form-group>`);
+    el.title = 'Updated Title';
+    await el.updateComplete;
+    const titleSlot = el.shadowRoot!.querySelector('slot[name="title"]')?? {} as any;
+    expect(titleSlot.textContent.trim()).to.equal('Updated Title');
+  });
+
+  it('should update the subtitle dynamically', async () => {
+    const el = await fixture<NileFormGroup>(html`<nile-form-group title="Test Title" subtitle="Initial Subtitle"></nile-form-group>`);
+    el.subtitle = 'Updated Subtitle';
+    await el.updateComplete;
+    const subtitleSlot = el.shadowRoot!.querySelector('slot[name="subtitle"]') ?? {} as any;
+    expect(subtitleSlot.textContent.trim()).to.equal('Updated Subtitle');
+  });
+});

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

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

package/src/nile-icon/icons/svg/file-check-02.ts

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

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

@@ -7,6 +7,7 @@ export { default as agent } from './agent';
 export { default as agents } from './agents';
 export { default as aggregation } from './aggregation';
 export { default as alertcircle } from './alert-circle';
+export { default as alert } from './alert';
 export { default as allapplication } from './allapplication';
 export { default as allsearch } from './allsearch';
 export { default as anomaly } from './anomaly';
@@ -171,6 +172,7 @@ export { default as eye } from './eye';
 export { default as eyeclosed } from './eyeclosed';
 export { default as featuredicon } from './featured-icon';
 export { default as file06 } from './file-06';
+export { default as filecheck02 } from './file-check-02';
 export { default as fileshield01 } from './file-shield-01';
 export { default as fileshield02 } from './file-shield-02';
 export { default as filetypeicon } from './file-type-icon';
@@ -300,6 +302,7 @@ export { default as maximize } from './maximize';
 export { default as menu } from './menu';
 export { default as messagenotificationsquare } from './message-notification-square';
 export { default as minus } from './minus';
+export { default as monitor01 } from './monitor-01';
 export { default as moveleft } from './moveleft';
 export { default as moveright } from './moveright';
 export { default as multipleuser } from './multiple-user';

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

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

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

@@ -0,0 +1,53 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import './index';
+import { NileIcon } from './index';
+import Sinon from 'sinon';
+
+describe('NileIcon', () => {
+  it('should render the icon with the correct name', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon name="info"></nile-icon>`);
+    expect(el.name).to.equal('info');
+    expect(el).to.equalSnapshot()
+  });
+
+  it('should render the icon with the correct size', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon size="24"></nile-icon>`);
+    expect(el.size).to.equal('24');
+    const svg = el.shadowRoot!.querySelector('svg');
+    expect(svg?.getAttribute('height')).to.equal('24');
+    expect(svg?.getAttribute('width')).to.equal('24');
+  });
+
+  it('should apply the correct color to the icon', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon color="red"></nile-icon>`);
+    await el.updateComplete
+    expect(el.color).to.equal('red');
+    expect(el.style.getPropertyValue('--nile-svg-fill')).to.equal('red');
+  });
+
+  it('should set the correct viewBox based on frame property', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon frame="32"></nile-icon>`);
+    const svg = el.shadowRoot!.querySelector('svg');
+    expect(svg?.getAttribute('viewBox')).to.equal('0 0 32 32');
+  });
+
+  it('should set aria attributes based on description', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon description="Test icon"></nile-icon>`);
+    const svg = el.shadowRoot!.querySelector('svg');
+    await el.updateComplete
+    expect(svg?.getAttribute('aria-label')).to.equal('Test icon');
+    expect(svg?.getAttribute('aria-hidden')).to.equal('false');
+  });
+
+  it('should apply stroke class based on method property', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon method="stroke"></nile-icon>`);
+    const svg = el.shadowRoot!.querySelector('svg');
+    expect(svg?.classList.contains('stroke')).to.be.true;
+  });
+
+  it('should apply push class when push property is true', async () => {
+    const el = await fixture<NileIcon>(html`<nile-icon push></nile-icon>`);
+    const svg = el.shadowRoot!.querySelector('svg');
+    expect(svg?.classList.contains('nds-icon--push')).to.be.true;
+  });
+});

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

@@ -0,0 +1,160 @@
+import { fixture, html, expect, oneEvent, nextFrame, aTimeout } from '@open-wc/testing';
+import './nile-input';
+import { NileInput } from './nile-input';
+import Sinon from 'sinon';
+
+describe('nile-input', () => {
+  it('renders correctly', async () => {
+    const el = await fixture<NileInput>(html`<nile-input label="Test Label"></nile-input>`);
+    expect(el).shadowDom.to.equalSnapshot();
+  });
+
+  it('updates the value on input', async () => {
+    const el :any = await fixture<NileInput>(html`<nile-input></nile-input>`);
+    const input = el.shadowRoot?.querySelector('input') ?? {} as any;
+    input.value = 'New Value';
+    input.dispatchEvent(new Event('input'));
+    expect(el.value).to.equal('New Value');
+  });
+  
+
+  it('shows error message when invalid', async () => {
+    const el = await fixture<NileInput>(html`<nile-input required error-message='errr'></nile-input>`);
+    const errorMessage = el.shadowRoot?.querySelector('nile-form-error-message');
+    expect(errorMessage).to.exist;
+  });
+
+
+  it('should renders all slots correctly and verify its content', async () => {
+    const el = await fixture<NileInput>(html`
+      <nile-input>
+        <span slot="label">Slot Label</span>
+        <span slot="label-suffix">Slot Label suffix</span>
+        <span slot="prefix">prefix slot</span>
+        <span slot="suffix">suffix slot</span>
+        <span slot="clear-icon">
+          <nile-icon name="error" library="system"></nile-icon>
+        </span>
+        <span slot="show-password-icon">
+          <nile-icon
+            name="eye"
+            library="system"
+          ></nile-icon>
+        </span>
+      </nile-input>
+    `);
+    const labelSlot = el.shadowRoot?.querySelector('slot[name="label"]') ?? {} as any;
+    const labelSuffixSlot = el.shadowRoot?.querySelector('slot[name="label-suffix"]') ?? {} as any;
+    const prefixSlot = el.shadowRoot?.querySelector('slot[name="prefix"]') ?? {} as any;
+    const suffixSlot = el.shadowRoot?.querySelector('slot[name="suffix"]') ?? {} as any;
+    const clearIconSlot = el.shadowRoot?.querySelector('slot[name="clear-icon"]') ?? {} as HTMLElement;
+    const showPasswordSlot = el.shadowRoot?.querySelector('slot[name="show-password-icon"]') ?? {} as HTMLElement;
+    expect(labelSlot.assignedNodes()[0].textContent).to.equal('Slot Label');
+    expect(labelSuffixSlot.assignedNodes()[0].textContent).to.equal('Slot Label suffix');
+    expect(prefixSlot.assignedNodes()[0].textContent).to.equal('prefix slot');
+    expect(suffixSlot.assignedNodes()[0].textContent).to.equal('suffix slot');
+    expect(clearIconSlot).to.exist;
+    expect(showPasswordSlot).to.exist;
+  });
+
+  it('handles password toggle', async () => {
+    const el = await fixture<NileInput>(html`<nile-input type="password" password-toggle></nile-input>`);
+    const button = el.shadowRoot?.querySelector('.input__password-toggle') ?? {} as any;
+    button.click();
+    await el.updateComplete;
+    expect(el.passwordVisible).to.be.true;
+    expect(el.shadowRoot!.querySelector('input')!.type).to.equal('text');
+  });
+
+  it('validates input against pattern', async () => {
+    const el = await fixture<NileInput>(html`<nile-input pattern="^[a-zA-Z]+$"></nile-input>`);
+    el.value = '123';
+    el.reportValidity();
+    await el.updateComplete;
+    expect(el.validationMessage).to.equal('Please match the format requested.');
+  });
+
+  it('should emit events on blur', async () => {
+    const el = await fixture<NileInput>(html`<nile-input></nile-input>`);
+    const input = el.shadowRoot!.querySelector('input')!;
+    setTimeout(() => input.dispatchEvent(new Event('blur')));
+    const event = await oneEvent(el, 'nile-blur');
+    expect(event).to.exist;
+  });
+
+  it('should clear input when clear button is clicked', async () => {
+    const el = await fixture<NileInput>(html`<nile-input clearable value="test"></nile-input>`);
+    const button = el.shadowRoot!.querySelector('.input__clear') as HTMLElement;
+    button.click();
+    expect(el.value).to.equal('');
+  });
+
+  it('should mark non-printable characters on focus', async () => {
+    const el: NileInput = await fixture(html`<nile-input checkNonPrintableChar value="test日本語組版処理の要件"></nile-input>`);
+    const input = el.shadowRoot!.querySelector('input')!;
+    input.focus();
+    await el.updateComplete;
+    expect(el.hasPrintableCharacters).to.be.true;
+  });
+
+  it('should remove non-printable characters', async () => {
+    const el: NileInput = await fixture(html`<nile-input checkNonPrintableChar value="test日本語組版処理の要件"></nile-input>`);
+    const input = el.shadowRoot!.querySelector('input')!;
+    input.focus();
+    await el.updateComplete;
+    expect(el.hasPrintableCharacters).to.be.true;
+    const rem : HTMLElement=el.shadowRoot!.querySelector('.input__remove-non-printable')!;
+    rem.click()
+    await el.updateComplete;
+    expect(el.value).to.equal('test');
+  });
+
+  it('should toggle password visibility', async () => {
+    const el: NileInput = await fixture(html`<nile-input type="password" password-toggle></nile-input>`);
+    const button = el.shadowRoot!.querySelector('.input__password-toggle') as HTMLElement;
+    button.click();
+    expect(el.passwordVisible).to.be.true;
+  });
+
+  // it('should call the formControlController.submit() on Enter key', async () => {
+  //   const el: NileInput = await fixture(html`<nile-input></nile-input>`);
+  //   const input = el.shadowRoot!.querySelector('input')!;
+  //   const submitStub = Sinon.stub(el['formControlController'], 'submit');
+  //   const event = new KeyboardEvent('keydown', { key: 'Enter' });
+  //   input.dispatchEvent(event);
+  //   await el.updateComplete;
+  //   expect(submitStub).to.have.been.calledOnce;
+  // });
+
+  // complex regress scenarios
+  it('should debounce input events', async () => {
+    const el: NileInput = await fixture(html`<nile-input debounce="500"></nile-input>`);
+    const input = el.shadowRoot!.querySelector('input')!;
+    const changeEvent = new Event('input', { bubbles: true, composed: true });
+
+    input.value = 'a';
+    input.dispatchEvent(changeEvent);
+    input.value = 'ab';
+    input.dispatchEvent(changeEvent);
+
+    await aTimeout(100);
+    expect(el.value).to.equal('ab');
+    input.value = 'abc';
+    input.dispatchEvent(changeEvent);
+
+    await aTimeout(600);
+    expect(el.value).to.equal('abc');
+  });
+
+  it('should validate input against a regular expression pattern', async () => {
+    const el: NileInput = await fixture(html`<nile-input pattern="[A-Za-z]{3}"></nile-input>`);
+    const input = el.shadowRoot!.querySelector('input')!;
+    input.value = 'ab';
+    input.dispatchEvent(new Event('input'));
+    expect(el.validity.valid).to.be.false;
+
+    input.value = 'abc';
+    input.dispatchEvent(new Event('input'));
+    expect(el.validity.valid).to.be.true;
+  });
+})

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

@@ -0,0 +1,83 @@
+import { fixture, expect, oneEvent, aTimeout } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import './nile-link';
+import { NileLink } from './nile-link';
+describe('NileLink', () => {
+    it('should render correctly', async () => {
+        const el: NileLink = await fixture(html`<nile-link></nile-link>`);
+        expect(el.shadowRoot).to.exist;
+        expect(el.shadowRoot!.querySelector('.link')).to.exist;
+    });
+
+    it('should handle the disabled attribute', async () => {
+        const el: NileLink = await fixture(html`<nile-link disabled></nile-link>`);
+        const link = el.shadowRoot!.querySelector('.link')!;
+        expect(el.disabled).to.be.true;
+        expect(link.getAttribute('aria-disabled')).to.equal('true');
+        expect(link.getAttribute('tabindex')).to.equal('-1');
+    });
+
+    it('should emit custom events on focus and blur', async () => {
+        const el: NileLink = await fixture(html`<nile-link></nile-link>`);
+        setTimeout(() => el.shadowRoot!.querySelector<HTMLElement>('.link')!.focus());
+        const focusEvent = await oneEvent(el, 'nile-focus');
+        expect(focusEvent).to.exist;
+
+        setTimeout(() => el.shadowRoot!.querySelector<HTMLElement>('.link')!.blur());
+        const blurEvent = await oneEvent(el, 'nile-blur');
+        expect(blurEvent).to.exist;
+    });
+
+    it('should prevent click events when disabled', async () => {
+        const el: NileLink = await fixture(html`<nile-link disabled></nile-link>`);
+        let clicked = false;
+        el.addEventListener('click', () => {
+            clicked = true;
+        });
+
+        el.shadowRoot!.querySelector<HTMLElement>('.link')!.click();
+        await aTimeout(100);
+        expect(clicked).to.be.false;
+    });
+
+    it('should handle button property correctly', async () => {
+        const el: NileLink = await fixture(html`<nile-link button></nile-link>`);
+        const link = el.shadowRoot!.querySelector('.link')!;
+        expect(link.classList.contains('link__button')).to.be.true;
+    });
+
+    it('should have all slots rendered successfully', async () => {
+        const el: NileLink = await fixture(html`<nile-link><span slot="prefix">Prefix</span><span>Label</span><span slot="suffix">Suffix</span></nile-link>`);
+        const prefixSlot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name="prefix"]')!;
+        const labelSlot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])')!;
+        const suffixSlot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name="suffix"]')!;
+        expect(prefixSlot.assignedNodes().length).to.equal(1);
+        expect(labelSlot.assignedNodes().length).to.equal(1);
+        expect(suffixSlot.assignedNodes().length).to.equal(1);
+    });
+
+
+    it('should emit nile-init and nile-destroy events on connected and disconnected', async () => {
+        const el: NileLink = document.createElement('nile-link');
+        let initEvent:any, destroyEvent:any;
+        el.addEventListener('nile-init',(e)=>initEvent=e)
+        el.addEventListener('nile-init',(e)=>destroyEvent=e)
+        document.body.appendChild(el);
+        await el.updateComplete
+        expect(initEvent).to.exist;
+        document.body.removeChild(el);
+        await el.updateComplete
+        expect(destroyEvent).to.exist;
+    });
+
+    it('should reflect properties correctly', async () => {
+        const el: NileLink = await fixture(html`<nile-link></nile-link>`);
+        el.disabled = true;
+        await el.updateComplete;
+        expect(el.hasAttribute('disabled')).to.be.true;
+    
+        el.disabled = false;
+        await el.updateComplete;
+        expect(el.hasAttribute('disabled')).to.be.false;
+    });
+})

package/src/nile-list/index.ts

@@ -0,0 +1 @@
+export { NileList } from './nile-list';

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

@@ -0,0 +1,22 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit-element';
+
+/**
+ * List CSS
+ */
+export const styles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    gap: 9px;
+    padding: 16px;
+  }
+`;
+
+export default [styles];