@aquera/nile-elements 1.4.6 → 1.4.7

package/README.md

@@ -79,6 +79,10 @@ To run a local development server that serves the basic demo located in `demo/in
 
 In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
 
+#### Version 1.4.7
+- Nile Tab: Font Weight Mismatch in Nile Tab Item (UIF-1072)
+- Nile Sidebar: Collapsed state is not reflected correctly for the header, and the logo is not working properly in Safari and Firefox.  (UIF-1075)
+
 #### Version 1.4.6
 - Nile Icon: Added 4 new Icon (UIF-1064)
 - Nile Tree: Fixed the Tree Item Background Color Issue (UIF-1065)

package/dist/index.js

@@ -8757,16 +8757,16 @@ ${this.showMonthDropdown||this.showYearDropdown?R`
     width: 100%;
     align-items: center;
     border-radius: var(--tab-border-radius);
-    color: var(--nile-colors-inherit, var(--ng-colors-text-quaternary-500));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
     padding: var(--tab-padding);
     white-space: nowrap;
     user-select: none;
     cursor: pointer;
     transition: 0.2s box-shadow, 0.2s color;
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-family: var(--nile-font-family-medium, var(--ng-font-family-body));
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
     line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
     letter-spacing: 0.2px;
     gap: var(--nile-spacing-md, var(--ng-spacing-md));
@@ -8797,7 +8797,7 @@ ${this.showMonthDropdown||this.showYearDropdown?R`
   }
 
   .tab.tab--disabled {
-    opacity: 0.5;
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
     cursor: not-allowed;
   }
 
@@ -15137,7 +15137,7 @@ nile-rte-toolbar-item nile-button[data-active]::part(base):hover {
 
 
 
-`,qS={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"},KS=["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"];let em=class extends ae{constructor(){super(...arguments),this.value="",this.noStyles=!1,this.singleLineEditor=!1,this.placeholder="",this.mentions={},this.whitelist=[],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(),RS(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(XS.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=qS[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-lite-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?FS(this.editorEl,"backgroundColor",i,"data-rte-bg"):function(e,t){FS(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=WS(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&&GS(this.editorEl,i),this.updateContent(),this.updateToolbarState()}))}}else e.addEventListener("change",(e=>{this.focusAndRestore();const t=e.detail;PS(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":RS(this.editorEl,"strong");break;case"italic":RS(this.editorEl,"em");break;case"underline":RS(this.editorEl,"u");break;case"left":PS(this.editorEl,"left");break;case"center":PS(this.editorEl,"center");break;case"right":PS(this.editorEl,"right");break;case"justify":PS(this.editorEl,"justify");break;case"ul":$S(this.editorEl,"ul"),this.updateContent(),this.updateToolbarState();break;case"ol":$S(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=WS(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=BS(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=BS(e);t&&this.bgColorInput.value.toLowerCase()!==t.toLowerCase()&&(this.bgColorInput.value=t)}this.bgSwatchEl&&(this.bgSwatchEl.style.backgroundColor=this.bgColorInput.value)}}syncPreview(){this.updateContent()}getComputedImportantProps(){return Array.from(new Set([...KS,...this.whitelist??[]]))}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=this.getComputedImportantProps();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})],em.prototype,"value",void 0),e([ce({type:Boolean,attribute:!0,reflect:!0})],em.prototype,"noStyles",void 0),e([ce({type:Boolean,attribute:"singlelineeditor",reflect:!0})],em.prototype,"singleLineEditor",void 0),e([ce({type:String})],em.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)}})],em.prototype,"mentions",void 0),e([ce({attribute:"whitelist",reflect:!1,converter:{fromAttribute:e=>{try{const t=JSON.parse(e);return Array.isArray(t)?t.filter((e=>"string"==typeof e)):[]}catch{return[]}}}})],em.prototype,"whitelist",void 0),e([De()],em.prototype,"content",void 0),em=e([Ne("nile-rich-text-editor")],em);"undefined"!=typeof window&&(window.nileElementsVersion='"1.4.6"',window.nileVersion="__NILE_VERSION__",window.process=window.process||{env:{NODE_ENV:"production"}});const tm=r`
+`,qS={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"},KS=["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"];let em=class extends ae{constructor(){super(...arguments),this.value="",this.noStyles=!1,this.singleLineEditor=!1,this.placeholder="",this.mentions={},this.whitelist=[],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(),RS(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(XS.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=qS[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-lite-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?FS(this.editorEl,"backgroundColor",i,"data-rte-bg"):function(e,t){FS(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=WS(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&&GS(this.editorEl,i),this.updateContent(),this.updateToolbarState()}))}}else e.addEventListener("change",(e=>{this.focusAndRestore();const t=e.detail;PS(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":RS(this.editorEl,"strong");break;case"italic":RS(this.editorEl,"em");break;case"underline":RS(this.editorEl,"u");break;case"left":PS(this.editorEl,"left");break;case"center":PS(this.editorEl,"center");break;case"right":PS(this.editorEl,"right");break;case"justify":PS(this.editorEl,"justify");break;case"ul":$S(this.editorEl,"ul"),this.updateContent(),this.updateToolbarState();break;case"ol":$S(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=WS(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=BS(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=BS(e);t&&this.bgColorInput.value.toLowerCase()!==t.toLowerCase()&&(this.bgColorInput.value=t)}this.bgSwatchEl&&(this.bgSwatchEl.style.backgroundColor=this.bgColorInput.value)}}syncPreview(){this.updateContent()}getComputedImportantProps(){return Array.from(new Set([...KS,...this.whitelist??[]]))}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=this.getComputedImportantProps();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})],em.prototype,"value",void 0),e([ce({type:Boolean,attribute:!0,reflect:!0})],em.prototype,"noStyles",void 0),e([ce({type:Boolean,attribute:"singlelineeditor",reflect:!0})],em.prototype,"singleLineEditor",void 0),e([ce({type:String})],em.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)}})],em.prototype,"mentions",void 0),e([ce({attribute:"whitelist",reflect:!1,converter:{fromAttribute:e=>{try{const t=JSON.parse(e);return Array.isArray(t)?t.filter((e=>"string"==typeof e)):[]}catch{return[]}}}})],em.prototype,"whitelist",void 0),e([De()],em.prototype,"content",void 0),em=e([Ne("nile-rich-text-editor")],em);"undefined"!=typeof window&&(window.nileElementsVersion='"1.4.7"',window.nileVersion="__NILE_VERSION__",window.process=window.process||{env:{NODE_ENV:"production"}});const tm=r`
  :host {
   
   top: 0;
@@ -15218,7 +15218,7 @@ nile-rte-toolbar-item nile-button[data-active]::part(base):hover {
 
 
 
-`;let im=class extends Re{constructor(){super(...arguments),this.position="left",this.collapsed=!1,this.fullHeight=!1,this.width=null,this.collapsedWidth=null}static get styles(){return[tm]}updated(e){super.updated(e),e.has("collapsed")&&this.querySelectorAll("nile-side-bar-footer-item, nile-side-bar-group-item, nile-side-bar-group").forEach((e=>e.toggleAttribute("collapsed",this.collapsed))),e.has("width")&&null!==this.width&&this.style.setProperty("--sidebar-width",`${this.width}px`),e.has("collapsedWidth")&&null!==this.collapsedWidth&&this.style.setProperty("--sidebar-collapsed-width",`${this.collapsedWidth}px`)}render(){return R`
+`;let im=class extends Re{constructor(){super(...arguments),this.position="left",this.collapsed=!1,this.fullHeight=!1,this.width=null,this.collapsedWidth=null}static get styles(){return[tm]}updated(e){super.updated(e),e.has("collapsed")&&this.querySelectorAll("\n          nile-side-bar-logo,\n          nile-side-bar-footer-item,\n          nile-side-bar-group-item,\n          nile-side-bar-group,\n          nile-side-bar-header,\n          nile-side-bar-group-item-text,\n          nile-side-bar-group-item-icon\n        ").forEach((e=>e.toggleAttribute("collapsed",this.collapsed))),e.has("width")&&null!==this.width&&this.style.setProperty("--sidebar-width",`${this.width}px`),e.has("collapsedWidth")&&null!==this.collapsedWidth&&this.style.setProperty("--sidebar-collapsed-width",`${this.collapsedWidth}px`)}render(){return R`
       <slot name="header" part="header"></slot>
       <div class="scroll-container" part="scroll-container">
         <slot></slot>
@@ -15245,13 +15245,14 @@ nile-rte-toolbar-item nile-button[data-active]::part(base):hover {
 }
 
 
-:host-context(nile-side-bar[collapsed]) .header-content {
+:host([collapsed]) .header-content {
   flex-direction: column;
   justify-content: center;
   gap: var(--nile-spacing-lg, var(--ng-spacing-md));
 }
 
 
+
  
  
 ::slotted([slot='logo']) {
@@ -15274,7 +15275,7 @@ nile-rte-toolbar-item nile-button[data-active]::part(base):hover {
       <slot name="expand" part="expand"></slot>
     </div>
 			`}};nm=e([Ne("nile-side-bar-header")],nm);const om=r`
-	 :host {
+:host {
   justify-content: center;
   height: 100%;
   flex: 0;
@@ -15290,20 +15291,25 @@ nile-rte-toolbar-item nile-button[data-active]::part(base):hover {
   display: block;
 }
 
- 
 .logo.collapsed {
   display: none;
 }
 
- 
-:host-context(nile-side-bar[collapsed]) .logo.expanded {
+:host([collapsed]) .logo.expanded {
   display: none;
 }
 
-:host-context(nile-side-bar[collapsed]) .logo.collapsed {
+:host([collapsed]) .logo.collapsed {
   display: block;
 }
 
+:host(:not([collapsed])) .logo.expanded {
+  display: block;
+}
+
+:host(:not([collapsed])) .logo.collapsed {
+  display: none;
+}
 `;let rm=class extends Re{constructor(){super(...arguments),this.src="https://assets.aquera.io/img/aquera-logo-blue.svg",this.collapsedSrc="https://assets.aqueralabs.com/img/aquera-logo-mini.png"}static get styles(){return[om]}render(){return R`
       <img class="logo expanded" src="${this.src}" alt="Logo" part="logo-expanded" />
       <img class="logo collapsed" src="${this.collapsedSrc}" alt="Logo icon" part="logo-collapsed" />
@@ -15516,7 +15522,7 @@ justify-content: center;
   }
 
  
-  :host-context(nile-side-bar[collapsed]) {
+  :host([collapsed]) {
     margin-right: 0;
     width: 100%;       
     justify-content: center;
@@ -15560,7 +15566,7 @@ justify-content: center;
     font: inherit;
     color: inherit;
   }
-  :host-context(nile-side-bar[collapsed]) {
+  :host([collapsed]) {
     display: none;
   }
 `;let Im=class extends Re{static get styles(){return[jm]}connectedCallback(){super.connectedCallback(),this.hasAttribute("slot")||this.setAttribute("slot","text")}render(){return R` <slot></slot> `}};Im=e([Ne("nile-side-bar-group-item-text")],Im);const zm=r`
@@ -15685,7 +15691,7 @@ background: var(--nile-colors-neutral-400);
 border: none;
 }
   :host([collapsed][type='avatar']) .footer-item {
-  padding: 8px;
+  padding: 4px;
  
 }
 :host([collapsed]) .footer-item{

package/dist/nile-side-bar/nile-side-bar.cjs.js

@@ -1,2 +1,2 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-side-bar.css.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var t,e,i,s,r,l,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t);}:p;}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value;}},_get.apply(null,arguments);}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t;}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){e=_lit.html;},function(_litDecoratorsJs){i=_litDecoratorsJs.property;s=_litDecoratorsJs.customElement;},function(_nileSideBarCssCjsJs){r=_nileSideBarCssCjsJs.s;},function(_internalNileElementCjsJs){l=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",o=/*#__PURE__*/function(_l){function o(){var _this;_classCallCheck(this,o);_this=_callSuper(this,o,arguments),_this.position="left",_this.collapsed=!1,_this.fullHeight=!1,_this.width=null,_this.collapsedWidth=null;return _this;}_inherits(o,_l);return _createClass(o,[{key:"updated",value:function updated(t){var _this2=this;_superPropGet(o,"updated",this,3)([t]),t.has("collapsed")&&this.querySelectorAll("nile-side-bar-footer-item, nile-side-bar-group-item, nile-side-bar-group").forEach(function(t){return t.toggleAttribute("collapsed",_this2.collapsed);}),t.has("width")&&null!==this.width&&this.style.setProperty("--sidebar-width","".concat(this.width,"px")),t.has("collapsedWidth")&&null!==this.collapsedWidth&&this.style.setProperty("--sidebar-collapsed-width","".concat(this.collapsedWidth,"px"));}},{key:"render",value:function render(){return e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <slot name=\"header\" part=\"header\"></slot>\n      <div class=\"scroll-container\" part=\"scroll-container\">\n        <slot></slot>\n      </div>\n      <slot name=\"footer\" part=\"footer\"></slot>\n    "])));}}],[{key:"styles",get:function get(){return[r];}}]);}(l));t([i({type:String,reflect:!0,attribute:!0})],o.prototype,"position",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"collapsed",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"fullHeight",void 0),t([i({type:Number,attribute:!0})],o.prototype,"width",void 0),t([i({type:Number,attribute:!0})],o.prototype,"collapsedWidth",void 0),_export("N",o=t([s("nile-side-bar")],o));}};});
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-side-bar.css.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var t,e,i,r,s,l,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t);}:p;}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value;}},_get.apply(null,arguments);}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t;}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){e=_lit.html;},function(_litDecoratorsJs){i=_litDecoratorsJs.property;r=_litDecoratorsJs.customElement;},function(_nileSideBarCssCjsJs){s=_nileSideBarCssCjsJs.s;},function(_internalNileElementCjsJs){l=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",o=/*#__PURE__*/function(_l){function o(){var _this;_classCallCheck(this,o);_this=_callSuper(this,o,arguments),_this.position="left",_this.collapsed=!1,_this.fullHeight=!1,_this.width=null,_this.collapsedWidth=null;return _this;}_inherits(o,_l);return _createClass(o,[{key:"updated",value:function updated(t){var _this2=this;_superPropGet(o,"updated",this,3)([t]),t.has("collapsed")&&this.querySelectorAll("\n          nile-side-bar-logo,\n          nile-side-bar-footer-item,\n          nile-side-bar-group-item,\n          nile-side-bar-group,\n          nile-side-bar-header,\n          nile-side-bar-group-item-text,\n          nile-side-bar-group-item-icon\n        ").forEach(function(t){return t.toggleAttribute("collapsed",_this2.collapsed);}),t.has("width")&&null!==this.width&&this.style.setProperty("--sidebar-width","".concat(this.width,"px")),t.has("collapsedWidth")&&null!==this.collapsedWidth&&this.style.setProperty("--sidebar-collapsed-width","".concat(this.collapsedWidth,"px"));}},{key:"render",value:function render(){return e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <slot name=\"header\" part=\"header\"></slot>\n      <div class=\"scroll-container\" part=\"scroll-container\">\n        <slot></slot>\n      </div>\n      <slot name=\"footer\" part=\"footer\"></slot>\n    "])));}}],[{key:"styles",get:function get(){return[s];}}]);}(l));t([i({type:String,reflect:!0,attribute:!0})],o.prototype,"position",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"collapsed",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"fullHeight",void 0),t([i({type:Number,attribute:!0})],o.prototype,"width",void 0),t([i({type:Number,attribute:!0})],o.prototype,"collapsedWidth",void 0),_export("N",o=t([r("nile-side-bar")],o));}};});
 //# sourceMappingURL=nile-side-bar.cjs.js.map

package/dist/nile-side-bar/nile-side-bar.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar.cjs.js","sources":["../../../src/nile-side-bar/nile-side-bar.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar component.\n *\n * @tag nile-side-bar\n *\n * @attr position - Position of the sidebar (\"left\" | \"right\"). Defaults to \"left\".\n * @attr width - Expanded width of the sidebar (px).\n * @attr collapsed-width - Collapsed width of the sidebar (px).\n */\n@customElement('nile-side-bar')\nexport class NileSideBar extends NileElement {\n  @property({ type: String, reflect: true, attribute: true })position: 'left' | 'right' = 'left';\n\n  @property({ type: Boolean, reflect: true, attribute: true })collapsed: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: true })fullHeight: boolean = false;\n   \n  @property({ type: Number, attribute: true })width: number | null = null;\n\n \n  @property({ type: Number, attribute: true })collapsedWidth: number | null = null;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  protected updated(changedProps: Map<string, unknown>) {\n    super.updated(changedProps);\n\n    if (changedProps.has('collapsed')) {\n      this.querySelectorAll<NileElement>(\n        'nile-side-bar-footer-item, nile-side-bar-group-item, nile-side-bar-group'\n      ).forEach(el => el.toggleAttribute('collapsed', this.collapsed));\n    }\n\n    if (changedProps.has('width') && this.width !== null) {\n      this.style.setProperty('--sidebar-width', `${this.width}px`);\n    }\n    if (changedProps.has('collapsedWidth') && this.collapsedWidth !== null) {\n      this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <slot name=\"header\" part=\"header\"></slot>\n      <div class=\"scroll-container\" part=\"scroll-container\">\n        <slot></slot>\n      </div>\n      <slot name=\"footer\" part=\"footer\"></slot>\n    `;\n  }\n  \n}\n\nexport default NileSideBar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar': NileSideBar;\n  }\n}\n"],"names":["NileSideBar","o","this","position","collapsed","fullHeight","width","collapsedWidth","_this","_inherits","_l","_createClass","key","value","updated","changedProps","super","has","querySelectorAll","forEach","el","toggleAttribute","style","setProperty","concat","render","html","_templateObject","_taggedTemplateLiteral","get","styles","NileElement","__decorate","property","type","String","reflect","attribute","prototype","Boolean","Number","customElement"],"mappings":"4oHAsBaA,CAAAA,uBAAAA,EAAAA,EAAN,SAAAC,EAAA,uEACsDC,KAAAA,CAAQC,QAAqB,CAAA,MAAA,CAE5BD,KAAAA,CAASE,SAAAA,CAAAA,CAAY,EAErBF,KAAAA,CAAUG,UAAAA,CAAAA,CAAY,EAEtCH,KAAAA,CAAKI,KAAAA,CAAkB,KAGvBJ,KAAAA,CAAcK,cAAAA,CAAkB,IAiC7E,QAAAC,KAAA,EA/BQC,SAAA,CAAAR,CAAA,CAAAS,EAAA,SAAAC,YAAA,CAAAV,CAAA,GAAAW,GAAA,WAAAC,KAAA,CAIG,SAAAC,OAAAA,CAAQC,CAChBC,CAAAA,KAAAA,MAAAA,MAAAA,aAAAA,CAAAA,CAAAA,oBAAcD,CAAAA,GAEVA,EAAaE,GAAI,CAAA,WAAA,CAAA,EACnBf,KAAKgB,gBACH,CAAA,0EAAA,CAAA,CACAC,QAAQC,SAAAA,CAAMA,QAAAA,CAAAA,CAAAA,CAAGC,gBAAgB,WAAanB,CAAAA,MAAAA,CAAKE,cAGnDW,CAAaE,CAAAA,GAAAA,CAAI,UAA2B,IAAff,GAAAA,IAAAA,CAAKI,OACpCJ,IAAKoB,CAAAA,KAAAA,CAAMC,YAAY,iBAAmB,IAAAC,MAAA,CAAGtB,KAAKI,KAEhDS,MAAAA,CAAAA,CAAAA,CAAAA,CAAaE,IAAI,gBAA6C,CAAA,EAAA,IAAA,GAAxBf,KAAKK,cAC7CL,EAAAA,IAAAA,CAAKoB,MAAMC,WAAY,CAAA,2BAAA,IAAAC,MAAA,CAAgCtB,IAAKK,CAAAA,cAAAA,MAAAA,CAE/D,EAEM,GAAAK,GAAA,UAAAC,KAAA,UAAAY,MAAAA,CAAAA,CAAAA,CACL,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,gOAOZ,CAAA,KAAAhB,GAAA,UAAAiB,GAAA,CA7BM,SAAAA,IAAA,EACL,MAAO,CAACC,EACT,EAES,MAhBqBC,CAA1B,GACsDC,CAAA,CAAA,CAA1DC,CAAS,CAAA,CAAEC,KAAMC,MAAQC,CAAAA,OAAAA,CAAAA,CAAS,CAAMC,CAAAA,SAAAA,CAAAA,CAAW,CAA2CrC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAsC,SAAA,CAAA,UAAA,CAAA,IAAA,IAEnCN,CAAA,CAAA,CAA3DC,CAAS,CAAA,CAAEC,IAAMK,CAAAA,OAAAA,CAASH,OAAS,CAAA,CAAA,CAAA,CAAMC,WAAW,CAAkCrC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAsC,SAAA,CAAA,WAAA,CAAA,IAAA,IAE3BN,CAAA,CAAA,CAA3DC,CAAS,CAAA,CAAEC,KAAMK,OAASH,CAAAA,OAAAA,CAAAA,CAAS,CAAMC,CAAAA,SAAAA,CAAAA,CAAW,CAAmCrC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAsC,SAAA,CAAA,YAAA,CAAA,IAAA,IAE5CN,CAAA,CAAA,CAA3CC,CAAS,CAAA,CAAEC,KAAMM,MAAQH,CAAAA,SAAAA,CAAAA,CAAW,CAAmCrC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAsC,UAAA,OAAA,CAAA,IAAA,EAAA,CAAA,CAG5BN,CAAA,CAAA,CAA3CC,CAAS,CAAA,CAAEC,IAAMM,CAAAA,MAAAA,CAAQH,WAAW,CAA4CrC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAsC,SAAA,CAAA,gBAAA,CAAA,IAAA,gBAVtEtC,CAAWgC,CAAAA,CAAAA,CAAA,CADvBS,CAAAA,CAAc,kBACFzC"}
+{"version":3,"file":"nile-side-bar.cjs.js","sources":["../../../src/nile-side-bar/nile-side-bar.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar component.\n *\n * @tag nile-side-bar\n *\n * @attr position - Position of the sidebar (\"left\" | \"right\"). Defaults to \"left\".\n * @attr width - Expanded width of the sidebar (px).\n * @attr collapsed-width - Collapsed width of the sidebar (px).\n */\n@customElement('nile-side-bar')\nexport class NileSideBar extends NileElement {\n  @property({ type: String, reflect: true, attribute: true })position: 'left' | 'right' = 'left';\n\n  @property({ type: Boolean, reflect: true, attribute: true })collapsed: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: true })fullHeight: boolean = false;\n   \n  @property({ type: Number, attribute: true })width: number | null = null;\n\n \n  @property({ type: Number, attribute: true })collapsedWidth: number | null = null;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  protected updated(changedProps: Map<string, unknown>) {\n    super.updated(changedProps);\n\n    if (changedProps.has('collapsed')) {\n      this.querySelectorAll<NileElement>(\n        `\n          nile-side-bar-logo,\n          nile-side-bar-footer-item,\n          nile-side-bar-group-item,\n          nile-side-bar-group,\n          nile-side-bar-header,\n          nile-side-bar-group-item-text,\n          nile-side-bar-group-item-icon\n        `\n      ).forEach(el => el.toggleAttribute('collapsed', this.collapsed));\n    }\n    \n\n    if (changedProps.has('width') && this.width !== null) {\n      this.style.setProperty('--sidebar-width', `${this.width}px`);\n    }\n    if (changedProps.has('collapsedWidth') && this.collapsedWidth !== null) {\n      this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <slot name=\"header\" part=\"header\"></slot>\n      <div class=\"scroll-container\" part=\"scroll-container\">\n        <slot></slot>\n      </div>\n      <slot name=\"footer\" part=\"footer\"></slot>\n    `;\n  }\n  \n}\n\nexport default NileSideBar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar': NileSideBar;\n  }\n}\n"],"names":["NileSideBar","o","this","position","collapsed","fullHeight","width","collapsedWidth","_this","_inherits","_l","_createClass","key","value","updated","changedProps","super","has","querySelectorAll","forEach","el","toggleAttribute","style","setProperty","concat","render","html","_templateObject","_taggedTemplateLiteral","get","styles","NileElement","__decorate","property","type","String","reflect","attribute","prototype","Boolean","Number","customElement"],"mappings":"4oHAsBaA,CAAAA,uBAAAA,EAAAA,EAAN,SAAAC,EAAA,uEACsDC,KAAAA,CAAQC,QAAqB,CAAA,MAAA,CAE5BD,KAAAA,CAASE,SAAAA,CAAAA,CAAY,EAErBF,KAAAA,CAAUG,UAAAA,CAAAA,CAAY,EAEtCH,KAAAA,CAAKI,KAAAA,CAAkB,KAGvBJ,KAAAA,CAAcK,cAAAA,CAAkB,IA0C7E,QAAAC,KAAA,EAxCQC,SAAA,CAAAR,CAAA,CAAAS,EAAA,SAAAC,YAAA,CAAAV,CAAA,GAAAW,GAAA,WAAAC,KAAA,CAIG,SAAAC,OAAAA,CAAQC,CAChBC,CAAAA,KAAAA,MAAAA,MAAAA,aAAAA,CAAAA,CAAAA,oBAAcD,CAAAA,GAEVA,EAAaE,GAAI,CAAA,WAAA,CAAA,EACnBf,KAAKgB,gBACH,CAAA,0QAAA,CAAA,CASAC,QAAQC,SAAAA,CAAMA,QAAAA,CAAAA,CAAAA,CAAGC,gBAAgB,WAAanB,CAAAA,MAAAA,CAAKE,cAInDW,CAAaE,CAAAA,GAAAA,CAAI,UAA2B,IAAff,GAAAA,IAAAA,CAAKI,OACpCJ,IAAKoB,CAAAA,KAAAA,CAAMC,YAAY,iBAAmB,IAAAC,MAAA,CAAGtB,KAAKI,KAEhDS,MAAAA,CAAAA,CAAAA,CAAAA,CAAaE,IAAI,gBAA6C,CAAA,EAAA,IAAA,GAAxBf,KAAKK,cAC7CL,EAAAA,IAAAA,CAAKoB,MAAMC,WAAY,CAAA,2BAAA,IAAAC,MAAA,CAAgCtB,IAAKK,CAAAA,cAAAA,MAAAA,CAE/D,EAEM,GAAAK,GAAA,UAAAC,KAAA,UAAAY,MAAAA,CAAAA,CAAAA,CACL,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,gOAOZ,CAAA,KAAAhB,GAAA,UAAAiB,GAAA,CAtCM,SAAAA,IAAA,EACL,MAAO,CAACC,EACT,EAES,MAhBqBC,CAA1B,GACsDC,CAAA,CAAA,CAA1DC,CAAS,CAAA,CAAEC,KAAMC,MAAQC,CAAAA,OAAAA,CAAAA,CAAS,CAAMC,CAAAA,SAAAA,CAAAA,CAAW,CAA2CrC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAsC,SAAA,CAAA,UAAA,CAAA,IAAA,IAEnCN,CAAA,CAAA,CAA3DC,CAAS,CAAA,CAAEC,IAAMK,CAAAA,OAAAA,CAASH,OAAS,CAAA,CAAA,CAAA,CAAMC,WAAW,CAAkCrC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAsC,SAAA,CAAA,WAAA,CAAA,IAAA,IAE3BN,CAAA,CAAA,CAA3DC,CAAS,CAAA,CAAEC,KAAMK,OAASH,CAAAA,OAAAA,CAAAA,CAAS,CAAMC,CAAAA,SAAAA,CAAAA,CAAW,CAAmCrC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAsC,SAAA,CAAA,YAAA,CAAA,IAAA,IAE5CN,CAAA,CAAA,CAA3CC,CAAS,CAAA,CAAEC,KAAMM,MAAQH,CAAAA,SAAAA,CAAAA,CAAW,CAAmCrC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAsC,UAAA,OAAA,CAAA,IAAA,EAAA,CAAA,CAG5BN,CAAA,CAAA,CAA3CC,CAAS,CAAA,CAAEC,IAAMM,CAAAA,MAAAA,CAAQH,WAAW,CAA4CrC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAsC,SAAA,CAAA,gBAAA,CAAA,IAAA,gBAVtEtC,CAAWgC,CAAAA,CAAAA,CAAA,CADvBS,CAAAA,CAAc,kBACFzC"}

package/dist/nile-side-bar/nile-side-bar.esm.js

@@ -1,7 +1,7 @@
-import{__decorate as t}from"tslib";import{html as e}from"lit";import{property as i,customElement as s}from"lit/decorators.js";import{s as r}from"./nile-side-bar.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";let o=class extends l{constructor(){super(...arguments),this.position="left",this.collapsed=!1,this.fullHeight=!1,this.width=null,this.collapsedWidth=null}static get styles(){return[r]}updated(t){super.updated(t),t.has("collapsed")&&this.querySelectorAll("nile-side-bar-footer-item, nile-side-bar-group-item, nile-side-bar-group").forEach((t=>t.toggleAttribute("collapsed",this.collapsed))),t.has("width")&&null!==this.width&&this.style.setProperty("--sidebar-width",`${this.width}px`),t.has("collapsedWidth")&&null!==this.collapsedWidth&&this.style.setProperty("--sidebar-collapsed-width",`${this.collapsedWidth}px`)}render(){return e`
+import{__decorate as t}from"tslib";import{html as e}from"lit";import{property as i,customElement as r}from"lit/decorators.js";import{s}from"./nile-side-bar.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";let o=class extends l{constructor(){super(...arguments),this.position="left",this.collapsed=!1,this.fullHeight=!1,this.width=null,this.collapsedWidth=null}static get styles(){return[s]}updated(t){super.updated(t),t.has("collapsed")&&this.querySelectorAll("\n          nile-side-bar-logo,\n          nile-side-bar-footer-item,\n          nile-side-bar-group-item,\n          nile-side-bar-group,\n          nile-side-bar-header,\n          nile-side-bar-group-item-text,\n          nile-side-bar-group-item-icon\n        ").forEach((t=>t.toggleAttribute("collapsed",this.collapsed))),t.has("width")&&null!==this.width&&this.style.setProperty("--sidebar-width",`${this.width}px`),t.has("collapsedWidth")&&null!==this.collapsedWidth&&this.style.setProperty("--sidebar-collapsed-width",`${this.collapsedWidth}px`)}render(){return e`
       <slot name="header" part="header"></slot>
       <div class="scroll-container" part="scroll-container">
         <slot></slot>
       </div>
       <slot name="footer" part="footer"></slot>
-    `}};t([i({type:String,reflect:!0,attribute:!0})],o.prototype,"position",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"collapsed",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"fullHeight",void 0),t([i({type:Number,attribute:!0})],o.prototype,"width",void 0),t([i({type:Number,attribute:!0})],o.prototype,"collapsedWidth",void 0),o=t([s("nile-side-bar")],o);export{o as N};
+    `}};t([i({type:String,reflect:!0,attribute:!0})],o.prototype,"position",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"collapsed",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"fullHeight",void 0),t([i({type:Number,attribute:!0})],o.prototype,"width",void 0),t([i({type:Number,attribute:!0})],o.prototype,"collapsedWidth",void 0),o=t([r("nile-side-bar")],o);export{o as N};

package/dist/nile-side-bar-footer-item/nile-side-bar-footer-item.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",e=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .footer-item {\n    display: flex;\n    align-items: center;\n\t  justify-content: flex-start;\n    padding-top: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding-bottom: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))\n    cursor: pointer;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-lg));\n    transition: background 0.2s ease;\n    width: 100%;\n    box-sizing: border-box;\n    overflow: hidden;\n    line-height: 0;\n  }\n\n  .footer-item:hover {\n    background: var(--nile-side-bar-footer-hover-bg, #f3f4f6);\n  }\n\n  /* left: icon */\n  ::slotted([slot='icon']) {\n    flex-shrink: 0;\n    font-size: 1.25rem;\n    margin-right: 0.5rem;\n  }\n\n  /* middle: text */\n  ::slotted([slot='text']) {\n    flex-grow: 1;\n    min-width: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* right: action */\n  ::slotted([slot='action']) {\n    flex-shrink: 0;\n    font-size: 1.25rem;\n    color: var(--nile-side-bar-footer-icon-color, #6b7280);\n    margin-left: auto;\n  }\n\n \n  :host([type='support']) .footer-item {\n    background: var(--nile-colors-neutral-400);\n    height: var(--nile-height-38px, var(--ng-spacing-5xl));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n\n  }\n \n  :host(:hover[type='support']) .footer-item {\n  background: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n  height: var(--nile-height-38px, var(--ng-spacing-5xl));\n  }\n\n :host([type='avatar']) .footer-item {\nborder: 1px solid var(--ng-colors-border-secondary);\nmin-height: var(--nile-radius-4xl, var(--ng-spacing-7xl));\n}\n:host([type='avatar'][active]) .footer-item {\nbackground: var(--nile-colors-neutral-400);\n}\n\n\n\n:host([collapsed][type='avatar']) .footer-item {\nborder: none;\n}\n  :host([collapsed][type='avatar']) .footer-item {\n  padding: 8px;\n \n}\n:host([collapsed]) .footer-item{\n  height: 38px;\n  width: 38px;\n}\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",e=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .footer-item {\n    display: flex;\n    align-items: center;\n\t  justify-content: flex-start;\n    padding-top: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding-bottom: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))\n    cursor: pointer;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-lg));\n    transition: background 0.2s ease;\n    width: 100%;\n    box-sizing: border-box;\n    overflow: hidden;\n    line-height: 0;\n  }\n\n  .footer-item:hover {\n    background: var(--nile-side-bar-footer-hover-bg, #f3f4f6);\n  }\n\n  /* left: icon */\n  ::slotted([slot='icon']) {\n    flex-shrink: 0;\n    font-size: 1.25rem;\n    margin-right: 0.5rem;\n  }\n\n  /* middle: text */\n  ::slotted([slot='text']) {\n    flex-grow: 1;\n    min-width: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* right: action */\n  ::slotted([slot='action']) {\n    flex-shrink: 0;\n    font-size: 1.25rem;\n    color: var(--nile-side-bar-footer-icon-color, #6b7280);\n    margin-left: auto;\n  }\n\n \n  :host([type='support']) .footer-item {\n    background: var(--nile-colors-neutral-400);\n    height: var(--nile-height-38px, var(--ng-spacing-5xl));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n\n  }\n \n  :host(:hover[type='support']) .footer-item {\n  background: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n  height: var(--nile-height-38px, var(--ng-spacing-5xl));\n  }\n\n :host([type='avatar']) .footer-item {\nborder: 1px solid var(--ng-colors-border-secondary);\nmin-height: var(--nile-radius-4xl, var(--ng-spacing-7xl));\n}\n:host([type='avatar'][active]) .footer-item {\nbackground: var(--nile-colors-neutral-400);\n}\n\n\n\n:host([collapsed][type='avatar']) .footer-item {\nborder: none;\n}\n  :host([collapsed][type='avatar']) .footer-item {\n  padding: 4px;\n \n}\n:host([collapsed]) .footer-item{\n  height: 38px;\n  width: 38px;\n}\n"]))));}};});
 //# sourceMappingURL=nile-side-bar-footer-item.css.cjs.js.map

package/dist/nile-side-bar-footer-item/nile-side-bar-footer-item.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-footer-item.css.cjs.js","sources":["../../../src/nile-side-bar-footer-item/nile-side-bar-footer-item.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .footer-item {\n    display: flex;\n    align-items: center;\n\t  justify-content: flex-start;\n    padding-top: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding-bottom: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))\n    cursor: pointer;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-lg));\n    transition: background 0.2s ease;\n    width: 100%;\n    box-sizing: border-box;\n    overflow: hidden;\n    line-height: 0;\n  }\n\n  .footer-item:hover {\n    background: var(--nile-side-bar-footer-hover-bg, #f3f4f6);\n  }\n\n  /* left: icon */\n  ::slotted([slot='icon']) {\n    flex-shrink: 0;\n    font-size: 1.25rem;\n    margin-right: 0.5rem;\n  }\n\n  /* middle: text */\n  ::slotted([slot='text']) {\n    flex-grow: 1;\n    min-width: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* right: action */\n  ::slotted([slot='action']) {\n    flex-shrink: 0;\n    font-size: 1.25rem;\n    color: var(--nile-side-bar-footer-icon-color, #6b7280);\n    margin-left: auto;\n  }\n\n \n  :host([type='support']) .footer-item {\n    background: var(--nile-colors-neutral-400);\n    height: var(--nile-height-38px, var(--ng-spacing-5xl));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n\n  }\n \n  :host(:hover[type='support']) .footer-item {\n  background: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n  height: var(--nile-height-38px, var(--ng-spacing-5xl));\n  }\n\n :host([type='avatar']) .footer-item {\nborder: 1px solid var(--ng-colors-border-secondary);\nmin-height: var(--nile-radius-4xl, var(--ng-spacing-7xl));\n}\n:host([type='avatar'][active]) .footer-item {\nbackground: var(--nile-colors-neutral-400);\n}\n\n\n\n:host([collapsed][type='avatar']) .footer-item {\nborder: none;\n}\n  :host([collapsed][type='avatar']) .footer-item {\n  padding: 8px;\n \n}\n:host([collapsed]) .footer-item{\n  height: 38px;\n  width: 38px;\n}\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAEaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-side-bar-footer-item.css.cjs.js","sources":["../../../src/nile-side-bar-footer-item/nile-side-bar-footer-item.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .footer-item {\n    display: flex;\n    align-items: center;\n\t  justify-content: flex-start;\n    padding-top: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding-bottom: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))\n    cursor: pointer;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-lg));\n    transition: background 0.2s ease;\n    width: 100%;\n    box-sizing: border-box;\n    overflow: hidden;\n    line-height: 0;\n  }\n\n  .footer-item:hover {\n    background: var(--nile-side-bar-footer-hover-bg, #f3f4f6);\n  }\n\n  /* left: icon */\n  ::slotted([slot='icon']) {\n    flex-shrink: 0;\n    font-size: 1.25rem;\n    margin-right: 0.5rem;\n  }\n\n  /* middle: text */\n  ::slotted([slot='text']) {\n    flex-grow: 1;\n    min-width: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* right: action */\n  ::slotted([slot='action']) {\n    flex-shrink: 0;\n    font-size: 1.25rem;\n    color: var(--nile-side-bar-footer-icon-color, #6b7280);\n    margin-left: auto;\n  }\n\n \n  :host([type='support']) .footer-item {\n    background: var(--nile-colors-neutral-400);\n    height: var(--nile-height-38px, var(--ng-spacing-5xl));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n\n  }\n \n  :host(:hover[type='support']) .footer-item {\n  background: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n  height: var(--nile-height-38px, var(--ng-spacing-5xl));\n  }\n\n :host([type='avatar']) .footer-item {\nborder: 1px solid var(--ng-colors-border-secondary);\nmin-height: var(--nile-radius-4xl, var(--ng-spacing-7xl));\n}\n:host([type='avatar'][active]) .footer-item {\nbackground: var(--nile-colors-neutral-400);\n}\n\n\n\n:host([collapsed][type='avatar']) .footer-item {\nborder: none;\n}\n  :host([collapsed][type='avatar']) .footer-item {\n  padding: 4px;\n \n}\n:host([collapsed]) .footer-item{\n  height: 38px;\n  width: 38px;\n}\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAEaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-side-bar-footer-item/nile-side-bar-footer-item.css.esm.js

@@ -79,7 +79,7 @@ background: var(--nile-colors-neutral-400);
 border: none;
 }
   :host([collapsed][type='avatar']) .footer-item {
-  padding: 8px;
+  padding: 4px;
  
 }
 :host([collapsed]) .footer-item{

package/dist/nile-side-bar-group-item-icon/nile-side-bar-group-item-icon.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var i,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){i=_lit.css;}],execute:function execute(){_export("s",n=i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin-right: 12px;\n    color: inherit;\n  }\n\n  ::slotted(nile-icon) {\n    width: 100%;\n    height: 100%;\n    color: inherit;\n    fill: currentColor;\n  }\n\n \n  :host-context(nile-side-bar[collapsed]) {\n    margin-right: 0;\n    width: 100%;       \n    justify-content: center;\n  }\n\n  nile-tooltip::part(body) {\n    width: max-content;\n    height: max-content;\n    padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    padding-bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    padding-left: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    padding-right: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    overflow-x: hidden;\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var i,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){i=_lit.css;}],execute:function execute(){_export("s",n=i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin-right: 12px;\n    color: inherit;\n  }\n\n  ::slotted(nile-icon) {\n    width: 100%;\n    height: 100%;\n    color: inherit;\n    fill: currentColor;\n  }\n\n \n  :host([collapsed]) {\n    margin-right: 0;\n    width: 100%;       \n    justify-content: center;\n  }\n\n  nile-tooltip::part(body) {\n    width: max-content;\n    height: max-content;\n    padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    padding-bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    padding-left: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    padding-right: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    overflow-x: hidden;\n  }\n"]))));}};});
 //# sourceMappingURL=nile-side-bar-group-item-icon.css.cjs.js.map

package/dist/nile-side-bar-group-item-icon/nile-side-bar-group-item-icon.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-group-item-icon.css.cjs.js","sources":["../../../src/nile-side-bar-group-item-icon/nile-side-bar-group-item-icon.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin-right: 12px;\n    color: inherit;\n  }\n\n  ::slotted(nile-icon) {\n    width: 100%;\n    height: 100%;\n    color: inherit;\n    fill: currentColor;\n  }\n\n \n  :host-context(nile-side-bar[collapsed]) {\n    margin-right: 0;\n    width: 100%;       \n    justify-content: center;\n  }\n\n  nile-tooltip::part(body) {\n    width: max-content;\n    height: max-content;\n    padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    padding-bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    padding-left: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    padding-right: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    overflow-x: hidden;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAEaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-side-bar-group-item-icon.css.cjs.js","sources":["../../../src/nile-side-bar-group-item-icon/nile-side-bar-group-item-icon.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin-right: 12px;\n    color: inherit;\n  }\n\n  ::slotted(nile-icon) {\n    width: 100%;\n    height: 100%;\n    color: inherit;\n    fill: currentColor;\n  }\n\n \n  :host([collapsed]) {\n    margin-right: 0;\n    width: 100%;       \n    justify-content: center;\n  }\n\n  nile-tooltip::part(body) {\n    width: max-content;\n    height: max-content;\n    padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    padding-bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    padding-left: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    padding-right: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    overflow-x: hidden;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAEaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-side-bar-group-item-icon/nile-side-bar-group-item-icon.css.esm.js

@@ -16,7 +16,7 @@ import{css as i}from"lit";const n=i`
   }
 
  
-  :host-context(nile-side-bar[collapsed]) {
+  :host([collapsed]) {
     margin-right: 0;
     width: 100%;       
     justify-content: center;

package/dist/nile-side-bar-group-item-text/nile-side-bar-group-item-text.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,i;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",i=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: block;\n    flex: 1 1 auto;        \n    min-width: 0;         \n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));  \n    line-height: var(--nile-line-height-small);\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  ::slotted(*) {\n    font: inherit;\n    color: inherit;\n  }\n  :host-context(nile-side-bar[collapsed]) {\n    display: none;\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",o=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: block;\n    flex: 1 1 auto;        \n    min-width: 0;         \n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));  \n    line-height: var(--nile-line-height-small);\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  ::slotted(*) {\n    font: inherit;\n    color: inherit;\n  }\n  :host([collapsed]) {\n    display: none;\n  }\n"]))));}};});
 //# sourceMappingURL=nile-side-bar-group-item-text.css.cjs.js.map

package/dist/nile-side-bar-group-item-text/nile-side-bar-group-item-text.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-group-item-text.css.cjs.js","sources":["../../../src/nile-side-bar-group-item-text/nile-side-bar-group-item-text.css.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * SideBarGroupItemText CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    flex: 1 1 auto;        \n    min-width: 0;         \n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));  \n    line-height: var(--nile-line-height-small);\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  ::slotted(*) {\n    font: inherit;\n    color: inherit;\n  }\n  :host-context(nile-side-bar[collapsed]) {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAKaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-side-bar-group-item-text.css.cjs.js","sources":["../../../src/nile-side-bar-group-item-text/nile-side-bar-group-item-text.css.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * SideBarGroupItemText CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    flex: 1 1 auto;        \n    min-width: 0;         \n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));  \n    line-height: var(--nile-line-height-small);\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  ::slotted(*) {\n    font: inherit;\n    color: inherit;\n  }\n  :host([collapsed]) {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAKaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-side-bar-group-item-text/nile-side-bar-group-item-text.css.esm.js

@@ -1,4 +1,4 @@
-import{css as e}from"lit";const i=e`
+import{css as e}from"lit";const o=e`
   :host {
     display: block;
     flex: 1 1 auto;        
@@ -17,7 +17,7 @@ import{css as e}from"lit";const i=e`
     font: inherit;
     color: inherit;
   }
-  :host-context(nile-side-bar[collapsed]) {
+  :host([collapsed]) {
     display: none;
   }
-`;export{i as s};
+`;export{o as s};

package/dist/nile-side-bar-header/nile-side-bar-header.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var n,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){n=_lit.css;}],execute:function execute(){_export("s",e=n(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n  padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-xl));\n  padding-left: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  padding-right: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  top: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n\n:host-context(nile-side-bar[collapsed]) .header-content {\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--nile-spacing-lg, var(--ng-spacing-md));\n}\n\n\n \n \n::slotted([slot='logo']) {\n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-bold));\n  letter-spacing: -0.02em;\n  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));\n  text-transform: none;\n}\n\n::slotted([slot='actions']) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md);\n}\n\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var n,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){n=_lit.css;}],execute:function execute(){_export("s",e=n(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n  padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-xl));\n  padding-left: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  padding-right: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  top: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n\n:host([collapsed]) .header-content {\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--nile-spacing-lg, var(--ng-spacing-md));\n}\n\n\n\n \n \n::slotted([slot='logo']) {\n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-bold));\n  letter-spacing: -0.02em;\n  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));\n  text-transform: none;\n}\n\n::slotted([slot='actions']) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md);\n}\n\n"]))));}};});
 //# sourceMappingURL=nile-side-bar-header.css.cjs.js.map

package/dist/nile-side-bar-header/nile-side-bar-header.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-header.css.cjs.js","sources":["../../../src/nile-side-bar-header/nile-side-bar-header.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * SideBarHeader CSS\n */\nexport const styles = css`\n :host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n  padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-xl));\n  padding-left: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  padding-right: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  top: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n\n:host-context(nile-side-bar[collapsed]) .header-content {\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--nile-spacing-lg, var(--ng-spacing-md));\n}\n\n\n \n \n::slotted([slot='logo']) {\n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-bold));\n  letter-spacing: -0.02em;\n  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));\n  text-transform: none;\n}\n\n::slotted([slot='actions']) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md);\n}\n\n`;\n\nexport default [styles];"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-side-bar-header.css.cjs.js","sources":["../../../src/nile-side-bar-header/nile-side-bar-header.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * SideBarHeader CSS\n */\nexport const styles = css`\n :host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n  padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-xl));\n  padding-left: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  padding-right: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  top: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n\n:host([collapsed]) .header-content {\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--nile-spacing-lg, var(--ng-spacing-md));\n}\n\n\n\n \n \n::slotted([slot='logo']) {\n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-bold));\n  letter-spacing: -0.02em;\n  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));\n  text-transform: none;\n}\n\n::slotted([slot='actions']) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md);\n}\n\n`;\n\nexport default [styles];"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-side-bar-header/nile-side-bar-header.css.esm.js

@@ -19,13 +19,14 @@ import{css as n}from"lit";const e=n`
 }
 
 
-:host-context(nile-side-bar[collapsed]) .header-content {
+:host([collapsed]) .header-content {
   flex-direction: column;
   justify-content: center;
   gap: var(--nile-spacing-lg, var(--ng-spacing-md));
 }
 
 
+
  
  
 ::slotted([slot='logo']) {

package/dist/nile-side-bar-logo/nile-side-bar-logo.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",e=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\t :host {\n  justify-content: center;\n  height: 100%;\n  flex: 0;\n}\n\n.logo {\n  max-height: 32px;\n  object-fit: contain;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.logo.expanded {\n  display: block;\n}\n\n \n.logo.collapsed {\n  display: none;\n}\n\n \n:host-context(nile-side-bar[collapsed]) .logo.expanded {\n  display: none;\n}\n\n:host-context(nile-side-bar[collapsed]) .logo.collapsed {\n  display: block;\n}\n\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,l;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",l=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n:host {\n  justify-content: center;\n  height: 100%;\n  flex: 0;\n}\n\n.logo {\n  max-height: 32px;\n  object-fit: contain;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.logo.expanded {\n  display: block;\n}\n\n.logo.collapsed {\n  display: none;\n}\n\n:host([collapsed]) .logo.expanded {\n  display: none;\n}\n\n:host([collapsed]) .logo.collapsed {\n  display: block;\n}\n\n:host(:not([collapsed])) .logo.expanded {\n  display: block;\n}\n\n:host(:not([collapsed])) .logo.collapsed {\n  display: none;\n}\n"]))));}};});
 //# sourceMappingURL=nile-side-bar-logo.css.cjs.js.map

package/dist/nile-side-bar-logo/nile-side-bar-logo.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-logo.css.cjs.js","sources":["../../../src/nile-side-bar-logo/nile-side-bar-logo.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * SideBarLogo CSS\n */\nexport const styles = css`\n\t :host {\n  justify-content: center;\n  height: 100%;\n  flex: 0;\n}\n\n.logo {\n  max-height: 32px;\n  object-fit: contain;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.logo.expanded {\n  display: block;\n}\n\n \n.logo.collapsed {\n  display: none;\n}\n\n \n:host-context(nile-side-bar[collapsed]) .logo.expanded {\n  display: none;\n}\n\n:host-context(nile-side-bar[collapsed]) .logo.collapsed {\n  display: block;\n}\n\n`;\n\nexport default [styles];"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-side-bar-logo.css.cjs.js","sources":["../../../src/nile-side-bar-logo/nile-side-bar-logo.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * SideBarLogo CSS\n */\nexport const styles = css`\n:host {\n  justify-content: center;\n  height: 100%;\n  flex: 0;\n}\n\n.logo {\n  max-height: 32px;\n  object-fit: contain;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.logo.expanded {\n  display: block;\n}\n\n.logo.collapsed {\n  display: none;\n}\n\n:host([collapsed]) .logo.expanded {\n  display: none;\n}\n\n:host([collapsed]) .logo.collapsed {\n  display: block;\n}\n\n:host(:not([collapsed])) .logo.expanded {\n  display: block;\n}\n\n:host(:not([collapsed])) .logo.collapsed {\n  display: none;\n}\n`;\n\n\nexport default [styles];"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-side-bar-logo/nile-side-bar-logo.css.esm.js

@@ -1,5 +1,5 @@
-import{css as o}from"lit";const e=o`
-	 :host {
+import{css as o}from"lit";const l=o`
+:host {
   justify-content: center;
   height: 100%;
   flex: 0;
@@ -15,18 +15,23 @@ import{css as o}from"lit";const e=o`
   display: block;
 }
 
- 
 .logo.collapsed {
   display: none;
 }
 
- 
-:host-context(nile-side-bar[collapsed]) .logo.expanded {
+:host([collapsed]) .logo.expanded {
   display: none;
 }
 
-:host-context(nile-side-bar[collapsed]) .logo.collapsed {
+:host([collapsed]) .logo.collapsed {
   display: block;
 }
 
-`;export{e as s};
+:host(:not([collapsed])) .logo.expanded {
+  display: block;
+}
+
+:host(:not([collapsed])) .logo.collapsed {
+  display: none;
+}
+`;export{l as s};

package/dist/nile-tab/nile-tab.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var n,_templateObject,a;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){n=_lit.css;}],execute:function execute(){_export("s",a=n(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: inline-block;\n    --tab-border-radius: var(--nile-radius-md, var(--ng-radius-md));\n    --tab-padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-3px, var(--ng-spacing-xs)) var(--nile-spacing-lg, var(--ng--spacing-3)) var(--nile-spacing-3px, var(--ng-spacing-xs));\n    --tab-hover-background-color:transparent;\n    --tab-active-background-color: transparent;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host([centered]) {\n    flex: 1;\n    text-align: center;\n  }\n\n  .tab {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n    border-radius: var(--tab-border-radius);\n    color: var(--nile-colors-inherit, var(--ng-colors-text-quaternary-500));\n    padding: var(--tab-padding);\n    white-space: nowrap;\n    user-select: none;\n    cursor: pointer;\n    transition: 0.2s box-shadow, 0.2s color;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    height: 36px;\n    box-sizing: border-box;\n  }\n\n  .tab:hover:not(.tab--disabled) {\n    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));\n    background-color: var(--tab-hover-background-color);\n  }\n\n  .tab:focus {\n    outline: none;\n  }\n\n  .tab:focus-visible:not(.tab--disabled) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  .tab.tab--active:not(.tab--disabled) {\n    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));\n    background-color: var(--tab-active-background-color);\n  }\n\n  .tab.tab--closable {\n    padding-inline-end: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .tab.tab--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .tab__close-button {\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .tab__close-button::part(base) {\n    padding: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  @media (forced-colors: active) {\n    .tab.tab--active:not(.tab--disabled) {\n      outline: solid 1px transparent;\n      outline-offset: -3px;\n    }\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var a,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){a=_lit.css;}],execute:function execute(){_export("s",n=a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: inline-block;\n    --tab-border-radius: var(--nile-radius-md, var(--ng-radius-md));\n    --tab-padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-3px, var(--ng-spacing-xs)) var(--nile-spacing-lg, var(--ng--spacing-3)) var(--nile-spacing-3px, var(--ng-spacing-xs));\n    --tab-hover-background-color:transparent;\n    --tab-active-background-color: transparent;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host([centered]) {\n    flex: 1;\n    text-align: center;\n  }\n\n  .tab {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n    border-radius: var(--tab-border-radius);\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    padding: var(--tab-padding);\n    white-space: nowrap;\n    user-select: none;\n    cursor: pointer;\n    transition: 0.2s box-shadow, 0.2s color;\n    font-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    height: 36px;\n    box-sizing: border-box;\n  }\n\n  .tab:hover:not(.tab--disabled) {\n    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));\n    background-color: var(--tab-hover-background-color);\n  }\n\n  .tab:focus {\n    outline: none;\n  }\n\n  .tab:focus-visible:not(.tab--disabled) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  .tab.tab--active:not(.tab--disabled) {\n    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));\n    background-color: var(--tab-active-background-color);\n  }\n\n  .tab.tab--closable {\n    padding-inline-end: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .tab.tab--disabled {\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));\n    cursor: not-allowed;\n  }\n\n  .tab__close-button {\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .tab__close-button::part(base) {\n    padding: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  @media (forced-colors: active) {\n    .tab.tab--active:not(.tab--disabled) {\n      outline: solid 1px transparent;\n      outline-offset: -3px;\n    }\n  }\n"]))));}};});
 //# sourceMappingURL=nile-tab.css.cjs.js.map

package/dist/nile-tab/nile-tab.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tab.css.cjs.js","sources":["../../../src/nile-tab/nile-tab.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tab CSS\n */\nexport const styles = css`\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: inline-block;\n    --tab-border-radius: var(--nile-radius-md, var(--ng-radius-md));\n    --tab-padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-3px, var(--ng-spacing-xs)) var(--nile-spacing-lg, var(--ng--spacing-3)) var(--nile-spacing-3px, var(--ng-spacing-xs));\n    --tab-hover-background-color:transparent;\n    --tab-active-background-color: transparent;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host([centered]) {\n    flex: 1;\n    text-align: center;\n  }\n\n  .tab {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n    border-radius: var(--tab-border-radius);\n    color: var(--nile-colors-inherit, var(--ng-colors-text-quaternary-500));\n    padding: var(--tab-padding);\n    white-space: nowrap;\n    user-select: none;\n    cursor: pointer;\n    transition: 0.2s box-shadow, 0.2s color;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    height: 36px;\n    box-sizing: border-box;\n  }\n\n  .tab:hover:not(.tab--disabled) {\n    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));\n    background-color: var(--tab-hover-background-color);\n  }\n\n  .tab:focus {\n    outline: none;\n  }\n\n  .tab:focus-visible:not(.tab--disabled) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  .tab.tab--active:not(.tab--disabled) {\n    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));\n    background-color: var(--tab-active-background-color);\n  }\n\n  .tab.tab--closable {\n    padding-inline-end: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .tab.tab--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .tab__close-button {\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .tab__close-button::part(base) {\n    padding: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  @media (forced-colors: active) {\n    .tab.tab--active:not(.tab--disabled) {\n      outline: solid 1px transparent;\n      outline-offset: -3px;\n    }\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-tab.css.cjs.js","sources":["../../../src/nile-tab/nile-tab.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tab CSS\n */\nexport const styles = css`\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: inline-block;\n    --tab-border-radius: var(--nile-radius-md, var(--ng-radius-md));\n    --tab-padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-3px, var(--ng-spacing-xs)) var(--nile-spacing-lg, var(--ng--spacing-3)) var(--nile-spacing-3px, var(--ng-spacing-xs));\n    --tab-hover-background-color:transparent;\n    --tab-active-background-color: transparent;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host([centered]) {\n    flex: 1;\n    text-align: center;\n  }\n\n  .tab {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n    border-radius: var(--tab-border-radius);\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    padding: var(--tab-padding);\n    white-space: nowrap;\n    user-select: none;\n    cursor: pointer;\n    transition: 0.2s box-shadow, 0.2s color;\n    font-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    height: 36px;\n    box-sizing: border-box;\n  }\n\n  .tab:hover:not(.tab--disabled) {\n    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));\n    background-color: var(--tab-hover-background-color);\n  }\n\n  .tab:focus {\n    outline: none;\n  }\n\n  .tab:focus-visible:not(.tab--disabled) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  .tab.tab--active:not(.tab--disabled) {\n    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));\n    background-color: var(--tab-active-background-color);\n  }\n\n  .tab.tab--closable {\n    padding-inline-end: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .tab.tab--disabled {\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));\n    cursor: not-allowed;\n  }\n\n  .tab__close-button {\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .tab__close-button::part(base) {\n    padding: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  @media (forced-colors: active) {\n    .tab.tab--active:not(.tab--disabled) {\n      outline: solid 1px transparent;\n      outline-offset: -3px;\n    }\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-tab/nile-tab.css.esm.js

@@ -1,4 +1,4 @@
-import{css as n}from"lit";const a=n`
+import{css as a}from"lit";const n=a`
   [hidden] {
     display: none !important;
   }
@@ -24,16 +24,16 @@ import{css as n}from"lit";const a=n`
     width: 100%;
     align-items: center;
     border-radius: var(--tab-border-radius);
-    color: var(--nile-colors-inherit, var(--ng-colors-text-quaternary-500));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
     padding: var(--tab-padding);
     white-space: nowrap;
     user-select: none;
     cursor: pointer;
     transition: 0.2s box-shadow, 0.2s color;
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-family: var(--nile-font-family-medium, var(--ng-font-family-body));
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
     line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
     letter-spacing: 0.2px;
     gap: var(--nile-spacing-md, var(--ng-spacing-md));
@@ -64,7 +64,7 @@ import{css as n}from"lit";const a=n`
   }
 
   .tab.tab--disabled {
-    opacity: 0.5;
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
     cursor: not-allowed;
   }
 
@@ -83,4 +83,4 @@ import{css as n}from"lit";const a=n`
       outline-offset: -3px;
     }
   }
-`;export{a as s};
+`;export{n as s};

package/dist/src/nile-side-bar/nile-side-bar.js

@@ -33,7 +33,15 @@ let NileSideBar = class NileSideBar extends NileElement {
     updated(changedProps) {
         super.updated(changedProps);
         if (changedProps.has('collapsed')) {
-            this.querySelectorAll('nile-side-bar-footer-item, nile-side-bar-group-item, nile-side-bar-group').forEach(el => el.toggleAttribute('collapsed', this.collapsed));
+            this.querySelectorAll(`
+          nile-side-bar-logo,
+          nile-side-bar-footer-item,
+          nile-side-bar-group-item,
+          nile-side-bar-group,
+          nile-side-bar-header,
+          nile-side-bar-group-item-text,
+          nile-side-bar-group-item-icon
+        `).forEach(el => el.toggleAttribute('collapsed', this.collapsed));
         }
         if (changedProps.has('width') && this.width !== null) {
             this.style.setProperty('--sidebar-width', `${this.width}px`);