@aquera/nile-elements 1.7.8 → 1.8.0

package/dist/src/nile-context-menu/nile-context-menu.css.js

@@ -0,0 +1,127 @@
+/**
+ * Copyright Aquera Inc 2026
+ *
+ * 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';
+export const styles = css `
+  :host {
+    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));
+    display: block;
+  }
+
+  .nile-context-menu__menu {
+    display: none;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  .nile-context-menu__menu {
+    min-width: 200px;
+    max-width: 540px;
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-none, var(--ng-spacing-none));
+    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-radius-lg, var(--ng-radius-md));
+    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+      0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+    overflow: hidden;
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
+    line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));
+    color: var(--nile-colors-text-default, var(--ng-colors-text-secondary-700));
+    user-select: none;
+  }
+
+  .nile-context-menu__menu nile-context-menu-group + nile-context-menu-group {
+    position: relative;
+    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
+  }
+  .nile-context-menu__menu nile-context-menu-group + nile-context-menu-group::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    right: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    height: 1px;
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+  }
+`;
+const GLOBAL_OVERRIDE_CSS = `
+  .nile-context-menu-panel .nile-floating-panel__body {
+    min-width: 0;
+    padding: var(--nile-spacing-none, var(--ng-spacing-none));
+    gap: var(--nile-spacing-none, var(--ng-spacing-none));
+  }
+  .nile-context-menu-panel .nile-floating-panel__main {
+    padding: var(--nile-spacing-none, var(--ng-spacing-none));
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+  }
+  .nile-context-menu-panel .tippy-box[data-theme~='floating-panel'] {
+    padding: var(--nile-spacing-none, var(--ng-spacing-none));
+    background: transparent;
+    border: none;
+    border-radius: var(--nile-radius-none, var(--ng-radius-none));
+    box-shadow: none;
+  }
+  .nile-context-menu__menu[role='menu'] {
+    min-width: 200px;
+    max-width: 540px;
+    max-height: min(60vh, 400px);
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-none, var(--ng-spacing-none));
+    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-radius-lg, var(--ng-radius-md));
+    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+      0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+    overflow-y: auto;
+    overflow-x: hidden;
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
+    line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));
+    color: var(--nile-colors-text-default, var(--ng-colors-text-secondary-700));
+    user-select: none;
+  }
+  .nile-context-menu__menu[role='menu'] nile-context-menu-item,
+  .nile-context-menu__menu[role='menu'] nile-context-menu-group {
+    font-family: inherit;
+  }
+  .nile-context-menu__menu[role='menu'] nile-context-menu-group + nile-context-menu-group {
+    position: relative;
+    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
+  }
+  .nile-context-menu__menu[role='menu'] nile-context-menu-group + nile-context-menu-group::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: var(--nile-spacing-xl, var(--ng-spacing-lg));
+    right: var(--nile-spacing-xl, var(--ng-spacing-lg));
+    height: 1px;
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+  }
+`;
+export function injectGlobalContextMenuOverrides() {
+    if (typeof document === 'undefined')
+        return;
+    const STYLE_ID = 'nile-context-menu-overrides';
+    if (document.getElementById(STYLE_ID))
+        return;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = GLOBAL_OVERRIDE_CSS;
+    document.head?.appendChild(style);
+}
+injectGlobalContextMenuOverrides();
+export default [styles];
+//# sourceMappingURL=nile-context-menu.css.js.map

package/dist/src/nile-context-menu/nile-context-menu.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-context-menu.css.js","sourceRoot":"","sources":["../../../src/nile-context-menu/nile-context-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDxB,CAAC;AAEF,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsD3B,CAAC;AAEF,MAAM,UAAU,gCAAgC;IAC9C,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO;IAC5C,MAAM,QAAQ,GAAG,6BAA6B,CAAC;IAC/C,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,mBAAmB,CAAC;IACxC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;AACpC,CAAC;AAED,gCAAgC,EAAE,CAAC;AAEnC,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2026\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n    display: block;\n  }\n\n  .nile-context-menu__menu {\n    display: none;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  .nile-context-menu__menu {\n    min-width: 200px;\n    max-width: 540px;\n    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-none, var(--ng-spacing-none));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md));\n    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n      0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n    overflow: hidden;\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n    color: var(--nile-colors-text-default, var(--ng-colors-text-secondary-700));\n    user-select: none;\n  }\n\n  .nile-context-menu__menu nile-context-menu-group + nile-context-menu-group {\n    position: relative;\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n  .nile-context-menu__menu nile-context-menu-group + nile-context-menu-group::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    height: 1px;\n    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n`;\n\nconst GLOBAL_OVERRIDE_CSS = `\n  .nile-context-menu-panel .nile-floating-panel__body {\n    min-width: 0;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    gap: var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n  .nile-context-menu-panel .nile-floating-panel__main {\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n  .nile-context-menu-panel .tippy-box[data-theme~='floating-panel'] {\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    background: transparent;\n    border: none;\n    border-radius: var(--nile-radius-none, var(--ng-radius-none));\n    box-shadow: none;\n  }\n  .nile-context-menu__menu[role='menu'] {\n    min-width: 200px;\n    max-width: 540px;\n    max-height: min(60vh, 400px);\n    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-none, var(--ng-spacing-none));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md));\n    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n      0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n    overflow-y: auto;\n    overflow-x: hidden;\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n    color: var(--nile-colors-text-default, var(--ng-colors-text-secondary-700));\n    user-select: none;\n  }\n  .nile-context-menu__menu[role='menu'] nile-context-menu-item,\n  .nile-context-menu__menu[role='menu'] nile-context-menu-group {\n    font-family: inherit;\n  }\n  .nile-context-menu__menu[role='menu'] nile-context-menu-group + nile-context-menu-group {\n    position: relative;\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n  .nile-context-menu__menu[role='menu'] nile-context-menu-group + nile-context-menu-group::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: var(--nile-spacing-xl, var(--ng-spacing-lg));\n    right: var(--nile-spacing-xl, var(--ng-spacing-lg));\n    height: 1px;\n    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n`;\n\nexport function injectGlobalContextMenuOverrides(): void {\n  if (typeof document === 'undefined') return;\n  const STYLE_ID = 'nile-context-menu-overrides';\n  if (document.getElementById(STYLE_ID)) return;\n  const style = document.createElement('style');\n  style.id = STYLE_ID;\n  style.textContent = GLOBAL_OVERRIDE_CSS;\n  document.head?.appendChild(style);\n}\n\ninjectGlobalContextMenuOverrides();\n\nexport default [styles];\n"]}

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

@@ -0,0 +1,123 @@
+/**
+ * Copyright Aquera Inc 2026
+ *
+ * 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 { CSSResultArray, TemplateResult } from 'lit';
+import type { PropertyValues } from 'lit';
+import NileElement from '../internal/nile-element';
+import type { NileContextMenuItem } from '../nile-context-menu-item';
+import '../nile-floating-panel';
+import '../nile-context-menu-group';
+import '../nile-context-menu-item';
+import '../nile-context-submenu';
+export interface NileContextMenuItemData {
+    type: 'item';
+    id: string;
+    label: string;
+    value?: string;
+    disabled?: boolean;
+    icon?: string;
+    iconSet?: string;
+    iconSize?: string;
+    iconMethod?: 'fill' | 'stroke' | string;
+    iconColor?: string;
+    submenu?: NileContextMenuData[];
+}
+export interface NileContextMenuGroupData {
+    type: 'group';
+    name?: string;
+    data: NileContextMenuItemData[];
+}
+export type NileContextMenuData = NileContextMenuGroupData;
+export type NileContextMenuTrigger = 'right' | 'left' | 'both' | 'manual' | 'global';
+export interface NileContextMenuOpenOptions {
+    x: number;
+    y: number;
+    target?: Element;
+    originalEvent?: Event;
+}
+export type NileContextMenuCloseReason = 'select' | 'outside-click' | 'escape' | 'programmatic';
+interface NileContextMenuOpenContext {
+    x: number;
+    y: number;
+    target: Element | null;
+    originalEvent: Event | null;
+}
+/**
+ * Nile context-menu component.
+ *
+ * @tag nile-context-menu
+ *
+ * @slot Default menu content.
+ *
+ * @event nile-change Fired on menu lifecycle and selection. `detail.type` is one of
+ *   `'open'`, `'click'`, or `'close'`; remaining fields depend on the type.
+ */
+export declare class NileContextMenu extends NileElement {
+    static get styles(): CSSResultArray;
+    for: string;
+    trigger: NileContextMenuTrigger;
+    skipOn: string;
+    zIndex: number;
+    items: NileContextMenuData[];
+    private get _isDataMode();
+    private _floatingPanel?;
+    private _items;
+    private _open;
+    protected _openContext: NileContextMenuOpenContext | null;
+    protected _targetEl: Element | null;
+    private _previouslyFocused;
+    private static _openInstances;
+    private _detachTriggers?;
+    private _lightObserver?;
+    private _menuObserver?;
+    private _proxyEl?;
+    private readonly _proxyId;
+    private _wasDataMode;
+    connectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    private _resolveTarget;
+    get targetElement(): Element | null;
+    private _attachTriggers;
+    disconnectedCallback(): void;
+    private _menuContainerRef;
+    protected firstUpdated(): void;
+    private _ensureProxy;
+    private _positionProxyAt;
+    private _relocateLightChildren;
+    private _renderDataItems;
+    private _createDataNode;
+    private _createItemNode;
+    private _parseChildren;
+    private _isInsideDescendantSubmenu;
+    get menuItems(): readonly NileContextMenuItem[];
+    getItemByValue(value: string): NileContextMenuItem | undefined;
+    get isOpen(): boolean;
+    open(options: NileContextMenuOpenOptions): void;
+    close(reason?: NileContextMenuCloseReason): void;
+    private _enabledItems;
+    private _getFocusedItem;
+    private _getFocusedItemAnyLevel;
+    private _enabledItemsIn;
+    private _focusFirstEnabled;
+    private _moveFocus;
+    private _onKeydown;
+    private _findSubmenuOwning;
+    private _onScroll;
+    private _onOutsidePointer;
+    private _onDescendantSelect;
+    private _stop;
+    private _onPanelShown;
+    private _onMenuMouseOver;
+    private _onMenuClick;
+    private _selectItem;
+    render(): TemplateResult;
+}
+export default NileContextMenu;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-context-menu': NileContextMenu;
+    }
+}