@aquera/nile-elements 1.9.4 → 1.9.6

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.9.4",
+  "version": "1.9.6",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -76,6 +76,7 @@
     "./nile-hero": "./dist/src/nile-hero/index.js",
     "./nile-stepper-item": "./dist/src/nile-stepper-item/index.js",
     "./nile-stepper": "./dist/src/nile-stepper/index.js",
+    "./nile-dot-stepper": "./dist/src/nile-dot-stepper/index.js",
     "./nile-hero-header": "./dist/src/nile-hero-header/index.js",
     "./nile-vertical-stepper-item": "./dist/src/nile-vertical-stepper-item/index.js",
     "./nile-format-date": "./dist/src/nile-format-date/index.js",

package/src/index.ts

@@ -65,6 +65,7 @@ export { NileEmptyState } from './nile-empty-state';
 export { NileHero } from './nile-hero';
 export { NileStepperItem } from './nile-stepper-item';
 export { NileStepper } from './nile-stepper';
+export { NileDotStepper } from './nile-dot-stepper';
 export { NileHeroHeader } from './nile-hero-header';
 export { NileVerticalStepperItem } from './nile-vertical-stepper-item';
 export { NileFormatDate } from './nile-format-date';
@@ -130,6 +131,9 @@ export { NileFloatingPanel } from './nile-floating-panel';
 export { NileContextMenu } from './nile-context-menu';
 export { NileContextMenuGroup } from './nile-context-menu-group';
 export { NileContextMenuItem } from './nile-context-menu-item';
+export { NileCommandMenu } from './nile-command-menu';
+export { NileCommandMenuGroup } from './nile-command-menu-group';
+export { NileCommandMenuItem } from './nile-command-menu-item';
 export { NileInlineSidebarItemHeader } from './nile-inline-sidebar-item-header';
 export { NileInlineSidebarItemBody } from './nile-inline-sidebar-item-body';
 export { NileMarkdown } from './nile-markdown';

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

@@ -89,11 +89,13 @@ export const styles = css`
   }
 
   .nile-chip {
-    padding: var(--nile-spacing-5px,var( --ng-spacing-md)) var(--nile-spacing-10px,var(--ng-spacing-lg));
+    padding: var(--nile-spacing-5px,var(--ng-spacing-xs)) var(--nile-spacing-10px,var(--ng-spacing-lg));
+    min-height: var(--ng-height-40px);
     background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));
     border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
     border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));
     display: flex;
+    align-items: center;
     flex-wrap: wrap;
     width: 100%;
     overflow-x: hidden;
@@ -102,6 +104,7 @@ export const styles = css`
 
   nile-input::part(base) {
     padding: 0px !important;
+    height: auto;
   }
 
   .nile-chip--no-wrap {
@@ -171,6 +174,10 @@ export const styles = css`
   nile-auto-complete::part(input) {
     padding: var(--nile-spacing-lg, var(--ng-spacing-none));
   }
+
+  nile-auto-complete::part(base) {
+    height: auto;
+  }
   
   .nile-chip:hover:not(.nile-chip--disabled) {
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));

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

@@ -298,12 +298,12 @@ export class NileCodeEditor extends NileElement {
       ${this.expandable && !this.disabled
       ? html` 
         <div @click="${(e: CustomEvent) => this.emit('nile-expand')}" class="expand__icon__container">
-          <nile-icon
+          <nile-glyph
             name="${this.expandIcon}"
-            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+            method="var(--nile-svg-method-fill, var(--ng-svg-method-fill))"
             size="16"
             color="black"
-          ></nile-icon>
+          ></nile-glyph>
         </div>`
       : ''}
       </div>

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

@@ -0,0 +1 @@
+export { NileCommandMenu } from './nile-command-menu';

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

@@ -0,0 +1,196 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+/**
+ * CommandMenu CSS
+ */
+export const styles = css`
+  :host {
+    --width: 640px;
+    --max-height: 480px;
+
+    display: contents;
+    box-sizing: border-box;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  .command {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 15vh var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+  }
+
+  .command[hidden] {
+    display: none;
+  }
+
+  .command__overlay {
+    position: fixed;
+    inset: 0;
+    background-color: var(--nile-bg-color-dialog, var(--ng-componentcolors-alpha-black-70));
+  }
+
+  .command__panel {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: var(--width);
+    max-height: var(--max-height);
+    overflow: hidden;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border-radius: var(--nile-radius-lg, var(--ng-radius-xl));
+    box-shadow: var(--nile-box-shadow-8, var(--ng-shadow-xl));
+  }
+
+  .command__panel:focus {
+    outline: none;
+  }
+
+  /* Search header */
+  .command__header {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));
+    border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+  }
+
+  .command__search-icon {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));
+  }
+
+  .command__search-icon nile-glyph {
+    width: 20px;
+    height: 20px;
+  }
+
+  .command__input {
+    flex: 1 1 auto;
+    min-width: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-family: inherit;
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    line-height: 1.4;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+  }
+
+  .command__input::placeholder {
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));
+  }
+
+  /* "Searching for" scopes row */
+  .command__scopes {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
+    border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+  }
+
+  .command__scopes-label {
+    flex: 0 0 auto;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
+  }
+
+  .command__scopes-tags {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
+  }
+
+  /* Scrollable results list */
+  .command__list {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: var(--nile-spacing-sm, var(--ng-spacing-sm));
+  }
+
+  .command__empty {
+    display: none;
+    padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));
+    text-align: center;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
+  }
+
+  .command__empty--visible {
+    display: block;
+  }
+
+  /* Footer */
+  .command__footer {
+    display: none;
+    align-items: center;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
+    border-top: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
+  }
+
+  .command--has-footer .command__footer {
+    display: flex;
+  }
+
+  /* Built-in keyboard-hint row (footer slot fallback) */
+  .command__hints {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
+  }
+
+  .command__hint {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
+  }
+
+  .command__footer kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 5px;
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    font-family: inherit;
+    font-size: 11px;
+    line-height: 1;
+    color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,289 @@
+import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
+import './nile-command-menu';
+import '../nile-command-menu-group/nile-command-menu-group';
+import '../nile-command-menu-item/nile-command-menu-item';
+import type { NileCommandMenu } from './nile-command-menu';
+import type { NileCommandMenuItem } from '../nile-command-menu-item/nile-command-menu-item';
+
+const withItems = html`
+  <nile-command-menu>
+    <nile-command-menu-group heading="Pages">
+      <nile-command-menu-item value="home">Home</nile-command-menu-item>
+      <nile-command-menu-item value="settings">Settings</nile-command-menu-item>
+    </nile-command-menu-group>
+    <nile-command-menu-group heading="Actions">
+      <nile-command-menu-item value="new">New file</nile-command-menu-item>
+      <nile-command-menu-item value="disabled" disabled>Disabled</nile-command-menu-item>
+    </nile-command-menu-group>
+  </nile-command-menu>
+`;
+
+describe('NileCommandMenu', () => {
+  it('1. renders', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el).to.exist; });
+  it('2. shadow root', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.shadowRoot).to.not.be.null; });
+  it('3. tag name', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.tagName.toLowerCase()).to.equal('nile-command-menu'); });
+  it('4. open defaults false', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.open).to.be.false; });
+  it('5. placeholder default', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.placeholder).to.equal('Search commands...'); });
+  it('6. label default', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.label).to.equal('Command menu'); });
+  it('7. noResultsMessage default', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.noResultsMessage).to.equal('No results found'); });
+  it('8. customSearch defaults false', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.customSearch).to.be.false; });
+  it('9. keepOpenOnSelect defaults false', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.keepOpenOnSelect).to.be.false; });
+  it('10. preventOverlayClose defaults false', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.preventOverlayClose).to.be.false; });
+  it('11. base part', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.shadowRoot!.querySelector('[part="base"]')).to.exist; });
+  it('12. overlay part', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.shadowRoot!.querySelector('[part="overlay"]')).to.exist; });
+  it('13. panel part', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.shadowRoot!.querySelector('[part="panel"]')).to.exist; });
+  it('14. input part', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.shadowRoot!.querySelector('[part="input"]')).to.exist; });
+  it('15. list part', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.shadowRoot!.querySelector('[part="list"]')).to.exist; });
+  it('16. footer part', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.shadowRoot!.querySelector('[part="footer"]')).to.exist; });
+  it('17. empty part', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.shadowRoot!.querySelector('[part="empty"]')).to.exist; });
+  it('18. default slot', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.shadowRoot!.querySelector('slot:not([name])')).to.exist; });
+  it('19. footer slot', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.shadowRoot!.querySelector('slot[name="footer"]')).to.exist; });
+  it('20. empty slot', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.shadowRoot!.querySelector('slot[name="empty"]')).to.exist; });
+  it('21. dialog role', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.shadowRoot!.querySelector('[role="dialog"]')).to.exist; });
+  it('22. listbox role', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.shadowRoot!.querySelector('[role="listbox"]')).to.exist; });
+  it('23. input combobox role', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.shadowRoot!.querySelector('input[role="combobox"]')).to.exist; });
+  it('24. placeholder applied', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu placeholder="Find..."></nile-command-menu>`); await el.updateComplete; expect(el.shadowRoot!.querySelector('input')!.placeholder).to.equal('Find...'); });
+  it('25. show method', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.show).to.be.a('function'); });
+  it('26. hide method', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.hide).to.be.a('function'); });
+  it('27. show opens', async () => { const el = await fixture<NileCommandMenu>(withItems); await el.show(); expect(el.open).to.be.true; await el.hide(); });
+  it('28. nile-show event', async () => { const el = await fixture<NileCommandMenu>(withItems); setTimeout(() => el.show()); const ev = await oneEvent(el, 'nile-show'); expect(ev).to.exist; await el.hide(); });
+  it('29. nile-after-show event', async () => { const el = await fixture<NileCommandMenu>(withItems); setTimeout(() => el.show()); const ev = await oneEvent(el, 'nile-after-show'); expect(ev).to.exist; await el.hide(); });
+  it('30. hide closes', async () => { const el = await fixture<NileCommandMenu>(withItems); await el.show(); await el.hide(); expect(el.open).to.be.false; });
+
+  it('31. filters items by query', async () => {
+    const el = await fixture<NileCommandMenu>(withItems);
+    await el.show();
+    const input = el.shadowRoot!.querySelector('input')!;
+    input.value = 'settings';
+    input.dispatchEvent(new Event('input'));
+    await el.updateComplete;
+    const visible = [...el.querySelectorAll<NileCommandMenuItem>('nile-command-menu-item')].filter(i => !i.hidden);
+    expect(visible.length).to.equal(1);
+    expect(visible[0].value).to.equal('settings');
+    await el.hide();
+  });
+
+  it('32. hides empty groups', async () => {
+    const el = await fixture<NileCommandMenu>(withItems);
+    await el.show();
+    const input = el.shadowRoot!.querySelector('input')!;
+    input.value = 'home';
+    input.dispatchEvent(new Event('input'));
+    await el.updateComplete;
+    const groups = el.querySelectorAll('nile-command-menu-group');
+    expect(groups[0].hidden).to.be.false; // Pages (has Home)
+    expect(groups[1].hidden).to.be.true; // Actions (no match)
+    await el.hide();
+  });
+
+  it('33. shows empty state on no match', async () => {
+    const el = await fixture<NileCommandMenu>(withItems);
+    await el.show();
+    const input = el.shadowRoot!.querySelector('input')!;
+    input.value = 'zzzznomatch';
+    input.dispatchEvent(new Event('input'));
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.command__empty--visible')).to.exist;
+    await el.hide();
+  });
+
+  it('34. emits nile-search', async () => {
+    const el = await fixture<NileCommandMenu>(withItems);
+    await el.show();
+    const input = el.shadowRoot!.querySelector('input')!;
+    setTimeout(() => { input.value = 'x'; input.dispatchEvent(new Event('input')); });
+    const ev = await oneEvent(el, 'nile-search');
+    expect(ev.detail.value).to.equal('x');
+    await el.hide();
+  });
+
+  it('35. emits nile-select on click', async () => {
+    const el = await fixture<NileCommandMenu>(withItems);
+    await el.show();
+    const item = el.querySelector<NileCommandMenuItem>('nile-command-menu-item[value="home"]')!;
+    setTimeout(() => item.click());
+    const ev = await oneEvent(el, 'nile-select');
+    expect(ev.detail.value).to.equal('home');
+  });
+
+  it('36. select closes by default', async () => {
+    const el = await fixture<NileCommandMenu>(withItems);
+    await el.show();
+    const item = el.querySelector<NileCommandMenuItem>('nile-command-menu-item[value="home"]')!;
+    item.click();
+    await waitUntil(() => !el.open);
+    expect(el.open).to.be.false;
+  });
+
+  it('37. keep-open-on-select stays open', async () => {
+    const el = await fixture<NileCommandMenu>(html`
+      <nile-command-menu keepopenonselect>
+        <nile-command-menu-item value="home">Home</nile-command-menu-item>
+      </nile-command-menu>
+    `);
+    await el.show();
+    el.querySelector<NileCommandMenuItem>('nile-command-menu-item')!.click();
+    await el.updateComplete;
+    expect(el.open).to.be.true;
+    await el.hide();
+  });
+
+  it('38. disabled item not selected on click', async () => {
+    const el = await fixture<NileCommandMenu>(withItems);
+    await el.show();
+    let fired = false;
+    el.addEventListener('nile-select', () => (fired = true));
+    el.querySelector<NileCommandMenuItem>('nile-command-menu-item[value="disabled"]')!.click();
+    await el.updateComplete;
+    expect(fired).to.be.false;
+    await el.hide();
+  });
+
+  it('39. arrow down moves active item', async () => {
+    const el = await fixture<NileCommandMenu>(withItems);
+    await el.show();
+    const panel = el.shadowRoot!.querySelector('[role="dialog"]')!;
+    panel.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    await el.updateComplete;
+    const active = [...el.querySelectorAll<NileCommandMenuItem>('nile-command-menu-item')].filter(i => i.active);
+    expect(active.length).to.equal(1);
+    await el.hide();
+  });
+
+  it('40. first visible item active on open', async () => {
+    const el = await fixture<NileCommandMenu>(withItems);
+    await el.show();
+    const active = [...el.querySelectorAll<NileCommandMenuItem>('nile-command-menu-item')].filter(i => i.active);
+    expect(active.length).to.equal(1);
+    expect(active[0].value).to.equal('home');
+    await el.hide();
+  });
+
+  it('41. enter selects active item', async () => {
+    const el = await fixture<NileCommandMenu>(withItems);
+    await el.show();
+    const panel = el.shadowRoot!.querySelector('[role="dialog"]')!;
+    setTimeout(() => panel.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })));
+    const ev = await oneEvent(el, 'nile-select');
+    expect(ev.detail.value).to.equal('home');
+  });
+
+  it('42. custom-search does not auto-filter', async () => {
+    const el = await fixture<NileCommandMenu>(html`
+      <nile-command-menu customsearch>
+        <nile-command-menu-item value="a">Alpha</nile-command-menu-item>
+        <nile-command-menu-item value="b">Beta</nile-command-menu-item>
+      </nile-command-menu>
+    `);
+    await el.show();
+    const input = el.shadowRoot!.querySelector('input')!;
+    input.value = 'zzz';
+    input.dispatchEvent(new Event('input'));
+    await el.updateComplete;
+    const visible = [...el.querySelectorAll<NileCommandMenuItem>('nile-command-menu-item')].filter(i => !i.hidden);
+    expect(visible.length).to.equal(2);
+    await el.hide();
+  });
+
+  it('43. nile-request-close cancelable', async () => {
+    const el = await fixture<NileCommandMenu>(withItems);
+    await el.show();
+    el.addEventListener('nile-request-close', e => e.preventDefault());
+    const overlay = el.shadowRoot!.querySelector('.command__overlay') as HTMLElement;
+    overlay.click();
+    await el.updateComplete;
+    expect(el.open).to.be.true;
+    await el.hide();
+  });
+
+  it('44. overlay click closes', async () => {
+    const el = await fixture<NileCommandMenu>(withItems);
+    await el.show();
+    const overlay = el.shadowRoot!.querySelector('.command__overlay') as HTMLElement;
+    overlay.click();
+    await waitUntil(() => !el.open);
+    expect(el.open).to.be.false;
+  });
+
+  it('45. has-footer class when footer slotted', async () => {
+    const el = await fixture<NileCommandMenu>(html`
+      <nile-command-menu><div slot="footer">footer</div></nile-command-menu>
+    `);
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.command--has-footer')).to.exist;
+  });
+
+  it('46. resets query on reopen', async () => {
+    const el = await fixture<NileCommandMenu>(withItems);
+    await el.show();
+    const input = el.shadowRoot!.querySelector('input')!;
+    input.value = 'home';
+    input.dispatchEvent(new Event('input'));
+    await el.updateComplete;
+    await el.hide();
+    await el.show();
+    expect(el.value).to.equal('');
+    await el.hide();
+  });
+
+  it('S1. scopes empty by default', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.scopes).to.deep.equal([]); });
+  it('S2. no scopes row when empty', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); await el.updateComplete; expect(el.shadowRoot!.querySelector('[part="scopes"]')).to.be.null; });
+  it('S3. scopes attribute parses comma list', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu scopes="Pages, Actions"></nile-command-menu>`); expect(el.scopes.map(s => s.value)).to.deep.equal(['pages', 'actions']); });
+  it('S4. scopes row renders tags', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu scopes="Pages, Actions"></nile-command-menu>`); await el.updateComplete; expect(el.shadowRoot!.querySelector('[part="scopes"]')).to.exist; expect(el.shadowRoot!.querySelectorAll('nile-tag').length).to.equal(2); });
+  it('S5. default scopes label', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); expect(el.scopesLabel).to.equal('Searching for'); });
+  it('S6. scope filters items', async () => {
+    const el = await fixture<NileCommandMenu>(html`
+      <nile-command-menu scopes="Pages, Actions">
+        <nile-command-menu-item value="home" scope="pages">Home</nile-command-menu-item>
+        <nile-command-menu-item value="run" scope="actions">Run</nile-command-menu-item>
+      </nile-command-menu>
+    `);
+    await el.show();
+    el.scopes = [{ label: 'Pages', value: 'pages' }];
+    await el.updateComplete;
+    const visible = [...el.querySelectorAll<NileCommandMenuItem>('nile-command-menu-item')].filter(i => !i.hidden);
+    expect(visible.map(i => i.value)).to.deep.equal(['home']);
+    await el.hide();
+  });
+  it('S7. scoped item with no scope always shown', async () => {
+    const el = await fixture<NileCommandMenu>(html`
+      <nile-command-menu scopes="Pages">
+        <nile-command-menu-item value="home" scope="pages">Home</nile-command-menu-item>
+        <nile-command-menu-item value="global">Global</nile-command-menu-item>
+        <nile-command-menu-item value="run" scope="actions">Run</nile-command-menu-item>
+      </nile-command-menu>
+    `);
+    await el.show();
+    const visible = [...el.querySelectorAll<NileCommandMenuItem>('nile-command-menu-item')].filter(i => !i.hidden);
+    expect(visible.map(i => i.value)).to.have.members(['home', 'global']);
+    expect(visible.map(i => i.value)).to.not.include('run');
+    await el.hide();
+  });
+  it('S8. removing a scope emits event and refilters', async () => {
+    const el = await fixture<NileCommandMenu>(html`
+      <nile-command-menu scopes="Pages, Actions">
+        <nile-command-menu-item value="home" scope="pages">Home</nile-command-menu-item>
+        <nile-command-menu-item value="run" scope="actions">Run</nile-command-menu-item>
+      </nile-command-menu>
+    `);
+    await el.show();
+    const tag = el.shadowRoot!.querySelector('nile-tag')!; // first tag = Pages
+    setTimeout(() => tag.dispatchEvent(new CustomEvent('nile-remove', { bubbles: true, composed: true })));
+    const ev = await oneEvent(el, 'nile-scope-remove');
+    expect(ev.detail.scope.value).to.equal('pages');
+    await el.updateComplete;
+    expect(el.scopes.map(s => s.value)).to.deep.equal(['actions']);
+    const visible = [...el.querySelectorAll<NileCommandMenuItem>('nile-command-menu-item')].filter(i => !i.hidden);
+    expect(visible.map(i => i.value)).to.deep.equal(['run']);
+    await el.hide();
+  });
+
+  it('47a. footer hints render by default', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); await el.updateComplete; expect(el.shadowRoot!.querySelector('[part="hints"]')).to.exist; expect(el.shadowRoot!.querySelectorAll('.command__footer kbd').length).to.be.greaterThan(0); });
+  it('47b. has-footer by default (hints)', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu></nile-command-menu>`); await el.updateComplete; expect(el.shadowRoot!.querySelector('.command--has-footer')).to.exist; });
+  it('47c. no-footer-hints removes hints', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu nofooterhints></nile-command-menu>`); await el.updateComplete; expect(el.noFooterHints).to.be.true; expect(el.shadowRoot!.querySelector('[part="hints"]')).to.be.null; });
+  it('47d. no-footer-hints hides footer', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu nofooterhints></nile-command-menu>`); await el.updateComplete; expect(el.shadowRoot!.querySelector('.command--has-footer')).to.be.null; });
+  it('47. is defined', async () => { expect(customElements.get('nile-command-menu')).to.exist; });
+  it('48. has styles', async () => { expect((await import('./nile-command-menu')).NileCommandMenu.styles).to.exist; });
+  it('49. open reflects', async () => { const el = await fixture<NileCommandMenu>(html`<nile-command-menu open></nile-command-menu>`); expect(el.hasAttribute('open')).to.be.true; });
+  it('50. createElement', async () => { const el = document.createElement('nile-command-menu') as NileCommandMenu; document.body.appendChild(el); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; document.body.removeChild(el); });
+});