@aquera/nile-elements 0.0.119 → 0.0.120

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

@@ -0,0 +1,215 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import './nile-radio-group';
+import NileRadioGroup from './nile-radio-group';
+import NileRadio from '../nile-radio/nile-radio';
+import'../nile-radio/nile-radio';
+
+describe('nile-radio-group', () => {
+  it('should render the radio group with radios', async () => {
+    const element = await fixture<NileRadioGroup>(html`
+      <nile-radio-group label="Select an option" name="options" value="2">
+        <nile-radio name="test" value="1" label="Radio 1"></nile-radio>
+        <nile-radio name="test" value="2" label="Radio 2"></nile-radio>
+        <nile-radio name="test" value="3" label="Radio 3"></nile-radio>
+      </nile-radio-group>
+    `);
+
+    const radios = element.querySelectorAll('nile-radio');
+    expect(radios.length).to.equal(3);
+    expect(element.label).to.equal('Select an option');
+  });
+
+  it('should select the correct radio based on value', async () => {
+    const element = await fixture<NileRadioGroup>(html`
+      <nile-radio-group label="Select an option" name="options" value="2">
+        <nile-radio name="test" value="1" label="Radio 1"></nile-radio>
+        <nile-radio name="test" value="2" label="Radio 2"></nile-radio>
+        <nile-radio name="test" value="3" label="Radio 3"></nile-radio>
+      </nile-radio-group>
+    `);
+
+    const selectedRadio = element.querySelector<NileRadio>('nile-radio[value="2"]');
+    expect(selectedRadio?.checked).to.be.true;
+  });
+
+  it('should emit change event when radio selection changes', async () => {
+    const element = await fixture<NileRadioGroup>(html`
+      <nile-radio-group label="Select an option" name="options" value="1">
+        <nile-radio name="test" value="1" label="Radio 1"></nile-radio>
+        <nile-radio name="test" value="2" label="Radio 2"></nile-radio>
+      </nile-radio-group>
+    `);
+
+    let changeEventFired = false;
+    element.addEventListener('change', () => {
+      changeEventFired = true;
+    });
+
+    const secondRadio = element.querySelector<NileRadio>('nile-radio[value="2"]');
+    secondRadio?.click(); // Simulate user clicking the second radio
+    await element.updateComplete;
+
+    expect(changeEventFired).to.be.true;
+    expect(element.value).to.equal('2');
+  });
+
+  it('should handle disabled radios correctly', async () => {
+    const element = await fixture<NileRadioGroup>(html`
+      <nile-radio-group label="Disabled Option" name="options">
+        <nile-radio name="test" value="1"> Radio 1 </nile-radio>
+        <nile-radio name="test" value="2" disabled islabelborder>Radio 2</nile-radio>
+        <nile-radio name="test" value="3" disabled>Radio 3</nile-radio>
+        <nile-radio name="test" value="4">Radio 4</nile-radio>
+      </nile-radio-group>
+    `);
+
+    const disabledRadios = element.querySelectorAll('nile-radio[disabled]');
+    expect(disabledRadios.length).to.equal(2);
+
+    const enabledRadio = element.querySelector<NileRadio>('nile-radio[value="1"]');
+    enabledRadio?.click(); // Simulate clicking the enabled radio
+    await element.updateComplete;
+
+    expect(element.value).to.equal('1'); // Should select the enabled radio
+  });
+
+  it('should not allow selection of disabled radio', async () => {
+    const element = await fixture<NileRadioGroup>(html`
+      <nile-radio-group label="Disabled Option" name="options">
+        <nile-radio name="test" value="1"> Radio 1 </nile-radio>
+        <nile-radio name="test" value="2" disabled>Radio 2</nile-radio>
+        <nile-radio name="test" value="3">Radio 3</nile-radio>
+      </nile-radio-group>
+    `);
+
+    const disabledRadio = element.querySelector<NileRadio>('nile-radio[value="2"]');
+    disabledRadio?.click(); // Attempt to click the disabled radio
+    await element.updateComplete;
+
+    expect(element.value).to.equal(''); // Should not change selection
+  });
+
+  it('should correctly handle the islabelborder property', async () => {
+    const element = await fixture<NileRadioGroup>(html`
+      <nile-radio-group label="Border Option" name="options" islabelborder>
+        <nile-radio name="test" value="1"> Radio 1 </nile-radio>
+        <nile-radio name="test" value="2"> Radio 2 </nile-radio>
+      </nile-radio-group>
+    `);
+
+    const radios = element.querySelectorAll('nile-radio');
+    radios.forEach(radio => {
+      expect(radio.islabelborder).to.be.true; // Ensure islabelborder is set
+    });
+  });
+
+  it('should focus the first radio when the label is clicked', async () => {
+    const element = await fixture<NileRadioGroup>(html`
+      <nile-radio-group label="Focus Test" name="options">
+        <nile-radio name="test" value="1"> Radio 1 </nile-radio>
+        <nile-radio name="test" value="2"> Radio 2 </nile-radio>
+      </nile-radio-group>
+    `);
+
+    const label = element.shadowRoot?.querySelector<HTMLElement>('label');
+    label?.click(); // Simulate clicking the label
+    await element.updateComplete;
+
+    const firstRadio = element.querySelector('nile-radio[value="1"]');
+    expect(document.activeElement).to.equal(firstRadio); // Should focus the first radio
+  });
+
+  it('should set required attribute correctly', async () => {
+    const element = await fixture<NileRadioGroup>(html`
+      <nile-radio-group label="Required Test" name="options" required>
+        <nile-radio name="test" value="1"> Radio 1 </nile-radio>
+        <nile-radio name="test" value="2"> Radio 2 </nile-radio>
+      </nile-radio-group>
+    `);
+
+    const validationInput = element.shadowRoot?.querySelector<HTMLInputElement>('.radio-group__validation-input');
+    expect(validationInput?.required).to.be.true; // Should be marked as required
+  });
+
+  it('should reflect the current value property correctly', async () => {
+    const element = await fixture<NileRadioGroup>(html`
+      <nile-radio-group label="Reflect Test" name="options" value="1">
+        <nile-radio name="test" value="1"> Radio 1 </nile-radio>
+        <nile-radio name="test" value="2"> Radio 2 </nile-radio>
+      </nile-radio-group>
+    `);
+
+    expect(element.value).to.equal('1'); // Check initial value
+    element.value = '2'; // Change value
+    await element.updateComplete;
+
+    expect(element.value).to.equal('2'); // Ensure value reflects the change
+    const selectedRadio = element.querySelector<NileRadio>('nile-radio[value="2"]');
+    expect(selectedRadio?.checked).to.be.true; // Check if the correct radio is selected
+  });
+
+	it('should toggle selection with arrow keys', async () => {
+		const element = await fixture<NileRadioGroup>(html`
+			<nile-radio-group label="Arrow Key Navigation" name="options">
+				<nile-radio name="test" value="1" label="Radio 1"></nile-radio>
+				<nile-radio name="test" value="2" label="Radio 2"></nile-radio>
+				<nile-radio name="test" value="3" label="Radio 3"></nile-radio>
+			</nile-radio-group>
+		`);
+		const slot=element.shadowRoot?.querySelector("fieldset > div > div:nth-child(2) > slot")
+	
+		// Start by selecting the first radio button
+		const firstRadio = element.querySelector<NileRadio>('nile-radio[value="1"]');
+		firstRadio?.click();
+		await element.updateComplete;
+	
+		// Simulate Arrow Right key press
+		const rightEvent = new KeyboardEvent('keydown', { key: 'ArrowRight' });
+		slot?.dispatchEvent(rightEvent);
+		await element.updateComplete;
+	
+		// Check if the second radio is selected
+		const secondRadio = element.querySelector<NileRadio>('nile-radio[value="2"]');
+		expect(secondRadio?.checked).to.be.true;
+	
+		// Simulate Arrow Right key press again
+		slot?.dispatchEvent(rightEvent);
+		await element.updateComplete;
+	
+		// Check if the third radio is selected
+		const thirdRadio = element.querySelector<NileRadio>('nile-radio[value="3"]');
+		expect(thirdRadio?.checked).to.be.true;
+	
+		// Simulate Arrow Left key press
+		const leftEvent = new KeyboardEvent('keydown', { key: 'ArrowLeft' });
+		slot?.dispatchEvent(leftEvent);
+		await element.updateComplete;
+	
+		// Check if the second radio is selected again
+		expect(secondRadio?.checked).to.be.true;
+	
+		// Simulate Arrow Left key press again
+		slot?.dispatchEvent(leftEvent);
+		await element.updateComplete;
+	
+		// Check if the first radio is selected again
+		expect(firstRadio?.checked).to.be.true;
+	
+		// Simulate Arrow Down key press (assuming vertical layout)
+		const downEvent = new KeyboardEvent('keydown', { key: 'ArrowDown' });
+		slot?.dispatchEvent(downEvent);
+		await element.updateComplete;
+	
+		// Check if the second radio is selected again (depending on your layout)
+		expect(secondRadio?.checked).to.be.true;
+	
+		// Simulate Arrow Up key press (assuming vertical layout)
+		const upEvent = new KeyboardEvent('keydown', { key: 'ArrowUp' });
+		slot?.dispatchEvent(upEvent);
+		await element.updateComplete;
+	
+		// Check if the first radio is selected again
+		expect(firstRadio?.checked).to.be.true;
+	});
+	
+});

package/src/nile-radio-group/nile-radio-group.ts

@@ -28,6 +28,8 @@ import type NileRadio from '../nile-radio/nile-radio';
 export class NileRadioGroup extends NileElement {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
   private customValidityMessage = '';
 

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

@@ -0,0 +1,309 @@
+import { expect, fixture, html, oneEvent, elementUpdated } from '@open-wc/testing';
+import './nile-select'; // Assuming the component is registered and imported
+import NileSelect from './nile-select';
+import { NileOption } from '../nile-option';
+import { NileInput } from '../nile-input';
+import '../nile-option/nile-option';
+import '../nile-input/nile-input';
+import '../nile-popup/nile-popup';
+import '../nile-tag/nile-tag';
+import '../nile-checkbox/nile-checkbox';
+
+const wait=(ms:number=50000)=>new Promise(resolve => setTimeout(resolve, ms))
+
+const keyboardEvent = new KeyboardEvent('keydown', {
+  code: 'Enter',
+  key: 'Enter',
+  charCode: 13,
+  keyCode: 13,
+  view: window,
+  bubbles: true
+});
+
+const mouseUpEvent = new MouseEvent("mouseup", {
+  bubbles: true,
+  cancelable: true,
+  view: window
+});
+
+describe('NileSelect Component', () => {
+  
+  it('should render the placeholder when no value is selected', async () => {
+    const el = await fixture<NileSelect>(html`<nile-select placeholder="Select an option..."></nile-select>`);
+    const displayInput = el.shadowRoot?.querySelector<HTMLInputElement>('.select__display-input');
+    expect(displayInput?.placeholder).to.equal('Select an option...');
+  });
+
+  it('should open the dropdown when clicked', async () => {
+    const el = await fixture<NileSelect>(html`
+      <nile-select>
+        <nile-option value="option1">Option 1</nile-option>
+      </nile-select>
+    `);
+
+    const combobox = el.shadowRoot?.querySelector<HTMLElement>("div.select__combobox");
+    combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+    await elementUpdated(el);
+
+    const popup = el.shadowRoot?.querySelector('.select');
+    expect(popup?.classList.contains('select--open')).to.be.true;
+  });
+
+  it('should close the dropdown when clicked again', async () => {
+    const el = await fixture<NileSelect>(html`
+      <nile-select>
+        <nile-option value="option1">Option 1</nile-option>
+      </nile-select>
+    `);
+
+    const combobox = el.shadowRoot?.querySelector<HTMLElement>("div.select__combobox");
+
+    // Open dropdown first
+    combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+    await elementUpdated(el);
+    expect(el.open).to.be.true;
+
+    // Click again to close dropdown
+    combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+    await elementUpdated(el);
+    expect(el.open).to.be.false;
+  });
+
+  it('should update the display label when an option is selected', async () => {
+    const el = await fixture<NileSelect>(html`
+      <nile-select>
+        <nile-option value="option1">Option 1</nile-option>
+        <nile-option value="option2">Option 2</nile-option>
+      </nile-select>
+    `);
+
+    const combobox = el.shadowRoot?.querySelector<HTMLElement>("div.select__combobox");
+    combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+    await elementUpdated(el);
+
+    // Select the first option
+    const option1 = el.querySelector<NileOption>('nile-option[value="option1"]');
+    option1?.dispatchEvent(mouseUpEvent);
+    await elementUpdated(el);
+
+    const displayInput = el.shadowRoot?.querySelector<HTMLInputElement>('.select__display-input');
+    expect(displayInput?.value).to.equal('Option 1');
+  });
+
+  it('should handle multi-select and show selected tags', async () => {
+    const el = await fixture<NileSelect>(html`
+      <nile-select multiple>
+        <nile-option value="option1">Option 1</nile-option>
+        <nile-option value="option2">Option 2</nile-option>
+        <nile-option value="option3">Option 3</nile-option>
+      </nile-select>
+    `);
+
+    const combobox = el.shadowRoot?.querySelector<HTMLElement>("div.select__combobox");
+    combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+    await elementUpdated(el);
+
+    // Select multiple options
+    const option1 = el.querySelector<NileOption>('nile-option[value="option1"]');
+    const option2 = el.querySelector<NileOption>('nile-option[value="option2"]');
+    
+    option1?.dispatchEvent(mouseUpEvent);
+    option2?.dispatchEvent(mouseUpEvent);
+    await elementUpdated(el);
+
+    // Check if the tags are displayed
+    const tags = el.shadowRoot?.querySelectorAll('nile-tag');
+    expect(tags?.length).to.equal(2);
+    expect(tags?.[0].textContent?.trim()).to.equal('Option 1');
+    expect(tags?.[1].textContent?.trim()).to.equal('Option 2');
+  });
+
+  it('should clear selected value when clear button is clicked', async () => {
+    const el = await fixture<NileSelect>(html`
+      <nile-select clearable>
+        <nile-option value="option1">Option 1</nile-option>
+      </nile-select>
+    `);
+
+    const combobox = el.shadowRoot?.querySelector<HTMLElement>("div.select__combobox");
+    combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+    await elementUpdated(el);
+
+    // Select an option
+    const option1 = el.querySelector<NileOption>('nile-option[value="option1"]');
+    option1?.click();
+    await elementUpdated(el);
+
+    // Clear the selected value
+    const clearButton = el.shadowRoot?.querySelector<HTMLButtonElement>('.select__clear');
+    clearButton?.click();
+    await elementUpdated(el);
+
+    const displayInput = el.shadowRoot?.querySelector<HTMLInputElement>('.select__display-input');
+    expect(displayInput?.value).to.be.empty;
+  });
+
+  it('should emit nile-change event when value changes', async () => {
+    const el = await fixture<NileSelect>(html`
+      <nile-select>
+        <nile-option value="option1">Option 1</nile-option>
+        <nile-option value="option2">Option 2</nile-option>
+      </nile-select>
+    `);
+
+    const listener = oneEvent(el, 'nile-change');
+    const combobox = el.shadowRoot?.querySelector<HTMLElement>("div.select__combobox");
+    combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+    await elementUpdated(el);
+
+    const option1 = el.querySelector<NileOption>('nile-option[value="option1"]');
+    option1?.dispatchEvent(mouseUpEvent);
+    
+    const event = await listener;
+    expect(event.detail.value).to.equal('option1');
+  });
+
+  it('should not open when disabled', async () => {
+    const el = await fixture<NileSelect>(html`
+      <nile-select disabled>
+        <nile-option value="option1">Option 1</nile-option>
+      </nile-select>
+    `);
+
+    const combobox = el.shadowRoot?.querySelector<HTMLElement>("div.select__combobox");
+    combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+    await elementUpdated(el);
+
+    const popup = el.shadowRoot?.querySelector('.select');
+    expect(popup?.classList.contains('select--open')).to.be.false;
+  });
+
+  it('should display the search bar if searchEnabled is true', async () => {
+    const el = await fixture<NileSelect>(html`
+      <nile-select searchEnabled>
+        <nile-option value="option1">Option 1</nile-option>
+        <nile-option value="option2">Option 2</nile-option>
+      </nile-select>
+    `);
+
+    const combobox = el.shadowRoot?.querySelector<HTMLElement>("div.select__combobox");
+    combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+    await elementUpdated(el);
+
+    const searchBar = el.shadowRoot?.querySelector('.select__search');
+    expect(searchBar).to.exist;
+  });
+
+  it('should show "No results found" when searching for an invalid query', async () => {
+    const el = await fixture<NileSelect>(html`
+      <nile-select searchEnabled>
+        <nile-option value="option1">Option 1</nile-option>
+        <nile-option value="option2">Option 2</nile-option>
+      </nile-select>
+    `);
+
+    const combobox = el.shadowRoot?.querySelector<HTMLElement>('.select__combobox');
+    combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+    await elementUpdated(el);
+
+    // Simulate typing an invalid search query
+    const searchInput = el.shadowRoot?.querySelector<NileInput>('.select__search nile-input');
+    if (searchInput) {
+      searchInput.value = 'invalid';
+      searchInput.dispatchEvent(new CustomEvent('nile-input',{detail:{value:'invalid'}}));
+    }
+    await elementUpdated(el);
+
+    const noResultsMessage = el.shadowRoot?.querySelector('.select__no-results');
+    expect(noResultsMessage).to.exist;
+    expect(noResultsMessage?.textContent?.trim()).to.equal('No results found');
+  });
+
+
+  it('should allow selecting multiple options, display the selected count, and clear selections when clear button is clicked', async () => {
+    const el = await fixture<NileSelect>(html`
+      <nile-select multiple clearable>
+        <nile-option value="1">Option 1</nile-option>
+        <nile-option value="2">Option 2</nile-option>
+        <nile-option value="3">Option 3</nile-option>
+      </nile-select>
+    `);
+
+    const combobox = el.shadowRoot?.querySelector<HTMLElement>('.select__combobox');
+    const options = el.querySelectorAll('nile-option');
+    const displayInput = el.shadowRoot?.querySelector<NileInput>('.select__display-input');
+
+    // Open the dropdown
+    combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+    await el.updateComplete;
+
+    // Select the first two options
+    options[0].dispatchEvent(mouseUpEvent);
+    options[1].dispatchEvent(mouseUpEvent);
+    await el.updateComplete;
+
+    // Verify the display label reflects the number of selected options
+    expect(displayInput?.value).to.equal('2 selected');
+
+    // Check that the clearable button is visible
+    const clearButton = el.shadowRoot?.querySelector<HTMLElement>('.select__clear');
+    console.log(clearButton)
+    expect(clearButton).to.exist;
+
+    // Click the clear button
+    clearButton?.click();
+    await el.updateComplete;
+
+    // Verify the display label is cleared and placeholder is shown
+    expect(displayInput?.value).to.equal('');
+
+    // Verify that no options are selected
+    expect(Array.from(options).every(option => !option.selected)).to.be.true;
+  });
+
+  it('should allow selecting multiple options, clearing selections, and handling backspace to deselect the last selected option', async () => {
+    const el = await fixture<NileSelect>(html`
+      <nile-select multiple clearable>
+        <nile-option value="option1">Option 1</nile-option>
+        <nile-option value="option2">Option 2</nile-option>
+        <nile-option value="option3">Option 3</nile-option>
+      </nile-select>
+    `);
+
+    const combobox = el.shadowRoot?.querySelector<HTMLElement>('div.select__combobox');
+    const options = el.querySelectorAll('nile-option');
+    const displayInput = el.shadowRoot?.querySelector<NileInput>('.select__display-input');
+    const clearButton = el.shadowRoot?.querySelector<HTMLButtonElement>('.select__clear');
+
+    // Open the dropdown and select three options
+    combobox?.click();
+    await el.updateComplete;
+    
+    options[0].dispatchEvent(mouseUpEvent);
+    options[1].dispatchEvent(mouseUpEvent);
+    options[2].dispatchEvent(mouseUpEvent);
+    await el.updateComplete;
+
+    // Verify that three options are selected
+    expect(displayInput?.value).to.equal('3 selected');
+    expect(Array.from(options).every(option => option.selected)).to.be.true;
+
+    // // Reopen dropdown, select three options again
+    // combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+    // await el.updateComplete;
+
+    // options[0].dispatchEvent(mouseUpEvent);
+    // options[1].dispatchEvent(mouseUpEvent);
+    options[2].dispatchEvent(mouseUpEvent);
+    await el.updateComplete;
+
+    // Verify only the first two options are selected
+    expect(options[0].selected).to.be.true;
+    expect(options[1].selected).to.be.true;
+    expect(options[2].selected).to.be.false;
+
+    // Verify display label reflects two selected options
+    expect(displayInput?.value).to.equal('2 selected');
+  });
+
+});

package/src/nile-select/nile-select.ts

@@ -97,6 +97,8 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 export class NileSelect extends NileElement implements NileFormControl {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   // protected override BUBBLES=false;
 
   private readonly formControlController = new FormControlController(this, {
@@ -397,41 +399,6 @@ export class NileSelect extends NileElement implements NileFormControl {
       return;
     }
 
-    // Navigate options
-    if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
-      const allOptions = this.getAllOptions();
-      const currentIndex = allOptions.indexOf(this.currentOption);
-      let newIndex = Math.max(0, currentIndex);
-
-      // Prevent scrolling
-      event.preventDefault();
-
-      // Open it
-      if (!this.open) {
-        this.show();
-
-        // If an option is already selected, stop here because we want that one to remain highlighted when the listbox
-        // opens for the first time
-        if (this.currentOption) {
-          return;
-        }
-      }
-
-      if (event.key === 'ArrowDown') {
-        newIndex = currentIndex + 1;
-        if (newIndex > allOptions.length - 1) newIndex = 0;
-      } else if (event.key === 'ArrowUp') {
-        newIndex = currentIndex - 1;
-        if (newIndex < 0) newIndex = allOptions.length - 1;
-      } else if (event.key === 'Home') {
-        newIndex = 0;
-      } else if (event.key === 'End') {
-        newIndex = allOptions.length - 1;
-      }
-
-      this.setCurrentOption(allOptions[newIndex]);
-    }
-
     // All other "printable" keys trigger type to select
     if (event.key.length === 1 || event.key === 'Backspace') {
       const allOptions = this.getAllOptions();
@@ -1255,9 +1222,11 @@ export class NileSelect extends NileElement implements NileFormControl {
                       clearable
                       .value=${this.searchValue}
                       placeholder="${this.internalSearchPlaceHolder}"
-                      @nile-input=${this.handleSearchChange}
-                      @nile-focus=${this.handleSearchFocus}
-                      @nile-change="${this.onInputChange}"
+                      @nile-focus="${(e:CustomEvent)=>{this.handleSearchFocus();this.emit('nile-focus',e.detail)}}"
+                      @nile-blur="${(e:CustomEvent)=>{this.emit('nile-blur',e.detail)}}"
+                      @nile-change="${(e:CustomEvent)=>{this.onInputChange(e);this.emit('nile-change',e.detail)}}"
+                      @nile-input="${(e:CustomEvent)=>{this.handleSearchChange(e);this.emit('nile-input',e.detail)}}"
+                      @nile-clear=${(e:CustomEvent)=>this.emit('nile-clear',e.detail)}
                     >
                       <nile-icon name="search" slot="suffix"> </nile-icon>
                     </nile-input>

package/src/nile-slide-toggle/nile-slide-toggle.ts

@@ -8,15 +8,17 @@ import { classMap } from 'lit/directives/class-map.js';
 export class NileSlideToggle extends NileElement {
   public static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   @property({ type: String }) label = '';
 
   @property({ type: String }) sublabel = '';
 
-  @property({ type: String, attribute:'text-position' }) textPosition:'left' | 'right' = 'right';
+  @property({ type: String, }) textPosition:'left' | 'right' = 'right';
 
   @property({ type: Boolean, reflect: true }) isChecked = false;
 
-  @property({ type: Boolean, reflect: true, attribute:'full-width' }) fullWidth = false;
+  @property({ type: Boolean, reflect: true }) fullWidth = false;
 
   @property({ type: Boolean, reflect: true }) disabled = false;
 

package/src/nile-split-panel/nile-split-panel.test.ts

@@ -0,0 +1,7 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import './nile-split-panel'
+import NileSplitPanel from './nile-split-panel';
+
+describe('NileSplitPanel',()=>{
+	
+})

package/src/nile-split-panel/nile-split-panel.ts

@@ -43,6 +43,8 @@ export class NileSplitPanel extends NileElement {
 
 	static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   private cachedPositionInPixels: number;
   private resizeObserver: ResizeObserver;
   private size: number;