@aquera/nile-elements 1.2.7-beta-2.0 → 1.2.7

package/dist/version.cjs.js

@@ -1,2 +1,2 @@
-System.register([],function(_export,_context){"use strict";return{setters:[],execute:function execute(){"undefined"!=typeof window&&(window.nileElementsVersion="__NILE_ELEMENTS_VERSION__",window.nileVersion="__NILE_VERSION__");}};});
+System.register([],function(_export,_context){"use strict";return{setters:[],execute:function execute(){"undefined"!=typeof window&&(window.nileElementsVersion="__NILE_ELEMENTS_VERSION__",window.nileVersion="__NILE_VERSION__",window.process=window.process||{env:{NODE_ENV:"production"}});}};});
 //# sourceMappingURL=version.cjs.js.map

package/dist/version.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.cjs.js","sources":["../../src/version.ts"],"sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '__NILE_ELEMENTS_VERSION__';\nexport const NILE_VERSION = '__NILE_VERSION__';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n  (window as any).nileVersion = NILE_VERSION;\n}\n"],"names":["window","nileElementsVersion","nileVersion"],"mappings":"wGAKsB,WAAA,EAAA,MAAXA,CAAAA,MACRA,GAAAA,MAAAA,CAAeC,mBALmB,CAAA,2BAAA,CAMlCD,OAAeE,WALU,CAAA,kBAAA,CAAA,CAAA"}
+{"version":3,"file":"version.cjs.js","sources":["../../src/version.ts"],"sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '__NILE_ELEMENTS_VERSION__';\nexport const NILE_VERSION = '__NILE_VERSION__';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n  (window as any).nileVersion = NILE_VERSION;\n  window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n"],"names":["window","nileElementsVersion","nileVersion","process","env","NODE_ENV"],"mappings":"wGAKsB,WAAA,EAAA,MAAXA,CAAAA,MACRA,GAAAA,MAAAA,CAAeC,mBALmB,CAAA,2BAAA,CAMlCD,OAAeE,WALU,CAAA,kBAAA,CAM1BF,MAAOG,CAAAA,OAAAA,CAAUH,MAAOG,CAAAA,OAAAA,EAAW,CAAEC,GAAAA,CAAK,CAAEC,QAAU,CAAA,YAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/version.esm.js

@@ -1 +1 @@
-"undefined"!=typeof window&&(window.nileElementsVersion="__NILE_ELEMENTS_VERSION__",window.nileVersion="__NILE_VERSION__");
+"undefined"!=typeof window&&(window.nileElementsVersion="__NILE_ELEMENTS_VERSION__",window.nileVersion="__NILE_VERSION__",window.process=window.process||{env:{NODE_ENV:"production"}});

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.2.7-beta-2.0",
+  "version": "1.2.7",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -114,7 +114,8 @@
     "./nile-side-bar-action-menu": "./dist/src/nile-side-bar-action-menu/index.js",
     "./nile-inline-sidebar-group": "./dist/src/nile-inline-sidebar-group/index.js",
     "./nile-inline-sidebar": "./dist/src/nile-inline-sidebar/index.js",
-    "./nile-inline-sidebar-item": "./dist/src/nile-inline-sidebar-item/index.js"
+    "./nile-inline-sidebar-item": "./dist/src/nile-inline-sidebar-item/index.js",
+    "./nile-lite-tooltip": "./dist/src/nile-lite-tooltip/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -133,23 +134,24 @@
     "postinstall": "node postinstall.js"
   },
   "dependencies": {
-    "@open-wc/form-control": "^0.5.0",
-    "@open-wc/form-helpers": "^0.2.1",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-commonjs": "^25.0.3",
-    "element-internals-polyfill": "^1.1.20",
-    "lit": "^3.0.0",
-    "@floating-ui/dom": "^1.2.1",
-    "composed-offset-position": "^0.0.4",
+    "@codemirror/lang-html": "6.4.9",
     "@codemirror/lang-javascript": "6.2.1",
-    "@codemirror/lang-sql": "6.7.0",
     "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-html": "6.4.9",
+    "@codemirror/lang-sql": "6.7.0",
+    "@floating-ui/dom": "^1.2.1",
+    "@lit-labs/observers": "^2.0.6",
     "@lit-labs/virtualizer": "^2.0.15",
-    "codemirror": "6.0.1",
+    "@open-wc/form-control": "^0.5.0",
+    "@open-wc/form-helpers": "^0.2.1",
+    "@rollup/plugin-commonjs": "^25.0.3",
+    "@rollup/plugin-node-resolve": "^15.0.1",
     "chalk": "5.3.0",
+    "codemirror": "6.0.1",
+    "composed-offset-position": "^0.0.4",
+    "element-internals-polyfill": "^1.1.20",
     "figlet": "1.7.0",
-    "@lit-labs/observers": "^2.0.6"
+    "lit": "^3.0.0",
+    "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
@@ -164,6 +166,7 @@
     "@web/dev-server": "^0.1.34",
     "@web/dev-server-storybook": "^0.5.4",
     "@web/test-runner": "^0.14.0",
+    "@web/test-runner-puppeteer": "0.16.0",
     "concurrently": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
@@ -180,8 +183,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "tslib": "^2.3.1",
     "typescript": "^5.6.2",
-    "x": "^0.1.2",
-    "@web/test-runner-puppeteer": "0.16.0"
+    "x": "^0.1.2"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {
@@ -218,4 +220,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/index.ts

@@ -106,4 +106,5 @@ export { NileSideBarActionMenuItem } from './nile-side-bar-action-menu-item';
 export { NileSideBarActionMenu } from './nile-side-bar-action-menu';
 export { NileInlineSidebarGroup } from './nile-inline-sidebar-group';
 export { NileInlineSidebar } from './nile-inline-sidebar';
-export { NileInlineSidebarItem } from './nile-inline-sidebar-item';
+export { NileInlineSidebarItem } from './nile-inline-sidebar-item';
+export { NileliteTooltip } from './nile-lite-tooltip';

package/src/nile-grid/nile-grid-cell-item/nile-grid-cell-item.css.ts

@@ -13,6 +13,7 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     --padding: var(--nile-spacing-xl) var(--nile-spacing-10px);
+    --height: 44px;
     box-sizing: border-box;
     min-width: 0;
     white-space: nowrap;
@@ -20,11 +21,11 @@ export const styles = css`
     overflow: hidden;
     text-overflow: ellipsis;
     padding: var(--padding);
+    min-height: var(--height);
     height: auto;
     font-size: 14px;
     font-weight: 400;
-    font-family: var(--nile-font-weight-regular);
-    min-height: 44px;
+    font-family: var(--nile-font-family-sans-serif);
   }
 
   .cell-item-base {
@@ -49,22 +50,22 @@ export const styles = css`
     top: 0;
     right: 0;
     height: 100%;
-    cursor: col-resize;
+    cursor: ew-resize;
     touch-action: none;
     z-index: 1;
     width: 2px;
     border-right: 1px solid var(--nile-colors-neutral-400);
-    display: none;
+    display: block;
   }
 
   :host(.shadow-right) {
     box-shadow: var(--nile-box-shadow-14);
-    background-color: #fff;
+    background-color: var(---nile-colors-white-base);
   }
 
   :host(.shadow-left) {
     box-shadow: var(--nile-box-shadow-14);
-    background-color: #fff;
+    background-color: var(---nile-colors-white-base);
   }
 
   :host-context(nile-grid-row[hover]:hover),
@@ -76,6 +77,12 @@ export const styles = css`
   :host-context(nile-grid-row[selected]):host([data-sticky]) {
     background-color: var(--nile-colors-primary-100) !important;
   }
+
+  :host(.cell-rowspan) {
+    position: absolute;
+    z-index: 1;
+    background-color: var(--nile-colors-white-base);
+  }
 `;
 
 export default [styles];

package/src/nile-grid/nile-grid-cell-item/nile-grid-cell-item.ts

@@ -66,7 +66,7 @@ export class NileGridCellItem extends NileElement {
         ${this.resizable
           ? html`
               <div
-                aria-hidden="true"
+                aria-hidden="false"
                 class="resize-handle"
                 @pointerdown=${this.onHandlePointerDown}
               ></div>

package/src/nile-grid/nile-grid-cell-item/nile-grid-cell-item.utils.ts

@@ -20,7 +20,7 @@ export function initCellResize(
   target.setPointerCapture(ev.pointerId);
 
   el.dispatchEvent(
-    new CustomEvent('nile-resize', {
+    new CustomEvent('nile-column-resize', {
       detail: { col, widthPx: startWRef.value },
       bubbles: true,
       composed: true,
@@ -43,7 +43,7 @@ export function cellResizeMove(
 ) {
   const widthPx = Math.max(40, Math.round(startW + (e.clientX - downX)));
   el.dispatchEvent(
-    new CustomEvent('nile-resize', {
+    new CustomEvent('nile-column-resize', {
       detail: { col, widthPx },
       bubbles: true,
       composed: true,

package/src/nile-grid/nile-grid-head-item/nile-grid-head-item.css.ts

@@ -68,6 +68,12 @@ export const styles = css`
     box-shadow: var(--nile-box-shadow-13);
     background-color: var(--nile-colors-neutral-100);
   }
+
+  :host(.head-rowspan) {
+    position: absolute;
+    z-index: 1;
+    background-color: var(--nile-colors-neutral-100);
+  }
 `;
 
 export default [styles];

package/src/nile-grid/nile-grid-head-item/nile-grid-head-item.ts

@@ -37,6 +37,7 @@ export class NileGridHeadItem extends NileElement {
   @property({ type: Boolean, reflect: true, attribute: true }) resizable = false;
   @property({ type: String, reflect: true, attribute: true }) width: string | null = null;
   @property({ type: String, reflect: true, attribute: true }) sticky: string | null = null;
+  @property({ type: Boolean, reflect: true, attribute: true }) lockWidth: boolean = false;
 
   connectedCallback() {
     super.connectedCallback();

package/src/nile-grid/nile-grid-row/nile-grid-row.css.ts

@@ -42,7 +42,7 @@ export const styles = css`
     background: var(--nile-colors-primary-100);
   }
 
-  :host-context(nile-grid-body):host(:last-child) {
+  :host-context(nile-grid-body):host(:last-child)::part(grid-row-base) {
     border-bottom: none;
   }
 `;

package/src/nile-grid/nile-grid.layout.ts

@@ -1,8 +1,8 @@
 import { NileGrid } from './nile-grid';
-import { HeadItemEl } from './nile-grid.types';
 import { getHead, getBody } from './nile-grid.utils';
 import { getScrollbarComp } from './nile-grid.resize';
 import { computeColumnWidths } from './nile-grid.width';
+import { NILE_GRID_HEAD_ITEM } from './types/nile-grid.enums';
 
 /**
  * @param nileGrid Parent NileGrid instance
@@ -41,7 +41,7 @@ export const layout = (
   }
 
   setTimeout(() => {
-    computeColumnWidths(nileGrid, colCount, nileGrid.columnWidths, slotEl); 
+    computeColumnWidths(nileGrid, colCount, nileGrid.columnWidths, slotEl, nileGrid.lockedWidthColumns); 
   });
   ensureWidths(colCount);
   nileGrid.colTemplate = rebuildTemplate(colCount, nileGrid.columnWidths);
@@ -188,10 +188,18 @@ function layoutCell(
  */
 function handleRowspan(nileGrid: NileGrid, el: HTMLElement, rowspan: number) {
   if (rowspan <= 1) return;
-  nileGrid.cellHeight ||= el.getBoundingClientRect().height;
-  el.style.position = 'absolute';
-  el.style.height = `${nileGrid.cellHeight * rowspan}px`;
-  el.style.zIndex = '2';
+  el.style.position = "absolute";
+  el.style.zIndex = "1";
+
+  if (el.tagName === NILE_GRID_HEAD_ITEM) {
+    if (!nileGrid.headHeight) nileGrid.headHeight = el.getBoundingClientRect().height;
+    el.style.height = `${(nileGrid.headHeight * rowspan) + (rowspan - 1)}px`;
+    el.style.backgroundColor = "#FAFAFA";
+  } else {
+    if (!nileGrid.cellHeight) nileGrid.cellHeight = el.getBoundingClientRect().height;
+    el.style.height = `${(nileGrid.cellHeight * rowspan) + (rowspan - 1)}px`;
+    el.style.backgroundColor = "#FFF";
+  }
 }
 
 /**

package/src/nile-grid/nile-grid.resize.ts

@@ -1,6 +1,5 @@
 import { NileGrid } from './nile-grid';
-import { HeadItemEl } from './nile-grid.types';
-import { totalReducible, takeFromRight, giveToRight } from './nile-grid.width';
+import {  takeFromRight, giveToRight, totalReducibleRight } from './nile-grid.width';
 import { rebuildTemplate, syncStickyShadows, applyColumnsTemplate } from './nile-grid.layout';
 
 /**
@@ -72,30 +71,26 @@ export function computeNewWidth(opts: {
  * @param columnWidths Current widths array
  * @param containerWidth Container total width
  */
-export function resizeNoScroll(opts: {
+export function resizeNoScroll({ grid, col, prevW, newW, floor }: {
   grid: NileGrid;
   col: number;
   prevW: number;
   newW: number;
   floor: number;
 }) {
-  const { grid, col, prevW, newW, floor } = opts;
+  if (grid.lockedWidthColumns?.[col]) return;
   let delta = newW - prevW;
-
   if (delta > 0) {
-    const rightReducible = totalReducible(grid.columnWidths, col + 1, floor);
+    const rightReducible = totalReducibleRight(grid.columnWidths, col + 1, floor, grid.lockedWidthColumns);
     if (rightReducible <= 0) return;
     delta = Math.min(delta, rightReducible);
     grid.columnWidths[col] = prevW + delta;
-    if (delta > 0) takeFromRight(grid.columnWidths, col + 1, delta, floor);
+    takeFromRight(grid.columnWidths, col + 1, delta, floor, grid.lockedWidthColumns);
   } else {
-    if (col === grid.columnWidths.length - 1) return;
-    const shrink = -delta;
-    const newColW = Math.max(floor, prevW - shrink);
+    const newColW = Math.max(floor, newW);
     const actualShrink = prevW - newColW;
     grid.columnWidths[col] = newColW;
-    const remaining = giveToRight(grid.columnWidths, col + 1, actualShrink);
-    if (remaining > 0) grid.columnWidths[col] = prevW;
+    giveToRight(grid.columnWidths, col + 1, actualShrink);
   }
 }
 

package/src/nile-grid/nile-grid.ts

@@ -73,9 +73,14 @@ export class NileGrid extends NileElement {
   /** To calculate the rowspan height */
   @state() public cellHeight: number | null = null;
 
+  @state() public headHeight: number | null = null;
+
   /** To check if the widths are initialized */
   @state() public widthsInitialized = false;
 
+  /** To check if the widths are initialized */
+  @state() public lockedWidthColumns: boolean[] = [];
+
   private scheduleLayout() {
     if (this.raf) cancelAnimationFrame(this.raf);
     this.raf = requestAnimationFrame(() => {
@@ -95,6 +100,7 @@ export class NileGrid extends NileElement {
   private ensureWidths(colCount: number) {
     if (this.columnWidths.length !== colCount) {
       this.columnWidths = Array(colCount).fill('');
+      this.lockedWidthColumns = Array(colCount).fill(false);
     }
   }
 

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

@@ -1,5 +1,4 @@
 import { NileGrid } from './nile-grid';
-import { HeadItemEl } from './nile-grid.types';
 
 /** listenToEventListeners
  * @param nileGrid Grid element to attach listeners on

package/src/nile-grid/nile-grid.width.ts

@@ -1,5 +1,4 @@
 import { NileGrid } from './nile-grid';
-import { HeadItemEl } from './nile-grid.types';
 import { applyColumnsTemplate } from './nile-grid.layout';
 import { getHead } from './nile-grid.utils';
 
@@ -14,8 +13,9 @@ export function computeColumnWidths(
   nileGrid: NileGrid,
   colCount: number,
   columnWidths: number[],
-  slotEl: any
-) {
+  slotEl: any,
+  lockedWidthColumns: boolean[]
+): void {
   const minCol = nileGrid.minColumnWidth;
   const containerWidth = getContainerWidth(nileGrid);
   const desired = readDesiredFromHead(
@@ -23,6 +23,7 @@ export function computeColumnWidths(
     colCount,
     containerWidth,
     nileGrid,
+    lockedWidthColumns,
     columnWidths
   );
   const isSeeded = seedWidthsFromDesired(desired, columnWidths, minCol);
@@ -53,11 +54,12 @@ function readDesiredFromHead(
   colCount: number,
   containerWidth: number,
   nileGrid: NileGrid,
+  lockedWidthColumns: boolean[],
   prevWidths?: number[]
 ): (number | null)[] {
   const desired = Array(colCount).fill(null);
   const head = getHead(slotEl) as HTMLElement | null;
-  if (head) fillDesiredFromHeadRows(head, desired, colCount, containerWidth);
+  if (head) fillDesiredFromHeadRows(head, desired, colCount, containerWidth, lockedWidthColumns);
   if (prevWidths?.length === colCount) fillFromPrevWidths(desired, prevWidths, nileGrid);
   return desired;
 }
@@ -67,18 +69,20 @@ function readDesiredFromHead(
  * @param desired Desired widths array to fill
  * @param colCount Column count
  * @param containerWidth Grid container width
+ * @param fixedWidthColumns Fixed width columns
  */
 function fillDesiredFromHeadRows(
   head: HTMLElement,
   desired: (number | null)[],
   colCount: number,
-  containerWidth: number
+  containerWidth: number,
+  lockedWidthColumns: boolean[]
 ) {
   const headRows = [...head.children].filter(
     el => el.tagName.toLowerCase() === 'nile-grid-row'
   ) as HTMLElement[];
   for (const row of headRows) {
-    fillFromHeadRow(row, desired, colCount, containerWidth);
+    fillFromHeadRow(row, desired, colCount, containerWidth, lockedWidthColumns);
   }
 }
 
@@ -87,18 +91,21 @@ function fillDesiredFromHeadRows(
  * @param desired Desired widths array
  * @param colCount Total number of columns
  * @param containerWidth Container width
+ * @param lockedWidthColumns Locked width columns
+ * @returns void
  */
 function fillFromHeadRow(
   row: HTMLElement,
   desired: (number | null)[],
   colCount: number,
-  containerWidth: number
+  containerWidth: number,
+  lockedWidthColumns: boolean[]
 ) {
   const items = [...row.children].filter(
     el => el.tagName.toLowerCase() === 'nile-grid-head-item'
-  ) as HeadItemEl[];
+  ) as HTMLElement[];
   const parsed = items
-    .map(h => parseHeadItemWidth(h, containerWidth))
+    .map(h => parseHeadItemWidth(h, containerWidth, lockedWidthColumns))
     .filter(x => x.cw != null);
   parsed.sort((a, b) => a.colspan - b.colspan);
   parsed.forEach(({ cStart, colspan, cw }) => {
@@ -109,12 +116,16 @@ function fillFromHeadRow(
 /**
  * @param h Header item element
  * @param containerWidth Width of parent container
+ * @param lockedWidthColumns Locked width columns
  * @returns Parsed object containing start, colspan, and computed width
  */
-function parseHeadItemWidth(h: HeadItemEl, containerWidth: number) {
+function parseHeadItemWidth(h: HTMLElement, containerWidth: number, lockedWidthColumns: boolean[]) {
   const cStart = Number((h as any).dataset?.cStart) || 1;
   const colspan = Math.max(1, Number(h.getAttribute('colspan')) || 1);
   const raw = (h as any).width ?? h.getAttribute('width') ?? null;
+  if (h.hasAttribute('lockWidth')) {
+    lockedWidthColumns[cStart - 1] = true;
+  }
   const cw = parseCustomWidth(raw, containerWidth);
   return { cStart, colspan, cw };
 }
@@ -354,10 +365,12 @@ function clampAndRound(columnWidths: number[], minCol: number) {
  * @param minCol Minimum column width
  * @returns Total reducible pixels
  */
-export function totalReducible(widths: number[], start: number, floor: number) {
+export function totalReducibleRight(w: number[], start: number, floor: number, fixed?: boolean[]) {
   let sum = 0;
-  for (let i = start; i < widths.length; i++)
-    sum += Math.max(0, widths[i] - floor);
+  for (let i = start; i < w.length; i++) {
+    if (fixed?.[i]) continue;
+    sum += Math.max(0, w[i] - floor);
+  }
   return sum;
 }
 
@@ -369,16 +382,17 @@ export function takeFromRight(
   widths: number[],
   start: number,
   needInit: number,
-  floor: number
+  floor: number,
+  fixed?: boolean[]
 ) {
   let need = needInit;
   for (let i = start; i < widths.length && need > 0; i++) {
-    const reducible = Math.max(0, widths[i] - floor);
-    const cut = Math.min(reducible, need);
-    if (cut > 0) {
-      widths[i] -= cut;
-      need -= cut;
-    }
+    if (fixed?.[i]) continue;
+    const room = widths[i] - floor;
+    if (room <= 0) continue;
+    const cut = Math.min(room, need);
+    widths[i] -= cut;
+    need -= cut;
   }
   return need;
 }

package/src/nile-grid/types/nile-grid.enums.ts

@@ -0,0 +1 @@
+export const NILE_GRID_HEAD_ITEM = "NILE-GRID-HEAD-ITEM";

package/src/nile-lite-tooltip/index.ts

@@ -0,0 +1 @@
+export { NileliteTooltip } from './nile-lite-tooltip';

package/src/nile-lite-tooltip/nile-lite-tooltip.css.ts

@@ -0,0 +1,128 @@
+/**
+* Copyright Aquera Inc 2025
+*
+* 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';
+
+/**
+ * LightTooltip CSS
+ */
+export const styles = css`
+  :host { }
+
+  .tippy-box[data-animation=fade][data-state=hidden] { opacity: 0; }
+  [data-tippy-root] { max-width: calc(100vw - 10px); }
+
+  .tippy-box {
+    position: relative;
+    background-color: #333;
+    color: #fff;
+    border-radius: 4px;
+    font-size: 14px;
+    line-height: 1.4;
+    white-space: normal;
+    outline: 0;
+    transition-property: transform, visibility, opacity;
+  }
+
+ 
+  .tippy-box[data-placement^=top] > .tippy-arrow { bottom: 0; }
+  .tippy-box[data-placement^=top] > .tippy-arrow:before {
+    bottom: -7px;
+    border-width: 8px 8px 0;
+    border-top-color: initial;
+  }
+
+  .tippy-box[data-placement^=bottom] > .tippy-arrow { top: 0; }
+  .tippy-box[data-placement^=bottom] > .tippy-arrow:before {
+    top: -7px;
+    border-width: 0 8px 8px;
+    border-bottom-color: initial;
+  }
+
+  .tippy-box[data-placement^=left] > .tippy-arrow { right: 0; }
+  .tippy-box[data-placement^=left] > .tippy-arrow:before {
+    right: -7px;
+    border-width: 8px 0 8px 8px;
+    border-left-color: initial;
+  }
+
+  .tippy-box[data-placement^=right] > .tippy-arrow { left: 0; }
+  .tippy-box[data-placement^=right] > .tippy-arrow:before {
+    left: -7px;
+    border-width: 8px 8px 8px 0;
+    border-right-color: initial;
+  }
+
+  .tippy-box[data-inertia][data-state=visible] {
+    transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
+  }
+
+  .tippy-box.large { font-size: 16px; padding: 8px 12px; }
+  .tippy-arrow { width: 16px; height: 16px; color: #333; }
+  .tippy-arrow:before {
+    content: "";
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
+
+  .tippy-content {
+    position: relative;
+    padding: 2px 6px;
+    z-index: 1;
+  }
+
+  .tippy-box[data-placement^=top] > .tippy-svg-arrow { bottom: 0; }
+  .tippy-box[data-placement^=top] > .tippy-svg-arrow:after,
+  .tippy-box[data-placement^=top] > .tippy-svg-arrow > svg {
+    top: 16px;
+    transform: rotate(180deg);
+  }
+  .tippy-box[data-placement^=bottom] > .tippy-svg-arrow { top: 0; }
+  .tippy-box[data-placement^=bottom] > .tippy-svg-arrow > svg { bottom: 16px; }
+  .tippy-box[data-placement^=left] > .tippy-svg-arrow { right: 0; }
+  .tippy-box[data-placement^=left] > .tippy-svg-arrow:after,
+  .tippy-box[data-placement^=left] > .tippy-svg-arrow > svg {
+    transform: rotate(90deg);
+    top: calc(50% - 3px);
+    left: 11px;
+  }
+  .tippy-box[data-placement^=right] > .tippy-svg-arrow { left: 0; }
+  .tippy-box[data-placement^=right] > .tippy-svg-arrow:after,
+  .tippy-box[data-placement^=right] > .tippy-svg-arrow > svg {
+    transform: rotate(-90deg);
+    top: calc(50% - 3px);
+    right: 11px;
+  }
+
+  .tippy-svg-arrow {
+    width: 16px;
+    height: 16px;
+    fill: #333;
+    text-align: initial;
+    position: absolute;
+  }
+
+  .tippy-svg-arrow > svg {
+    position: absolute;
+  }
+`;
+
+
+export function injectGlobalTippyStyles(): void {
+  const STYLE_ID = 'nile-lite-tooltip-styles';
+  if (document.getElementById(STYLE_ID)) return;
+
+  const style = document.createElement('style');
+  style.id = STYLE_ID;
+  style.textContent = styles.cssText;
+  document.head.appendChild(style);
+}
+ 
+injectGlobalTippyStyles();
+
+export default [styles];