@aquera/nile-elements 0.0.119 → 0.0.121

package/package.json

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

package/rollup.config.js

@@ -71,6 +71,7 @@ export default [
       replace({
         'Reflect.decorate': 'undefined',
         'process.env.NODE_ENV': JSON.stringify('production'),
+        'process.env.LIT_DEV_MODE': JSON.stringify('false'),
       }),
       resolve(),
       terser({

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

@@ -52,6 +52,7 @@ export class NileAccordion extends NileElement {
 
 static styles: CSSResultGroup = styles;
 
+protected override BUBBLES: boolean=false;
 
 @query('.details') details: HTMLElement;
 @query('.details__header') header: HTMLElement;

package/src/nile-auto-complete/nile-auto-complete.ts

@@ -16,6 +16,8 @@ import type { CSSResultGroup } from 'lit';
 export class NileAutoComplete extends NileElement {
 
   static styles: CSSResultGroup = styles;
+  
+  protected override BUBBLES: boolean=false;
 
   // Define component properties
   @property({ type: Boolean }) isDropdownOpen: boolean = false;
@@ -96,11 +98,20 @@ export class NileAutoComplete extends NileElement {
 
   public render(): TemplateResult {
     return html`
-      <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick>
+      <nile-dropdown 
+        class="nile-dropdown--input" 
+        ?open=${this.isDropdownOpen} 
+        noOpenOnCLick
+        @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-input class="nile-auto-complete--input"
           ?no-border=${this.noBorder}
           .value=${this.value}
-          @nile-input=${this.handleSearch}
+          @nile-input=${(e:CustomEvent)=>{this.handleSearch(e);this.emit('nile-input',e.detail)}}
+          @nile-change=${(e:CustomEvent)=>this.emit('nile-change',e.detail)}
           @focus=${this.handleFocus}
           @click=${this.handleClick}
           slot="trigger"

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

@@ -35,6 +35,8 @@ export class NileAvatar extends NileElement {
     return [styles];
   }
 
+  protected override BUBBLES: boolean=false;
+
   /** Gives the url to the Avatar */
   @property({ type: String, reflect: true }) src = '';
 

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

@@ -45,6 +45,8 @@ import type { CSSResultGroup } from 'lit';
 export class NileBadge extends NileElement {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   /** The badge's theme variant. */
   @property({ reflect: true }) variant:
     | 'primary'

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

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

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

@@ -32,6 +32,8 @@ export class NileBreadcrumbItem extends NileElement {
     return [styles];
   }
 
+  protected override BUBBLES: boolean=false;
+
   @state() private isLast = false;
 
   /* #endregion */

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

@@ -69,10 +69,6 @@ export const styles = css`
     pointer-events: none;
   }
 
-  .button__label::slotted(nile-icon) {
-    /* vertical-align: -2px; */
-  }
-
   /* Primary */
   .button--standard.button--primary {
     background-color: var(--nile-colors-button-primary);
@@ -350,92 +346,92 @@ export const styles = css`
   }
 
   /* Primary Variant - Nile Icon Fill */
-  .button--standard.button--primary ::slotted(nile-icon) {
+  .button--standard.button--primary ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
   }
   .button--standard.button--primary:hover:not(.button--disabled)
-    ::slotted(nile-icon),
+    ::slotted(nile-icon:not([color])),
   .button--standard.button--primary:active:not(.button--disabled)
-    ::slotted(nile-icon) {
+    ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
   }
-  .button--standard.button--primary.button--disabled ::slotted(nile-icon) {
+  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;
   }
 
   /* Secondary Variant */
-  .button--standard.button--secondary ::slotted(nile-icon) {
+  .button--standard.button--secondary ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
   }
   .button--standard.button--secondary:hover:not(.button--disabled)
-    ::slotted(nile-icon),
+    ::slotted(nile-icon:not([color])),
   .button--standard.button--secondary:active:not(.button--disabled)
-    ::slotted(nile-icon) {
+    ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
   }
-  .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {
+  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(
       --nile-colors-button-secondary-disabled-text
     ) !important;
   }
 
   /* Tertiary Variant */
-  .button--standard.button--tertiary ::slotted(nile-icon) {
+  .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
   }
   .button--standard.button--tertiary:hover:not(.button--disabled)
-    ::slotted(nile-icon),
+    ::slotted(nile-icon:not([color])),
   .button--standard.button--tertiary:active:not(.button--disabled)
-    ::slotted(nile-icon) {
+    ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
   }
-  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {
+  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(
       --nile-colors-button-tertiary-disabled-text
     ) !important;
   }
 
   /* Ghost Variant */
-  .button--standard.button--ghost ::slotted(nile-icon) {
+  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
   }
   .button--standard.button--ghost:hover:not(.button--disabled)
-    ::slotted(nile-icon),
+    ::slotted(nile-icon:not([color])),
   .button--standard.button--ghost:active:not(.button--disabled)
-    ::slotted(nile-icon) {
+    ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
   }
-  .button--standard.button--ghost ::slotted(nile-icon) {
+  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(
       --nile-colors-button-tertiary-disabled-text
     ) !important;
   }
 
   /* Caution Variant */
-  .button--standard.button--caution ::slotted(nile-icon) {
+  .button--standard.button--caution ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
   }
   .button--standard.button--caution:hover:not(.button--disabled)
-    ::slotted(nile-icon),
+    ::slotted(nile-icon:not([color])),
   .button--standard.button--caution:active:not(.button--disabled)
-    ::slotted(nile-icon) {
+    ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
   }
-  .button--standard.button--caution.button--disabled ::slotted(nile-icon) {
+  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;
   }
 
   /* destructive */
-  .button--standard.button--destructive ::slotted(nile-icon) {
+  .button--standard.button--destructive ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: #fff !important;
   }
   .button--standard.button--destructive:hover:not(.button--disabled)
-    ::slotted(nile-icon),
+    ::slotted(nile-icon:not([color])),
   .button--standard.button--caution:active:not(.button--disabled)
-    ::slotted(nile-icon) {
+    ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: #fff !important;
   }
-  .button--standard.button--destructive.button--disabled ::slotted(nile-icon) {
+  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: #fff !important;
   }
 

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

@@ -38,6 +38,8 @@ import NileElement from '../internal/nile-element';
 export class NileButton extends NileElement implements NileFormControl {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   private readonly formControlController = new FormControlController(this, {
     form: input => {
       // Buttons support a form attribute that points to an arbitrary form, so if this attribute is set we need to query

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

@@ -27,6 +27,8 @@ export class NileButtonToggle extends NileElement {
 		return [styles];
 	}
 
+  protected override COMPOSED: boolean=false;
+
   @property({ type: Boolean, reflect: true })
   active = false;
 

package/src/nile-button-toggle-group/nile-button-toggle-group.ts

@@ -26,6 +26,8 @@ export class NileButtonToggleGroup extends NileElement {
     return [styles];
   }
 
+  protected override BUBBLES: boolean=false;
+
   @queryAll('nile-button-toggle') private toggles!: NodeListOf<NileButtonToggle>;
 
   @query('slot:not([name])') private defaultSlot!: HTMLSlotElement;

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

@@ -83,6 +83,7 @@ export const styles = css`
 
   .day_date{
     font-weight:400;
+    user-select:none;
   }
 
 	.current__date__dot{
@@ -203,7 +204,9 @@ export const styles = css`
 
   .button-container {
     width: 100%;
-    text-align: right;
+    display:flex;
+    justify-content: end;
+    gap:10px;
     padding: 12px 16px 16px 16px;
     box-sizing: border-box;
   }

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

@@ -9,6 +9,13 @@ import { NileTabGroup } from '../nile-tab-group';
 import { NileSelect } from '../nile-select';
 import { NileInput } from '../nile-input';
 
+import './nile-calendar';
+import '../nile-input/nile-input';
+import '../nile-select/nile-select';
+import '../nile-tab-group/nile-tab-group';
+import '../nile-tab/nile-tab';
+import '../nile-button/nile-button';
+
 function wait(ms:number=50000) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }

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

@@ -37,6 +37,7 @@ export class NileCalendar extends NileElement {
     return [styles];
   }
 
+  protected override BUBBLES: boolean=false;
 
 
   @property({ type: String, attribute: 'value' }) valueAttribute: | string | null = null;
@@ -47,6 +48,10 @@ export class NileCalendar extends NileElement {
 
   @property({ type: Boolean, attribute: true, reflect:true }) hideTypes = false;
 
+  @property({ type: Boolean, reflect: true }) doubleClickUnselect = false;
+
+  @property({ type: Boolean, reflect: true }) allowClear = false;
+
   @property({ type: String, reflect: true }) type :'absolute' | 'relative' = 'absolute';
 
   @property({ type: String }) selectedUnit: TimeUnits;
@@ -86,8 +91,13 @@ export class NileCalendar extends NileElement {
 
   protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
     super.updated(changedProperties);
-
     if (changedProperties.has('valueAttribute')) {
+      if(!this.valueAttribute){
+        this.value=null;
+        this.startDate=null;
+        this.endDate=null;
+        this.isSelectingStart=true;
+      }
       const date = new Date(this.valueAttribute || '');
       if (!isNaN(date.getTime())) {
         const offset = date.getTimezoneOffset();
@@ -95,15 +105,8 @@ export class NileCalendar extends NileElement {
         this.currentMonth = this.value.getMonth();
         this.currentYear = this.value.getFullYear();
       }
-    }
-  }
-
-  attributeChangedCallback(name: string, _old: string | null, newValue: string | null): void {
-    if (name === 'value') {
-      this.valueAttribute = newValue;
       this.initializeValue();
-    } 
-    super.attributeChangedCallback(name, _old, newValue);
+    }
   }
 
   @watch('allowedDates')
@@ -131,21 +134,6 @@ export class NileCalendar extends NileElement {
     }
   }
   
-  @watch('value')
-  valueChanged() {
-    if (this.range && this.value) {
-      this.value = null;
-      return;
-    }
-
-    if (this.value && !isNaN(this.value.getTime())) {
-      const offset = this.value.getTimezoneOffset();
-      const localDate = new Date(this.value.getTime() - offset * 60 * 1000);
-      if (!isNaN(localDate.getTime())) {
-        this.valueAttribute = localDate.toISOString().split('T')[0];
-      }
-    }
-  }
 
   /**
    * Render method
@@ -175,6 +163,15 @@ export class NileCalendar extends NileElement {
 
         ${!this.range?'':html`
         <div class="button-container">
+          ${this.allowClear?
+            html`
+            <nile-button 
+            class="apply-button"
+            variant="secondary"
+            ?disabled="${ !this.startDate || !this.endDate }"
+            @click="${this.clearDate}"
+            > Clear</nile-button>`:nothing
+          }
           <nile-button 
           class="apply-button"  
           ?disabled="${ !this.startDate || !this.endDate }"  
@@ -277,7 +274,7 @@ export class NileCalendar extends NileElement {
         inputmode="numeric"
         type="number"
         value="${this.selectedValue}" 
-        @nile-input="${this.handleDurationChange}"
+        @nile-change="${this.handleDurationChange}"
         placeholder="Enter Value"
         ></nile-input>
 
@@ -478,6 +475,18 @@ export class NileCalendar extends NileElement {
     return isWithinRange;
   }
 
+  clearDate(){
+    if(this.range){
+      this.valueAttribute='';
+      this.startDate=null;
+      this.endDate=null;
+    }
+    else{
+      this.value=null;
+    }
+    this.emit('nile-clear')
+  }
+
   /**
    * @function handle_date-click/select
    * @param day 
@@ -513,6 +522,10 @@ export class NileCalendar extends NileElement {
         }
       }
     } else {
+      if(String(this.value)==String(selectedDate) && this.doubleClickUnselect){
+        this.clearDate()
+        return
+      }
       this.value = selectedDate;
       this.emitChangedData({ value: this.value });
     }
@@ -555,6 +568,7 @@ export class NileCalendar extends NileElement {
    * Function to handle relative date selection
    */
   handleDurationChange(event: CustomEvent) {
+    event.stopPropagation()
     event.detail.value = event.detail.value.replace(/e/gi, "");
     const duration=Number(event.detail.value);
     if(!duration) {
@@ -567,6 +581,7 @@ export class NileCalendar extends NileElement {
   }
 
   handleUnitChange(event: any) {
+    event.stopPropagation()
     this.selectedUnit = event.detail.value;
     if (this.selectedUnit && this.selectedValue) {
       this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
@@ -614,6 +629,7 @@ export class NileCalendar extends NileElement {
    * Function to handle start time selecion
    */
   private handleStartTimeInput(event: CustomEvent): void {
+    event.stopPropagation()
     if (!this.startDate) {
       this.startDate = null;
       return;
@@ -631,6 +647,7 @@ export class NileCalendar extends NileElement {
    * Function to handle end time selecion
    */
   private handleEndTimeInput(event: CustomEvent): void {
+    event.stopPropagation()
     if (!this.endDate) {
       this.endDate = null;
       return;
@@ -775,7 +792,7 @@ export class NileCalendar extends NileElement {
     )
   }
 
-  emitChangedData(data:{startDate:Date,endDate:Date}|{value:any}){
+  emitChangedData(data:{startDate:Date,endDate:Date}|{value:any}|null){
     this.emit('nile-changed',data);
     this.emit('nile-change',data)
   }

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

@@ -29,6 +29,8 @@ 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,6 +59,8 @@ 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.test.ts

@@ -4,7 +4,6 @@ import { NileChip } from './nile-chip';
 import '../nile-auto-complete/nile-auto-complete';
 import '../nile-tag/nile-tag';
 
-
 const wait=(ms:number=50000)=>new Promise(resolve => setTimeout(resolve, ms))
 
 describe('NileChip', () => {

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

@@ -28,6 +28,8 @@ export class NileChip extends NileElement {
   public static get styles(): CSSResultArray {
     return [styles];
   }
+  
+  protected override BUBBLES: boolean=false;
 
   private readonly hasSlotController = new HasSlotController(
     this,
@@ -259,6 +261,10 @@ 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,6 +48,8 @@ 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,6 +31,8 @@ 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,10 +33,16 @@ export class NileDatePicker extends NileElement {
     return [styles];
   }
 
+  protected override BUBBLES: boolean=false;
+
   @property({ type: Boolean }) range = false;
 
   @property({ type: Boolean }) hideTypes = false;
 
+  @property({ type: Boolean, reflect: true }) doubleClickUnselect = false;
+
+  @property({ type: Boolean, reflect: true }) allowClear = false;
+
   @property({ type: Boolean }) open = false;
 
   @property({ type: Boolean, attribute: 'hide-time-zone' }) hideTimeZone = false;
@@ -60,27 +66,37 @@ export class NileDatePicker extends NileElement {
    */
   render(): TemplateResult {
     return html`
-      <nile-dropdown .open="${this.open}" part="dd-base" .hoist="${true}" distance="6" exportparts="base">
+      <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')}"
+      >
         <slot slot="trigger" part="trigger" name="trigger"></slot>
         <nile-calendar
           .hideTypes="${this.hideTypes}"
         	.type="${this.type}"
           value="${this.value}"
           .range="${this.range}"
-          @nile-init="${(e:CustomEvent)=>e.stopPropagation()}"
-          @nile-destroy="${(e:CustomEvent)=>e.stopPropagation()}"
-          @nile-changed="${(e:CustomEvent)=>e.stopPropagation()}"
+          @nile-clear="${(e:CustomEvent)=>this.emit('nile-clear')}"
           @nile-change="${this.handleChanged}"
+          @nile-type-change="${(e:CustomEvent)=>this.emit('nile-type-change',e.detail)}"
           .allowedDates="${this.allowedDates}"
           .hideDurationFields="${this.hideDurationFields}"
           .showManualInputs="${this.showManualInputs}"
+          .doubleClickUnselect="${this.doubleClickUnselect}"
+          .allowClear="${this.allowClear}"
         ></nile-calendar>
       </nile-dropdown>
     `;
   }
 
   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,6 +32,8 @@ 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,6 +81,8 @@ 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,6 +28,8 @@ export class NileEmptyState extends NileElement {
     return [styles];
   }
 
+  protected override BUBBLES: boolean=false;
+
   @property() size: 'sm' | 'md' | 'lg' = 'md';
 
   @property() variant:

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

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

@@ -71,8 +71,14 @@ describe('nile-input', () => {
     el.value = '123';
     el.reportValidity();
     await el.updateComplete;
-    expect(el.validationMessage).to.equal('Please match the format requested.');
+  
+    const validMessages = [
+      'Please match the requested format.',
+      'Please match the format requested.'
+    ];
+    expect(validMessages).to.include(el.validationMessage);
   });
+  
 
   it('should emit events on blur', async () => {
     const el = await fixture<NileInput>(html`<nile-input></nile-input>`);

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

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