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

package/README.md

@@ -91,8 +91,8 @@ In this section, you can find the updates for each release of `nile-elements`. I
 - Nile Skeleton Loader: New component added (UIF-1028)
 - Nile Icons: new icons added (UIF-1026)
 - Nile Chip: Fixed disabled property (UIF-1034)
-- Nile Date Picker: Added 4 properties
-- Nile Calendar: Added css properties
+- Nile Date Picker: Added 4 properties (UIF-1043)
+- Nile Calendar: Added css properties (UIF-1043)
 - Dependency Nile 1.1.4
 
 

package/demo/variables.css

@@ -309,6 +309,7 @@
   --nile-colors-primary-500: #80AED3;
   --nile-colors-primary-400: #BFD7E9;
   --nile-colors-primary-100: #E6EFF6;
+  --nile-colors-neutral-700: #777D82;
   --nile-colors-neutral-500: #C7CED4;
   --nile-colors-neutral-400: #E6E9EB;
   --nile-colors-neutral-100: #FAFAFA;

package/dist/index.js

@@ -14864,7 +14864,7 @@ nile-rte-toolbar-item nile-button[data-active]::part(base):hover {
 
 
 
-`,_S={bold:"format_bold",italic:"format_italic",underline:"format_underline",link:"link_2",left:"format_align_left",center:"format_align_middle",right:"format_align_right",justify:"format_align_justify",ul:"format_list_bulleted",ol:"format_list_numbered",clear:"format_clear"};let FS=class extends ae{constructor(){super(...arguments),this.value="",this.noStyles=!1,this.singleLineEditor=!1,this.placeholder="",this.mentions={},this.content="",this.previewEl=null,this.toolbarEl=null,this.lastRange=null,this.buttonMap=new Map,this.headingSelect=null,this.fontSelect=null,this.colorInput=null,this.bgColorInput=null,this.colorSwatchEl=null,this.bgSwatchEl=null,this.containerEl=null,this.mentionsEl=null,this.onEditorKeydown=e=>{if(this.singleLineEditor&&"Enter"===e.key&&e.shiftKey)return void e.preventDefault();if(e.ctrlKey&&"i"===e.key.toLowerCase()&&(e.preventDefault(),US(this.editorEl,"em"),this.updateContent(),this.updateToolbarState()),this.singleLineEditor&&"Enter"===e.key)return void e.preventDefault();if("Tab"!==e.key)return;e.preventDefault(),this.focusAndRestore();const t=window.getSelection();if(!t||0===t.rangeCount)return;const i=t.getRangeAt(0);if(e.shiftKey){if(i.collapsed&&i.startContainer.nodeType===Node.TEXT_NODE){const e=i.startContainer,M=i.startOffset,n=e.data.slice(0,M),o=n.replace(/(\t|[ \u00a0]{2})$/,"");if(o.length!==n.length){e.data=o+e.data.slice(M);const i=document.createRange();i.setStart(e,o.length),i.collapse(!0),t.removeAllRanges(),t.addRange(i),this.updateContent(),this.updateToolbarState()}}return}i.deleteContents();const M=document.createTextNode("\t");i.insertNode(M);const n=document.createRange();n.setStartAfter(M),n.collapse(!0),t.removeAllRanges(),t.addRange(n),this.updateContent(),this.updateToolbarState()},this.onSelectionChange=()=>{if(!this.editorEl)return;const e=document.getSelection();if(!e||0===e.rangeCount)return;const t=e.getRangeAt(0);this.editorEl.contains(t.commonAncestorContainer)&&(this.lastRange=t.cloneRange(),this.updateToolbarState())}}createRenderRoot(){return this}injectCss(e){if(this.querySelector("style[data-rte-style]"))return;const t=document.createElement("style");t.setAttribute("data-rte-style","true"),t.textContent=e,this.insertBefore(t,this.firstChild)}connectedCallback(){super.connectedCallback(),this.injectCss(GS.cssText),this.ensureStructure(),this.placeholder&&this.editorEl&&(this.editorEl.dataset.placeholder=this.placeholder),this.value&&!this.editorEl.innerHTML.trim()&&(this.editorEl.innerHTML=this.value),this.content=this.editorEl.innerHTML,this.toolbarEl&&this.wireAuthoredToolbar(this.toolbarEl),this.mentionsEl=this.querySelector("nile-rte-mentions"),this.mentionsEl&&(this.mentionsEl.attach?.(this.editorEl,this),this.mentionsEl.setExternalConfig?.(this.mentions)),this.wireEditor(),document.addEventListener("selectionchange",this.onSelectionChange,{passive:!0}),this.updateToolbarState(),this.syncPreview()}ensureStructure(){this.toolbarEl=this.querySelector("nile-rte-toolbar"),this.previewEl=this.querySelector("nile-rte-preview"),this.containerEl=this.querySelector(".rte-container"),this.containerEl||(this.containerEl=document.createElement("div"),this.containerEl.className="rte-container",this.appendChild(this.containerEl)),this.ensureEditor(),this.toolbarEl&&this.toolbarEl.parentElement!==this.containerEl&&this.containerEl.appendChild(this.toolbarEl),this.editorEl.parentElement!==this.containerEl&&this.containerEl.appendChild(this.editorEl),this.previewEl&&(this.previewEl.parentElement!==this&&this.appendChild(this.previewEl),this.previewEl.previousElementSibling!==this.containerEl&&this.insertBefore(this.previewEl,this.containerEl.nextSibling))}updateContentWithMention(e){this.updateContent(),this.dispatchEvent(new CustomEvent("nile-change",{detail:{content:this.content,mention:e},bubbles:!0,composed:!0}))}disconnectedCallback(){document.removeEventListener("selectionchange",this.onSelectionChange),this.mentionsEl&&this.mentionsEl.detach&&this.mentionsEl.detach(),super.disconnectedCallback()}updated(e){e.has("value")&&this.editorEl&&this.value!==this.editorEl.innerHTML&&(this.editorEl.innerHTML=this.value||"<p><br></p>",this.content=this.editorEl.innerHTML,this.syncPreview()),e.has("singleLineEditor")&&(this.editorEl&&this.editorEl.classList.toggle("single-line",this.singleLineEditor),this.previewEl&&this.previewEl.classList.toggle("single-line",this.singleLineEditor))}ensureEditor(){if(this.editorEl=this.querySelector(".editor"),!this.editorEl){const e=document.createElement("article");e.className="editor",e.setAttribute("contenteditable","true"),this.editorEl=e}this.placeholder&&(this.editorEl.dataset.placeholder=this.placeholder),this.editorEl.innerHTML.trim()||(this.editorEl.innerHTML="<p><br></p>")}unwrapMention(e,t=!0){const i=e.parentNode;if(!i)return;const M=t?(e.textContent??"").replace(/\u200B/g,""):"",n=document.createTextNode(M);i.insertBefore(n,e),i.removeChild(e);const o=document.createRange();o.setStartAfter(n),o.collapse(!0);const r=window.getSelection();r?.removeAllRanges(),r?.addRange(o)}scrubBrokenMentions(){if(!this.editorEl)return;this.editorEl.querySelectorAll("span.mention").forEach((e=>{const t=e,i=t.getAttribute("data-mention-key"),M=t.getAttribute("data-mention-label"),n=t.getAttribute("data-mention-trigger")||"",o=(t.textContent??"").replace(/\u200B/g,"").trim(),r=!!i&&!!M&&o.length>0&&o.startsWith(n)&&o.includes(M);o&&r||this.unwrapMention(t,!0)}))}wireEditor(){this.editorEl.addEventListener("input",(()=>{this.ensureAtLeastOneParagraph(),this.scrubBrokenMentions(),this.updateContent(),this.updateToolbarState()})),this.editorEl.addEventListener("mouseup",(()=>{this.saveSelection(),this.updateToolbarState()})),this.editorEl.addEventListener("keyup",(e=>{this.saveSelection(),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key)&&this.updateToolbarState()})),this.editorEl.addEventListener("keydown",this.onEditorKeydown)}wireAuthoredToolbar(e){this.buttonMap.clear(),this.headingSelect=null,this.fontSelect=null,this.colorInput=null,Array.from(e.children).forEach((e=>{const t=e.tagName.toLowerCase();if("nile-rte-select"!==t||"align"!==e.getAttribute("type")){if("nile-rte-link"===t)return e.editorEl=this.editorEl,void e.addEventListener("link-changed",(()=>{this.updateContent(),this.updateToolbarState()}));if("nile-rte-toolbar-item"===t){let t=e.querySelector(":scope > nile-button");const i=e.getAttribute("name")||"",M=e.getAttribute("label")||i,n=e.getAttribute("icon"),o=e.innerHTML.trim().length>0;if(t||(t=document.createElement("nile-button"),t.variant="tertiary",t.size="small"),n)t.innerHTML=`<nile-icon name="${n}" aria-label="${M}"></nile-icon>`,e.innerHTML="";else if(o)t.innerHTML=e.innerHTML,e.innerHTML="";else{const n=_S[i];n?t.innerHTML=`<nile-icon name="${n}" size="20" color="black" aria-label="${M}"></nile-icon>`:t.textContent=M||i,e.innerHTML=""}if(!t.isConnected){const i=document.createElement("nile-tooltip");i.setAttribute("content",M),i.appendChild(t),e.appendChild(i)}t.setAttribute("aria-label",M),t.addEventListener("mousedown",(e=>e.preventDefault())),t.addEventListener("click",(()=>this.onToolbarCommand(i)));const r=this.buttonMap.get(i)??[];return r.push(t),void this.buttonMap.set(i,r)}if("nile-rte-select"!==t)"nile-rte-color"!==t||e.addEventListener("change",(e=>{this.focusAndRestore();const{mode:t,value:i}=e.detail;"backColor"===t?WS(this.editorEl,"backgroundColor",i,"data-rte-bg"):function(e,t){WS(e,"color",t,"data-rte-color")}(this.editorEl,i),this.updateContent(),this.updateToolbarState()}));else{const t=e.getAttribute("type")||"";e.addEventListener("change",(e=>{this.focusAndRestore();const i=e.detail;"heading"===t?function(e,t){const i=document.getSelection();if(!i||0===i.rangeCount)return;const M=fS(i.getRangeAt(0).startContainer,e);if(!M)return;if(M.tagName.toLowerCase()===t)return;const n=document.createElement(t);for(;M.firstChild;)n.appendChild(M.firstChild);M.replaceWith(n);const o=document.createRange();o.selectNodeContents(n),o.collapse(!0),i.removeAllRanges(),i.addRange(o)}(this.editorEl,i):"font"===t&&ZS(this.editorEl,i),this.updateContent(),this.updateToolbarState()}))}}else e.addEventListener("change",(e=>{this.focusAndRestore();const t=e.detail;vS(this.editorEl,t),this.updateContent(),this.updateToolbarState()}))}))}saveSelection(){const e=window.getSelection();e&&e.rangeCount&&(this.lastRange=e.getRangeAt(0).cloneRange())}restoreSelection(){if(!this.lastRange)return;const e=document.getSelection();e&&(e.removeAllRanges(),e.addRange(this.lastRange))}focusAndRestore(){this.editorEl?.focus(),this.restoreSelection()}getCleanContent(){const e=this.editorEl.cloneNode(!0);return e.querySelectorAll("*").forEach((e=>{e.removeAttribute("style")})),e.innerHTML}insertList(e){if(this.restoreSelection(),!this.lastRange)return;const t=document.createElement(e),i=this.lastRange.extractContents(),M=document.createElement("div");M.appendChild(i),Array.from(M.childNodes).forEach((e=>{if(e.nodeType===Node.TEXT_NODE&&!e.textContent?.trim())return;const i=document.createElement("li");i.appendChild(e),t.appendChild(i)})),this.lastRange.insertNode(t),this.afterListEdit(t)}afterListEdit(e){const t=document.createRange();t.setStartAfter(e),t.collapse(!0);const i=window.getSelection();i?.removeAllRanges(),i?.addRange(t),this.saveSelection(),this.updateContent(),this.updateToolbarState()}ensureAtLeastOneParagraph(){const e=this.editorEl;if(!e)return;const t=""===(e.textContent??"").replace(/\u200B/g,"").trim();if(0===e.childNodes.length||t)return void(e.innerHTML="<p><br></p>");if(!e.querySelector("p,h1,h2,h3,h4,h5,h6,ul,ol,table,blockquote,pre")){const t=document.createElement("p");for(;e.firstChild;)t.appendChild(e.firstChild);return t.hasChildNodes()||t.appendChild(document.createElement("br")),void e.appendChild(t)}e.querySelectorAll("p").forEach((e=>{""===(e.textContent??"").replace(/\u200B/g,"")&&(e.innerHTML.toLowerCase().includes("<br")||(e.innerHTML="<br>"))}))}onToolbarCommand(e){switch(this.focusAndRestore(),e){case"bold":US(this.editorEl,"strong");break;case"italic":US(this.editorEl,"em");break;case"underline":US(this.editorEl,"u");break;case"left":vS(this.editorEl,"left");break;case"center":vS(this.editorEl,"center");break;case"right":vS(this.editorEl,"right");break;case"justify":vS(this.editorEl,"justify");break;case"ul":BS(this.editorEl,"ul"),this.updateContent(),this.updateToolbarState();break;case"ol":BS(this.editorEl,"ol"),this.updateContent(),this.updateToolbarState();break;case"link":break;case"clear":const e=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),t=[];for(;e.nextNode();){const i=e.currentNode;i.removeAttribute("style"),["B","STRONG","I","EM","U","SPAN","FONT"].includes(i.tagName)&&t.push(i)}for(const e of t){for(;e.firstChild;)e.parentNode?.insertBefore(e.firstChild,e);e.remove()}this.ensureAtLeastOneParagraph()}this.updateContent(),this.updateToolbarState()}setBtnActive(e,t){const i=this.buttonMap.get(e);if(i)for(const e of i)e.toggleAttribute("data-active",!!t)}updateToolbarState(){if(!this.editorEl)return;const e=document.getSelection();if(!e||0===e.rangeCount)return;const t=e.getRangeAt(0);if(!this.editorEl.contains(t.commonAncestorContainer))return;const i=function(e){for(;e&&!(e instanceof HTMLElement);)e=e.parentNode;return e}(t.startContainer)||this.editorEl,M=getComputedStyle(i),n=fS(t.startContainer,this.editorEl)||this.editorEl,o=(()=>{let e=i;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=e.tagName.toLowerCase();if("strong"===t||"b"===t)return!0;const i=getComputedStyle(e).fontWeight;if(parseInt(i,10)>=600)return!0}e=e.parentNode}return!1})(),r=(()=>{let e=i;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=e.tagName.toLowerCase();if("em"===t||"i"===t)return!0;if("italic"===getComputedStyle(e).fontStyle)return!0}e=e.parentNode}return!1})(),s=(()=>{let e=i;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=getComputedStyle(e).textDecorationLine;if(t&&t.includes("underline"))return!0;if("u"===e.tagName.toLowerCase())return!0}e=e.parentNode}return!1})(),a=!!i.closest("a"),l=n.style.textAlign||getComputedStyle(n).textAlign||"start",N="start"===l?"left":l,g=!!i.closest("li")&&i.closest("ul,ol")?.tagName.toLowerCase()||"";if(this.setBtnActive("bold",o),this.setBtnActive("italic",r),this.setBtnActive("underline",s),this.setBtnActive("link",a),this.setBtnActive("left","left"===N&&!["center","right","justify"].includes(N)),this.setBtnActive("center","center"===N),this.setBtnActive("right","right"===N),this.setBtnActive("justify","justify"===N),this.setBtnActive("ul","ul"===g),this.setBtnActive("ol","ol"===g),this.headingSelect){const e=n.tagName.toLowerCase(),t=["h1","h2","h3"].includes(e)?e:"p";this.headingSelect.value!==t&&(this.headingSelect.value=t)}if(this.fontSelect){const e=(M.fontFamily||"").replace(/["']/g,"").split(",")[0].trim().toLowerCase();if(e)for(const t of Array.from(this.fontSelect.options))if(t.value.toLowerCase()===e){this.fontSelect.value=t.value;break}}if(this.colorInput){const e=YS(M.color);e&&this.colorInput.value.toLowerCase()!==e.toLowerCase()&&(this.colorInput.value=e),this.colorSwatchEl&&(this.colorSwatchEl.style.backgroundColor=this.colorInput.value)}if(this.bgColorInput){const e=getComputedStyle(i).backgroundColor;if(e&&!/transparent|rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(e)){const t=YS(e);t&&this.bgColorInput.value.toLowerCase()!==t.toLowerCase()&&(this.bgColorInput.value=t)}this.bgSwatchEl&&(this.bgSwatchEl.style.backgroundColor=this.bgColorInput.value)}}syncPreview(){this.updateContent()}updateContent(){if(!this.editorEl)return;this.ensureAtLeastOneParagraph();const e=""===(this.editorEl.textContent??"").trim();this.editorEl.classList.toggle("empty",e);const t=this.editorEl.cloneNode(!0);if(this.noStyles)t.querySelectorAll("[style]").forEach((e=>e.removeAttribute("style")));else{const e=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),i=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),M=["font-weight","font-style","text-decoration","color","background-color","font-size","font-family","text-align","line-height","letter-spacing","white-space","vertical-align","list-style-position","padding-inline-start"];for(;e.nextNode()&&i.nextNode();){const t=e.currentNode,n=i.currentNode,o=window.getComputedStyle(t),r=M.map((e=>`${e}:${o.getPropertyValue(e)}`)).join(";");r.trim()&&n.setAttribute("style",r)}}this.content=t.innerHTML,this.previewEl&&(this.previewEl.innerHTML=this.content),this.dispatchEvent(new CustomEvent("nile-change",{detail:{content:this.content},bubbles:!0,composed:!0}))}};e([ce({type:String,attribute:!0,reflect:!0})],FS.prototype,"value",void 0),e([ce({type:Boolean,attribute:!0,reflect:!0})],FS.prototype,"noStyles",void 0),e([ce({type:Boolean,attribute:"singlelineeditor",reflect:!0})],FS.prototype,"singleLineEditor",void 0),e([ce({type:String})],FS.prototype,"placeholder",void 0),e([ce({attribute:"mentions",reflect:!0,converter:{fromAttribute:e=>{try{const t=JSON.parse(e),i={};for(const e of Object.keys(t)){const M=t[e];Array.isArray(M)&&(i[e]=M.filter((e=>e&&"string"==typeof e.key&&"string"==typeof e.label)).map((e=>({key:e.key,label:e.label}))))}return i}catch{return{}}},toAttribute:e=>JSON.stringify(e)}})],FS.prototype,"mentions",void 0),e([De()],FS.prototype,"content",void 0),FS=e([Ne("nile-rich-text-editor")],FS);"undefined"!=typeof window&&(window.nileElementsVersion='"1.4.1"',window.nileVersion="__NILE_VERSION__",window.process=window.process||{env:{NODE_ENV:"production"}});const HS=r`
+`,_S={bold:"format_bold",italic:"format_italic",underline:"format_underline",link:"link_2",left:"format_align_left",center:"format_align_middle",right:"format_align_right",justify:"format_align_justify",ul:"format_list_bulleted",ol:"format_list_numbered",clear:"format_clear"};let FS=class extends ae{constructor(){super(...arguments),this.value="",this.noStyles=!1,this.singleLineEditor=!1,this.placeholder="",this.mentions={},this.content="",this.previewEl=null,this.toolbarEl=null,this.lastRange=null,this.buttonMap=new Map,this.headingSelect=null,this.fontSelect=null,this.colorInput=null,this.bgColorInput=null,this.colorSwatchEl=null,this.bgSwatchEl=null,this.containerEl=null,this.mentionsEl=null,this.onEditorKeydown=e=>{if(this.singleLineEditor&&"Enter"===e.key&&e.shiftKey)return void e.preventDefault();if(e.ctrlKey&&"i"===e.key.toLowerCase()&&(e.preventDefault(),US(this.editorEl,"em"),this.updateContent(),this.updateToolbarState()),this.singleLineEditor&&"Enter"===e.key)return void e.preventDefault();if("Tab"!==e.key)return;e.preventDefault(),this.focusAndRestore();const t=window.getSelection();if(!t||0===t.rangeCount)return;const i=t.getRangeAt(0);if(e.shiftKey){if(i.collapsed&&i.startContainer.nodeType===Node.TEXT_NODE){const e=i.startContainer,M=i.startOffset,n=e.data.slice(0,M),o=n.replace(/(\t|[ \u00a0]{2})$/,"");if(o.length!==n.length){e.data=o+e.data.slice(M);const i=document.createRange();i.setStart(e,o.length),i.collapse(!0),t.removeAllRanges(),t.addRange(i),this.updateContent(),this.updateToolbarState()}}return}i.deleteContents();const M=document.createTextNode("\t");i.insertNode(M);const n=document.createRange();n.setStartAfter(M),n.collapse(!0),t.removeAllRanges(),t.addRange(n),this.updateContent(),this.updateToolbarState()},this.onSelectionChange=()=>{if(!this.editorEl)return;const e=document.getSelection();if(!e||0===e.rangeCount)return;const t=e.getRangeAt(0);this.editorEl.contains(t.commonAncestorContainer)&&(this.lastRange=t.cloneRange(),this.updateToolbarState())}}createRenderRoot(){return this}injectCss(e){if(this.querySelector("style[data-rte-style]"))return;const t=document.createElement("style");t.setAttribute("data-rte-style","true"),t.textContent=e,this.insertBefore(t,this.firstChild)}connectedCallback(){super.connectedCallback(),this.injectCss(GS.cssText),this.ensureStructure(),this.placeholder&&this.editorEl&&(this.editorEl.dataset.placeholder=this.placeholder),this.value&&!this.editorEl.innerHTML.trim()&&(this.editorEl.innerHTML=this.value),this.content=this.editorEl.innerHTML,this.toolbarEl&&this.wireAuthoredToolbar(this.toolbarEl),this.mentionsEl=this.querySelector("nile-rte-mentions"),this.mentionsEl&&(this.mentionsEl.attach?.(this.editorEl,this),this.mentionsEl.setExternalConfig?.(this.mentions)),this.wireEditor(),document.addEventListener("selectionchange",this.onSelectionChange,{passive:!0}),this.updateToolbarState(),this.syncPreview()}ensureStructure(){this.toolbarEl=this.querySelector("nile-rte-toolbar"),this.previewEl=this.querySelector("nile-rte-preview"),this.containerEl=this.querySelector(".rte-container"),this.containerEl||(this.containerEl=document.createElement("div"),this.containerEl.className="rte-container",this.appendChild(this.containerEl)),this.ensureEditor(),this.toolbarEl&&this.toolbarEl.parentElement!==this.containerEl&&this.containerEl.appendChild(this.toolbarEl),this.editorEl.parentElement!==this.containerEl&&this.containerEl.appendChild(this.editorEl),this.previewEl&&(this.previewEl.parentElement!==this&&this.appendChild(this.previewEl),this.previewEl.previousElementSibling!==this.containerEl&&this.insertBefore(this.previewEl,this.containerEl.nextSibling))}updateContentWithMention(e){this.updateContent(),this.dispatchEvent(new CustomEvent("nile-change",{detail:{content:this.content,mention:e},bubbles:!0,composed:!0}))}disconnectedCallback(){document.removeEventListener("selectionchange",this.onSelectionChange),this.mentionsEl&&this.mentionsEl.detach&&this.mentionsEl.detach(),super.disconnectedCallback()}updated(e){e.has("value")&&this.editorEl&&this.value!==this.editorEl.innerHTML&&(this.editorEl.innerHTML=this.value||"<p><br></p>",this.content=this.editorEl.innerHTML,this.syncPreview()),e.has("singleLineEditor")&&(this.editorEl&&this.editorEl.classList.toggle("single-line",this.singleLineEditor),this.previewEl&&this.previewEl.classList.toggle("single-line",this.singleLineEditor))}ensureEditor(){if(this.editorEl=this.querySelector(".editor"),!this.editorEl){const e=document.createElement("article");e.className="editor",e.setAttribute("contenteditable","true"),this.editorEl=e}this.placeholder&&(this.editorEl.dataset.placeholder=this.placeholder),this.editorEl.innerHTML.trim()||(this.editorEl.innerHTML="<p><br></p>")}unwrapMention(e,t=!0){const i=e.parentNode;if(!i)return;const M=t?(e.textContent??"").replace(/\u200B/g,""):"",n=document.createTextNode(M);i.insertBefore(n,e),i.removeChild(e);const o=document.createRange();o.setStartAfter(n),o.collapse(!0);const r=window.getSelection();r?.removeAllRanges(),r?.addRange(o)}scrubBrokenMentions(){if(!this.editorEl)return;this.editorEl.querySelectorAll("span.mention").forEach((e=>{const t=e,i=t.getAttribute("data-mention-key"),M=t.getAttribute("data-mention-label"),n=t.getAttribute("data-mention-trigger")||"",o=(t.textContent??"").replace(/\u200B/g,"").trim(),r=!!i&&!!M&&o.length>0&&o.startsWith(n)&&o.includes(M);o&&r||this.unwrapMention(t,!0)}))}wireEditor(){this.editorEl.addEventListener("input",(()=>{this.ensureAtLeastOneParagraph(),this.scrubBrokenMentions(),this.updateContent(),this.updateToolbarState()})),this.editorEl.addEventListener("mouseup",(()=>{this.saveSelection(),this.updateToolbarState()})),this.editorEl.addEventListener("keyup",(e=>{this.saveSelection(),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key)&&this.updateToolbarState()})),this.editorEl.addEventListener("keydown",this.onEditorKeydown)}wireAuthoredToolbar(e){this.buttonMap.clear(),this.headingSelect=null,this.fontSelect=null,this.colorInput=null,Array.from(e.children).forEach((e=>{const t=e.tagName.toLowerCase();if("nile-rte-select"!==t||"align"!==e.getAttribute("type")){if("nile-rte-link"===t)return e.editorEl=this.editorEl,void e.addEventListener("link-changed",(()=>{this.updateContent(),this.updateToolbarState()}));if("nile-rte-toolbar-item"===t){let t=e.querySelector(":scope > nile-button");const i=e.getAttribute("name")||"",M=e.getAttribute("label")||i,n=e.getAttribute("icon"),o=e.innerHTML.trim().length>0;if(t||(t=document.createElement("nile-button"),t.variant="tertiary",t.size="small"),n)t.innerHTML=`<nile-icon name="${n}" aria-label="${M}"></nile-icon>`,e.innerHTML="";else if(o)t.innerHTML=e.innerHTML,e.innerHTML="";else{const n=_S[i];n?t.innerHTML=`<nile-icon name="${n}" size="20" color="black" aria-label="${M}"></nile-icon>`:t.textContent=M||i,e.innerHTML=""}if(!t.isConnected){const i=document.createElement("nile-tooltip");i.setAttribute("content",M),i.appendChild(t),e.appendChild(i)}t.setAttribute("aria-label",M),t.addEventListener("mousedown",(e=>e.preventDefault())),t.addEventListener("click",(()=>this.onToolbarCommand(i)));const r=this.buttonMap.get(i)??[];return r.push(t),void this.buttonMap.set(i,r)}if("nile-rte-select"!==t)"nile-rte-color"!==t||e.addEventListener("change",(e=>{this.focusAndRestore();const{mode:t,value:i}=e.detail;"backColor"===t?WS(this.editorEl,"backgroundColor",i,"data-rte-bg"):function(e,t){WS(e,"color",t,"data-rte-color")}(this.editorEl,i),this.updateContent(),this.updateToolbarState()}));else{const t=e.getAttribute("type")||"";e.addEventListener("change",(e=>{this.focusAndRestore();const i=e.detail;"heading"===t?function(e,t){const i=document.getSelection();if(!i||0===i.rangeCount)return;const M=fS(i.getRangeAt(0).startContainer,e);if(!M)return;if(M.tagName.toLowerCase()===t)return;const n=document.createElement(t);for(;M.firstChild;)n.appendChild(M.firstChild);M.replaceWith(n);const o=document.createRange();o.selectNodeContents(n),o.collapse(!0),i.removeAllRanges(),i.addRange(o)}(this.editorEl,i):"font"===t&&ZS(this.editorEl,i),this.updateContent(),this.updateToolbarState()}))}}else e.addEventListener("change",(e=>{this.focusAndRestore();const t=e.detail;vS(this.editorEl,t),this.updateContent(),this.updateToolbarState()}))}))}saveSelection(){const e=window.getSelection();e&&e.rangeCount&&(this.lastRange=e.getRangeAt(0).cloneRange())}restoreSelection(){if(!this.lastRange)return;const e=document.getSelection();e&&(e.removeAllRanges(),e.addRange(this.lastRange))}focusAndRestore(){this.editorEl?.focus(),this.restoreSelection()}getCleanContent(){const e=this.editorEl.cloneNode(!0);return e.querySelectorAll("*").forEach((e=>{e.removeAttribute("style")})),e.innerHTML}insertList(e){if(this.restoreSelection(),!this.lastRange)return;const t=document.createElement(e),i=this.lastRange.extractContents(),M=document.createElement("div");M.appendChild(i),Array.from(M.childNodes).forEach((e=>{if(e.nodeType===Node.TEXT_NODE&&!e.textContent?.trim())return;const i=document.createElement("li");i.appendChild(e),t.appendChild(i)})),this.lastRange.insertNode(t),this.afterListEdit(t)}afterListEdit(e){const t=document.createRange();t.setStartAfter(e),t.collapse(!0);const i=window.getSelection();i?.removeAllRanges(),i?.addRange(t),this.saveSelection(),this.updateContent(),this.updateToolbarState()}ensureAtLeastOneParagraph(){const e=this.editorEl;if(!e)return;const t=""===(e.textContent??"").replace(/\u200B/g,"").trim();if(0===e.childNodes.length||t)return void(e.innerHTML="<p><br></p>");if(!e.querySelector("p,h1,h2,h3,h4,h5,h6,ul,ol,table,blockquote,pre")){const t=document.createElement("p");for(;e.firstChild;)t.appendChild(e.firstChild);return t.hasChildNodes()||t.appendChild(document.createElement("br")),void e.appendChild(t)}e.querySelectorAll("p").forEach((e=>{""===(e.textContent??"").replace(/\u200B/g,"")&&(e.innerHTML.toLowerCase().includes("<br")||(e.innerHTML="<br>"))}))}onToolbarCommand(e){switch(this.focusAndRestore(),e){case"bold":US(this.editorEl,"strong");break;case"italic":US(this.editorEl,"em");break;case"underline":US(this.editorEl,"u");break;case"left":vS(this.editorEl,"left");break;case"center":vS(this.editorEl,"center");break;case"right":vS(this.editorEl,"right");break;case"justify":vS(this.editorEl,"justify");break;case"ul":BS(this.editorEl,"ul"),this.updateContent(),this.updateToolbarState();break;case"ol":BS(this.editorEl,"ol"),this.updateContent(),this.updateToolbarState();break;case"link":break;case"clear":const e=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),t=[];for(;e.nextNode();){const i=e.currentNode;i.removeAttribute("style"),["B","STRONG","I","EM","U","SPAN","FONT"].includes(i.tagName)&&t.push(i)}for(const e of t){for(;e.firstChild;)e.parentNode?.insertBefore(e.firstChild,e);e.remove()}this.ensureAtLeastOneParagraph()}this.updateContent(),this.updateToolbarState()}setBtnActive(e,t){const i=this.buttonMap.get(e);if(i)for(const e of i)e.toggleAttribute("data-active",!!t)}updateToolbarState(){if(!this.editorEl)return;const e=document.getSelection();if(!e||0===e.rangeCount)return;const t=e.getRangeAt(0);if(!this.editorEl.contains(t.commonAncestorContainer))return;const i=function(e){for(;e&&!(e instanceof HTMLElement);)e=e.parentNode;return e}(t.startContainer)||this.editorEl,M=getComputedStyle(i),n=fS(t.startContainer,this.editorEl)||this.editorEl,o=(()=>{let e=i;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=e.tagName.toLowerCase();if("strong"===t||"b"===t)return!0;const i=getComputedStyle(e).fontWeight;if(parseInt(i,10)>=600)return!0}e=e.parentNode}return!1})(),r=(()=>{let e=i;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=e.tagName.toLowerCase();if("em"===t||"i"===t)return!0;if("italic"===getComputedStyle(e).fontStyle)return!0}e=e.parentNode}return!1})(),s=(()=>{let e=i;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=getComputedStyle(e).textDecorationLine;if(t&&t.includes("underline"))return!0;if("u"===e.tagName.toLowerCase())return!0}e=e.parentNode}return!1})(),a=!!i.closest("a"),l=n.style.textAlign||getComputedStyle(n).textAlign||"start",N="start"===l?"left":l,g=!!i.closest("li")&&i.closest("ul,ol")?.tagName.toLowerCase()||"";if(this.setBtnActive("bold",o),this.setBtnActive("italic",r),this.setBtnActive("underline",s),this.setBtnActive("link",a),this.setBtnActive("left","left"===N&&!["center","right","justify"].includes(N)),this.setBtnActive("center","center"===N),this.setBtnActive("right","right"===N),this.setBtnActive("justify","justify"===N),this.setBtnActive("ul","ul"===g),this.setBtnActive("ol","ol"===g),this.headingSelect){const e=n.tagName.toLowerCase(),t=["h1","h2","h3"].includes(e)?e:"p";this.headingSelect.value!==t&&(this.headingSelect.value=t)}if(this.fontSelect){const e=(M.fontFamily||"").replace(/["']/g,"").split(",")[0].trim().toLowerCase();if(e)for(const t of Array.from(this.fontSelect.options))if(t.value.toLowerCase()===e){this.fontSelect.value=t.value;break}}if(this.colorInput){const e=YS(M.color);e&&this.colorInput.value.toLowerCase()!==e.toLowerCase()&&(this.colorInput.value=e),this.colorSwatchEl&&(this.colorSwatchEl.style.backgroundColor=this.colorInput.value)}if(this.bgColorInput){const e=getComputedStyle(i).backgroundColor;if(e&&!/transparent|rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(e)){const t=YS(e);t&&this.bgColorInput.value.toLowerCase()!==t.toLowerCase()&&(this.bgColorInput.value=t)}this.bgSwatchEl&&(this.bgSwatchEl.style.backgroundColor=this.bgColorInput.value)}}syncPreview(){this.updateContent()}updateContent(){if(!this.editorEl)return;this.ensureAtLeastOneParagraph();const e=""===(this.editorEl.textContent??"").trim();this.editorEl.classList.toggle("empty",e);const t=this.editorEl.cloneNode(!0);if(this.noStyles)t.querySelectorAll("[style]").forEach((e=>e.removeAttribute("style")));else{const e=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),i=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),M=["font-weight","font-style","text-decoration","color","background-color","font-size","font-family","text-align","line-height","letter-spacing","white-space","vertical-align","list-style-position","padding-inline-start"];for(;e.nextNode()&&i.nextNode();){const t=e.currentNode,n=i.currentNode,o=window.getComputedStyle(t),r=M.map((e=>`${e}:${o.getPropertyValue(e)}`)).join(";");r.trim()&&n.setAttribute("style",r)}}this.content=t.innerHTML,this.previewEl&&(this.previewEl.innerHTML=this.content),this.dispatchEvent(new CustomEvent("nile-change",{detail:{content:this.content},bubbles:!0,composed:!0}))}};e([ce({type:String,attribute:!0,reflect:!0})],FS.prototype,"value",void 0),e([ce({type:Boolean,attribute:!0,reflect:!0})],FS.prototype,"noStyles",void 0),e([ce({type:Boolean,attribute:"singlelineeditor",reflect:!0})],FS.prototype,"singleLineEditor",void 0),e([ce({type:String})],FS.prototype,"placeholder",void 0),e([ce({attribute:"mentions",reflect:!0,converter:{fromAttribute:e=>{try{const t=JSON.parse(e),i={};for(const e of Object.keys(t)){const M=t[e];Array.isArray(M)&&(i[e]=M.filter((e=>e&&"string"==typeof e.key&&"string"==typeof e.label)).map((e=>({key:e.key,label:e.label}))))}return i}catch{return{}}},toAttribute:e=>JSON.stringify(e)}})],FS.prototype,"mentions",void 0),e([De()],FS.prototype,"content",void 0),FS=e([Ne("nile-rich-text-editor")],FS);"undefined"!=typeof window&&(window.nileElementsVersion='"1.4.2-beta-1.0"',window.nileVersion="__NILE_VERSION__",window.process=window.process||{env:{NODE_ENV:"production"}});const HS=r`
  :host {
   
   top: 0;

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

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

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

@@ -0,0 +1,2 @@
+export { NileCssTooltip } from './nile-css-tooltip';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-css-tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { NileCssTooltip } from './nile-css-tooltip';"]}

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

@@ -0,0 +1,9 @@
+/**
+* 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.
+*/
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

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];"]}