@aquera/nile-elements 0.0.120 → 0.0.122

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.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,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.
@@ -57,6 +55,8 @@ export class NilePopover extends NileElement {
   /** The distance in pixels from which to offset the popover away from its target. */
   @property({ type: Number }) distance = 18;
 
+  @property({ type: Boolean, reflect: true }) preventOverlayClose = false;
+
   @property({ type: Boolean, attribute: 'arrow' }) arrow = true;
 
   /** Gives the title to the popover */
@@ -155,7 +155,7 @@ export class NilePopover extends NileElement {
   };
 
   private handleDocumentClick = () => {
-    if (this.isShow) {
+    if (this.isShow && !this.preventOverlayClose) {
       this.isShow = false;
     }
   };

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>

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

@@ -8,8 +8,6 @@ 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 = '';

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

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

package/src/nile-stepper/nile-stepper.ts

@@ -22,8 +22,6 @@ import { classMap } from 'lit/directives/class-map.js';
 @customElement('nile-stepper')
 export class NileStepper extends NileElement {
 
-  protected override BUBBLES: boolean=false;
-
 	@property({ type: Boolean, attribute: 'vertical' }) isVertical: boolean = false;
 	@property({ type: Boolean, attribute: 'content-below', reflect:true }) contentBelow: boolean = false;
 	@property({ type: Number, attribute: 'currentStep', reflect:true }) currentStep: number = 0;

package/src/nile-tab/nile-tab.ts

@@ -38,8 +38,6 @@ let id = 0;
 export class NileTab extends NileElement {
   static styles: CSSResultGroup = styles;
 
-  protected override BUBBLES: boolean=false;
-
   private readonly attrId = ++id;
   private readonly componentId = `nile-tab-${this.attrId}`;
 

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

@@ -6,8 +6,10 @@ import { NileTab } from '../nile-tab/nile-tab';
 import '../nile-tab/nile-tab';
 import '../nile-tab-panel/nile-tab-panel';
 import { NileTabPanel } from '../nile-tab-panel/nile-tab-panel';
+import { repeat } from 'lit/directives/repeat.js';
+import { NileIconButton } from '../nile-icon-button';
 
-const wait=(ms:number=50000)=>new Promise(resolve => setTimeout(resolve, ms))
+const wait = (ms: number = 50000) => new Promise(resolve => setTimeout(resolve, ms))
 describe('NileTabGroup with Tabs and Panels', () => {
 
   it('should render the tabs correctly', async () => {
@@ -27,7 +29,7 @@ describe('NileTabGroup with Tabs and Panels', () => {
     expect(el).to.be.instanceOf(NileTabGroup);
     const tabs = document.querySelectorAll("nile-tab");
     const panels = el.shadowRoot?.querySelectorAll('nile-tab-panel');
-    
+
     expect(tabs?.length).to.equal(4);
   });
 
@@ -102,33 +104,6 @@ describe('NileTabGroup with Tabs and Panels', () => {
     expect(activePanel?.shadowRoot?.querySelector("slot")?.className.includes('tab-panel--active')).to.be.true;
   });
 
-  // it('should activate tab and panel when using keyboard navigation', async () => {
-  //   const el = await fixture<NileTabGroup>(html`
-  //     <nile-tab-group value="general">
-  //       <nile-tab slot="nav" panel="general">General</nile-tab>
-  //       <nile-tab slot="nav" panel="custom">Custom</nile-tab>
-  //       <nile-tab slot="nav" panel="advanced">Advanced</nile-tab>
-  //       <nile-tab-panel name="general">This is the general tab panel.</nile-tab-panel>
-  //       <nile-tab-panel name="custom">This is the custom tab panel.</nile-tab-panel>
-  //       <nile-tab-panel name="advanced">This is the advanced tab panel.</nile-tab-panel>
-  //     </nile-tab-group>
-  //   `);
-
-  //   const firstTab = document.querySelector('nile-tab[panel="general"]') as NileTab;
-  //   firstTab.focus();
-
-  //   // Simulate pressing the "ArrowRight" key
-  //   const event = new KeyboardEvent('keydown', { key: 'ArrowRight' });
-  //   firstTab.dispatchEvent(event);
-  //   await elementUpdated(el);
-
-  //   const secondTab = document?.querySelector('nile-tab[panel="custom"]');
-  //   expect(secondTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.true;
-
-  //   const activePanel = document.querySelector('nile-tab-panel[name="custom"]');
-  //   expect(activePanel?.shadowRoot?.querySelector("slot")?.className.includes('tab-panel--active')).to.be.true;
-  // });
-
   it('should emit "nile-tab-show" event when a tab is shown', async () => {
     const el = await fixture<NileTabGroup>(html`
       <nile-tab-group value="general">
@@ -170,4 +145,71 @@ describe('NileTabGroup with Tabs and Panels', () => {
     const hideEvent = await hideEventPromise;
     expect(hideEvent.detail.value).to.equal('general');
   });
+
+  it('Scroll to the end and start correctly', async () => {
+    const NumetOfTags=40
+    const el = await fixture<NileTabGroup>(html`
+      <nile-tab-group no-track value="custom">
+				${repeat(Array.from({ length: NumetOfTags }, (_, index) => index + 1), el => el, (el) => html`<nile-tab slot="nav" panel="TabNumber${el}">TabNumber+${el}</nile-tab>`)}
+      </nile-tab-group>
+    `)
+    await elementUpdated(el);
+    el.hasScrollControls = true;
+    await elementUpdated(el);
+
+    const FirstElement=document.querySelector<NileTab>("nile-tab:first-child");
+    const LastElement=document.querySelector<NileTab>("nile-tab:last-child");
+    observer.observe(LastElement as Element)
+    observer.observe(FirstElement as Element)
+
+    await wait(1000)
+    expect(LastElement?.className.includes('visible')).to.be.false;
+    expect(FirstElement?.className.includes('visible')).to.be.true;
+    const scrollRightBtn=el.shadowRoot?.querySelector<NileIconButton>("nile-icon-button.tab-group__scroll-button.tab-group__scroll-button--start")
+    const scrollLeftBtn=el.shadowRoot?.querySelector<NileIconButton>("nile-icon-button.tab-group__scroll-button.tab-group__scroll-button--end")
+    scrollRightBtn?.click()
+    await elementUpdated(el);
+    await wait(1000)
+    expect(LastElement?.className.includes('visible')).to.be.true;
+    expect(FirstElement?.className.includes('visible')).to.be.false;
+    scrollLeftBtn?.click()
+    await elementUpdated(el);
+  });
+
+  it('Arrow key controls should work correctly', async () => {
+    const el = await fixture<NileTabGroup>(html`
+      <nile-tab-group>
+				${repeat(Array.from({ length: 10 }, (_, index) => index + 1), el => el, (el) => html`<nile-tab closable slot="nav" cloa panel="TabNumber${el}">TabNumber+${el}</nile-tab>`)}
+      </nile-tab-group>
+    `)
+    await elementUpdated(el);
+    const FirstTab=document.querySelector<NileTab>("nile-tab:first-child");
+    const SecondTab=document.querySelector<NileTab>("nile-tab:nth-child(2)");
+    const LastTab=document.querySelector<NileTab>("nile-tab:last-child");
+
+    FirstTab?.dispatchEvent(arrowRightEvent)
+    await elementUpdated(el);
+    expect(FirstTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.false;
+    expect(SecondTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.true;
+
+    SecondTab?.dispatchEvent(arrowLeftEvent)
+    await elementUpdated(el);
+    expect(FirstTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.true;
+    expect(SecondTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.false;
+
+    FirstTab?.dispatchEvent(arrowLeftEvent)
+    await elementUpdated(el);
+    expect(FirstTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.false;
+    expect(LastTab?.shadowRoot?.querySelector("div")?.className.includes('tab--active')).to.be.true;
+  });
 });
+
+const observer = new IntersectionObserver(
+  (entries, opts)=> entries.forEach(entry => entry.target.classList.toggle('visible', entry.isIntersecting)),
+  { root: null, threshold: .5}
+)
+
+const arrowLeftEvent = new KeyboardEvent('keydown', { key: 'ArrowLeft', code: 'ArrowLeft', keyCode: 37, which: 37, bubbles: true, cancelable: true });
+const arrowUpEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', code: 'ArrowUp', keyCode: 38, which: 38, bubbles: true, cancelable: true });
+const arrowRightEvent = new KeyboardEvent('keydown', { key: 'ArrowRight', code: 'ArrowRight', keyCode: 39, which: 39, bubbles: true, cancelable: true });
+const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', code: 'ArrowDown', keyCode: 40, which: 40, bubbles: true, cancelable: true });

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

@@ -50,8 +50,6 @@ export class NileTabGroup extends NileElement {
 
   static styles: CSSResultGroup = styles;
 
-  protected override BUBBLES: boolean=false;
-
   private activeTab?: NileTab;
   private mutationObserver: MutationObserver;
   private resizeObserver: ResizeObserver;
@@ -63,7 +61,7 @@ export class NileTabGroup extends NileElement {
   @query('.tab-group__nav') nav: HTMLElement;
   @query('.tab-group__indicator') indicator: HTMLElement;
 
-  @state() private hasScrollControls = false;
+  @state() hasScrollControls = false;
 
   /** The placement of the tabs. */
   @property() placement: 'top' | 'bottom' | 'start' | 'end' = 'top';
@@ -201,7 +199,7 @@ export class NileTabGroup extends NileElement {
                   name='arrowright'
                   library="system"
                   label="scrollToStart"
-                  @click=${this.handleScrollToStart}
+                  @click=${this.handleScrollToEnd}
                 ></nile-icon-button>
               `
             : ''}
@@ -227,7 +225,7 @@ export class NileTabGroup extends NileElement {
                   name='arrowleft'
                   library="system"
                   label="scrollToEnd"
-                  @click=${this.handleScrollToEnd}
+                  @click=${this.handleScrollToStart}
                 ></nile-icon-button>
               `
             : ''}
@@ -300,7 +298,7 @@ export class NileTabGroup extends NileElement {
 
     // Move focus left or right
     if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
-      const activeEl = this.tabs.find(t => t.matches(':focus'));
+      const activeEl = tab;
       const isRtl = false;
 
       if (activeEl?.tagName.toLowerCase() === 'nile-tab') {
@@ -347,20 +345,14 @@ export class NileTabGroup extends NileElement {
 
   private handleScrollToStart() {
     this.nav.scroll({
-      left:
-        true
-        ? this.nav.scrollLeft + this.nav.clientWidth
-        : this.nav.scrollLeft - this.nav.clientWidth,
+      left:-this.nav.scrollWidth,
       behavior: 'smooth'
     });
   }
 
   private handleScrollToEnd() {
     this.nav.scroll({
-      left:
-        true
-        ? this.nav.scrollLeft - this.nav.clientWidth
-        : this.nav.scrollLeft + this.nav.clientWidth,
+      left:this.nav.scrollWidth,
       behavior: 'smooth'
     });
   }

package/src/nile-table-body/nile-table-body.ts

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

package/src/nile-tag/nile-tag.ts

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

package/src/nile-textarea/nile-textarea.ts

@@ -44,8 +44,6 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 export class NileTextarea extends NileElement  {
   static styles: CSSResultGroup = styles;
 
-  protected override BUBBLES: boolean=false;
-
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
   private resizeObserver: ResizeObserver;
 

package/src/nile-toast/nile-toast.ts

@@ -56,8 +56,6 @@ const toastStack = Object.assign(document.createElement('div'), {
 export class NileToast extends NileElement {
   static styles: CSSResultGroup = styles;
 
-  protected override BUBBLES: boolean=false;
-
   private autoHideTimeout: number;
   private readonly hasSlotController = new HasSlotController(
     this,

package/src/nile-tooltip/nile-tooltip.ts

@@ -38,8 +38,6 @@ export class NileTooltip extends NileElement {
     return [styles];
   }
 
-  protected override BUBBLES: boolean=false;
-
   private hoverTimeout: number;
   // private readonly localize = new LocalizeController(this);
 

package/src/nile-tree/nile-tree.ts

@@ -80,8 +80,6 @@ export class NileTree extends NileElement {
 
 	static styles: CSSResultGroup = styles;
 
-  protected override BUBBLES: boolean=false;
-
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
   @query('slot[name=expand-icon]') expandedIconSlot: HTMLSlotElement;
   @query('slot[name=collapse-icon]') collapsedIconSlot: HTMLSlotElement;

package/tsconfig.json

@@ -17,6 +17,7 @@
     "incremental": true,
     "strictPropertyInitialization": false,
     "strictFunctionTypes": false,
+    "skipLibCheck": true
   },
   "include": [
     "src/**/*.ts"