@aquera/nile-elements 1.9.4 → 1.9.5

package/dist/src/nile-command-menu/nile-command-menu.d.ts

@@ -0,0 +1,137 @@
+/**
+ * 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 NileElement from '../internal/nile-element';
+import '../nile-tag/nile-tag';
+import type { CSSResultGroup } from 'lit';
+/** A removable search scope shown in the "Searching for" row. */
+export interface CommandMenuScope {
+    label: string;
+    value: string;
+}
+/**
+ * A keyboard-driven command palette for fast, page-wide search and action execution.
+ *
+ * @tag nile-command-menu
+ *
+ * @summary A modal command menu (command palette) with built-in search, grouping and keyboard navigation.
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency nile-glyph
+ * @dependency nile-tag
+ *
+ * @slot - The command content: `nile-command-menu-group` and/or `nile-command-menu-item` elements.
+ * @slot empty - Custom content shown when no items match the current query.
+ * @slot footer - Optional footer content. When empty, a built-in keyboard-hint row is shown (unless `nofooterhints`).
+ *
+ * @event nile-show - Emitted when the menu opens.
+ * @event nile-after-show - Emitted after the menu opens and the animation completes.
+ * @event nile-hide - Emitted when the menu starts to close.
+ * @event nile-after-hide - Emitted after the menu closes and the animation completes.
+ * @event nile-request-close - Emitted when the user attempts to close the menu (overlay click / Escape). Cancelable.
+ * @event nile-search - Emitted when the search value changes. `detail: { value }`.
+ * @event nile-select - Emitted when an item is selected. `detail: { value, item }`.
+ * @event nile-scope-remove - Emitted when a scope tag is removed. `detail: { scope, scopes }`.
+ *
+ * @csspart base - The component's outer wrapper.
+ * @csspart overlay - The overlay behind the panel.
+ * @csspart panel - The command panel.
+ * @csspart header - The search header.
+ * @csspart input - The search input.
+ * @csspart scopes - The "Searching for" scopes row.
+ * @csspart scope-tag - Each scope tag in the scopes row.
+ * @csspart list - The scrollable results list.
+ * @csspart empty - The empty state shown when nothing matches.
+ * @csspart footer - The footer.
+ * @csspart hints - The built-in keyboard-hint row inside the footer.
+ *
+ * @cssproperty --width - The maximum width of the panel.
+ * @cssproperty --max-height - The maximum height of the panel.
+ */
+export declare class NileCommandMenu extends NileElement {
+    static styles: CSSResultGroup;
+    private readonly hasSlotController;
+    private modal;
+    private originalTrigger;
+    command: HTMLElement;
+    panel: HTMLElement;
+    overlay: HTMLElement;
+    input: HTMLInputElement;
+    /** Indicates whether the menu is open. Toggle this attribute, or use `show()` / `hide()`. */
+    open: boolean;
+    /** Placeholder text shown in the search input. */
+    placeholder: string;
+    /** Accessible label for the dialog and the search input. */
+    label: string;
+    /** Message shown when no items match the current query. Ignored when the `empty` slot is used. */
+    noResultsMessage: string;
+    /** The current search value. */
+    value: string;
+    /**
+     * When set, the menu does not filter items itself; instead it emits `nile-search` so the host can
+     * manage results. Useful for async/server-side search.
+     */
+    customSearch: boolean;
+    /** Keeps the menu open after an item is selected instead of closing it. */
+    keepOpenOnSelect: boolean;
+    /** Prevents the menu from closing when the overlay is clicked. */
+    preventOverlayClose: boolean;
+    /** Hides the built-in keyboard-hint footer (navigate / select / close). The `footer` slot always overrides it. */
+    noFooterHints: boolean;
+    /**
+     * Active search scopes shown as removable tags in the "Searching for" row. Items are filtered so that
+     * only those with no `scope` or whose `scope` matches an active scope are shown. Set via the `scopes`
+     * attribute (comma-separated labels or a JSON array) or the property (array of `{ label, value }`).
+     */
+    scopes: CommandMenuScope[];
+    /** Label shown before the scope tags. */
+    scopesLabel: string;
+    /** True when the current query matches no items. */
+    private hasResults;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    /** Gets all command items in the menu (across groups), in document order. */
+    private getAllItems;
+    /** Gets the items that are currently visible (matching the query) and not disabled. */
+    private getVisibleItems;
+    private getActiveItem;
+    private setActiveItem;
+    /** Applies the current query to the items, hiding non-matching items and empty groups. */
+    private filterItems;
+    /** Hides groups that have no visible items. */
+    private updateGroupVisibility;
+    /** Ensures exactly one visible item is active, defaulting to the first. */
+    private ensureActiveItem;
+    private handleInput;
+    handleScopesChange(): void;
+    private handleScopeRemove;
+    private handleSlotChange;
+    private handlePanelKeyDown;
+    private handleListClick;
+    private selectItem;
+    private requestClose;
+    private addOpenListeners;
+    private removeOpenListeners;
+    private handleDocumentKeyDown;
+    handleOpenChange(): Promise<void>;
+    /** Renders the "Searching for" scopes row when scopes are active. */
+    private renderScopes;
+    /** Renders the built-in keyboard-hint footer (used as the `footer` slot's fallback content). */
+    private renderHints;
+    /** Shows the command menu. */
+    show(): Promise<void>;
+    /** Hides the command menu. */
+    hide(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default NileCommandMenu;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-command-menu': NileCommandMenu;
+    }
+}

package/dist/src/nile-command-menu/nile-command-menu.js

@@ -0,0 +1,557 @@
+/**
+ * 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 { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { animateTo, stopAnimations } from '../internal/animate';
+import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
+import { HasSlotController } from '../internal/slot';
+import { lockBodyScrolling, unlockBodyScrolling } from '../internal/scroll';
+import { waitForEvent } from '../internal/event';
+import { watch } from '../internal/watch';
+import Modal from '../internal/modal';
+import NileElement from '../internal/nile-element';
+import { styles } from './nile-command-menu.css';
+import '../nile-tag/nile-tag';
+let commandMenuItemId = 0;
+function scopeFromValue(entry) {
+    if (typeof entry === 'string') {
+        return { label: entry, value: entry.toLowerCase() };
+    }
+    return { label: entry.label, value: entry.value ?? entry.label.toLowerCase() };
+}
+/** Normalises the `scopes` attribute (comma-separated string or JSON array) into scope objects. */
+const scopesConverter = {
+    fromAttribute(value) {
+        if (!value) {
+            return [];
+        }
+        const trimmed = value.trim();
+        if (trimmed.startsWith('[')) {
+            try {
+                const parsed = JSON.parse(trimmed);
+                return (Array.isArray(parsed) ? parsed : []).map(scopeFromValue);
+            }
+            catch {
+                // fall through to comma-separated parsing
+            }
+        }
+        return trimmed
+            .split(',')
+            .map(part => part.trim())
+            .filter(Boolean)
+            .map(scopeFromValue);
+    },
+    toAttribute(value) {
+        return (value ?? []).map(scope => scope.label).join(', ');
+    },
+};
+/**
+ * A keyboard-driven command palette for fast, page-wide search and action execution.
+ *
+ * @tag nile-command-menu
+ *
+ * @summary A modal command menu (command palette) with built-in search, grouping and keyboard navigation.
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency nile-glyph
+ * @dependency nile-tag
+ *
+ * @slot - The command content: `nile-command-menu-group` and/or `nile-command-menu-item` elements.
+ * @slot empty - Custom content shown when no items match the current query.
+ * @slot footer - Optional footer content. When empty, a built-in keyboard-hint row is shown (unless `nofooterhints`).
+ *
+ * @event nile-show - Emitted when the menu opens.
+ * @event nile-after-show - Emitted after the menu opens and the animation completes.
+ * @event nile-hide - Emitted when the menu starts to close.
+ * @event nile-after-hide - Emitted after the menu closes and the animation completes.
+ * @event nile-request-close - Emitted when the user attempts to close the menu (overlay click / Escape). Cancelable.
+ * @event nile-search - Emitted when the search value changes. `detail: { value }`.
+ * @event nile-select - Emitted when an item is selected. `detail: { value, item }`.
+ * @event nile-scope-remove - Emitted when a scope tag is removed. `detail: { scope, scopes }`.
+ *
+ * @csspart base - The component's outer wrapper.
+ * @csspart overlay - The overlay behind the panel.
+ * @csspart panel - The command panel.
+ * @csspart header - The search header.
+ * @csspart input - The search input.
+ * @csspart scopes - The "Searching for" scopes row.
+ * @csspart scope-tag - Each scope tag in the scopes row.
+ * @csspart list - The scrollable results list.
+ * @csspart empty - The empty state shown when nothing matches.
+ * @csspart footer - The footer.
+ * @csspart hints - The built-in keyboard-hint row inside the footer.
+ *
+ * @cssproperty --width - The maximum width of the panel.
+ * @cssproperty --max-height - The maximum height of the panel.
+ */
+let NileCommandMenu = class NileCommandMenu extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.hasSlotController = new HasSlotController(this, 'footer');
+        /** Indicates whether the menu is open. Toggle this attribute, or use `show()` / `hide()`. */
+        this.open = false;
+        /** Placeholder text shown in the search input. */
+        this.placeholder = 'Search commands...';
+        /** Accessible label for the dialog and the search input. */
+        this.label = 'Command menu';
+        /** Message shown when no items match the current query. Ignored when the `empty` slot is used. */
+        this.noResultsMessage = 'No results found';
+        /** The current search value. */
+        this.value = '';
+        /**
+         * When set, the menu does not filter items itself; instead it emits `nile-search` so the host can
+         * manage results. Useful for async/server-side search.
+         */
+        this.customSearch = false;
+        /** Keeps the menu open after an item is selected instead of closing it. */
+        this.keepOpenOnSelect = false;
+        /** Prevents the menu from closing when the overlay is clicked. */
+        this.preventOverlayClose = false;
+        /** Hides the built-in keyboard-hint footer (navigate / select / close). The `footer` slot always overrides it. */
+        this.noFooterHints = false;
+        /**
+         * Active search scopes shown as removable tags in the "Searching for" row. Items are filtered so that
+         * only those with no `scope` or whose `scope` matches an active scope are shown. Set via the `scopes`
+         * attribute (comma-separated labels or a JSON array) or the property (array of `{ label, value }`).
+         */
+        this.scopes = [];
+        /** Label shown before the scope tags. */
+        this.scopesLabel = 'Searching for';
+        /** True when the current query matches no items. */
+        this.hasResults = true;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+        this.modal = new Modal(this);
+    }
+    firstUpdated() {
+        this.command.hidden = !this.open;
+        if (this.open) {
+            this.addOpenListeners();
+            this.modal.activate();
+            lockBodyScrolling(this);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        unlockBodyScrolling(this);
+    }
+    /** Gets all command items in the menu (across groups), in document order. */
+    getAllItems() {
+        return [...this.querySelectorAll('nile-command-menu-item')];
+    }
+    /** Gets the items that are currently visible (matching the query) and not disabled. */
+    getVisibleItems() {
+        return this.getAllItems().filter(item => !item.hidden && !item.disabled);
+    }
+    getActiveItem() {
+        return this.getVisibleItems().find(item => item.active);
+    }
+    setActiveItem(item) {
+        this.getAllItems().forEach(i => {
+            i.active = i === item;
+        });
+        if (item) {
+            if (!item.id) {
+                item.id = `nile-command-menu-item-${++commandMenuItemId}`;
+            }
+            this.input?.setAttribute('aria-activedescendant', item.id);
+            item.scrollIntoView({ block: 'nearest' });
+        }
+        else {
+            this.input?.removeAttribute('aria-activedescendant');
+        }
+    }
+    /** Applies the current query to the items, hiding non-matching items and empty groups. */
+    filterItems() {
+        const items = this.getAllItems();
+        if (this.customSearch) {
+            // The host owns visibility; just refresh the empty state and active item.
+            this.hasResults = this.getVisibleItems().length > 0;
+            this.updateGroupVisibility();
+            this.ensureActiveItem();
+            return;
+        }
+        const query = this.value.trim().toLowerCase();
+        const activeScopes = this.scopes.map(scope => scope.value);
+        items.forEach(item => {
+            const matchesQuery = query.length === 0 || item.getFilterText().includes(query);
+            const matchesScope = activeScopes.length === 0 || !item.scope || activeScopes.includes(item.scope);
+            item.hidden = !(matchesQuery && matchesScope);
+        });
+        this.updateGroupVisibility();
+        this.hasResults = this.getVisibleItems().length > 0;
+        this.ensureActiveItem();
+    }
+    /** Hides groups that have no visible items. */
+    updateGroupVisibility() {
+        const groups = [...this.querySelectorAll('nile-command-menu-group')];
+        groups.forEach(group => {
+            const hasVisibleItem = [
+                ...group.querySelectorAll('nile-command-menu-item'),
+            ].some(item => !item.hidden);
+            group.hidden = !hasVisibleItem;
+        });
+    }
+    /** Ensures exactly one visible item is active, defaulting to the first. */
+    ensureActiveItem() {
+        const visible = this.getVisibleItems();
+        const current = this.getActiveItem();
+        if (visible.length === 0) {
+            this.setActiveItem(undefined);
+            return;
+        }
+        if (!current || !visible.includes(current)) {
+            this.setActiveItem(visible[0]);
+        }
+    }
+    handleInput(event) {
+        this.value = event.target.value;
+        this.emit('nile-search', { value: this.value });
+        this.filterItems();
+    }
+    handleScopesChange() {
+        this.filterItems();
+    }
+    handleScopeRemove(scope) {
+        this.scopes = this.scopes.filter(s => s.value !== scope.value);
+        this.emit('nile-scope-remove', { scope, scopes: this.scopes });
+        this.filterItems();
+    }
+    handleSlotChange() {
+        this.filterItems();
+    }
+    handlePanelKeyDown(event) {
+        const visible = this.getVisibleItems();
+        if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+            if (visible.length === 0) {
+                return;
+            }
+            event.preventDefault();
+            const current = this.getActiveItem();
+            let index = current ? visible.indexOf(current) : -1;
+            if (event.key === 'ArrowDown')
+                index++;
+            else if (event.key === 'ArrowUp')
+                index--;
+            else if (event.key === 'Home')
+                index = 0;
+            else if (event.key === 'End')
+                index = visible.length - 1;
+            if (index < 0)
+                index = visible.length - 1;
+            if (index > visible.length - 1)
+                index = 0;
+            this.setActiveItem(visible[index]);
+            return;
+        }
+        if (event.key === 'Enter') {
+            const current = this.getActiveItem();
+            if (current) {
+                event.preventDefault();
+                this.selectItem(current);
+            }
+        }
+    }
+    handleListClick(event) {
+        const item = event.target.closest('nile-command-menu-item');
+        if (item && !item.disabled) {
+            this.selectItem(item);
+        }
+    }
+    selectItem(item) {
+        this.emit('nile-select', { value: item.value, item });
+        if (!this.keepOpenOnSelect) {
+            this.hide();
+        }
+    }
+    requestClose(source) {
+        const requestClose = this.emit('nile-request-close', { source }, undefined, undefined, true);
+        if (requestClose.defaultPrevented) {
+            return;
+        }
+        if (source === 'overlay' && this.preventOverlayClose) {
+            return;
+        }
+        this.hide();
+    }
+    addOpenListeners() {
+        document.addEventListener('keydown', this.handleDocumentKeyDown);
+    }
+    removeOpenListeners() {
+        document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    }
+    handleDocumentKeyDown(event) {
+        if (this.open && event.key === 'Escape') {
+            event.stopPropagation();
+            this.requestClose('keyboard');
+        }
+    }
+    async handleOpenChange() {
+        if (this.open) {
+            this.emit('nile-show');
+            this.addOpenListeners();
+            this.originalTrigger = document.activeElement;
+            this.modal.activate();
+            lockBodyScrolling(this);
+            await stopAnimations(this.command);
+            this.command.hidden = false;
+            // Reset query and selection each time the menu opens.
+            this.value = '';
+            this.filterItems();
+            requestAnimationFrame(() => {
+                this.input?.focus({ preventScroll: true });
+            });
+            const panelAnimation = getAnimation(this, 'command.show', { dir: 'ltr' });
+            const overlayAnimation = getAnimation(this, 'command.overlay.show', { dir: 'ltr' });
+            await Promise.all([
+                animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
+                animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options),
+            ]);
+            this.emit('nile-after-show');
+        }
+        else {
+            this.emit('nile-hide');
+            this.removeOpenListeners();
+            this.modal.deactivate();
+            await stopAnimations(this.command);
+            const panelAnimation = getAnimation(this, 'command.hide', { dir: 'ltr' });
+            const overlayAnimation = getAnimation(this, 'command.overlay.hide', { dir: 'ltr' });
+            await Promise.all([
+                animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
+                animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options),
+            ]);
+            this.command.hidden = true;
+            unlockBodyScrolling(this);
+            const trigger = this.originalTrigger;
+            if (typeof trigger?.focus === 'function') {
+                setTimeout(() => trigger.focus());
+            }
+            this.emit('nile-after-hide');
+        }
+    }
+    /** Renders the "Searching for" scopes row when scopes are active. */
+    renderScopes() {
+        if (this.scopes.length === 0) {
+            return nothing;
+        }
+        return html `
+      <div part="scopes" class="command__scopes">
+        <span class="command__scopes-label">${this.scopesLabel}</span>
+        <div class="command__scopes-tags">
+          ${this.scopes.map(scope => html `
+              <nile-tag
+                part="scope-tag"
+                exportparts="base:scope-tag__base"
+                size="medium"
+                variant="normal"
+                pill
+                removable
+                .value=${scope.value}
+                @nile-remove=${() => this.handleScopeRemove(scope)}
+              >
+                ${scope.label}
+              </nile-tag>
+            `)}
+        </div>
+      </div>
+    `;
+    }
+    /** Renders the built-in keyboard-hint footer (used as the `footer` slot's fallback content). */
+    renderHints() {
+        return html `
+      <div part="hints" class="command__hints">
+        <span class="command__hint"><kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
+        <span class="command__hint"><kbd>↵</kbd> to select</span>
+        <span class="command__hint"><kbd>esc</kbd> to close</span>
+      </div>
+    `;
+    }
+    /** Shows the command menu. */
+    async show() {
+        if (this.open) {
+            return undefined;
+        }
+        this.open = true;
+        return waitForEvent(this, 'nile-after-show');
+    }
+    /** Hides the command menu. */
+    async hide() {
+        if (!this.open) {
+            return undefined;
+        }
+        this.open = false;
+        return waitForEvent(this, 'nile-after-hide');
+    }
+    render() {
+        return html `
+      <div
+        part="base"
+        class=${classMap({
+            command: true,
+            'command--open': this.open,
+            'command--has-footer': this.hasSlotController.test('footer') || !this.noFooterHints,
+        })}
+      >
+        <div
+          part="overlay"
+          class="command__overlay"
+          tabindex="-1"
+          @click=${() => this.requestClose('overlay')}
+        ></div>
+
+        <div
+          part="panel"
+          class="command__panel"
+          role="dialog"
+          aria-modal="true"
+          aria-label=${this.label}
+          aria-hidden=${this.open ? 'false' : 'true'}
+          @keydown=${this.handlePanelKeyDown}
+        >
+          <div part="header" class="command__header">
+            <span class="command__search-icon" aria-hidden="true">
+              <nile-glyph name="search" size="20" method="stroke"></nile-glyph>
+            </span>
+            <input
+              part="input"
+              class="command__input"
+              type="text"
+              role="combobox"
+              aria-expanded="true"
+              aria-controls="command-list"
+              aria-label=${this.label}
+              autocomplete="off"
+              autocorrect="off"
+              autocapitalize="off"
+              spellcheck="false"
+              .value=${this.value}
+              placeholder=${this.placeholder}
+              @input=${this.handleInput}
+            />
+          </div>
+
+          ${this.renderScopes()}
+
+          <div
+            part="list"
+            id="command-list"
+            class="command__list"
+            role="listbox"
+            aria-label=${this.label}
+            @click=${this.handleListClick}
+          >
+            <slot @slotchange=${this.handleSlotChange}></slot>
+
+            <div
+              part="empty"
+              class=${classMap({
+            command__empty: true,
+            'command__empty--visible': !this.hasResults,
+        })}
+            >
+              <slot name="empty">${!this.hasResults ? this.noResultsMessage : nothing}</slot>
+            </div>
+          </div>
+
+          <footer part="footer" class="command__footer">
+            <slot name="footer">
+              ${this.noFooterHints ? nothing : this.renderHints()}
+            </slot>
+          </footer>
+        </div>
+      </div>
+    `;
+    }
+};
+NileCommandMenu.styles = styles;
+__decorate([
+    query('.command')
+], NileCommandMenu.prototype, "command", void 0);
+__decorate([
+    query('.command__panel')
+], NileCommandMenu.prototype, "panel", void 0);
+__decorate([
+    query('.command__overlay')
+], NileCommandMenu.prototype, "overlay", void 0);
+__decorate([
+    query('.command__input')
+], NileCommandMenu.prototype, "input", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileCommandMenu.prototype, "open", void 0);
+__decorate([
+    property()
+], NileCommandMenu.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], NileCommandMenu.prototype, "label", void 0);
+__decorate([
+    property({ attribute: true })
+], NileCommandMenu.prototype, "noResultsMessage", void 0);
+__decorate([
+    property()
+], NileCommandMenu.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true })
+], NileCommandMenu.prototype, "customSearch", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true })
+], NileCommandMenu.prototype, "keepOpenOnSelect", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true })
+], NileCommandMenu.prototype, "preventOverlayClose", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true })
+], NileCommandMenu.prototype, "noFooterHints", void 0);
+__decorate([
+    property({ converter: scopesConverter })
+], NileCommandMenu.prototype, "scopes", void 0);
+__decorate([
+    property({ attribute: true })
+], NileCommandMenu.prototype, "scopesLabel", void 0);
+__decorate([
+    state()
+], NileCommandMenu.prototype, "hasResults", void 0);
+__decorate([
+    watch('scopes', { waitUntilFirstUpdate: true })
+], NileCommandMenu.prototype, "handleScopesChange", null);
+__decorate([
+    watch('open', { waitUntilFirstUpdate: true })
+], NileCommandMenu.prototype, "handleOpenChange", null);
+NileCommandMenu = __decorate([
+    customElement('nile-command-menu')
+], NileCommandMenu);
+export { NileCommandMenu };
+setDefaultAnimation('command.show', {
+    keyframes: [
+        { opacity: 0, scale: 0.95 },
+        { opacity: 1, scale: 1 },
+    ],
+    options: { duration: 200, easing: 'ease' },
+});
+setDefaultAnimation('command.hide', {
+    keyframes: [
+        { opacity: 1, scale: 1 },
+        { opacity: 0, scale: 0.95 },
+    ],
+    options: { duration: 200, easing: 'ease' },
+});
+setDefaultAnimation('command.overlay.show', {
+    keyframes: [{ opacity: 0 }, { opacity: 1 }],
+    options: { duration: 200 },
+});
+setDefaultAnimation('command.overlay.hide', {
+    keyframes: [{ opacity: 1 }, { opacity: 0 }],
+    options: { duration: 200 },
+});
+export default NileCommandMenu;
+//# sourceMappingURL=nile-command-menu.js.map