@aquera/nile-elements 1.4.1-beta-1.3 → 1.4.2-beta-1.0

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

@@ -0,0 +1,459 @@
+/**
+* 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';
+export const styles = css `
+        :host {
+          display: inline-block;
+          position: relative;
+        }
+
+        .tooltip-wrapper {
+          position: relative;
+          display: inline-block;
+        }
+
+        .tooltip-content {
+          position: absolute;
+          background-color: var(--tooltip-bg-color, #333);
+          color: var(--tooltip-text-color, #fff);
+          padding: var(--tooltip-padding, 8px 12px);
+          border-radius: var(--tooltip-border-radius, 6px);
+          border: var(--tooltip-border-width, 0) var(--tooltip-border-style, solid) var(--tooltip-border-color, transparent);
+          font-size: var(--tooltip-font-size, 14px);
+          font-weight: var(--tooltip-font-weight, normal);
+          font-family: var(--tooltip-font-family, inherit);
+          line-height: var(--tooltip-line-height, 1.4);
+          max-width: var(--tooltip-max-width, 350px);
+          min-width: var(--tooltip-min-width, auto);
+          pointer-events: none;
+          opacity: 0;
+          z-index: var(--tooltip-z-index, 9999);
+          box-shadow: var(--tooltip-box-shadow, 0 4px 14px rgba(0, 0, 0, 0.15));
+          transition-property: opacity, transform;
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .tooltip-content.wrap {
+          white-space: normal;
+          word-wrap: break-word;
+        }
+
+        .tooltip-content.no-wrap {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        /* Interactive mode */
+        .tooltip-content.interactive {
+          pointer-events: auto;
+        }
+
+        /* Visible state */
+        .tooltip-content.visible {
+          opacity: 1;
+        }
+
+        /* Trigger modes */
+        .tooltip-wrapper.hover:hover .tooltip-content:not(.disabled),
+        .tooltip-wrapper.focus:focus-within .tooltip-content:not(.disabled),
+        .tooltip-content.manual.visible:not(.disabled) {
+          opacity: 1;
+        }
+
+        .tooltip-content.disabled {
+          display: none;
+        }
+
+        /* Themes */
+        .tooltip-content.theme-dark {
+          --tooltip-bg-color: #333;
+          --tooltip-text-color: #fff;
+        }
+
+        .tooltip-content.theme-light {
+          --tooltip-bg-color: #fff;
+          --tooltip-text-color: #333;
+          --tooltip-box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15), 0 4px 80px -8px rgba(36, 40, 47, 0.25);
+        }
+
+        .tooltip-content.theme-light-border {
+          --tooltip-bg-color: #fff;
+          --tooltip-text-color: #333;
+          --tooltip-border-width: 1px;
+          --tooltip-border-color: rgba(0, 0, 0, 0.1);
+          --tooltip-box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15);
+        }
+
+        /* Size variants */
+        .tooltip-content.size-small {
+          --tooltip-padding: 4px 8px;
+          --tooltip-font-size: 12px;
+        }
+
+        .tooltip-content.size-large {
+          --tooltip-padding: 12px 18px;
+          --tooltip-font-size: 16px;
+        }
+
+        /* Arrow */
+        .tooltip-content::before {
+          content: '';
+          position: absolute;
+          border: var(--tooltip-arrow-size, 7px) solid transparent;
+          display: block;
+        }
+
+        .tooltip-content.no-arrow::before {
+          display: none;
+        }
+
+        /* Animation: Fade */
+        .animation-fade {
+          transition-duration: var(--tooltip-duration, 300ms);
+        }
+
+        /* Animation: Scale */
+        .animation-scale {
+          transform: scale(0.8);
+          transition-duration: var(--tooltip-duration, 300ms);
+        }
+
+        .tooltip-wrapper.hover:hover .animation-scale:not(.disabled),
+        .tooltip-wrapper.focus:focus-within .animation-scale:not(.disabled),
+        .animation-scale.manual.visible:not(.disabled) {
+          transform: scale(1);
+        }
+
+        /* Animation: Shift */
+        .animation-shift {
+          transition-duration: var(--tooltip-duration, 300ms);
+        }
+
+        /* Animation: Perspective */
+        .animation-perspective {
+          transform: perspective(700px) rotateX(0deg);
+          transform-origin: bottom;
+          transition-duration: var(--tooltip-duration, 300ms);
+        }
+
+        /* Top Position */
+        .tooltip-content.top {
+          bottom: calc(100% + var(--tooltip-offset, 10px));
+          left: 50%;
+          transform: translateX(-50%);
+        }
+
+        .tooltip-content.top.animation-scale {
+          transform: translateX(-50%) scale(0.8);
+        }
+
+        .tooltip-wrapper.hover:hover .tooltip-content.top.animation-scale:not(.disabled),
+        .tooltip-wrapper.focus:focus-within .tooltip-content.top.animation-scale:not(.disabled),
+        .tooltip-content.top.animation-scale.manual.visible:not(.disabled) {
+          transform: translateX(-50%) scale(1);
+        }
+
+        .tooltip-content.top.animation-shift {
+          transform: translateX(-50%) translateY(10px);
+        }
+
+        .tooltip-wrapper.hover:hover .tooltip-content.top.animation-shift:not(.disabled),
+        .tooltip-wrapper.focus:focus-within .tooltip-content.top.animation-shift:not(.disabled),
+        .tooltip-content.top.animation-shift.manual.visible:not(.disabled) {
+          transform: translateX(-50%) translateY(0);
+        }
+
+        .tooltip-content.top::before {
+          top: 100%;
+          left: 50%;
+          transform: translateX(-50%);
+          border-top-color: var(--tooltip-bg-color, #333);
+        }
+
+        /* Top-Start Position */
+        .tooltip-content.top-start {
+          bottom: calc(100% + var(--tooltip-offset, 10px));
+          left: 0;
+        }
+
+        .tooltip-content.top-start::before {
+          top: 100%;
+          left: calc(var(--tooltip-arrow-size, 7px) * 2);
+          border-top-color: var(--tooltip-bg-color, #333);
+        }
+
+        .tooltip-content.top-start.inset::before {
+          left: calc(var(--tooltip-arrow-size, 7px) * 3);
+        }
+
+        /* Top-End Position */
+        .tooltip-content.top-end {
+          bottom: calc(100% + var(--tooltip-offset, 10px));
+          right: 0;
+        }
+
+        .tooltip-content.top-end::before {
+          top: 100%;
+          right: calc(var(--tooltip-arrow-size, 7px) * 2);
+          border-top-color: var(--tooltip-bg-color, #333);
+        }
+
+        .tooltip-content.top-end.inset::before {
+          right: calc(var(--tooltip-arrow-size, 7px) * 3);
+        }
+
+        /* Bottom Position */
+        .tooltip-content.bottom {
+          top: calc(100% + var(--tooltip-offset, 10px));
+          left: 50%;
+          transform: translateX(-50%);
+        }
+
+        .tooltip-content.bottom.animation-scale {
+          transform: translateX(-50%) scale(0.8);
+        }
+
+        .tooltip-wrapper.hover:hover .tooltip-content.bottom.animation-scale:not(.disabled),
+        .tooltip-wrapper.focus:focus-within .tooltip-content.bottom.animation-scale:not(.disabled),
+        .tooltip-content.bottom.animation-scale.manual.visible:not(.disabled) {
+          transform: translateX(-50%) scale(1);
+        }
+
+        .tooltip-content.bottom.animation-shift {
+          transform: translateX(-50%) translateY(-10px);
+        }
+
+        .tooltip-wrapper.hover:hover .tooltip-content.bottom.animation-shift:not(.disabled),
+        .tooltip-wrapper.focus:focus-within .tooltip-content.bottom.animation-shift:not(.disabled),
+        .tooltip-content.bottom.animation-shift.manual.visible:not(.disabled) {
+          transform: translateX(-50%) translateY(0);
+        }
+
+        .tooltip-content.bottom::before {
+          bottom: 100%;
+          left: 50%;
+          transform: translateX(-50%);
+          border-bottom-color: var(--tooltip-bg-color, #333);
+        }
+
+        /* Bottom-Start Position */
+        .tooltip-content.bottom-start {
+          top: calc(100% + var(--tooltip-offset, 10px));
+          left: 0;
+        }
+
+        .tooltip-content.bottom-start::before {
+          bottom: 100%;
+          left: calc(var(--tooltip-arrow-size, 7px) * 2);
+          border-bottom-color: var(--tooltip-bg-color, #333);
+        }
+
+        .tooltip-content.bottom-start.inset::before {
+          left: calc(var(--tooltip-arrow-size, 7px) * 3);
+        }
+
+        /* Bottom-End Position */
+        .tooltip-content.bottom-end {
+          top: calc(100% + var(--tooltip-offset, 10px));
+          right: 0;
+        }
+
+        .tooltip-content.bottom-end::before {
+          bottom: 100%;
+          right: calc(var(--tooltip-arrow-size, 7px) * 2);
+          border-bottom-color: var(--tooltip-bg-color, #333);
+        }
+
+        .tooltip-content.bottom-end.inset::before {
+          right: calc(var(--tooltip-arrow-size, 7px) * 3);
+        }
+
+        /* Left Position */
+        .tooltip-content.left {
+          right: calc(100% + var(--tooltip-offset, 10px));
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        .tooltip-content.left.animation-scale {
+          transform: translateY(-50%) scale(0.8);
+        }
+
+        .tooltip-wrapper.hover:hover .tooltip-content.left.animation-scale:not(.disabled),
+        .tooltip-wrapper.focus:focus-within .tooltip-content.left.animation-scale:not(.disabled),
+        .tooltip-content.left.animation-scale.manual.visible:not(.disabled) {
+          transform: translateY(-50%) scale(1);
+        }
+
+        .tooltip-content.left.animation-shift {
+          transform: translateY(-50%) translateX(10px);
+        }
+
+        .tooltip-wrapper.hover:hover .tooltip-content.left.animation-shift:not(.disabled),
+        .tooltip-wrapper.focus:focus-within .tooltip-content.left.animation-shift:not(.disabled),
+        .tooltip-content.left.animation-shift.manual.visible:not(.disabled) {
+          transform: translateY(-50%) translateX(0);
+        }
+
+        .tooltip-content.left::before {
+          left: 100%;
+          top: 50%;
+          transform: translateY(-50%);
+          border-left-color: var(--tooltip-bg-color, #333);
+        }
+
+        /* Left-Start Position */
+        .tooltip-content.left-start {
+          right: calc(100% + var(--tooltip-offset, 10px));
+          top: 0;
+        }
+
+        .tooltip-content.left-start::before {
+          left: 100%;
+          top: calc(var(--tooltip-arrow-size, 7px) * 2);
+          border-left-color: var(--tooltip-bg-color, #333);
+        }
+
+        .tooltip-content.left-start.inset::before {
+          top: calc(var(--tooltip-arrow-size, 7px) * 3);
+        }
+
+        /* Left-End Position */
+        .tooltip-content.left-end {
+          right: calc(100% + var(--tooltip-offset, 10px));
+          bottom: 0;
+        }
+
+        .tooltip-content.left-end::before {
+          left: 100%;
+          bottom: calc(var(--tooltip-arrow-size, 7px) * 2);
+          border-left-color: var(--tooltip-bg-color, #333);
+        }
+
+        .tooltip-content.left-end.inset::before {
+          bottom: calc(var(--tooltip-arrow-size, 7px) * 3);
+        }
+
+        /* Right Position */
+        .tooltip-content.right {
+          left: calc(100% + var(--tooltip-offset, 10px));
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        .tooltip-content.right.animation-scale {
+          transform: translateY(-50%) scale(0.8);
+        }
+
+        .tooltip-wrapper.hover:hover .tooltip-content.right.animation-scale:not(.disabled),
+        .tooltip-wrapper.focus:focus-within .tooltip-content.right.animation-scale:not(.disabled),
+        .tooltip-content.right.animation-scale.manual.visible:not(.disabled) {
+          transform: translateY(-50%) scale(1);
+        }
+
+        .tooltip-content.right.animation-shift {
+          transform: translateY(-50%) translateX(-10px);
+        }
+
+        .tooltip-wrapper.hover:hover .tooltip-content.right.animation-shift:not(.disabled),
+        .tooltip-wrapper.focus:focus-within .tooltip-content.right.animation-shift:not(.disabled),
+        .tooltip-content.right.animation-shift.manual.visible:not(.disabled) {
+          transform: translateY(-50%) translateX(0);
+        }
+
+        .tooltip-content.right::before {
+          right: 100%;
+          top: 50%;
+          transform: translateY(-50%);
+          border-right-color: var(--tooltip-bg-color, #333);
+        }
+
+        /* Right-Start Position */
+        .tooltip-content.right-start {
+          left: calc(100% + var(--tooltip-offset, 10px));
+          top: 0;
+        }
+
+        .tooltip-content.right-start::before {
+          right: 100%;
+          top: calc(var(--tooltip-arrow-size, 7px) * 2);
+          border-right-color: var(--tooltip-bg-color, #333);
+        }
+
+        .tooltip-content.right-start.inset::before {
+          top: calc(var(--tooltip-arrow-size, 7px) * 3);
+        }
+
+        /* Right-End Position */
+        .tooltip-content.right-end {
+          left: calc(100% + var(--tooltip-offset, 10px));
+          bottom: 0;
+        }
+
+        .tooltip-content.right-end::before {
+          right: 100%;
+          bottom: calc(var(--tooltip-arrow-size, 7px) * 2);
+          border-right-color: var(--tooltip-bg-color, #333);
+        }
+
+        .tooltip-content.right-end.inset::before {
+          bottom: calc(var(--tooltip-arrow-size, 7px) * 3);
+        }
+
+        /* Light theme arrow adjustments */
+        .tooltip-content.theme-light.top::before,
+        .tooltip-content.theme-light.top-start::before,
+        .tooltip-content.theme-light.top-end::before {
+          border-top-color: var(--tooltip-bg-color, #fff);
+        }
+
+        .tooltip-content.theme-light.bottom::before,
+        .tooltip-content.theme-light.bottom-start::before,
+        .tooltip-content.theme-light.bottom-end::before {
+          border-bottom-color: var(--tooltip-bg-color, #fff);
+        }
+
+        .tooltip-content.theme-light.left::before,
+        .tooltip-content.theme-light.left-start::before,
+        .tooltip-content.theme-light.left-end::before {
+          border-left-color: var(--tooltip-bg-color, #fff);
+        }
+
+        .tooltip-content.theme-light.right::before,
+        .tooltip-content.theme-light.right-start::before,
+        .tooltip-content.theme-light.right-end::before {
+          border-right-color: var(--tooltip-bg-color, #fff);
+        }
+
+        /* Light border theme arrow with border */
+        .tooltip-content.theme-light-border::after {
+          content: '';
+          position: absolute;
+          border: var(--tooltip-arrow-size, 7px) solid transparent;
+        }
+
+        .tooltip-content.theme-light-border.top::after,
+        .tooltip-content.theme-light-border.top-start::after,
+        .tooltip-content.theme-light-border.top-end::after {
+          top: 100%;
+          left: 50%;
+          transform: translateX(-50%) translateY(-1px);
+          border-top-color: rgba(0, 0, 0, 0.1);
+        }
+
+        .tooltip-content.theme-light-border.bottom::after,
+        .tooltip-content.theme-light-border.bottom-start::after,
+        .tooltip-content.theme-light-border.bottom-end::after {
+          bottom: 100%;
+          left: 50%;
+          transform: translateX(-50%) translateY(1px);
+          border-bottom-color: rgba(0, 0, 0, 0.1);
+        }
+`;
+export default [styles];
+//# sourceMappingURL=nile-css-tooltip.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-css-tooltip.css.js","sourceRoot":"","sources":["../../../src/nile-css-tooltip/nile-css-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAicxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2025\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          display: inline-block;\n          position: relative;\n        }\n\n        .tooltip-wrapper {\n          position: relative;\n          display: inline-block;\n        }\n\n        .tooltip-content {\n          position: absolute;\n          background-color: var(--tooltip-bg-color, #333);\n          color: var(--tooltip-text-color, #fff);\n          padding: var(--tooltip-padding, 8px 12px);\n          border-radius: var(--tooltip-border-radius, 6px);\n          border: var(--tooltip-border-width, 0) var(--tooltip-border-style, solid) var(--tooltip-border-color, transparent);\n          font-size: var(--tooltip-font-size, 14px);\n          font-weight: var(--tooltip-font-weight, normal);\n          font-family: var(--tooltip-font-family, inherit);\n          line-height: var(--tooltip-line-height, 1.4);\n          max-width: var(--tooltip-max-width, 350px);\n          min-width: var(--tooltip-min-width, auto);\n          pointer-events: none;\n          opacity: 0;\n          z-index: var(--tooltip-z-index, 9999);\n          box-shadow: var(--tooltip-box-shadow, 0 4px 14px rgba(0, 0, 0, 0.15));\n          transition-property: opacity, transform;\n          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        }\n\n        .tooltip-content.wrap {\n          white-space: normal;\n          word-wrap: break-word;\n        }\n\n        .tooltip-content.no-wrap {\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n\n        /* Interactive mode */\n        .tooltip-content.interactive {\n          pointer-events: auto;\n        }\n\n        /* Visible state */\n        .tooltip-content.visible {\n          opacity: 1;\n        }\n\n        /* Trigger modes */\n        .tooltip-wrapper.hover:hover .tooltip-content:not(.disabled),\n        .tooltip-wrapper.focus:focus-within .tooltip-content:not(.disabled),\n        .tooltip-content.manual.visible:not(.disabled) {\n          opacity: 1;\n        }\n\n        .tooltip-content.disabled {\n          display: none;\n        }\n\n        /* Themes */\n        .tooltip-content.theme-dark {\n          --tooltip-bg-color: #333;\n          --tooltip-text-color: #fff;\n        }\n\n        .tooltip-content.theme-light {\n          --tooltip-bg-color: #fff;\n          --tooltip-text-color: #333;\n          --tooltip-box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15), 0 4px 80px -8px rgba(36, 40, 47, 0.25);\n        }\n\n        .tooltip-content.theme-light-border {\n          --tooltip-bg-color: #fff;\n          --tooltip-text-color: #333;\n          --tooltip-border-width: 1px;\n          --tooltip-border-color: rgba(0, 0, 0, 0.1);\n          --tooltip-box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15);\n        }\n\n        /* Size variants */\n        .tooltip-content.size-small {\n          --tooltip-padding: 4px 8px;\n          --tooltip-font-size: 12px;\n        }\n\n        .tooltip-content.size-large {\n          --tooltip-padding: 12px 18px;\n          --tooltip-font-size: 16px;\n        }\n\n        /* Arrow */\n        .tooltip-content::before {\n          content: '';\n          position: absolute;\n          border: var(--tooltip-arrow-size, 7px) solid transparent;\n          display: block;\n        }\n\n        .tooltip-content.no-arrow::before {\n          display: none;\n        }\n\n        /* Animation: Fade */\n        .animation-fade {\n          transition-duration: var(--tooltip-duration, 300ms);\n        }\n\n        /* Animation: Scale */\n        .animation-scale {\n          transform: scale(0.8);\n          transition-duration: var(--tooltip-duration, 300ms);\n        }\n\n        .tooltip-wrapper.hover:hover .animation-scale:not(.disabled),\n        .tooltip-wrapper.focus:focus-within .animation-scale:not(.disabled),\n        .animation-scale.manual.visible:not(.disabled) {\n          transform: scale(1);\n        }\n\n        /* Animation: Shift */\n        .animation-shift {\n          transition-duration: var(--tooltip-duration, 300ms);\n        }\n\n        /* Animation: Perspective */\n        .animation-perspective {\n          transform: perspective(700px) rotateX(0deg);\n          transform-origin: bottom;\n          transition-duration: var(--tooltip-duration, 300ms);\n        }\n\n        /* Top Position */\n        .tooltip-content.top {\n          bottom: calc(100% + var(--tooltip-offset, 10px));\n          left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .tooltip-content.top.animation-scale {\n          transform: translateX(-50%) scale(0.8);\n        }\n\n        .tooltip-wrapper.hover:hover .tooltip-content.top.animation-scale:not(.disabled),\n        .tooltip-wrapper.focus:focus-within .tooltip-content.top.animation-scale:not(.disabled),\n        .tooltip-content.top.animation-scale.manual.visible:not(.disabled) {\n          transform: translateX(-50%) scale(1);\n        }\n\n        .tooltip-content.top.animation-shift {\n          transform: translateX(-50%) translateY(10px);\n        }\n\n        .tooltip-wrapper.hover:hover .tooltip-content.top.animation-shift:not(.disabled),\n        .tooltip-wrapper.focus:focus-within .tooltip-content.top.animation-shift:not(.disabled),\n        .tooltip-content.top.animation-shift.manual.visible:not(.disabled) {\n          transform: translateX(-50%) translateY(0);\n        }\n\n        .tooltip-content.top::before {\n          top: 100%;\n          left: 50%;\n          transform: translateX(-50%);\n          border-top-color: var(--tooltip-bg-color, #333);\n        }\n\n        /* Top-Start Position */\n        .tooltip-content.top-start {\n          bottom: calc(100% + var(--tooltip-offset, 10px));\n          left: 0;\n        }\n\n        .tooltip-content.top-start::before {\n          top: 100%;\n          left: calc(var(--tooltip-arrow-size, 7px) * 2);\n          border-top-color: var(--tooltip-bg-color, #333);\n        }\n\n        .tooltip-content.top-start.inset::before {\n          left: calc(var(--tooltip-arrow-size, 7px) * 3);\n        }\n\n        /* Top-End Position */\n        .tooltip-content.top-end {\n          bottom: calc(100% + var(--tooltip-offset, 10px));\n          right: 0;\n        }\n\n        .tooltip-content.top-end::before {\n          top: 100%;\n          right: calc(var(--tooltip-arrow-size, 7px) * 2);\n          border-top-color: var(--tooltip-bg-color, #333);\n        }\n\n        .tooltip-content.top-end.inset::before {\n          right: calc(var(--tooltip-arrow-size, 7px) * 3);\n        }\n\n        /* Bottom Position */\n        .tooltip-content.bottom {\n          top: calc(100% + var(--tooltip-offset, 10px));\n          left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .tooltip-content.bottom.animation-scale {\n          transform: translateX(-50%) scale(0.8);\n        }\n\n        .tooltip-wrapper.hover:hover .tooltip-content.bottom.animation-scale:not(.disabled),\n        .tooltip-wrapper.focus:focus-within .tooltip-content.bottom.animation-scale:not(.disabled),\n        .tooltip-content.bottom.animation-scale.manual.visible:not(.disabled) {\n          transform: translateX(-50%) scale(1);\n        }\n\n        .tooltip-content.bottom.animation-shift {\n          transform: translateX(-50%) translateY(-10px);\n        }\n\n        .tooltip-wrapper.hover:hover .tooltip-content.bottom.animation-shift:not(.disabled),\n        .tooltip-wrapper.focus:focus-within .tooltip-content.bottom.animation-shift:not(.disabled),\n        .tooltip-content.bottom.animation-shift.manual.visible:not(.disabled) {\n          transform: translateX(-50%) translateY(0);\n        }\n\n        .tooltip-content.bottom::before {\n          bottom: 100%;\n          left: 50%;\n          transform: translateX(-50%);\n          border-bottom-color: var(--tooltip-bg-color, #333);\n        }\n\n        /* Bottom-Start Position */\n        .tooltip-content.bottom-start {\n          top: calc(100% + var(--tooltip-offset, 10px));\n          left: 0;\n        }\n\n        .tooltip-content.bottom-start::before {\n          bottom: 100%;\n          left: calc(var(--tooltip-arrow-size, 7px) * 2);\n          border-bottom-color: var(--tooltip-bg-color, #333);\n        }\n\n        .tooltip-content.bottom-start.inset::before {\n          left: calc(var(--tooltip-arrow-size, 7px) * 3);\n        }\n\n        /* Bottom-End Position */\n        .tooltip-content.bottom-end {\n          top: calc(100% + var(--tooltip-offset, 10px));\n          right: 0;\n        }\n\n        .tooltip-content.bottom-end::before {\n          bottom: 100%;\n          right: calc(var(--tooltip-arrow-size, 7px) * 2);\n          border-bottom-color: var(--tooltip-bg-color, #333);\n        }\n\n        .tooltip-content.bottom-end.inset::before {\n          right: calc(var(--tooltip-arrow-size, 7px) * 3);\n        }\n\n        /* Left Position */\n        .tooltip-content.left {\n          right: calc(100% + var(--tooltip-offset, 10px));\n          top: 50%;\n          transform: translateY(-50%);\n        }\n\n        .tooltip-content.left.animation-scale {\n          transform: translateY(-50%) scale(0.8);\n        }\n\n        .tooltip-wrapper.hover:hover .tooltip-content.left.animation-scale:not(.disabled),\n        .tooltip-wrapper.focus:focus-within .tooltip-content.left.animation-scale:not(.disabled),\n        .tooltip-content.left.animation-scale.manual.visible:not(.disabled) {\n          transform: translateY(-50%) scale(1);\n        }\n\n        .tooltip-content.left.animation-shift {\n          transform: translateY(-50%) translateX(10px);\n        }\n\n        .tooltip-wrapper.hover:hover .tooltip-content.left.animation-shift:not(.disabled),\n        .tooltip-wrapper.focus:focus-within .tooltip-content.left.animation-shift:not(.disabled),\n        .tooltip-content.left.animation-shift.manual.visible:not(.disabled) {\n          transform: translateY(-50%) translateX(0);\n        }\n\n        .tooltip-content.left::before {\n          left: 100%;\n          top: 50%;\n          transform: translateY(-50%);\n          border-left-color: var(--tooltip-bg-color, #333);\n        }\n\n        /* Left-Start Position */\n        .tooltip-content.left-start {\n          right: calc(100% + var(--tooltip-offset, 10px));\n          top: 0;\n        }\n\n        .tooltip-content.left-start::before {\n          left: 100%;\n          top: calc(var(--tooltip-arrow-size, 7px) * 2);\n          border-left-color: var(--tooltip-bg-color, #333);\n        }\n\n        .tooltip-content.left-start.inset::before {\n          top: calc(var(--tooltip-arrow-size, 7px) * 3);\n        }\n\n        /* Left-End Position */\n        .tooltip-content.left-end {\n          right: calc(100% + var(--tooltip-offset, 10px));\n          bottom: 0;\n        }\n\n        .tooltip-content.left-end::before {\n          left: 100%;\n          bottom: calc(var(--tooltip-arrow-size, 7px) * 2);\n          border-left-color: var(--tooltip-bg-color, #333);\n        }\n\n        .tooltip-content.left-end.inset::before {\n          bottom: calc(var(--tooltip-arrow-size, 7px) * 3);\n        }\n\n        /* Right Position */\n        .tooltip-content.right {\n          left: calc(100% + var(--tooltip-offset, 10px));\n          top: 50%;\n          transform: translateY(-50%);\n        }\n\n        .tooltip-content.right.animation-scale {\n          transform: translateY(-50%) scale(0.8);\n        }\n\n        .tooltip-wrapper.hover:hover .tooltip-content.right.animation-scale:not(.disabled),\n        .tooltip-wrapper.focus:focus-within .tooltip-content.right.animation-scale:not(.disabled),\n        .tooltip-content.right.animation-scale.manual.visible:not(.disabled) {\n          transform: translateY(-50%) scale(1);\n        }\n\n        .tooltip-content.right.animation-shift {\n          transform: translateY(-50%) translateX(-10px);\n        }\n\n        .tooltip-wrapper.hover:hover .tooltip-content.right.animation-shift:not(.disabled),\n        .tooltip-wrapper.focus:focus-within .tooltip-content.right.animation-shift:not(.disabled),\n        .tooltip-content.right.animation-shift.manual.visible:not(.disabled) {\n          transform: translateY(-50%) translateX(0);\n        }\n\n        .tooltip-content.right::before {\n          right: 100%;\n          top: 50%;\n          transform: translateY(-50%);\n          border-right-color: var(--tooltip-bg-color, #333);\n        }\n\n        /* Right-Start Position */\n        .tooltip-content.right-start {\n          left: calc(100% + var(--tooltip-offset, 10px));\n          top: 0;\n        }\n\n        .tooltip-content.right-start::before {\n          right: 100%;\n          top: calc(var(--tooltip-arrow-size, 7px) * 2);\n          border-right-color: var(--tooltip-bg-color, #333);\n        }\n\n        .tooltip-content.right-start.inset::before {\n          top: calc(var(--tooltip-arrow-size, 7px) * 3);\n        }\n\n        /* Right-End Position */\n        .tooltip-content.right-end {\n          left: calc(100% + var(--tooltip-offset, 10px));\n          bottom: 0;\n        }\n\n        .tooltip-content.right-end::before {\n          right: 100%;\n          bottom: calc(var(--tooltip-arrow-size, 7px) * 2);\n          border-right-color: var(--tooltip-bg-color, #333);\n        }\n\n        .tooltip-content.right-end.inset::before {\n          bottom: calc(var(--tooltip-arrow-size, 7px) * 3);\n        }\n\n        /* Light theme arrow adjustments */\n        .tooltip-content.theme-light.top::before,\n        .tooltip-content.theme-light.top-start::before,\n        .tooltip-content.theme-light.top-end::before {\n          border-top-color: var(--tooltip-bg-color, #fff);\n        }\n\n        .tooltip-content.theme-light.bottom::before,\n        .tooltip-content.theme-light.bottom-start::before,\n        .tooltip-content.theme-light.bottom-end::before {\n          border-bottom-color: var(--tooltip-bg-color, #fff);\n        }\n\n        .tooltip-content.theme-light.left::before,\n        .tooltip-content.theme-light.left-start::before,\n        .tooltip-content.theme-light.left-end::before {\n          border-left-color: var(--tooltip-bg-color, #fff);\n        }\n\n        .tooltip-content.theme-light.right::before,\n        .tooltip-content.theme-light.right-start::before,\n        .tooltip-content.theme-light.right-end::before {\n          border-right-color: var(--tooltip-bg-color, #fff);\n        }\n\n        /* Light border theme arrow with border */\n        .tooltip-content.theme-light-border::after {\n          content: '';\n          position: absolute;\n          border: var(--tooltip-arrow-size, 7px) solid transparent;\n        }\n\n        .tooltip-content.theme-light-border.top::after,\n        .tooltip-content.theme-light-border.top-start::after,\n        .tooltip-content.theme-light-border.top-end::after {\n          top: 100%;\n          left: 50%;\n          transform: translateX(-50%) translateY(-1px);\n          border-top-color: rgba(0, 0, 0, 0.1);\n        }\n\n        .tooltip-content.theme-light-border.bottom::after,\n        .tooltip-content.theme-light-border.bottom-start::after,\n        .tooltip-content.theme-light-border.bottom-end::after {\n          bottom: 100%;\n          left: 50%;\n          transform: translateX(-50%) translateY(1px);\n          border-bottom-color: rgba(0, 0, 0, 0.1);\n        }\n`;\n\nexport default [styles];"]}

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

@@ -0,0 +1,113 @@
+/**
+ * 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 { CSSResultArray, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile css-tooltip component - A comprehensive CSS-based tooltip with Tippy.js-like features.
+ *
+ * @tag nile-css-tooltip
+ * @slot - The content that triggers the tooltip on hover
+ *
+ * @cssproperty --tooltip-bg-color - Background color of the tooltip (default: #333)
+ * @cssproperty --tooltip-text-color - Text color of the tooltip (default: #fff)
+ * @cssproperty --tooltip-font-size - Font size of the tooltip text (default: 14px)
+ * @cssproperty --tooltip-font-weight - Font weight of the tooltip text (default: normal)
+ * @cssproperty --tooltip-font-family - Font family of the tooltip text (default: inherit)
+ * @cssproperty --tooltip-line-height - Line height of the tooltip text (default: 1.4)
+ * @cssproperty --tooltip-padding - Padding inside the tooltip (default: 8px 12px)
+ * @cssproperty --tooltip-border-radius - Border radius of the tooltip (default: 6px)
+ * @cssproperty --tooltip-border-width - Border width (default: 0)
+ * @cssproperty --tooltip-border-color - Border color (default: transparent)
+ * @cssproperty --tooltip-border-style - Border style (default: solid)
+ * @cssproperty --tooltip-offset - Distance from the trigger element (default: 10px)
+ * @cssproperty --tooltip-arrow-size - Size of the tooltip arrow (default: 7px)
+ * @cssproperty --tooltip-max-width - Maximum width of the tooltip (default: 350px)
+ * @cssproperty --tooltip-min-width - Minimum width of the tooltip (default: none)
+ * @cssproperty --tooltip-z-index - Z-index of the tooltip (default: 9999)
+ * @cssproperty --tooltip-box-shadow - Box shadow of the tooltip (default: 0 4px 14px rgba(0,0,0,0.15))
+ */
+export declare class NileCssTooltip extends NileElement {
+    /**
+     * The text content to display in the tooltip
+     */
+    text: string;
+    /**
+     * Position of the tooltip relative to the trigger element
+     * @type {'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'}
+     */
+    position: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+    /**
+     * Animation type
+     * @type {'fade' | 'scale' | 'shift' | 'perspective'}
+     */
+    animation: 'fade' | 'scale' | 'shift' | 'perspective';
+    /**
+     * Delay before showing the tooltip (in milliseconds)
+     */
+    delay: number;
+    /**
+     * Duration of the show/hide animation (in milliseconds)
+     */
+    duration: number;
+    /**
+     * Whether the tooltip is disabled
+     */
+    disabled: boolean;
+    /**
+     * Show arrow on the tooltip
+     */
+    arrow: boolean;
+    /**
+     * Interactive - whether tooltip stays open when hovering over it
+     */
+    interactive: boolean;
+    /**
+     * Theme variant
+     * @type {'dark' | 'light' | 'light-border' | 'custom'}
+     */
+    theme: 'dark' | 'light' | 'light-border' | 'custom';
+    /**
+     * Trigger event
+     * @type {'hover' | 'focus' | 'click' | 'manual'}
+     */
+    trigger: 'hover' | 'focus' | 'click' | 'manual';
+    /**
+     * Whether to hide tooltip on click outside
+     */
+    hideOnClick: boolean;
+    /**
+     * Whether to allow HTML content (uses slot instead of text)
+     */
+    allowHTML: boolean;
+    /**
+     * Tooltip size preset
+     * @type {'small' | 'regular' | 'large'}
+     */
+    size: 'small' | 'regular' | 'large';
+    /**
+     * Whether to show the tooltip (for manual trigger)
+     */
+    visible: boolean;
+    /**
+     * Whether text should wrap or stay on one line
+     */
+    noWrap: boolean;
+    inset: boolean;
+    static get styles(): CSSResultArray;
+    /**
+     * Render method
+     * @slot - The content that will trigger the tooltip on hover
+     * @slot tooltip-content - Custom HTML content for the tooltip (when allowHTML is true)
+     */
+    render(): TemplateResult;
+}
+export default NileCssTooltip;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-css-tooltip': NileCssTooltip;
+    }
+}