@aquera/nile-elements 0.1.28-beta-1.4 → 0.1.28-beta-1.5

package/dist/nile-tooltip/nile-tooltip.esm.js

@@ -1,30 +1,13 @@
-import{__decorate as t}from"tslib";import{s as i}from"./nile-tooltip.css.esm.js";import"../nile-popup/nile-popup.esm.js";import{p as s,s as e,a as o}from"../internal/animate.esm.js";import{classMap as h}from"lit/directives/class-map.js";import{query as a,property as l,customElement as n}from"lit/decorators.js";import{s as r,g as p}from"../utilities/animation-registry.esm.js";import{html as d}from"lit";import{w as c}from"../internal/event.esm.js";import{w as m}from"../internal/watch.esm.js";import{N as u}from"../internal/nile-element.esm.js";import"../nile-popup/nile-popup.css.esm.js";let f=class extends u{constructor(){super(...arguments),this.content="",this.size="small",this.placement="top",this.disabled=!1,this.distance=8,this.open=!1,this.skidding=0,this.trigger="hover focus",this.hoist=!1}static get styles(){return[i]}connectedCallback(){super.connectedCallback(),this.handleBlur=this.handleBlur.bind(this),this.handleClick=this.handleClick.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleMouseOver=this.handleMouseOver.bind(this),this.handleMouseOut=this.handleMouseOut.bind(this),this.updateComplete.then((()=>{this.addEventListener("blur",this.handleBlur,!0),this.addEventListener("focus",this.handleFocus,!0),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("mouseover",this.handleMouseOver),this.addEventListener("mouseout",this.handleMouseOut)}))}firstUpdated(){this.body.hidden=!this.open,this.open&&(this.popup.active=!0,this.popup.reposition())}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("blur",this.handleBlur,!0),this.removeEventListener("focus",this.handleFocus,!0),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("mouseover",this.handleMouseOver),this.removeEventListener("mouseout",this.handleMouseOut)}handleBlur(){this.hasTrigger("focus")&&this.hide()}handleClick(){this.hasTrigger("click")&&(this.open?this.hide():this.show())}handleFocus(){this.hasTrigger("focus")&&this.show()}handleKeyDown(t){this.open&&"Escape"===t.key&&(t.stopPropagation(),this.hide())}handleMouseOver(){if(this.hasTrigger("hover")){const t=s(getComputedStyle(this).getPropertyValue("--show-delay"));clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.show()),t)}}handleMouseOut(){if(this.hasTrigger("hover")){const t=s(getComputedStyle(this).getPropertyValue("--hide-delay"));clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.hide()),t)}}hasTrigger(t){return this.trigger.split(" ").includes(t)}async handleOpenChange(){if(this.open){if(this.disabled)return;this.emit("nile-show"),await e(this.body),this.body.hidden=!1,this.popup.active=!0;const{keyframes:t,options:i}=p(this,"tooltip.show",{dir:""});await o(this.popup.popup,t,i),this.emit("nile-after-show")}else{this.emit("nile-hide"),await e(this.body);const{keyframes:t,options:i}=p(this,"tooltip.hide",{dir:""});await o(this.popup.popup,t,i),this.popup.active=!1,this.body.hidden=!0,this.emit("nile-after-hide")}}async handleOptionsChange(){this.hasUpdated&&(await this.updateComplete,this.popup.reposition())}handleDisabledChange(){this.disabled&&this.open&&this.hide()}async show(){if(!this.open&&this.content?.trim().length)return this.open=!0,c(this,"nile-after-show")}async hide(){if(this.open)return this.open=!1,c(this,"nile-after-hide")}render(){return d`
-      <nile-popup
-        part="base"
-        exportparts="
-          popup:base__popup,
-          arrow:base__arrow
-        "
-        class=${h({tooltip:!0,"tooltip--open":this.open})}
-        placement=${this.placement}
-        distance=${this.distance}
-        skidding=${this.skidding}
-        strategy=${this.hoist?"fixed":"absolute"}
-        flip
-        shift
-        arrow
-      >
-        <slot slot="anchor" aria-describedby="tooltip"></slot>
-
-        <slot
-          name="content"
-          part="body"
-          id="tooltip"
-          class=${h({tooltip__body:!0,"tooltip__body--large":"large"===this.size})}
-          role="tooltip"
-          aria-live=${this.open?"polite":"off"}
-        >
-          ${this.content}
-        </slot>
-      </nile-popup>
-    `}};t([a("slot:not([name])")],f.prototype,"defaultSlot",void 0),t([a(".tooltip__body")],f.prototype,"body",void 0),t([a("nile-popup")],f.prototype,"popup",void 0),t([l({type:String,reflect:!0})],f.prototype,"content",void 0),t([l({reflect:!0})],f.prototype,"size",void 0),t([l()],f.prototype,"placement",void 0),t([l({type:Boolean,reflect:!0})],f.prototype,"disabled",void 0),t([l({type:Number})],f.prototype,"distance",void 0),t([l({type:Boolean,reflect:!0})],f.prototype,"open",void 0),t([l({type:Number})],f.prototype,"skidding",void 0),t([l()],f.prototype,"trigger",void 0),t([l({type:Boolean})],f.prototype,"hoist",void 0),t([m("open",{waitUntilFirstUpdate:!0})],f.prototype,"handleOpenChange",null),t([m(["content","distance","hoist","placement","skidding"])],f.prototype,"handleOptionsChange",null),t([m("disabled")],f.prototype,"handleDisabledChange",null),f=t([n("nile-tooltip")],f),r("tooltip.show",{keyframes:[{opacity:0,scale:.8},{opacity:1,scale:1}],options:{duration:150,easing:"ease"}}),r("tooltip.hide",{keyframes:[{opacity:1,scale:1},{opacity:0,scale:.8}],options:{duration:150,easing:"ease"}});export{f as N};
+import{__decorate as t}from"tslib";import{html as i}from"lit";import{property as s,query as e,customElement as o}from"lit/decorators.js";import{classMap as h}from"lit/directives/class-map.js";import{s as r}from"./nile-tooltip.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";let n=class extends l{constructor(){super(...arguments),this.content="",this.size="small",this.placement="top",this.disabled=!1,this.open=!1,this.trigger="hover focus",this.distance=8,this.skidding=0,this.hoist=!1,this.updateTooltipPosition=()=>{if(!this.tooltip||!this.open)return;const t=this.slotElement.assignedElements()[0];if(!t)return;const i=t.getBoundingClientRect(),s=this.tooltip.getBoundingClientRect(),e=window.innerWidth,o=window.innerHeight;let h=0,r=0,l=this.placement;const n=this.getBasePlacement(this.placement),a=this.getAlignmentModifier(this.placement),d=i.left-s.width-this.distance>0,c=i.right+s.width+this.distance<e,p=i.bottom+s.height+this.distance<o,m=i.top-s.height-this.distance>0;let u=n;"left"===n&&!d||"right"===n&&!c?u=p?"bottom":m?"top":"bottom":"top"!==n||m?"bottom"!==n||p||(u=m?"top":d?"left":"right"):u=p?"bottom":d?"left":"right";let f=a;switch("left"!==n&&"right"!==n||"top"!==u&&"bottom"!==u||("start"===a?f="start":"end"===a&&(f="end")),u){case"left":h=i.top+(i.height-s.height)/2+this.skidding,r=i.left-s.width-this.distance;break;case"right":h=i.top+(i.height-s.height)/2+this.skidding,r=i.right+this.distance;break;case"top":h=i.top-s.height-this.distance,r=i.left+(i.width-s.width)/2+this.skidding;break;case"bottom":h=i.bottom+this.distance,r=i.left+(i.width-s.width)/2+this.skidding}"top"!==u&&"bottom"!==u||!f||("start"===f?r=i.left+this.skidding:"end"===f&&(r=i.right-s.width+this.skidding)),"left"!==u&&"right"!==u||!f||("start"===f?h=i.top+this.skidding:"end"===f&&(h=i.bottom-s.height+this.skidding)),l=f?`${u}-${f}`:u,r<0&&(r=5),r+s.width>e&&(r=e-s.width-5),h<0&&(h=5),h+s.height>o&&(h=o-s.height-5),this.tooltip.style.top=`${h}px`,this.tooltip.style.left=`${r}px`,this.tooltip.setAttribute("data-placement",l)},this.showTooltip=()=>{this.disabled||(this.open=!0,this.emit("nile-show"),this.updateComplete.then((()=>{this.updateTooltipPosition(),this.tooltip.addEventListener("transitionend",this.handleAfterShow,{once:!0})})))},this.handleAfterShow=()=>{this.emit("nile-after-show")},this.hideTooltip=()=>{this.open&&(this.emit("nile-hide"),this.open=!1,this.tooltip.addEventListener("transitionend",this.handleAfterHide,{once:!0}))},this.handleAfterHide=()=>{this.emit("nile-after-hide")},this.handleMouseOver=()=>{this.trigger.includes("hover")&&(clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.showTooltip()),150))},this.handleMouseOut=()=>{this.trigger.includes("hover")&&(clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.hideTooltip()),0))},this.handleClick=()=>{this.trigger.includes("click")&&(this.open=!this.open,this.emit("nile-show"),this.updateComplete.then((()=>this.updateTooltipPosition())))},this.handleFocus=()=>{this.trigger.includes("focus")&&this.showTooltip()},this.handleBlur=()=>{this.trigger.includes("focus")&&this.hideTooltip()}}static get styles(){return[r]}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.updateTooltipPosition),window.addEventListener("scroll",this.updateTooltipPosition,!0)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.updateTooltipPosition),window.removeEventListener("scroll",this.updateTooltipPosition,!0)}getBasePlacement(t){return t.split("-")[0]}getAlignmentModifier(t){const i=t.split("-");return i.length>1?i[1]:null}updated(t){super.updated(t),(t.has("open")||t.has("hoist"))&&this.open&&this.hoist}render(){return i`
+      <div class=${h({tooltip:!0,"tooltip__body--large":"large"===this.size})}>
+        ${this.content}
+      </div>
+      <slot
+        @mouseover=${this.handleMouseOver}
+        @mouseout=${this.handleMouseOut}
+        @click=${this.handleClick}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        aria-describedby="tooltip"
+      ></slot>
+    `}};t([s({type:String})],n.prototype,"content",void 0),t([s({reflect:!0})],n.prototype,"size",void 0),t([s({type:String})],n.prototype,"placement",void 0),t([s({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0),t([s({type:Boolean,reflect:!0})],n.prototype,"open",void 0),t([s()],n.prototype,"trigger",void 0),t([s({type:Number})],n.prototype,"distance",void 0),t([s({type:Number})],n.prototype,"skidding",void 0),t([s({type:Boolean})],n.prototype,"hoist",void 0),t([e(".tooltip")],n.prototype,"tooltip",void 0),t([e("slot")],n.prototype,"slotElement",void 0),n=t([o("nile-tooltip")],n);export{n as N};

package/dist/src/nile-tooltip/nile-tooltip.css.js

@@ -9,60 +9,119 @@ import { css } from 'lit';
  * Tooltip CSS
  */
 export const styles = css `
-  :host {
-    --max-width: 20rem;
-    --hide-delay: 0ms;
-    --show-delay: 150ms;
-
-    display: contents;
-  }
-
-  .tooltip {
-    --arrow-size: 6px;
-    --arrow-color: var(--nile-tooltip-color-background);
-  }
-
-  .tooltip::part(popup) {
-    pointer-events: none;
-    z-index: 1000;
-  }
-
-  .tooltip[placement^='top']::part(popup) {
-    transform-origin: bottom;
-  }
-
-  .tooltip[placement^='bottom']::part(popup) {
-    transform-origin: top;
-  }
-
-  .tooltip[placement^='left']::part(popup) {
-    transform-origin: right;
-  }
-
-  .tooltip[placement^='right']::part(popup) {
-    transform-origin: left;
-  }
-
-  .tooltip__body {
-    display: block;
-    width: max-content;
-    max-width: var(--max-width);
-    border-radius: 4px;
-    background-color: var(--nile-tooltip-color-background);
-    font-size: var(--nile-tooltip-font-size-sm);
-    font-weight: var(--nile-tooltip-font-weight-sm);
-    line-height: var(--nile-tooltip-line-height-sm);
-    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);
-    color: var(--nile-colors-white-base);
-    pointer-events: none;
-    word-break: break-word;
-  }
-
-  .tooltip__body--large {
-    font-size: var(--nile-tooltip-font-size-lg);
-    line-height: var(--nile-tooltip-line-height-lg);
-    font-weight: var(--nile-tooltip-font-weight-lg);
-  }
+
+
+:host {
+      position: relative;
+      display: inline-block;
+    }
+
+    .tooltip {
+      position: fixed;
+      z-index: 1000;
+      background-color: var(--nile-tooltip-color-background, #333);
+      color: var(--nile-colors-white-base, #fff);
+      padding: 6px 10px;
+      border-radius: 4px;
+      font-size: var(--nile-tooltip-font-size-sm, 14px);
+      line-height: var(--nile-tooltip-line-height-sm, 1.5);
+      opacity: 0;
+      transition: opacity 0.2s, transform 0.2s;
+      pointer-events: none;
+      white-space: nowrap;
+      visibility: hidden;
+      transform: scale(0.95);
+      transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+    }
+
+    .tooltip[open] {
+  opacity: 1;
+  transform: scale(1);
+}
+
+    :host([open]) .tooltip {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    .tooltip__body--large {
+      font-size: var(--nile-type-scale-4, 16px);
+      line-height: var(--nile-tooltip-line-height-lg, 1.75);
+    }
+
+    /* Tooltip Arrow */
+    .tooltip::after {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-style: solid;
+    }
+
+    /* Basic Arrow Positions */
+    .tooltip[data-placement^="top"]::after {
+      bottom: -6px;
+      border-width: 6px 6px 0 6px;
+      border-color: var(--nile-tooltip-color-background, #333) transparent transparent transparent;
+    }
+
+    .tooltip[data-placement^="bottom"]::after {
+      top: -6px;
+      border-width: 0 6px 6px 6px;
+      border-color: transparent transparent var(--nile-tooltip-color-background, #333) transparent;
+    }
+
+    .tooltip[data-placement^="left"]::after {
+      right: -6px;
+      border-width: 6px 0 6px 6px;
+      border-color: transparent transparent transparent var(--nile-tooltip-color-background, #333);
+    }
+
+    .tooltip[data-placement^="right"]::after {
+      left: -6px;
+      border-width: 6px 6px 6px 0;
+      border-color: transparent var(--nile-tooltip-color-background, #333) transparent transparent;
+    }
+
+    /* Arrow Horizontal Alignment for top/bottom placements */
+    .tooltip[data-placement="top"]::after,
+    .tooltip[data-placement="bottom"]::after {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .tooltip[data-placement="top-start"]::after,
+    .tooltip[data-placement="bottom-start"]::after {
+      left: 12px;
+    }
+
+    .tooltip[data-placement="top-end"]::after,
+    .tooltip[data-placement="bottom-end"]::after {
+      right: 12px;
+      left: auto;
+    }
+
+    /* Arrow Vertical Alignment for left/right placements */
+    .tooltip[data-placement="left"]::after,
+    .tooltip[data-placement="right"]::after {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .tooltip[data-placement="left-start"]::after,
+    .tooltip[data-placement="right-start"]::after {
+      top: 12px;
+      transform: none;
+    }
+
+    .tooltip[data-placement="left-end"]::after,
+    .tooltip[data-placement="right-end"]::after {
+      bottom: 12px;
+      top: auto;
+      transform: none;
+    }
+  
 `;
 export default [styles];
 //# sourceMappingURL=nile-tooltip.css.js.map

package/dist/src/nile-tooltip/nile-tooltip.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tooltip.css.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\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\n/**\n * Tooltip CSS\n */\nexport const styles = css`\n  :host {\n    --max-width: 20rem;\n    --hide-delay: 0ms;\n    --show-delay: 150ms;\n\n    display: contents;\n  }\n\n  .tooltip {\n    --arrow-size: 6px;\n    --arrow-color: var(--nile-tooltip-color-background);\n  }\n\n  .tooltip::part(popup) {\n    pointer-events: none;\n    z-index: 1000;\n  }\n\n  .tooltip[placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .tooltip[placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  .tooltip[placement^='left']::part(popup) {\n    transform-origin: right;\n  }\n\n  .tooltip[placement^='right']::part(popup) {\n    transform-origin: left;\n  }\n\n  .tooltip__body {\n    display: block;\n    width: max-content;\n    max-width: var(--max-width);\n    border-radius: 4px;\n    background-color: var(--nile-tooltip-color-background);\n    font-size: var(--nile-tooltip-font-size-sm);\n    font-weight: var(--nile-tooltip-font-weight-sm);\n    line-height: var(--nile-tooltip-line-height-sm);\n    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);\n    color: var(--nile-colors-white-base);\n    pointer-events: none;\n    word-break: break-word;\n  }\n\n  .tooltip__body--large {\n    font-size: var(--nile-tooltip-font-size-lg);\n    line-height: var(--nile-tooltip-line-height-lg);\n    font-weight: var(--nile-tooltip-font-weight-lg);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tooltip.css.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\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\n/**\n * Tooltip CSS\n */\nexport const styles = css`\n\n\n:host {\n      position: relative;\n      display: inline-block;\n    }\n\n    .tooltip {\n      position: fixed;\n      z-index: 1000;\n      background-color: var(--nile-tooltip-color-background, #333);\n      color: var(--nile-colors-white-base, #fff);\n      padding: 6px 10px;\n      border-radius: 4px;\n      font-size: var(--nile-tooltip-font-size-sm, 14px);\n      line-height: var(--nile-tooltip-line-height-sm, 1.5);\n      opacity: 0;\n      transition: opacity 0.2s, transform 0.2s;\n      pointer-events: none;\n      white-space: nowrap;\n      visibility: hidden;\n      transform: scale(0.95);\n      transition: opacity 0.2s ease-out, transform 0.2s ease-out;\n    }\n\n    .tooltip[open] {\n  opacity: 1;\n  transform: scale(1);\n}\n\n    :host([open]) .tooltip {\n      opacity: 1;\n      visibility: visible;\n      pointer-events: auto;\n    }\n\n    .tooltip__body--large {\n      font-size: var(--nile-type-scale-4, 16px);\n      line-height: var(--nile-tooltip-line-height-lg, 1.75);\n    }\n\n    /* Tooltip Arrow */\n    .tooltip::after {\n      content: '';\n      position: absolute;\n      width: 0;\n      height: 0;\n      border-style: solid;\n    }\n\n    /* Basic Arrow Positions */\n    .tooltip[data-placement^=\"top\"]::after {\n      bottom: -6px;\n      border-width: 6px 6px 0 6px;\n      border-color: var(--nile-tooltip-color-background, #333) transparent transparent transparent;\n    }\n\n    .tooltip[data-placement^=\"bottom\"]::after {\n      top: -6px;\n      border-width: 0 6px 6px 6px;\n      border-color: transparent transparent var(--nile-tooltip-color-background, #333) transparent;\n    }\n\n    .tooltip[data-placement^=\"left\"]::after {\n      right: -6px;\n      border-width: 6px 0 6px 6px;\n      border-color: transparent transparent transparent var(--nile-tooltip-color-background, #333);\n    }\n\n    .tooltip[data-placement^=\"right\"]::after {\n      left: -6px;\n      border-width: 6px 6px 6px 0;\n      border-color: transparent var(--nile-tooltip-color-background, #333) transparent transparent;\n    }\n\n    /* Arrow Horizontal Alignment for top/bottom placements */\n    .tooltip[data-placement=\"top\"]::after,\n    .tooltip[data-placement=\"bottom\"]::after {\n      left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .tooltip[data-placement=\"top-start\"]::after,\n    .tooltip[data-placement=\"bottom-start\"]::after {\n      left: 12px;\n    }\n\n    .tooltip[data-placement=\"top-end\"]::after,\n    .tooltip[data-placement=\"bottom-end\"]::after {\n      right: 12px;\n      left: auto;\n    }\n\n    /* Arrow Vertical Alignment for left/right placements */\n    .tooltip[data-placement=\"left\"]::after,\n    .tooltip[data-placement=\"right\"]::after {\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .tooltip[data-placement=\"left-start\"]::after,\n    .tooltip[data-placement=\"right-start\"]::after {\n      top: 12px;\n      transform: none;\n    }\n\n    .tooltip[data-placement=\"left-end\"]::after,\n    .tooltip[data-placement=\"right-end\"]::after {\n      bottom: 12px;\n      top: auto;\n      transform: none;\n    }\n  \n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-tooltip/nile-tooltip.d.ts

@@ -1,80 +1,40 @@
-/**
- * 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 { CSSResultArray, TemplateResult } from 'lit';
-import '../nile-popup/nile-popup';
+import { CSSResultArray } from 'lit';
 import NileElement from '../internal/nile-element';
-import type NilePopup from '../nile-popup/nile-popup';
-/**
- * Nile icon component.
- *
- * @tag nile-tooltip
- *
- */
+type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
 export declare class NileTooltip extends NileElement {
-    /**
-     * The styles for Tooltip
-     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-     */
-    static get styles(): CSSResultArray;
-    private hoverTimeout;
-    defaultSlot: HTMLSlotElement;
-    body: HTMLElement;
-    popup: NilePopup;
-    /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
     content: string;
-    /** Size Property to decide the tool tip size */
     size: 'small' | 'large';
-    /**
-     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
-     * inside of the viewport.
-     */
-    placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
-    /** Disables the tooltip so it won't show when triggered. */
+    placement: TooltipPlacement;
     disabled: boolean;
-    /** The distance in pixels from which to offset the tooltip away from its target. */
-    distance: number;
-    /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
     open: boolean;
-    /** The distance in pixels from which to offset the tooltip along its target. */
-    skidding: number;
-    /**
-     * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
-     * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
-     * programmatically.
-     */
     trigger: string;
-    /**
-     * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
-     * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
-     * scenarios.
-     */
+    distance: number;
+    skidding: number;
     hoist: boolean;
+    tooltip: HTMLElement;
+    slotElement: HTMLSlotElement;
+    private hoverTimeout;
+    static get styles(): CSSResultArray;
     connectedCallback(): void;
-    firstUpdated(): void;
     disconnectedCallback(): void;
-    private handleBlur;
-    private handleClick;
-    private handleFocus;
-    private handleKeyDown;
+    private getBasePlacement;
+    private getAlignmentModifier;
+    private updateTooltipPosition;
+    private showTooltip;
+    private handleAfterShow;
+    private hideTooltip;
+    private handleAfterHide;
     private handleMouseOver;
     private handleMouseOut;
-    private hasTrigger;
-    handleOpenChange(): Promise<void>;
-    handleOptionsChange(): Promise<void>;
-    handleDisabledChange(): void;
-    /** Shows the tooltip. */
-    show(): Promise<void>;
-    /** Hides the tooltip */
-    hide(): Promise<void>;
-    render(): TemplateResult<1>;
+    private handleClick;
+    updated(changedProperties: Map<string, any>): void;
+    private handleFocus;
+    private handleBlur;
+    render(): import("lit-html").TemplateResult<1>;
 }
-export default NileTooltip;
 declare global {
     interface HTMLElementTagNameMap {
         'nile-tooltip': NileTooltip;
     }
 }
+export {};