@aquera/nile-elements 0.0.121 → 0.0.122

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

@@ -21,10 +21,10 @@ function wait(ms:number=50000) {
 }
 
 describe('NileCalendar', () => {
-  // it('renders correctly with default properties', async () => {
-  //   const el = await fixture<NileCalendar>(html`<nile-calendar></nile-calendar>`);
-  //   expect(el).shadowDom.to.equalSnapshot();
-  // });
+  it('renders correctly with default properties', async () => {
+    const el = await fixture<NileCalendar>(html`<nile-calendar></nile-calendar>`);
+    expect(el).shadowDom.to.equalSnapshot();
+  });
   
   it('should render correctly', async () => {
     const el = await fixture<NileCalendar>(html`<nile-calendar></nile-calendar>`);
@@ -306,7 +306,7 @@ describe('NileCalendar', () => {
     const durationInput = el.shadowRoot?.querySelector<NileInput>('nile-input.duration-input');
     
     if (durationInput) {
-      durationInput.dispatchEvent(new CustomEvent('nile-input',{detail:{value:'5'}}));// Set duration to 5 (e.g., 5 hours)
+      durationInput.dispatchEvent(new CustomEvent('nile-change',{detail:{value:'5'}}));// Set duration to 5 (e.g., 5 hours)
     }
 
     await elementUpdated(el); // Wait for the DOM to update after the input
@@ -338,5 +338,64 @@ describe('NileCalendar', () => {
     // Check if the emitted endDate is approximately now
     expect(endDate.getTime()).to.be.closeTo(now.getTime(), 1000); // The end date should be roughly now
   });
+
+  it('should allow deselection of date on clicking again on selected date', async () => {
+    const el = await fixture<NileCalendar>(html`
+      <nile-calendar showManualInput doubleClickUnselect></nile-calendar>
+    `);
+    await elementUpdated(el);
+    
+    // Get the current date element in the calendar
+    const currentDateElement = el.shadowRoot?.querySelector('div.days_container div.current__date__dot')?.parentElement?.parentElement;
+  
+    // Simulate a click on the current date after a brief timeout
+    setTimeout(() => currentDateElement?.click());
+  
+    // Wait for the 'nile-change' event to be emitted
+    const { detail: { value } } = await oneEvent(el, 'nile-change');
+  
+    // Update the element after the event
+    await elementUpdated(el);
+  
+    // Assertions
+    expect(value).to.exist;
+    expect(currentDateElement?.className).to.include('selected-date');
+
+    // Simulate a click on the current date after a brief timeout
+    currentDateElement?.click()
+    await elementUpdated(el);
+    
+    expect(currentDateElement?.className).to.not.include('selected-date');
+  })
+
+  it('should allow deselection of range on clicking on clear button', async () => {
+    const el = await fixture<NileCalendar>(html`
+      <nile-calendar range allowClear></nile-calendar>
+    `);
+    await elementUpdated(el);
+  
+    // Get day elements from the calendar, selecting two dates for range selection
+    const days = el.shadowRoot?.querySelectorAll('.days_container .day_date:not(.filler)') || [];
+    const firstDay = days[4] as HTMLElement;  // Choose the 5th day of the month
+    const lastDay = days[9] as HTMLElement;  // Choose the 10th day of the month
+
+    // Simulate click events for selecting the range (start and end date)
+    firstDay.click();
+    await elementUpdated(el); // Wait for updates after selection
+    lastDay.click();
+    await elementUpdated(el); // Wait for updates after range selection
+
+    // Ensure both dates are correctly selected in the DOM
+    expect(firstDay.classList.contains('range-start')).to.be.true;
+    expect(lastDay.classList.contains('range-end')).to.be.true;
+
+    // Find and click the "Apply" button to confirm the range
+    const clearButton = el.shadowRoot?.querySelector<NileButton>('.clear-button');
+    clearButton?.click()
+    await elementUpdated(el); // Wait for updates after range selection
+    
+    expect(firstDay.classList.contains('range-start')).to.be.false;
+    expect(lastDay.classList.contains('range-end')).to.be.false;
+  })
 });
 

package/src/nile-calendar/nile-calendar.ts

@@ -37,7 +37,6 @@ export class NileCalendar extends NileElement {
     return [styles];
   }
 
-  protected override BUBBLES: boolean=false;
 
 
   @property({ type: String, attribute: 'value' }) valueAttribute: | string | null = null;
@@ -166,7 +165,7 @@ export class NileCalendar extends NileElement {
           ${this.allowClear?
             html`
             <nile-button 
-            class="apply-button"
+            class="clear-button"
             variant="secondary"
             ?disabled="${ !this.startDate || !this.endDate }"
             @click="${this.clearDate}"
@@ -580,7 +579,7 @@ export class NileCalendar extends NileElement {
     }
   }
 
-  handleUnitChange(event: any) {
+  handleUnitChange(event: CustomEvent) {
     event.stopPropagation()
     this.selectedUnit = event.detail.value;
     if (this.selectedUnit && this.selectedValue) {
@@ -678,63 +677,6 @@ export class NileCalendar extends NileElement {
     return regex.test(input);
   }
 
-  private handleStartDateInput(event: CustomEvent): void {
-    const date = this.parseDate(event.detail.value);
-    if (!this.isValidDateInput(date)) {
-      this.startDate = null;
-    }
-    if (date && (!this.endDate || date <= this.endDate)) {
-      this.startDate = date;
-    } else {
-      this.startDate = null;
-      this.endDate = null;
-    }
-  }
-
-  private handleEndDateInput(event: CustomEvent): void {
-    const date = this.parseDate(event.detail.value);
-    if (!this.isValidDateInput(date)) {
-      this.endDate = null;
-    }
-    if (date && (!this.startDate || date >= this.startDate)) {
-      this.endDate = date;
-    } else {
-      this.endDate = null;
-    }
-  }
-  
-  private isValidDateInput(input: any): boolean {
-    const regex = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/;
-    return regex.test(input);
-  }
-
-  private parseDate(dateString: string): Date | null {
-    const [day, month, year] = dateString.split('/').map(Number);
-    const date = new Date(year, month - 1, day);
-    return !isNaN(date.getTime()) ? date : null;
-  }
-
-  private formatDateRange(value: {
-    startDate: Date | null;
-    endDate: Date | null;
-  }): string {
-    if (!value) {
-      return value;
-    }
-    if (!value.startDate || !value.endDate) return '';
-    return `${this.formatDate(value.startDate)} - ${this.formatDate(
-      value.endDate
-    )}`;
-  }
-
-  private formatDate(date: Date | null): string {
-    if (!date) return '';
-    const day = String(date.getDate()).padStart(2, '0');
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const year = date.getFullYear();
-    return `${day}/${month}/${year}`;
-  }
-
   private formatTime(date: Date | null): string {
     if (!date) return '';
     const hours = String(date.getHours()).padStart(2, '0');
@@ -769,15 +711,6 @@ export class NileCalendar extends NileElement {
     });
   }
 
-  convertTZ(date: Date, tzString: any) {
-    return new Date(
-      (typeof date === 'string' ? new Date(date) : date).toLocaleString(
-        'en-US',
-        { timeZone: tzString }
-      )
-    );
-  }
-
   onTypeChange(event: CustomEvent) {
     this.type = event.detail.value;
     this.emit('nile-type-change', { value: this.type })

package/src/nile-card/nile-card.ts

@@ -29,8 +29,6 @@ import { CSSResultGroup } from 'lit';
 export class NileCard extends NileElements {
   static styles: CSSResultGroup = styles;
 
-  protected override BUBBLES: boolean=false;
-
   private readonly hasSlotController = new HasSlotController(this, 'footer');
 
   render() {

package/src/nile-checkbox/nile-checkbox.ts

@@ -59,8 +59,6 @@ export class NileCheckbox extends NileElement {
   }
  
   static styles: CSSResultGroup = styles;
-
-  protected override BUBBLES: boolean=false;
  
   @query('input[type="checkbox"]') input: HTMLInputElement;
  

package/src/nile-chip/nile-chip.ts

@@ -28,8 +28,6 @@ export class NileChip extends NileElement {
   public static get styles(): CSSResultArray {
     return [styles];
   }
-  
-  protected override BUBBLES: boolean=false;
 
   private readonly hasSlotController = new HasSlotController(
     this,
@@ -261,10 +259,6 @@ export class NileChip extends NileElement {
           )}
           <div class="nile-chip__auto-complete">
             <nile-auto-complete
-              @nile-show="${(e:CustomEvent)=>this.emit('nile-show')}"
-              @nile-after-show="${(e:CustomEvent)=>this.emit('nile-after-show')}"
-              @nile-hide="${(e:CustomEvent)=>this.emit('nile-hide')}"
-              @nile-after-hide="${(e:CustomEvent)=>this.emit('nile-after-hide')}"
               .allMenuItems=${this.filteredAutoCompleteOptions}
               .value=${this.inputValue}
               ?isDropdownOpen=${this.isDropdownOpen}

package/src/nile-code-editor/nile-code-editor.ts

@@ -48,8 +48,6 @@ const TIME_OUT_DURATION=200;
  */
 @customElement('nile-code-editor')
 export class NileCodeEditor extends NileElement {
-
-  protected override BUBBLES: boolean=false;
   
   @query('.code-mirror') codeEditor: HTMLInputElement;
 

package/src/nile-content-editor/nile-content-editor.ts

@@ -31,8 +31,6 @@ export class NileContentEditor extends NileElement {
  * @event nile-change - Emitted when the control's value changes.  
  */
 
-  protected override BUBBLES: boolean=false;
-
   @property() value: string = '';
 
   @property() options: Array<any>;

package/src/nile-date-picker/nile-date-picker.ts

@@ -33,8 +33,6 @@ export class NileDatePicker extends NileElement {
     return [styles];
   }
 
-  protected override BUBBLES: boolean=false;
-
   @property({ type: Boolean }) range = false;
 
   @property({ type: Boolean }) hideTypes = false;
@@ -66,27 +64,20 @@ export class NileDatePicker extends NileElement {
    */
   render(): TemplateResult {
     return html`
-      <nile-dropdown 
-        .open="${this.open}" 
-        part="dd-base" 
-        .hoist="${true}" 
-        distance="6" 
-        exportparts="base"
-        @nile-show="${(e:CustomEvent)=>this.emit('nile-show')}"
-        @nile-after-show="${(e:CustomEvent)=>this.emit('nile-after-show')}"
-        @nile-hide="${(e:CustomEvent)=>this.emit('nile-hide')}"
-        @nile-after-hide="${(e:CustomEvent)=>this.emit('nile-after-hide')}"
-      >
+      <nile-dropdown .open="${this.open}" part="dd-base" .hoist="${true}" distance="6" exportparts="base">
         <slot slot="trigger" part="trigger" name="trigger"></slot>
         <nile-calendar
           .hideTypes="${this.hideTypes}"
         	.type="${this.type}"
           value="${this.value}"
           .range="${this.range}"
-          @nile-clear="${(e:CustomEvent)=>this.emit('nile-clear')}"
+          @nile-init="${(e:CustomEvent)=>e.stopPropagation()}"
+          @nile-destroy="${(e:CustomEvent)=>e.stopPropagation()}"
+          @nile-changed="${(e:CustomEvent)=>e.stopPropagation()}"
           @nile-change="${this.handleChanged}"
-          @nile-type-change="${(e:CustomEvent)=>this.emit('nile-type-change',e.detail)}"
           .allowedDates="${this.allowedDates}"
+          @nile-type-change="${(e:CustomEvent)=>{e.stopPropagation();this.emit('nile-type-change',e.detail)}}"
+          @nile-clear="${(e:CustomEvent)=>{e.stopPropagation();this.emit('nile-clear')}}"
           .hideDurationFields="${this.hideDurationFields}"
           .showManualInputs="${this.showManualInputs}"
           .doubleClickUnselect="${this.doubleClickUnselect}"
@@ -97,6 +88,7 @@ export class NileDatePicker extends NileElement {
   }
 
   handleChanged(event: CustomEvent) {
+    event.stopPropagation()
     this.emit('nile-changed', event.detail);
     this.emit('nile-change', event.detail);
     if (this.dropdown) {

package/src/nile-dialog/nile-dialog.ts

@@ -32,8 +32,6 @@ import NileElement from '../internal/nile-element';
 export class NileDialog extends NileElement {
   static styles: CSSResultGroup = styles;
 
-  protected override BUBBLES: boolean=false;
-  
   private readonly hasSlotController = new HasSlotController(this, 'footer','sublabel','label');
   private modal: Modal;
   private originalTrigger: HTMLElement | null;

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

@@ -81,8 +81,6 @@ export class NileDrawer extends NileElement {
 
 	static styles: CSSResultGroup = styles;
 
-  protected override BUBBLES: boolean=false;
-
   private readonly hasSlotController = new HasSlotController(this, 'footer');
   private modal: Modal;
   private originalTrigger: HTMLElement | null;

package/src/nile-empty-state/nile-empty-state.ts

@@ -28,8 +28,6 @@ export class NileEmptyState extends NileElement {
     return [styles];
   }
 
-  protected override BUBBLES: boolean=false;
-
   @property() size: 'sm' | 'md' | 'lg' = 'md';
 
   @property() variant:

package/src/nile-form-help-text/nile-form-help-text.test.ts

@@ -0,0 +1,86 @@
+import { fixture, expect, html } from '@open-wc/testing';
+import './nile-form-help-text';
+import { NileFormHelpText } from './nile-form-help-text';
+
+const wait = (ms: number = 50000) => new Promise(resolve => setTimeout(resolve, ms))
+
+describe('NileFormHelpText', () => {
+  it('should render with default properties', async () => {
+    const el: NileFormHelpText = await fixture(html`<nile-form-help-text></nile-form-help-text>`);
+    
+    // Check if the displayed text is empty initially (no content in slot)
+    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()
+    expect(textContent).to.equal('...');
+  });
+
+  it('should truncate the text if it exceeds textLimit and show "View More" button', async () => {
+    const longText = "This is a very long help text that should be truncated and should show a 'View More' button.";
+    const el: NileFormHelpText = await fixture(html`<nile-form-help-text><span>${longText}</span></nile-form-help-text>`);
+    
+    // Check if the displayed text is truncated
+    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()
+    expect(textContent?.endsWith('...')).to.be.true;
+    
+    // Check if the "View More" button is visible
+    const moreButton = el.shadowRoot!.querySelector('.nile-form-help-text__more-button');
+    expect(moreButton).to.exist;
+    expect(moreButton?.textContent).to.include('View More');
+  });
+
+  it('should expand to show full text when "View More" is clicked', async () => {
+    const longText = "This is a very long help text that should be truncated and should show a 'View More' button.";
+    const el: NileFormHelpText = await fixture(html`<nile-form-help-text><span>${longText}</span></nile-form-help-text>`);
+    
+    // Simulate clicking the "View More" button
+    const moreButton = el.shadowRoot!.querySelector<HTMLElement>('.nile-form-help-text__more-button');
+    moreButton?.click();
+    await el.updateComplete;
+
+    // Verify that the full text is displayed
+    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()
+    expect(textContent).to.equal(longText);
+    
+    // Check if the "View Less" button is now visible
+    const lessButton = el.shadowRoot!.querySelector('.nile-form-help-text__more-button');
+    expect(lessButton).to.exist;
+    expect(lessButton?.textContent).to.include('View Less');
+  });
+
+  it('should collapse back to truncated text when "View Less" is clicked', async () => {
+    const longText = "This is a very long help text that should be truncated and should show a 'View More' button.";
+    const el: NileFormHelpText = await fixture(html`<nile-form-help-text><span>${longText}</span></nile-form-help-text>`);
+    
+    // Expand the text
+    const moreButton = el.shadowRoot!.querySelector<HTMLElement>('.nile-form-help-text__more-button');
+    moreButton?.click();
+    await el.updateComplete;
+
+    // Collapse the text by clicking "View Less"
+    const lessButton = el.shadowRoot!.querySelector<HTMLElement>('.nile-form-help-text__more-button');
+    lessButton?.click();
+    await el.updateComplete;
+
+    // Verify that the text is truncated again
+    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()
+    expect(textContent?.endsWith('...')).to.be.true;
+    
+    // Check if the "View More" button is visible again
+    const viewMoreButton = el.shadowRoot!.querySelector('.nile-form-help-text__more-button');
+    expect(viewMoreButton).to.exist;
+    expect(viewMoreButton?.textContent).to.include('View More');
+  });
+
+  it('should not show "View More" button when text is within limit', async () => {
+    const shortText = "Short help text.";
+    const el: NileFormHelpText = await fixture(html`<nile-form-help-text><span>${shortText}</span></nile-form-help-text>`);
+    
+    // Check if the displayed text is not truncated
+    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()
+    expect(textContent).to.equal(shortText+'...');
+
+    // Verify that "View More" button is not rendered
+    const moreButton = el.shadowRoot!.querySelector('.nile-form-help-text__more-button');
+    expect(moreButton).to.be.null;
+  });
+
+});

package/src/nile-form-help-text/nile-form-help-text.ts

@@ -25,24 +25,21 @@ export class NileFormHelpText extends LitElement {
     return [styles];
   }
 
+  @property({ type: Boolean, reflect: true  }) isExpanded: boolean = false;
 
-  @property({ type: Boolean, reflect: true  })
-  isExpanded: boolean = false;
+  @property({ type: String, reflect: true  }) fullText: string = '';
 
-  @property({ type: String, reflect: true  })
-  fullText: string = '';
+  @property({ type: Number, reflect: true  }) textLimit: number = 47;
 
-  @property({ type: String, reflect: true  })
-  displayedText: string = '';
+  @property({ type: String, reflect: true  }) displayedText: string = '';
 
-  @query('slot')
-  slotElement!: HTMLSlotElement;
+  @query('slot') slotElement!: HTMLSlotElement;
 
   connectedCallback() {
     super.connectedCallback();
     requestAnimationFrame(() => {
       this.slotElement?.addEventListener('slotchange', this.handleSlotChange.bind(this));
-  });
+    });
   }
 
   firstUpdated() {
@@ -52,13 +49,17 @@ export class NileFormHelpText extends LitElement {
   handleSlotChange() {
     const nodes = this.slotElement.assignedNodes({flatten: true});
     const textContent = nodes.map(node => node.textContent).join('');
-    this.fullText = textContent;
-    this.displayedText = textContent.length > 50 ? `${textContent.substring(0, 47)}...` : textContent;
+    this.fullText = textContent.trim();
+    this.updateDisplayedText()
   }
 
   toggleExpanded() {
     this.isExpanded = !this.isExpanded;
-    this.displayedText = this.isExpanded ? this.fullText : `${this.fullText.substring(0, 47)}...`;
+    this.updateDisplayedText()
+  }
+
+  updateDisplayedText(){
+    this.displayedText = this.isExpanded ? this.fullText : `${this.fullText.substring(0, this.textLimit)}...`;
   }
 
   /* #endregion */
@@ -70,13 +71,14 @@ export class NileFormHelpText extends LitElement {
    * @slot This is a slot test
    */
   public render(): TemplateResult {
-    const showMoreButton = this.fullText.length > 50;
+    const showMoreButton = this.fullText.length > this.textLimit+3;
     const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';
 
     return html`
     <div class="nile-form-help-text" part="container">
-      <slot hidden></slot>
-      <div part="text">${this.displayedText}
+      <slot hidden>${this.fullText}</slot>
+      <div part="text">
+        <span>${this.displayedText}</span>
         ${showMoreButton ? html`
           <span
             class="nile-form-help-text__more-button"

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

@@ -44,8 +44,6 @@ import NileElement from '../internal/nile-element';
 export class NileIconButton extends NileElement {
   static styles: CSSResultGroup = styles;
 
-  protected override BUBBLES: boolean=false;
-
   @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;
 
   @state() private hasFocus = false;

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

@@ -37,8 +37,6 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 export class NileInput extends NileElement implements NileFormControl {
   static styles: CSSResultGroup = styles;
 
-  protected override BUBBLES: boolean=false;
-
   private readonly formControlController = new FormControlController(this, {
     assumeInteractionOn: ['nile-blur', 'nile-input'],
   });

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

@@ -30,8 +30,6 @@ export class NileLink extends NileElement {
     return [styles];
   }
 
-  protected override BUBBLES: boolean=false;
-
   private readonly hasSlotController = new HasSlotController(
     this,
     '[default]',

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

@@ -32,8 +32,6 @@ export class NileList extends NileElement {
     return [styles];
   }
 
-  protected override BUBBLES: boolean=false;
-
   /* #endregion */
 
   /* #region Methods */

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

@@ -40,8 +40,6 @@ export class NileListItem extends NileElement {
   public static get styles(): CSSResultArray {
     return [styles];
   }
-
-  protected override BUBBLES: boolean=false;
   @property({ type: String, attribute: 'icon-name' }) iconName = '';
   @property({ type: Number, attribute: 'icon-size' }) iconSize = 14;
 

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

@@ -42,4 +42,10 @@ describe('NileLoader', () => {
     const loaderDiv = el.shadowRoot!.querySelector('.nile-loader__v1');
     expect(loaderDiv?.getAttribute('style')).to.contain('margin: 10px');
   });
+  
+  it('should render the v3 variant', async () => {
+    const el: NileLoader = await fixture(html`<nile-loader variant="v3"></nile-loader>`);
+    const variantV3 = el.shadowRoot!.querySelector('.nile-loader__v3');
+    expect(variantV3).to.exist;
+  });
 })

package/src/nile-menu/nile-menu.ts

@@ -23,9 +23,6 @@ import { HasSlotController } from '../internal/slot';
 @customElement('nile-menu')
 export class NileMenu extends NileElement {
   static styles: CSSResultGroup = styles;
-
-  protected override BUBBLES: boolean=false;
-  
   @state() searchValue: string = '';
   @state() searchWidth: number = 0;
 
@@ -210,9 +207,6 @@ export class NileMenu extends NileElement {
               @nile-input=${this.handleSearchChange}
               part="menu__input"
               clearable
-              @nile-input=${(e:CustomEvent)=>this.emit('nile-input',e.detail)}
-              @nile-change=${(e:CustomEvent)=>this.emit('nile-change',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-menu-item/nile-menu-item.ts

@@ -48,9 +48,6 @@ import type { CSSResultGroup } from 'lit';
 export class NileMenuItem extends NileElement {
   static styles: CSSResultGroup = styles;
 
-  protected override BUBBLES: boolean=false;
-  protected override COMPOSED: boolean=false;
-
   private cachedTextLabel: string;
 
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;

package/src/nile-option/nile-option.ts

@@ -44,9 +44,6 @@ import '../nile-checkbox';
 export class NileOption extends NileElement {
   static styles: CSSResultGroup = styles;
 
-  protected override BUBBLES: boolean=false;
-  protected override COMPOSED: boolean=false;
-
   private cachedTextLabel: string;
 
   @query('.option__label') defaultSlot: HTMLSlotElement;

package/src/nile-popover/nile-popover.ts

@@ -34,8 +34,6 @@ export class NilePopover extends NileElement {
     return [styles];
   }
 
-  protected override BUBBLES: boolean=false;
-
   /**
    * The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip
    * inside of the viewport.

package/src/nile-popup/nile-popup.ts

@@ -25,9 +25,6 @@ import type { CSSResultGroup } from 'lit';
 export class NilePopup extends NileElement {
   static styles: CSSResultGroup = styles;
 
-  protected override BUBBLES: boolean=false;
-  protected override COMPOSED: boolean=false;
-
   private anchorEl: Element | null;
   private cleanup: ReturnType<typeof autoUpdate> | undefined;
 

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

@@ -28,8 +28,6 @@ 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.ts

@@ -97,8 +97,6 @@ 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, {
@@ -1222,11 +1220,9 @@ export class NileSelect extends NileElement implements NileFormControl {
                       clearable
                       .value=${this.searchValue}
                       placeholder="${this.internalSearchPlaceHolder}"
-                      @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-input=${this.handleSearchChange}
+                      @nile-focus=${this.handleSearchFocus}
+                      @nile-change="${this.onInputChange}"
                     >
                       <nile-icon name="search" slot="suffix"> </nile-icon>
                     </nile-input>