@aquera/nile-elements 1.5.4 → 1.5.6

package/src/nile-detail/nile-detail.utils.ts

@@ -0,0 +1,133 @@
+import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../internal/animate';
+import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
+import { waitForEvent } from '../internal/event';
+import type { NileDetail } from './nile-detail';
+
+/*
+  Runs the show animation on the detail body.
+  Emits nile-show (cancelable) before and nile-after-show after the animation.
+*/
+export async function animateShow(component: NileDetail): Promise<void> {
+  const nileShow = component.emit('nile-show', { cancelable: true });
+  if (nileShow.defaultPrevented) {
+    component.open = false;
+    return;
+  }
+
+  await stopAnimations(component.body);
+  component.body.hidden = false;
+
+  const { keyframes, options } = getAnimation(component, 'detail.show', { dir: 'ltr' });
+  await animateTo(component.body, shimKeyframesHeightAuto(keyframes, component.body.scrollHeight), options);
+  component.body.style.height = 'auto';
+
+  component.emit('nile-after-show');
+}
+
+/*
+  Runs the hide animation on the detail body.
+  Emits nile-hide (cancelable) before and nile-after-hide after the animation.
+*/
+export async function animateHide(component: NileDetail): Promise<void> {
+  const nileHide = component.emit('nile-hide', { cancelable: true });
+  if (nileHide.defaultPrevented) {
+    component.open = true;
+    return;
+  }
+
+  await stopAnimations(component.body);
+
+  const { keyframes, options } = getAnimation(component, 'detail.hide', { dir: 'ltr' });
+  await animateTo(component.body, shimKeyframesHeightAuto(keyframes, component.body.scrollHeight), options);
+  component.body.hidden = true;
+  component.body.style.height = 'auto';
+
+  component.emit('nile-after-hide');
+}
+
+/*
+  Programmatically shows the detail if it is not already open or disabled.
+  Returns a promise that resolves after the show animation completes.
+*/
+export async function showDetail(component: NileDetail): Promise<unknown> {
+  if (component.open || component.disabled) {
+    return undefined;
+  }
+  component.open = true;
+  return waitForEvent(component, 'nile-after-show');
+}
+
+/*
+  Programmatically hides the detail if it is not already closed or disabled.
+  Returns a promise that resolves after the hide animation completes.
+*/
+export async function hideDetail(component: NileDetail): Promise<unknown> {
+  if (!component.open || component.disabled) {
+    return undefined;
+  }
+  component.open = false;
+  return waitForEvent(component, 'nile-after-hide');
+}
+
+/*
+  Handles click on the header summary row.
+  Toggles the detail open/close and focuses the header.
+*/
+export function handleSummaryClick(component: NileDetail): void {
+  if (!component.disabled) {
+    if (component.open) {
+      hideDetail(component);
+    } else {
+      showDetail(component);
+    }
+  }
+}
+
+/*
+  Handles keyboard interaction on the header summary row.
+  Enter/Space toggles, ArrowUp/Left closes, ArrowDown/Right opens.
+*/
+export function handleSummaryKeyDown(event: KeyboardEvent, component: NileDetail): void {
+  event.preventDefault();
+
+  if (event.key === 'Enter' || event.key === ' ') {
+    if (component.open) {
+      hideDetail(component);
+    } else {
+      showDetail(component);
+    }
+  }
+
+  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+    hideDetail(component);
+  }
+
+  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+    showDetail(component);
+  }
+}
+
+/*
+  Registers the default show and hide animations for the detail component.
+  Show: animates from height 0 / opacity 0 to auto / 1 over 300ms.
+  Hide: animates from auto / 1 to height 0 / opacity 0 over 300ms.
+*/
+export function registerDefaultAnimations(): void {
+  setDefaultAnimation('detail.show', {
+    keyframes: [
+      { height: '0', opacity: '0' },
+      { height: 'auto', opacity: '1' }
+    ],
+    options: { duration: 300, easing: 'ease' }
+  });
+
+  setDefaultAnimation('detail.hide', {
+    keyframes: [
+      { height: 'auto', opacity: '1' },
+      { height: '0', opacity: '0' }
+    ],
+    options: { duration: 300, easing: 'ease' }
+  });
+}
+
+registerDefaultAnimations();

package/src/nile-dropdown/nile-dropdown.ts

@@ -443,6 +443,17 @@ export class NileDropdown extends NileElement {
         this.portalManager = null;
       }
     }
+    if (changedProperties.has('disabled')) {
+      this.updateTriggerDisabledState();
+    }
+  }
+  
+  private updateTriggerDisabledState() {
+    const trigger = this.querySelector('[slot="trigger"]') as HTMLElement | null;
+    if (!trigger) return;
+    if ('disabled' in trigger) {
+      (trigger as any).disabled = this.disabled;
+    }
   }
 
   @watch('open', { waitUntilFirstUpdate: true })

package/src/nile-file-upload/utils/file-validation.util.ts

@@ -85,13 +85,18 @@ export const setUpDragHandler = (
     }
 
     let updatedFiles = [];
-    for (const file of newFiles) {
-      if(nileFileUpload.allowedTypes.includes(file.type)) {
-        updatedFiles.push(file);
-      } else {
-        nileFileUpload.errorMessage = FileUploadError.INVALID_FORMAT;
+    if(nileFileUpload.allowedTypes.length > 0) {
+      for (const file of newFiles) {
+        if(nileFileUpload.allowedTypes.includes(file.type)) {
+          updatedFiles.push(file);
+        } else {
+          nileFileUpload.errorMessage = FileUploadError.INVALID_FORMAT;
+        }
       }
     }
+    if(updatedFiles.length === 0) {
+      updatedFiles = newFiles;
+    }
 
     nileFileUpload.uploadedFiles = [...uploadedFiles, ...updatedFiles];
     nileFileUpload.requestUpdate();

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

@@ -146,6 +146,28 @@ nile-badge::part(content) {
  line-height: 20px;
 }
 
+:host([disabled]) .chip {
+  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));
+  border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled));
+  color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary-700));
+  cursor: not-allowed;
+  opacity: var(--nile-opacity-100, var(--ng-opacity-50));
+}
+
+:host([disabled]) .label {
+  color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary-700));
+  font-family:colfax-regular;
+}
+
+:host([disabled]) .value {
+  color: var(--nile-colors-primary-500, var(--ng-colors-text-brand-secondary-700));
+}
+
+:host([disabled]) nile-badge::part(base) {
+  background-color: var(--nile-colors-primary-500,var(--ng-colors-text-brand-secondary-700));
+  color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+}
+
 `;
 
 export default [styles];

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

@@ -18,6 +18,7 @@ export class NileFilterChip extends NileElement {
   @property({ type: String }) icon = '';
   @property({ type: String }) removeIcon = '';
   @property({ type: Boolean, reflect: true }) active = false;
+  @property({type:Boolean, reflect:true}) disabled = false;
 
 
   private static activeChips: NileFilterChip[] = [];
@@ -55,6 +56,7 @@ export class NileFilterChip extends NileElement {
   }
 
   private handleClick() {
+    if (this.disabled) return;
     this.dispatchEvent(
       new CustomEvent('nile-click', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } })
     );

package/src/nile-inline-edit/nile-inline-edit.css.ts

@@ -25,7 +25,7 @@ export const styles = css`
     font-style: normal;
     font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
     line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
-    margin-bottom: var(--nile-spacing-sm);
+    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
   }
 
   .inline__edit--open--container {
@@ -40,23 +40,32 @@ export const styles = css`
     min-width: var(--nile-width-width-xxs, var(--ng-width-80));
     min-height: var(--nile-height-40px, var(--ng-height-40px));
     height: auto;
-    padding-top: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
-    padding-bottom: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+    padding-top: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+    padding-bottom: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
     padding-left: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
     padding-right:var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));
     color: var(--nile-inline-edit-font-color, var(--ng-colors-text-quaternary-500));
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
     font-style: normal;
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     line-height: var(--nile-spacing-spacing-3xl, var(--ng-line-height-text-md));
     word-wrap: break-word;
+    width: 100%;
   }
 
   .inline__edit--container:hover {
-    background-color:var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));
+    background-color: var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));
   }
+
+  :host([disabled]) .inline__edit--container,
+  :host([disabled]) .inline__edit--container:hover {
+  background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+  color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+  cursor: not-allowed;
+}
+
 `;
 
 export default [styles];

package/src/nile-inline-edit/nile-inline-edit.ts

@@ -55,6 +55,9 @@ export class NileInlineEdit extends NileElement {
   /** Enables automatic closing when focus moves outside the component or when clicking outside */
   @property({ type: Boolean, attribute: 'auto-close' }) autoClose: boolean = false;
 
+  /** Disables the inline edit, preventing it from being opened */
+  @property({ type: Boolean, reflect: true}) disabled: boolean = false;
+
   /* #endregion */
 
   /* #region Methods */
@@ -109,6 +112,7 @@ export class NileInlineEdit extends NileElement {
   }
 
   private handleClick() {
+    if (this.disabled) return;
     this.open = true;
   }
   public render(): TemplateResult {

package/src/nile-inline-sidebar/nile-inline-sidebar.css.ts

@@ -103,4 +103,23 @@ export const styles = css`
     pointer-events: auto;
     transition-delay: 0ms;
   }
+
+  :host([placement='right']) .sidebar {
+    border-right: none;
+    border-left: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  :host([placement='right']) .toggle-btn {
+    right: auto;
+    left: -14px;
+  }
+
+  :host([placement='right']) .sidebar-header {
+    justify-content: flex-start;
+  }
+
+  :host([placement='right']) .sidebar-nav {
+    padding-right: 0;
+    padding-left: var(--nile-spacing-xl);
+  }
 `;

package/src/nile-inline-sidebar/nile-inline-sidebar.test.ts

@@ -0,0 +1,108 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './nile-inline-sidebar';
+import '../nile-inline-sidebar-item/nile-inline-sidebar-item';
+import '../nile-inline-sidebar-group/nile-inline-sidebar-group';
+import type { NileInlineSidebar } from './nile-inline-sidebar';
+
+describe('NileInlineSidebar', () => {
+  it('1. renders', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el).to.exist; });
+  it('2. shadow root', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot).to.not.be.null; });
+  it('3. tag name', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.tagName.toLowerCase()).to.equal('nile-inline-sidebar'); });
+  it('4. collapsed defaults false', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.collapsed).to.be.false; });
+  it('5. fixed defaults false', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.fixed).to.be.false; });
+  it('6. showTooltip defaults false', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.showTooltip).to.be.false; });
+  it('7. placement defaults left', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.placement).to.equal('left'); });
+  it('8. set collapsed', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar collapsed></nile-inline-sidebar>`); expect(el.collapsed).to.be.true; });
+  it('9. set fixed', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar fixed></nile-inline-sidebar>`); expect(el.fixed).to.be.true; });
+  it('10. set showTooltip', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar showTooltip></nile-inline-sidebar>`); expect(el.showTooltip).to.be.true; });
+  it('11. set placement right', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar placement="right"></nile-inline-sidebar>`); expect(el.placement).to.equal('right'); });
+  it('12. set placement left', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar placement="left"></nile-inline-sidebar>`); expect(el.placement).to.equal('left'); });
+  it('13. collapsed reflects', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar collapsed></nile-inline-sidebar>`); expect(el.hasAttribute('collapsed')).to.be.true; });
+  it('14. fixed reflects', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar fixed></nile-inline-sidebar>`); expect(el.hasAttribute('fixed')).to.be.true; });
+  it('15. placement reflects', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar placement="right"></nile-inline-sidebar>`); expect(el.getAttribute('placement')).to.equal('right'); });
+  it('16. sidebar class', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('.sidebar')).to.exist; });
+  it('17. base part', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('[part="base"]')).to.exist; });
+  it('18. header part', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('[part="header"]')).to.exist; });
+  it('19. nav-items part', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('[part="nav-items"]')).to.exist; });
+  it('20. sidebar-header class', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('.sidebar-header')).to.exist; });
+  it('21. sidebar-nav class', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('.sidebar-nav')).to.exist; });
+  it('22. nav element', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('nav')).to.exist; });
+  it('23. default slot', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('slot')).to.exist; });
+  it('24. toggle-btn when expanded', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('.toggle-btn')).to.exist; });
+  it('25. no toggle-btn when fixed', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar fixed></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('.toggle-btn')).to.be.null; });
+  it('26. collapsed nav hidden', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar collapsed></nile-inline-sidebar>`); const nav = el.shadowRoot!.querySelector('.sidebar-nav') as HTMLElement; expect(nav.style.display).to.equal('none'); });
+  it('27. expanded nav visible', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); const nav = el.shadowRoot!.querySelector('.sidebar-nav') as HTMLElement; expect(nav.style.display).to.not.equal('none'); });
+  it('28. collapsed shows side-bar-action', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar collapsed></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('nile-side-bar-action')).to.exist; });
+  it('29. expanded hides side-bar-action', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('nile-side-bar-action')).to.be.null; });
+  it('30. collapsed shows action-menu', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar collapsed></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('nile-side-bar-action-menu')).to.exist; });
+  it('31. left expanded icon menu_open', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar placement="left"></nile-inline-sidebar>`); const icon = el.shadowRoot!.querySelector('nile-icon'); expect(icon?.getAttribute('name')).to.equal('menu_open'); });
+  it('32. right expanded icon menu_close', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar placement="right"></nile-inline-sidebar>`); const icon = el.shadowRoot!.querySelector('nile-icon'); expect(icon?.getAttribute('name')).to.equal('menu_close'); });
+  it('33. left collapsed icon menu_close', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar placement="left" collapsed></nile-inline-sidebar>`); const icon = el.shadowRoot!.querySelector('nile-icon'); expect(icon?.getAttribute('name')).to.equal('menu_close'); });
+  it('34. right collapsed icon menu_open', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar placement="right" collapsed></nile-inline-sidebar>`); const icon = el.shadowRoot!.querySelector('nile-icon'); expect(icon?.getAttribute('name')).to.equal('menu_open'); });
+  it('35. left action placement bottom-start', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar placement="left" collapsed></nile-inline-sidebar>`); const action = el.shadowRoot!.querySelector('nile-side-bar-action'); expect(action?.getAttribute('placement')).to.equal('bottom-start'); });
+  it('36. right action placement bottom-end', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar placement="right" collapsed></nile-inline-sidebar>`); const action = el.shadowRoot!.querySelector('nile-side-bar-action'); expect(action?.getAttribute('placement')).to.equal('bottom-end'); });
+  it('37. fixed forces collapsed false', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar fixed></nile-inline-sidebar>`); expect(el.collapsed).to.be.false; });
+  it('38. dynamic collapsed on', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); el.collapsed = true; await el.updateComplete; expect(el.hasAttribute('collapsed')).to.be.true; });
+  it('39. dynamic collapsed off', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar collapsed></nile-inline-sidebar>`); el.collapsed = false; await el.updateComplete; expect(el.hasAttribute('collapsed')).to.be.false; });
+  it('40. dynamic placement to right', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); el.placement = 'right'; await el.updateComplete; expect(el.getAttribute('placement')).to.equal('right'); });
+  it('41. dynamic placement to left', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar placement="right"></nile-inline-sidebar>`); el.placement = 'left'; await el.updateComplete; expect(el.getAttribute('placement')).to.equal('left'); });
+  it('42. dynamic fixed', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); el.fixed = true; await el.updateComplete; expect(el.hasAttribute('fixed')).to.be.true; });
+  it('43. slotted item', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar><nile-inline-sidebar-item>A</nile-inline-sidebar-item></nile-inline-sidebar>`); expect(el.querySelector('nile-inline-sidebar-item')).to.exist; });
+  it('44. slotted group', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar><nile-inline-sidebar-group label="G"><nile-inline-sidebar-item>A</nile-inline-sidebar-item></nile-inline-sidebar-group></nile-inline-sidebar>`); expect(el.querySelector('nile-inline-sidebar-group')).to.exist; });
+  it('45. multiple items', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar><nile-inline-sidebar-item>A</nile-inline-sidebar-item><nile-inline-sidebar-item>B</nile-inline-sidebar-item><nile-inline-sidebar-item>C</nile-inline-sidebar-item></nile-inline-sidebar>`); expect(el.querySelectorAll('nile-inline-sidebar-item').length).to.equal(3); });
+  it('46. emits nile-toggle on collapse', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); let detail: any; el.addEventListener('nile-toggle', ((e: CustomEvent) => { detail = e.detail; }) as EventListener); const btn = el.shadowRoot!.querySelector('.toggle-btn') as HTMLElement; btn.click(); expect(detail).to.exist; expect(detail.collapsed).to.be.true; });
+  it('47. emits nile-toggle on expand', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar collapsed></nile-inline-sidebar>`); let detail: any; el.addEventListener('nile-toggle', ((e: CustomEvent) => { detail = e.detail; }) as EventListener); const btn = el.shadowRoot!.querySelector('.toggle-btn') as HTMLElement; btn.click(); expect(detail).to.exist; expect(detail.collapsed).to.be.false; });
+  it('48. has styles', async () => { expect((await import('./nile-inline-sidebar')).NileInlineSidebar.styles).to.exist; });
+  it('49. is defined', async () => { expect(customElements.get('nile-inline-sidebar')).to.exist; });
+  it('50. shadow mode', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.mode).to.equal('open'); });
+  it('51. isConnected', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.isConnected).to.be.true; });
+  it('52. removal', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); el.remove(); expect(el.isConnected).to.be.false; });
+  it('53. outerHTML', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.outerHTML).to.contain('nile-inline-sidebar'); });
+  it('54. matches', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar class="x"></nile-inline-sidebar>`); expect(el.matches('.x')).to.be.true; });
+  it('55. closest', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.closest('nile-inline-sidebar')).to.equal(el); });
+  it('56. cloneNode', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect((el.cloneNode(true) as Element).tagName.toLowerCase()).to.equal('nile-inline-sidebar'); });
+  it('57. dispatchEvent', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); let f = false; el.addEventListener('c', () => (f = true)); el.dispatchEvent(new Event('c')); expect(f).to.be.true; });
+  it('58. updateComplete', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); const r = await el.updateComplete; expect(r).to.not.be.undefined; });
+  it('59. render method', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.render).to.be.a('function'); });
+  it('60. shadowRoot host', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.host).to.equal(el); });
+  it('61. class attr', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar class="s"></nile-inline-sidebar>`); expect(el.classList.contains('s')).to.be.true; });
+  it('62. id attr', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar id="s1"></nile-inline-sidebar>`); expect(el.id).to.equal('s1'); });
+  it('63. hidden', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar hidden></nile-inline-sidebar>`); expect(el.hidden).to.be.true; });
+  it('64. nodeType', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.nodeType).to.equal(1); });
+  it('65. localName', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.localName).to.equal('nile-inline-sidebar'); });
+  it('66. namespaceURI', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.namespaceURI).to.equal('http://www.w3.org/1999/xhtml'); });
+  it('67. ownerDocument', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.ownerDocument).to.equal(document); });
+  it('68. multiple instances', async () => { const c = await fixture(html`<div><nile-inline-sidebar></nile-inline-sidebar><nile-inline-sidebar></nile-inline-sidebar></div>`); expect(c.querySelectorAll('nile-inline-sidebar').length).to.equal(2); });
+  it('69. parent-child', async () => { const c = await fixture(html`<div><nile-inline-sidebar></nile-inline-sidebar></div>`); expect(c.querySelector('nile-inline-sidebar')!.parentElement).to.equal(c); });
+  it('70. createElement', async () => { const el = document.createElement('nile-inline-sidebar') as NileInlineSidebar; document.body.appendChild(el); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; document.body.removeChild(el); });
+  it('71. dataset', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar data-idx="0"></nile-inline-sidebar>`); expect(el.dataset.idx).to.equal('0'); });
+  it('72. classList add', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); el.classList.add('z'); expect(el.classList.contains('z')).to.be.true; });
+  it('73. getBoundingClientRect', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.getBoundingClientRect()).to.exist; });
+  it('74. no form', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('form')).to.be.null; });
+  it('75. no input', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('input')).to.be.null; });
+  it('76. no anchor', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('a')).to.be.null; });
+  it('77. no img', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('img')).to.be.null; });
+  it('78. no svg', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('svg')).to.be.null; });
+  it('79. style attr', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar style="color:red"></nile-inline-sidebar>`); expect(el.style.color).to.equal('red'); });
+  it('80. data attr', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar data-x="1"></nile-inline-sidebar>`); expect(el.getAttribute('data-x')).to.equal('1'); });
+  it('81. aria-label', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar aria-label="Sidebar"></nile-inline-sidebar>`); expect(el.getAttribute('aria-label')).to.equal('Sidebar'); });
+  it('82. role', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar role="navigation"></nile-inline-sidebar>`); expect(el.getAttribute('role')).to.equal('navigation'); });
+  it('83. dir', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar dir="rtl"></nile-inline-sidebar>`); expect(el.dir).to.equal('rtl'); });
+  it('84. title attr', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar title="S"></nile-inline-sidebar>`); expect(el.title).to.equal('S'); });
+  it('85. lang attr', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar lang="en"></nile-inline-sidebar>`); expect(el.lang).to.equal('en'); });
+  it('86. tabindex', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar tabindex="0"></nile-inline-sidebar>`); expect(el.getAttribute('tabindex')).to.equal('0'); });
+  it('87. requestUpdate', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); el.requestUpdate(); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; });
+  it('88. shadow childNodes', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.childNodes.length).to.be.greaterThan(0); });
+  it('89. scrollIntoView', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.scrollIntoView).to.be.a('function'); });
+  it('90. focus method', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.focus).to.be.a('function'); });
+  it('91. blur method', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.blur).to.be.a('function'); });
+  it('92. class toggle', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); el.classList.toggle('a'); expect(el.classList.contains('a')).to.be.true; });
+  it('93. toggle hidden', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); el.hidden = true; expect(el.hidden).to.be.true; });
+  it('94. dispatchCustomEvent', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); let d: any; el.addEventListener('t', ((e: CustomEvent) => { d = e.detail; }) as EventListener); el.dispatchEvent(new CustomEvent('t', { detail: 'x' })); expect(d).to.equal('x'); });
+  it('95. nested in div', async () => { const c = await fixture(html`<div><nile-inline-sidebar></nile-inline-sidebar></div>`); expect(c.querySelector('nile-inline-sidebar')).to.exist; });
+  it('96. no table', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('table')).to.be.null; });
+  it('97. no canvas', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); expect(el.shadowRoot!.querySelector('canvas')).to.be.null; });
+  it('98. setAttribute data', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); el.setAttribute('data-test', '1'); expect(el.dataset.test).to.equal('1'); });
+  it('99. multiple re-renders', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar></nile-inline-sidebar>`); for (let i = 0; i < 3; i++) { el.requestUpdate(); await el.updateComplete; } expect(el.shadowRoot).to.not.be.null; });
+  it('100. full integration', async () => { const el = await fixture<NileInlineSidebar>(html`<nile-inline-sidebar placement="right" class="s" id="s1" aria-label="Nav"><nile-inline-sidebar-group label="Main"><nile-inline-sidebar-item active>Dashboard</nile-inline-sidebar-item><nile-inline-sidebar-item>Analytics</nile-inline-sidebar-item><nile-inline-sidebar-item disabled>Admin</nile-inline-sidebar-item></nile-inline-sidebar-group></nile-inline-sidebar>`); expect(el.placement).to.equal('right'); expect(el.id).to.equal('s1'); expect(el.getAttribute('aria-label')).to.equal('Nav'); expect(el.querySelectorAll('nile-inline-sidebar-item').length).to.equal(3); expect(el.shadowRoot!.querySelector('.sidebar')).to.exist; expect(el.shadowRoot!.querySelector('nav')).to.exist; });
+});

package/src/nile-inline-sidebar/nile-inline-sidebar.ts

@@ -23,6 +23,9 @@ export class NileInlineSidebar extends NileElement {
 
   @property({ type: Boolean, reflect: true }) showTooltip = false;
 
+  /** The side on which the sidebar is placed. */
+  @property({ type: String, reflect: true }) placement: 'left' | 'right' = 'left';
+
   @state() private activeIndex: number = -1;
 
   @query('slot') private defaultSlot!: HTMLSlotElement;
@@ -47,6 +50,7 @@ export class NileInlineSidebar extends NileElement {
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener('nile-click', this.handleItemSelect);
+    this.addEventListener('keydown', this.handleKeyDown);
     this.mutationObserver = new MutationObserver(() =>
       this.syncActiveFromItems()
     );
@@ -56,6 +60,7 @@ export class NileInlineSidebar extends NileElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
     this.removeEventListener('nile-click', this.handleItemSelect);
+    this.removeEventListener('keydown', this.handleKeyDown);
   }
 
   firstUpdated() {
@@ -86,8 +91,96 @@ export class NileInlineSidebar extends NileElement {
       this.activeIndex = activeIndex;
       this.requestUpdate();
     }
+    this.updateTabIndices();
+  }
+
+  
+  private get focusableItems(): HTMLElement[] {
+    return this.sidebarItems.filter(
+      item => !item.hasAttribute('disabled')
+    );
   }
 
+  private updateTabIndices() {
+    const items = this.sidebarItems;
+    if (!items.length) return;
+
+    const focusTarget =
+      this.activeIndex >= 0 ? items[this.activeIndex] : null;
+
+    items.forEach(item => {
+      if (item.hasAttribute('disabled')) {
+        item.setAttribute('tabindex', '-1');
+      } else if (item === focusTarget) {
+        item.setAttribute('tabindex', '0');
+      } else if (!focusTarget && item === this.focusableItems[0]) {
+        item.setAttribute('tabindex', '0');
+      } else {
+        item.setAttribute('tabindex', '-1');
+      }
+    });
+  }
+
+  private focusItem(item: HTMLElement) {
+    const items = this.sidebarItems;
+    items.forEach(el => el.setAttribute('tabindex', '-1'));
+    item.setAttribute('tabindex', '0');
+    item.focus();
+  }
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+    if (this.collapsed) return;
+
+    const focusable = this.focusableItems;
+    if (!focusable.length) return;
+
+    const currentFocus = this.sidebarItems.find(
+      item =>
+        item === document.activeElement ||
+        item === this.shadowRoot?.activeElement ||
+        item.matches(':focus-within')
+    );
+
+    const currentIndex = currentFocus
+      ? focusable.indexOf(currentFocus)
+      : -1;
+
+    let nextIndex: number | null = null;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        nextIndex =
+          currentIndex < focusable.length - 1 ? currentIndex + 1 : 0;
+        break;
+
+      case 'ArrowUp':
+        nextIndex =
+          currentIndex > 0 ? currentIndex - 1 : focusable.length - 1;
+        break;
+
+      case 'Home':
+        nextIndex = 0;
+        break;
+
+      case 'End':
+        nextIndex = focusable.length - 1;
+        break;
+
+      case 'Enter':
+      case ' ':
+        return;
+
+      default:
+        return;
+    }
+
+    event.preventDefault();
+
+    if (nextIndex !== null && focusable[nextIndex]) {
+      this.focusItem(focusable[nextIndex]);
+    }
+  };
+
   private handleItemSelect = (event: CustomEvent) => {
     const selectedItem = event.detail.item as HTMLElement;
     const index = this.sidebarItems.indexOf(selectedItem);
@@ -96,6 +189,7 @@ export class NileInlineSidebar extends NileElement {
       (item, i) => ((item as any).active = i === index)
     );
     this.activeIndex = index;
+    this.updateTabIndices();
 
     this.dispatchEvent(
       new CustomEvent('nile-change', {
@@ -146,7 +240,9 @@ export class NileInlineSidebar extends NileElement {
 
   private get menuItemsTemplate() {
     if (!this.sidebarItems?.length) return null;
-  
+
+    const tooltipPlacement = this.placement === 'right' ? 'left' : 'right';
+
     return this.sidebarItems.map((item, index) => {
       const shouldShowTooltip = (item as any).tooltip;
       const isTruncated =
@@ -167,7 +263,7 @@ export class NileInlineSidebar extends NileElement {
             <nile-tooltip
               content=${item.textContent?.trim() || ''}
               hoist
-              placement="right"
+              placement=${tooltipPlacement}
             >
               ${content}
             </nile-tooltip>
@@ -180,6 +276,11 @@ export class NileInlineSidebar extends NileElement {
   
 
   public render(): TemplateResult {
+    const isRight = this.placement === 'right';
+    const collapsedIcon = isRight ? 'menu_open' : 'menu_close';
+    const expandedIcon = isRight ? 'menu_close' : 'menu_open';
+    const actionPlacement = isRight ? 'bottom-end' : 'bottom-start';
+
     return html`
       <div class="sidebar" part="base">
         <div class="sidebar-header" part="header">
@@ -188,7 +289,7 @@ export class NileInlineSidebar extends NileElement {
               ? html`
                   <nile-side-bar-action
                     class="toggle-action"
-                    placement="bottom-start"
+                    placement=${actionPlacement}
                     hoist
                     open
                     triggerDropdown="hover"
@@ -199,7 +300,7 @@ export class NileInlineSidebar extends NileElement {
                       variant="tertiary"
                       @click=${this.toggleCollapse}
                     >
-                      <nile-icon name="menu_close"></nile-icon>
+                      <nile-icon name=${collapsedIcon}></nile-icon>
                     </nile-button>
                     <nile-side-bar-action-menu>
                       ${this.menuItemsTemplate}
@@ -212,7 +313,7 @@ export class NileInlineSidebar extends NileElement {
                     variant="tertiary"
                     @click=${this.toggleCollapse}
                   >
-                    <nile-icon name="menu_open"></nile-icon>
+                    <nile-icon name=${expandedIcon}></nile-icon>
                   </nile-button>
                 `
             : null}
@@ -220,6 +321,8 @@ export class NileInlineSidebar extends NileElement {
 
         <nav
           class="sidebar-nav"
+          role="navigation"
+          aria-label="Sidebar"
           style=${this.collapsed ? 'display:none;' : ''}
           part="nav-items"
         >