@aquera/nile-elements 1.7.9 → 1.8.1

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.7.9",
+  "version": "1.8.1",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/index.ts

@@ -127,5 +127,8 @@ export { NileNavTab } from './nile-nav-tab';
 export { NileNavTabGroup } from './nile-nav-tab-group';
 export { NileNavTabPanel } from './nile-nav-tab-panel';
 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 { NileInlineSidebarItemHeader } from './nile-inline-sidebar-item-header';
 export { NileInlineSidebarItemBody } from './nile-inline-sidebar-item-body';

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

@@ -0,0 +1,12 @@
+export {
+  NileContextMenu,
+  type NileContextMenuData,
+  type NileContextMenuGroupData,
+  type NileContextMenuItemData,
+} from './nile-context-menu';
+export { NileContextMenuGroup } from '../nile-context-menu-group';
+export {
+  NileContextMenuItem,
+  type NileContextMenuItemSelectDetail,
+  type NileContextMenuItemSelectHandler,
+} from '../nile-context-menu-item';

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

@@ -0,0 +1,130 @@
+/**
+ * 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(): void {
+  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];