@aquera/nile-elements 0.1.55-beta-1.1 → 0.1.55-beta-1.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.55-beta-1.1",
+  "version": "0.1.55-beta-1.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-code-editor/theme.ts

@@ -41,7 +41,7 @@ export const CustomTheme = {
 export const customisedThemeCss = {
   '.cm-tooltip-autocomplete': {
     padding: '9px 12px',
-    backgroundColor: '#FFFFFF',
+    backgroundColor: 'white',
     display: 'block',
     fontSize: '14px',
     background: 'white',
@@ -49,19 +49,10 @@ export const customisedThemeCss = {
     borderRadius: '0.25rem',
     paddingBlock: '0',
     paddingInline: '0',
+    overflow: 'auto',
     overscrollBehavior: 'none',
     color: 'hsl(240 5.3% 26.1%)',
   },
-  '.cm-tooltip.cm-completionInfo.cm-completionInfo-right': {
-    fontFamily: 'colfax-regular',
-    backgroundColor: '#FFFFFF',
-    color: 'hsl(240 5.3% 26.1%)',
-    padding: "6px 12px",
-    borderTopRightRadius: "0.25rem",
-    borderBottomRightRadius: "0.25rem",
-    border: 'solid 1px #C7CED4',
-    fontSize: '14px',
-  },
   '.cm-tooltip.cm-tooltip-autocomplete > ul': {
     fontFamily: 'colfax-regular',
     fontWeight: '400',
@@ -88,61 +79,31 @@ export const customisedThemeCss = {
     display: 'block',
     content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjM2MDExIDYuMjVMNi45ODUxMSAxLjc1TDkuNjEwMTEgNi4yNUg0LjM2MDExWk01LjY5NTExIDUuNUg4LjMxMjYxTDcuMDAwMTEgMy4yNUw1LjY5NTExIDUuNVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi4yNSAxMi4yNUgxLjc1VjcuNzVINi4yNVYxMi4yNVpNMi41IDExLjVINS41VjguNUgyLjVWMTEuNVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC43NDk5NyAxMS44NzA4QzkuMTE5OTggMTIuMTE4IDkuNTU0OTkgMTIuMjUgMTAgMTIuMjVDMTAuNTk2NyAxMi4yNSAxMS4xNjkgMTIuMDEyOSAxMS41OTEgMTEuNTkxQzEyLjAxMjkgMTEuMTY5IDEyLjI1IDEwLjU5NjcgMTIuMjUgMTBDMTIuMjUgOS41NTQ5OSAxMi4xMTggOS4xMTk5OCAxMS44NzA4IDguNzQ5OTdDMTEuNjIzNiA4LjM3OTk2IDExLjI3MjIgOC4wOTE1NyAxMC44NjEgNy45MjEyN0MxMC40NDk5IDcuNzUwOTcgOS45OTc1MSA3LjcwNjQyIDkuNTYxMDUgNy43OTMyM0M5LjEyNDU5IDcuODgwMDUgOC43MjM2OCA4LjA5NDM0IDguNDA5MDEgOC40MDkwMUM4LjA5NDM0IDguNzIzNjggNy44ODAwNSA5LjEyNDU5IDcuNzkzMjMgOS41NjEwNUM3LjcwNjQyIDkuOTk3NTEgNy43NTA5NyAxMC40NDk5IDcuOTIxMjcgMTAuODYxQzguMDkxNTcgMTEuMjcyMiA4LjM3OTk2IDExLjYyMzYgOC43NDk5NyAxMS44NzA4Wk05LjE2NjY1IDguNzUyOEM5LjQxMzMyIDguNTg3OTggOS43MDMzMyA4LjUgMTAgOC41QzEwLjM5NzggOC41IDEwLjc3OTQgOC42NTgwNCAxMS4wNjA3IDguOTM5MzRDMTEuMzQyIDkuMjIwNjUgMTEuNSA5LjYwMjE4IDExLjUgMTBDMTEuNSAxMC4yOTY3IDExLjQxMiAxMC41ODY3IDExLjI0NzIgMTAuODMzNEMxMS4wODI0IDExLjA4IDEwLjg0ODEgMTEuMjcyMyAxMC41NzQgMTEuMzg1OEMxMC4yOTk5IDExLjQ5OTQgOS45OTgzNCAxMS41MjkxIDkuNzA3MzcgMTEuNDcxMkM5LjQxNjM5IDExLjQxMzMgOS4xNDkxMiAxMS4yNzA0IDguOTM5MzQgMTEuMDYwN0M4LjcyOTU2IDEwLjg1MDkgOC41ODY3IDEwLjU4MzYgOC41Mjg4MiAxMC4yOTI2QzguNDcwOTUgMTAuMDAxNyA4LjUwMDY1IDkuNzAwMDcgOC42MTQxOCA5LjQyNTk4QzguNzI3NzEgOS4xNTE4OSA4LjkxOTk3IDguOTE3NjIgOS4xNjY2NSA4Ljc1MjhaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
     position: 'absolute',
-    left: '0px',
     top: '2px',
-    lineHeight: '0',
-    verticalAlign: 'middle'
+    left: '0px'
   },
   '.cm-completionMatchedText' : {
     textDecoration: 'none',
   },
   '.cm-completionIcon.cm-completionIcon-property::after': {
-    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
-    position: 'absolute',
-    left: '0px',
-    top: '2px',
-    lineHeight: '0',
-    verticalAlign: 'middle'
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMDAwOTIgMTJDNi4zMTI5NCAxMiA1LjY2NTI2IDExLjg2ODggNS4wNTc4OSAxMS42MDYzQzQuNDUwNTMgMTEuMzQzOSAzLjkyMDMxIDEwLjk4NjIgMy40NjcyNCAxMC41MzM0QzMuMDE0MjUgMTAuMDgwNSAyLjY1NjQ1IDkuNTUwNTMgMi4zOTM4MiA4Ljk0MzQyQzIuMTMxMjcgOC4zMzYzMiAyIDcuNjg4ODIgMiA3LjAwMDkyQzIgNi4zMDkzNCAyLjEzMTIzIDUuNjU5MyAyLjM5MzY4IDUuMDUwNzlDMi42NTYxNCA0LjQ0MjI4IDMuMDEzNzcgMy45MTI5OCAzLjQ2NjU4IDMuNDYyODlDMy45MTk0NyAzLjAxMjgxIDQuNDQ5NDcgMi42NTY0NSA1LjA1NjU4IDIuMzkzODJDNS42NjM2OCAyLjEzMTI3IDYuMzExMTggMiA2Ljk5OTA4IDJDNy42OTA2NiAyIDguMzQwNyAyLjEzMTIzIDguOTQ5MjEgMi4zOTM2OEM5LjU1NzcyIDIuNjU2MTQgMTAuMDg3IDMuMDEyMzIgMTAuNTM3MSAzLjQ2MjI0QzEwLjk4NzIgMy45MTIxNSAxMS4zNDM2IDQuNDQxMjMgMTEuNjA2MiA1LjA0OTQ3QzExLjg2ODcgNS42NTc3MiAxMiA2LjMwNzU5IDEyIDYuOTk5MDhDMTIgNy42ODcwNiAxMS44Njg4IDguMzM0NzQgMTEuNjA2MyA4Ljk0MjFDMTEuMzQzOSA5LjU0OTQ3IDEwLjk4NzcgMTAuMDc5NyAxMC41Mzc4IDEwLjUzMjhDMTAuMDg3OSAxMC45ODU3IDkuNTU4NzcgMTEuMzQzNiA4Ljk1MDUzIDExLjYwNjJDOC4zNDIyOCAxMS44Njg3IDcuNjkyNDEgMTIgNy4wMDA5MiAxMlpNNyAxMS4zMzg3QzguMjA4NjggMTEuMzM4NyA5LjIzMzk5IDEwLjkxNjggMTAuMDc1OSAxMC4wNzMyQzEwLjkxNzggOS4yMjk0NyAxMS4zMzg3IDguMjA1MDkgMTEuMzM4NyA3QzExLjMzODcgNS43OTEzMiAxMC45MTc4IDQuNzY2MDEgMTAuMDc1OSAzLjkyNDA4QzkuMjMzOTkgMy4wODIyNCA4LjIwODY4IDIuNjYxMzIgNyAyLjY2MTMyQzUuNzk0OTEgMi42NjEzMiA0Ljc3MDUzIDMuMDgyMjQgMy45MjY4NCAzLjkyNDA4QzMuMDgzMTYgNC43NjYwMSAyLjY2MTMyIDUuNzkxMzIgMi42NjEzMiA3QzIuNjYxMzIgOC4yMDUwOSAzLjA4MzE2IDkuMjI5NDcgMy45MjY4NCAxMC4wNzMyQzQuNzcwNTMgMTAuOTE2OCA1Ljc5NDkxIDExLjMzODcgNyAxMS4zMzg3WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTUuMTA1MzQgOS4yODM1NVY1LjM5OTkzQzUuMTA1MzQgNS4yMjMyMiA1LjE2MjkxIDUuMDc3MyA1LjI3ODA0IDQuOTYyMTdDNS4zOTMxNyA0Ljg0NzA0IDUuNTM5MDkgNC43ODk0NyA1LjcxNTggNC43ODk0N0g4LjI5OTc1QzguNDgxNDYgNC43ODk0NyA4LjYyODU2IDQuODQ3MDQgOC43NDEwNiA0Ljk2MjE3QzguODUzNyA1LjA3NzMgOC45MTAwMSA1LjIyMzIyIDguOTEwMDEgNS4zOTk5M1Y5LjI4MzU1SDguMTQ0ODFWNy43Nzg4MUg1Ljg3MDU0VjkuMjgzNTVINS4xMDUzNFpNNS44NzA1NCA3LjAwNjEySDguMTQ0ODFWNS41NTQ2N0g1Ljg3MDU0VjcuMDA2MTJaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    position: 'absolute'
   },
   '.cm-completionIcon.cm-completionIcon-keyword::after': {
     content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuMTk5OTUgNC4wMTQ0OUM2LjE5OTk1IDMuNzkyNyA2LjI3ODE0IDMuNjAzMjkgNi40MzQ1IDMuNDQ2MjZDNi41OTA3NyAzLjI4OTE0IDYuNzc5MjcgMy4yMTA1OCA3IDMuMjEwNThDNy4yMjA3MyAzLjIxMDU4IDcuNDA5MjMgMy4yODkxNCA3LjU2NTUgMy40NDYyNkM3LjcyMTg2IDMuNjAzMjkgNy44MDAwNSAzLjc5MjcgNy44MDAwNSA0LjAxNDQ5QzcuODAwMDUgNC4yMzYyOCA3LjcyMTg2IDQuNDI1NjkgNy41NjU1IDQuNTgyNzJDNy40MDkyMyA0LjczOTg0IDcuMjIwNzMgNC44MTg0IDcgNC44MTg0QzYuNzc5MjcgNC44MTg0IDYuNTkwNzcgNC43Mzk4NCA2LjQzNDUgNC41ODI3MkM2LjI3ODE0IDQuNDI1NjkgNi4xOTk5NSA0LjIzNjI4IDYuMTk5OTUgNC4wMTQ0OVpNNi45MzM1OSAxM0w1LjAyNTE4IDEwLjk3OTFMNS44MTE1OSA5LjkwNjQ1TDUuMDE0NjggOC44MTA5NUw1Ljc0OSA3LjgwNzk1VjYuNzU2OTlDNS4yMzggNi41MDY4OCA0LjgxODc3IDYuMTQ3MSA0LjQ5MTMyIDUuNjc3NjdDNC4xNjM3NyA1LjIwODMyIDQgNC42NTM5MyA0IDQuMDE0NDlDNCAzLjE3ODI5IDQuMjkxOTUgMi40NjY4MiA0Ljg3NTg2IDEuODgwMDlDNS40NTk3NyAxLjI5MzM2IDYuMTY3ODIgMSA3IDFDNy44MzIxOCAxIDguNTQwMjMgMS4yOTMzNiA5LjEyNDE0IDEuODgwMDlDOS43MDgwNSAyLjQ2NjgyIDEwIDMuMTc4MjkgMTAgNC4wMTQ0OUMxMCA0LjYyMzA1IDkuODQ2NjggNS4xNjEwNSA5LjU0MDA1IDUuNjI4NDhDOS4yMzM0MSA2LjA5NTk5IDguODAzNzMgNi40NzIxNyA4LjI1MSA2Ljc1Njk5VjExLjY3NjFMNi45MzM1OSAxM1pNNC42ODUzNiA0LjAxNDQ5QzQuNjg1MzYgNC41NDc2IDQuODUzNTUgNS4wMjc4MiA1LjE4OTkxIDUuNDU1MTRDNS41MjYyNyA1Ljg4MjQ3IDUuOTQxMDUgNi4xNTQ4MiA2LjQzNDIzIDYuMjcyMjFWOC4wNDU4Mkw1Ljg2NTA1IDguODA5MTdMNi42NTkwOSA5LjkyMDg0TDUuOTAxNDUgMTAuOTI0TDYuOTQ4MzIgMTIuMDEzTDcuNTY1NzcgMTEuMzkyNlY2LjI3MjIxQzguMDg2MDUgNi4xMzE0NCA4LjUwNzU5IDUuODU3NTggOC44MzA0MSA1LjQ1MDYyQzkuMTUzMjMgNS4wNDM2NiA5LjMxNDY0IDQuNTY0OTUgOS4zMTQ2NCA0LjAxNDQ5QzkuMzE0NjQgMy4zNzA4NSA5LjA4OSAyLjgyMjMxIDguNjM3NzMgMi4zNjg4NUM4LjE4NjQ1IDEuOTE1NCA3LjY0MDU1IDEuNjg4NjcgNyAxLjY4ODY3QzYuMzU5NDUgMS42ODg2NyA1LjgxMzU1IDEuOTE1NCA1LjM2MjI3IDIuMzY4ODVDNC45MTEgMi44MjIzMSA0LjY4NTM2IDMuMzcwODUgNC42ODUzNiA0LjAxNDQ5WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==")',
-    position: 'absolute',
-    left: '0px',
-    top: '2px',
-    lineHeight: '0',
-    verticalAlign: 'middle'
+    position: 'absolute'
   },
   '.cm-completionIcon.cm-completionIcon-variable::after': {
-    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
-    position: 'absolute',
-    left: '0px',
-    top: '2px',
-    lineHeight: '0',
-    verticalAlign: 'middle'
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMDAwOTIgMTJDNi4zMTI5NCAxMiA1LjY2NTI2IDExLjg2ODggNS4wNTc4OSAxMS42MDYzQzQuNDUwNTMgMTEuMzQzOSAzLjkyMDMxIDEwLjk4NjIgMy40NjcyNCAxMC41MzM0QzMuMDE0MjUgMTAuMDgwNSAyLjY1NjQ1IDkuNTUwNTMgMi4zOTM4MiA4Ljk0MzQyQzIuMTMxMjcgOC4zMzYzMiAyIDcuNjg4ODIgMiA3LjAwMDkyQzIgNi4zMDkzNCAyLjEzMTIzIDUuNjU5MyAyLjM5MzY4IDUuMDUwNzlDMi42NTYxNCA0LjQ0MjI4IDMuMDEzNzcgMy45MTI5OCAzLjQ2NjU4IDMuNDYyODlDMy45MTk0NyAzLjAxMjgxIDQuNDQ5NDcgMi42NTY0NSA1LjA1NjU4IDIuMzkzODJDNS42NjM2OCAyLjEzMTI3IDYuMzExMTggMiA2Ljk5OTA4IDJDNy42OTA2NiAyIDguMzQwNyAyLjEzMTIzIDguOTQ5MjEgMi4zOTM2OEM5LjU1NzcyIDIuNjU2MTQgMTAuMDg3IDMuMDEyMzIgMTAuNTM3MSAzLjQ2MjI0QzEwLjk4NzIgMy45MTIxNSAxMS4zNDM2IDQuNDQxMjMgMTEuNjA2MiA1LjA0OTQ3QzExLjg2ODcgNS42NTc3MiAxMiA2LjMwNzU5IDEyIDYuOTk5MDhDMTIgNy42ODcwNiAxMS44Njg4IDguMzM0NzQgMTEuNjA2MyA4Ljk0MjFDMTEuMzQzOSA5LjU0OTQ3IDEwLjk4NzcgMTAuMDc5NyAxMC41Mzc4IDEwLjUzMjhDMTAuMDg3OSAxMC45ODU3IDkuNTU4NzcgMTEuMzQzNiA4Ljk1MDUzIDExLjYwNjJDOC4zNDIyOCAxMS44Njg3IDcuNjkyNDEgMTIgNy4wMDA5MiAxMlpNNyAxMS4zMzg3QzguMjA4NjggMTEuMzM4NyA5LjIzMzk5IDEwLjkxNjggMTAuMDc1OSAxMC4wNzMyQzEwLjkxNzggOS4yMjk0NyAxMS4zMzg3IDguMjA1MDkgMTEuMzM4NyA3QzExLjMzODcgNS43OTEzMiAxMC45MTc4IDQuNzY2MDEgMTAuMDc1OSAzLjkyNDA4QzkuMjMzOTkgMy4wODIyNCA4LjIwODY4IDIuNjYxMzIgNyAyLjY2MTMyQzUuNzk0OTEgMi42NjEzMiA0Ljc3MDUzIDMuMDgyMjQgMy45MjY4NCAzLjkyNDA4QzMuMDgzMTYgNC43NjYwMSAyLjY2MTMyIDUuNzkxMzIgMi42NjEzMiA3QzIuNjYxMzIgOC4yMDUwOSAzLjA4MzE2IDkuMjI5NDcgMy45MjY4NCAxMC4wNzMyQzQuNzcwNTMgMTAuOTE2OCA1Ljc5NDkxIDExLjMzODcgNyAxMS4zMzg3WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTUuMTA1MzQgOS4yODM1NVY1LjM5OTkzQzUuMTA1MzQgNS4yMjMyMiA1LjE2MjkxIDUuMDc3MyA1LjI3ODA0IDQuOTYyMTdDNS4zOTMxNyA0Ljg0NzA0IDUuNTM5MDkgNC43ODk0NyA1LjcxNTggNC43ODk0N0g4LjI5OTc1QzguNDgxNDYgNC43ODk0NyA4LjYyODU2IDQuODQ3MDQgOC43NDEwNiA0Ljk2MjE3QzguODUzNyA1LjA3NzMgOC45MTAwMSA1LjIyMzIyIDguOTEwMDEgNS4zOTk5M1Y5LjI4MzU1SDguMTQ0ODFWNy43Nzg4MUg1Ljg3MDU0VjkuMjgzNTVINS4xMDUzNFpNNS44NzA1NCA3LjAwNjEySDguMTQ0ODFWNS41NTQ2N0g1Ljg3MDU0VjcuMDA2MTJaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    position: 'absolute'
   },
   '.cm-completionIcon.cm-completionIcon-text::after': {
-    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
-    position: 'absolute',
-    left: '0px',
-    top: '2px',
-    lineHeight: '0',
-    verticalAlign: 'middle'
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuMTk5OTUgNC4wMTQ0OUM2LjE5OTk1IDMuNzkyNyA2LjI3ODE0IDMuNjAzMjkgNi40MzQ1IDMuNDQ2MjZDNi41OTA3NyAzLjI4OTE0IDYuNzc5MjcgMy4yMTA1OCA3IDMuMjEwNThDNy4yMjA3MyAzLjIxMDU4IDcuNDA5MjMgMy4yODkxNCA3LjU2NTUgMy40NDYyNkM3LjcyMTg2IDMuNjAzMjkgNy44MDAwNSAzLjc5MjcgNy44MDAwNSA0LjAxNDQ5QzcuODAwMDUgNC4yMzYyOCA3LjcyMTg2IDQuNDI1NjkgNy41NjU1IDQuNTgyNzJDNy40MDkyMyA0LjczOTg0IDcuMjIwNzMgNC44MTg0IDcgNC44MTg0QzYuNzc5MjcgNC44MTg0IDYuNTkwNzcgNC43Mzk4NCA2LjQzNDUgNC41ODI3MkM2LjI3ODE0IDQuNDI1NjkgNi4xOTk5NSA0LjIzNjI4IDYuMTk5OTUgNC4wMTQ0OVpNNi45MzM1OSAxM0w1LjAyNTE4IDEwLjk3OTFMNS44MTE1OSA5LjkwNjQ1TDUuMDE0NjggOC44MTA5NUw1Ljc0OSA3LjgwNzk1VjYuNzU2OTlDNS4yMzggNi41MDY4OCA0LjgxODc3IDYuMTQ3MSA0LjQ5MTMyIDUuNjc3NjdDNC4xNjM3NyA1LjIwODMyIDQgNC42NTM5MyA0IDQuMDE0NDlDNCAzLjE3ODI5IDQuMjkxOTUgMi40NjY4MiA0Ljg3NTg2IDEuODgwMDlDNS40NTk3NyAxLjI5MzM2IDYuMTY3ODIgMSA3IDFDNy44MzIxOCAxIDguNTQwMjMgMS4yOTMzNiA5LjEyNDE0IDEuODgwMDlDOS43MDgwNSAyLjQ2NjgyIDEwIDMuMTc4MjkgMTAgNC4wMTQ0OUMxMCA0LjYyMzA1IDkuODQ2NjggNS4xNjEwNSA5LjU0MDA1IDUuNjI4NDhDOS4yMzM0MSA2LjA5NTk5IDguODAzNzMgNi40NzIxNyA4LjI1MSA2Ljc1Njk5VjExLjY3NjFMNi45MzM1OSAxM1pNNC42ODUzNiA0LjAxNDQ5QzQuNjg1MzYgNC41NDc2IDQuODUzNTUgNS4wMjc4MiA1LjE4OTkxIDUuNDU1MTRDNS41MjYyNyA1Ljg4MjQ3IDUuOTQxMDUgNi4xNTQ4MiA2LjQzNDIzIDYuMjcyMjFWOC4wNDU4Mkw1Ljg2NTA1IDguODA5MTdMNi42NTkwOSA5LjkyMDg0TDUuOTAxNDUgMTAuOTI0TDYuOTQ4MzIgMTIuMDEzTDcuNTY1NzcgMTEuMzkyNlY2LjI3MjIxQzguMDg2MDUgNi4xMzE0NCA4LjUwNzU5IDUuODU3NTggOC44MzA0MSA1LjQ1MDYyQzkuMTUzMjMgNS4wNDM2NiA5LjMxNDY0IDQuNTY0OTUgOS4zMTQ2NCA0LjAxNDQ5QzkuMzE0NjQgMy4zNzA4NSA5LjA4OSAyLjgyMjMxIDguNjM3NzMgMi4zNjg4NUM4LjE4NjQ1IDEuOTE1NCA3LjY0MDU1IDEuNjg4NjcgNyAxLjY4ODY3QzYuMzU5NDUgMS42ODg2NyA1LjgxMzU1IDEuOTE1NCA1LjM2MjI3IDIuMzY4ODVDNC45MTEgMi44MjIzMSA0LjY4NTM2IDMuMzcwODUgNC42ODUzNiA0LjAxNDQ5WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==")',
+    position: 'absolute'
   },
   '.cm-completionIcon.cm-completionIcon-function::after': {
-    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzE5ODMgNC4zNTY0NUwzLjMxODk0IDQuODA1NjZMMy4zNTgzNCA0Ljk3NTU5SDQuMzkwNjJDNC4xNzk4MyA2LjE4NDU3IDQuMDIyMjMgNy4yNzQ0MSAzLjcxOTgzIDguOTU0MUMzLjM1ODM0IDExLjA5NjcgMy4xNTA1IDExLjYyMyAzLjAyNzM4IDExLjgxNTRDMi45MTkwMyAxMi4wMDU5IDIuNzYzNCAxMi4xMDQ1IDIuNTUyNjEgMTIuMTA0NUMyLjMyMTEzIDEyLjEwNDUgMS45MDI1IDExLjkyMjkgMS42Nzc5MiAxMS43MTY4QzEuNTk3MTUgMTEuNjYyMSAxLjUwMTYxIDExLjY3NTggMS40MDAxNSAxMS43NDIyQzEuMTk3MjQgMTEuOTEyMSAxLjAwMDI0IDEyLjE3MzggMS4wMDAyNCAxMi40MDgyQzAuOTg4NDIgMTIuNzI0NiAxLjQxNDkzIDEzIDEuODIxNzMgMTNDMi4xODAyNyAxMyAyLjcwODI0IDEyLjc3NzMgMy4yNjM3OCAxMi4yNTM5QzQuMDIzMjIgMTEuNTQgNC41OTE1NiAxMC41NjA1IDUuMDY2MzMgOC40NDMzNkM1LjM3MTY5IDcuMDkxOCA1LjUxNTUgNi4yMTI4OSA1LjczMDIzIDQuOTc2NTZMNy4wMTI3IDQuODYxMzNMNy4yOTA0NyA0LjM1NjQ1SDUuODQ2NDZDNi4yMTk3NyAyLjAyODMyIDYuNTExMzMgMS42ODM1OSA2Ljg2OTg4IDEuNjgzNTlDNy4xMDgyNSAxLjY4MzU5IDcuMzg2MDIgMS44NjUyMyA3LjcwNTE2IDIuMjIyNjZDNy43OTk3MiAyLjM1MTU2IDcuOTQxNTYgMi4zMzc4OSA4LjA0OTkxIDIuMjVDOC4yMzIxNCAyLjE0MjU4IDguNDU2NzIgMS44NjcxOSA4LjQ3MTQ5IDEuNjE3MTlDOC40ODIzMyAxLjM0MTggOC4xNTEzNyAxIDcuNTgyMDMgMUM3LjA2NTg5IDEgNi4yNzQ5MyAxLjM0MTggNS42MTAwNiAyLjAxMzY3QzUuMDI2OTMgMi42MjU5OCA0LjcyMTU4IDMuMzkwNjIgNC41MTA3OSA0LjM1NjQ1SDMuNzE5ODNaTTcuODIzMzYgNS45MTUwNEM4LjIyMTMgNS4zODk2NSA4LjQ1OTY3IDUuMjE0ODQgOC41ODI4IDUuMjE0ODRDOC43MDk4NiA1LjIxNDg0IDguODExMzIgNS4zMzg4NyA5LjAyOSA2LjAzNjEzTDkuNDAxMzMgNy4yMjY1NkM4LjY4MTMgOC4zMTgzNiA4LjE1NDMyIDguOTI2NzYgNy44MzQxOSA4LjkyNjc2QzcuNzI3ODEgOC45MjY3NiA3LjYyMDQ1IDguODkzNTUgNy41NDQ2IDguODE5MzRDNy40Njk3NCA4Ljc0NTEyIDcuMzg3IDguNjgzNTkgNy4zMDYyMyA4LjY4MzU5QzcuMDQyMjUgOC42ODM1OSA2LjcxNTIzIDkuMDAwOTggNi43MDkzMiA5LjM5NDUzQzYuNzAzNDEgOS43OTU5IDYuOTg3MDkgMTAuMDgzIDcuMzU5NDIgMTAuMDgzQzcuOTk4NjkgMTAuMDgzIDguNTM5NDYgOS40NjA5NCA5LjU4MzU2IDcuODExNTJMOS44ODg5MSA4LjgzMjAzQzEwLjE1MDkgOS43MDg5OCAxMC40NTgyIDEwLjA4MyAxMC44NDI0IDEwLjA4M0MxMS4zMTcyIDEwLjA4MyAxMS45NTU0IDkuNjgxNjQgMTIuNjUxOCA4LjU5NjY4TDEyLjM2MDMgOC4yNjY2QzExLjk0MTcgOC43NjY2IDExLjY2MzkgOS4wMDA5OCAxMS40OTk0IDkuMDAwOThDMTEuMzE2MiA5LjAwMDk4IDExLjE1NTYgOC43MjM2MyAxMC45NDM4IDguMDQxOTlMMTAuNDk3NiA2LjYwMzUyQzEwLjc2MTYgNi4yMTc3NyAxMS4wMjE3IDUuODkzNTUgMTEuMjUwMiA1LjYzNDc3QzExLjUyMiA1LjMyNzE1IDExLjczMTkgNS4xOTYyOSAxMS44NzQ3IDUuMTk2MjlDMTEuOTk0OCA1LjE5NjI5IDEyLjA5OTMgNS4yNDcwNyAxMi4xNjQzIDUuMzE4MzZDMTIuMjUgNS40MTIxMSAxMi4zMDEyIDUuNDU2MDUgMTIuNDAyNiA1LjQ1NjA1QzEyLjYzMjEgNS40NTYwNSAxMi45ODY3IDUuMTY2OTkgMTIuOTk5NiA0Ljc4NDE4QzEzLjAxMTQgNC40Mjg3MSAxMi43ODg4IDQuMTI1OTggMTIuNDAyNiA0LjEyNTk4QzExLjgxOTUgNC4xMjU5OCAxMS4zMDUzIDQuNjI0MDIgMTAuMzE1NCA2LjA4MzAxTDEwLjExMTUgNS40NTcwM0M5LjgyNTg3IDQuNTc4MTIgOS42MzY3NSA0LjEyNTk4IDkuMjM4ODEgNC4xMjU5OEM4Ljc3NTg2IDQuMTI1OTggOC4xMzk1NSA0LjY5MDQzIDcuNTE3MDIgNS41ODQ5Nkw3LjgyMzM2IDUuOTE1MDRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
-    position: 'absolute',
-    left: '0px',
-    top: '2px',
-    lineHeight: '0',
-    verticalAlign: 'middle'
-  },
-  '.cm-completionIcon.cm-completionIcon-class::after': {
-    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuOTA2NjUgMTNMMS41IDEwVjRMNi45MDY2NSAxTDEyLjMxMzMgNFYxMEw2LjkwNjY1IDEzWk01LjE0ODk3IDUuNTA3MzJDNS4zNjUzNSA1LjI1NzQyIDUuNjI5MTQgNS4wNTkxOCA1Ljk0MDM0IDQuOTEyNTlDNi4yNTE2NSA0Ljc2NiA2LjU3Mzc1IDQuNjkyNzEgNi45MDY2NSA0LjY5MjcxQzcuMjM5NTQgNC42OTI3MSA3LjU2MTY0IDQuNzY2IDcuODcyOTYgNC45MTI1OUM4LjE4NDE1IDUuMDU5MTggOC40NDc5NCA1LjI1NzQyIDguNjY0MzIgNS41MDczMkwxMC45MjUzIDQuMjYyMjRMNi45MDY2NSAyLjAzMTc0TDIuODg3OTkgNC4yNjIyNEw1LjE0ODk3IDUuNTA3MzJaTTYuNDU4OTYgMTEuNzMzN1Y5LjI3ODJDNS45MjExNyA5LjE2Njg1IDUuNDc2ODEgOC44OTg0MSA1LjEyNTkgOC40NzI4OEM0Ljc3NDg3IDguMDQ3MjQgNC41OTkzNSA3LjU1NjI4IDQuNTk5MzUgN0M0LjU5OTM1IDYuODgzNDkgNC42MDU1NSA2Ljc2NDA1IDQuNjE3OTUgNi42NDE2OEM0LjYzMDIzIDYuNTE5NDMgNC42NjM3NSA2LjQwNTczIDQuNzE4NSA2LjMwMDU4TDIuMzk1MzcgNS4wMDQwMlY5LjQ3NTUyTDYuNDU4OTYgMTEuNzMzN1pNNi45MDY2NSA4LjQxMTkzQzcuMzA0MDUgOC40MTE5MyA3LjYzODcyIDguMjc1OTYgNy45MTA2NiA4LjAwNDAyQzguMTgyNiA3LjczMjA4IDguMzE4NTcgNy4zOTc0MSA4LjMxODU3IDdDOC4zMTg1NyA2LjYwMjU5IDguMTgyNiA2LjI2NzkyIDcuOTEwNjYgNS45OTU5OEM3LjYzODcyIDUuNzI0MDQgNy4zMDQwNSA1LjU4ODA3IDYuOTA2NjUgNS41ODgwN0M2LjUwOTI0IDUuNTg4MDcgNi4xNzQ1NyA1LjcyNDA0IDUuOTAyNjMgNS45OTU5OEM1LjYzMDY5IDYuMjY3OTIgNS40OTQ3MiA2LjYwMjU5IDUuNDk0NzIgN0M1LjQ5NDcyIDcuMzk3NDEgNS42MzA2OSA3LjczMjA4IDUuOTAyNjMgOC4wMDQwMkM2LjE3NDU3IDguMjc1OTYgNi41MDkyNCA4LjQxMTkzIDYuOTA2NjUgOC40MTE5M1pNNy4zNTQzMyAxMS43MzM3TDExLjQxNzkgOS40NzU1MlY1LjAwNDAyTDkuMDk0NzkgNi4zMDA1OEM5LjEzODA3IDYuNDA1NzMgOS4xNjg3MSA2LjUxOTQzIDkuMTg2NzQgNi42NDE2OEM5LjIwNDg3IDYuNzY0MDUgOS4yMTM5NCA2Ljg4MzQ5IDkuMjEzOTQgN0M5LjIxMzk0IDcuNTU2MjggOS4wMzg0MyA4LjA0NzI0IDguNjg3NCA4LjQ3Mjg4QzguMzM2NDggOC44OTg0MSA3Ljg5MjEzIDkuMTY2ODUgNy4zNTQzMyA5LjI3ODJWMTEuNzMzN1oiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo= ")',
-    position: 'absolute',
-    left: '0px',
-    top: '2px',
-    lineHeight: '0',
-    verticalAlign: 'middle'
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuMTk5OTUgNC4wMTQ0OUM2LjE5OTk1IDMuNzkyNyA2LjI3ODE0IDMuNjAzMjkgNi40MzQ1IDMuNDQ2MjZDNi41OTA3NyAzLjI4OTE0IDYuNzc5MjcgMy4yMTA1OCA3IDMuMjEwNThDNy4yMjA3MyAzLjIxMDU4IDcuNDA5MjMgMy4yODkxNCA3LjU2NTUgMy40NDYyNkM3LjcyMTg2IDMuNjAzMjkgNy44MDAwNSAzLjc5MjcgNy44MDAwNSA0LjAxNDQ5QzcuODAwMDUgNC4yMzYyOCA3LjcyMTg2IDQuNDI1NjkgNy41NjU1IDQuNTgyNzJDNy40MDkyMyA0LjczOTg0IDcuMjIwNzMgNC44MTg0IDcgNC44MTg0QzYuNzc5MjcgNC44MTg0IDYuNTkwNzcgNC43Mzk4NCA2LjQzNDUgNC41ODI3MkM2LjI3ODE0IDQuNDI1NjkgNi4xOTk5NSA0LjIzNjI4IDYuMTk5OTUgNC4wMTQ0OVpNNi45MzM1OSAxM0w1LjAyNTE4IDEwLjk3OTFMNS44MTE1OSA5LjkwNjQ1TDUuMDE0NjggOC44MTA5NUw1Ljc0OSA3LjgwNzk1VjYuNzU2OTlDNS4yMzggNi41MDY4OCA0LjgxODc3IDYuMTQ3MSA0LjQ5MTMyIDUuNjc3NjdDNC4xNjM3NyA1LjIwODMyIDQgNC42NTM5MyA0IDQuMDE0NDlDNCAzLjE3ODI5IDQuMjkxOTUgMi40NjY4MiA0Ljg3NTg2IDEuODgwMDlDNS40NTk3NyAxLjI5MzM2IDYuMTY3ODIgMSA3IDFDNy44MzIxOCAxIDguNTQwMjMgMS4yOTMzNiA5LjEyNDE0IDEuODgwMDlDOS43MDgwNSAyLjQ2NjgyIDEwIDMuMTc4MjkgMTAgNC4wMTQ0OUMxMCA0LjYyMzA1IDkuODQ2NjggNS4xNjEwNSA5LjU0MDA1IDUuNjI4NDhDOS4yMzM0MSA2LjA5NTk5IDguODAzNzMgNi40NzIxNyA4LjI1MSA2Ljc1Njk5VjExLjY3NjFMNi45MzM1OSAxM1pNNC42ODUzNiA0LjAxNDQ5QzQuNjg1MzYgNC41NDc2IDQuODUzNTUgNS4wMjc4MiA1LjE4OTkxIDUuNDU1MTRDNS41MjYyNyA1Ljg4MjQ3IDUuOTQxMDUgNi4xNTQ4MiA2LjQzNDIzIDYuMjcyMjFWOC4wNDU4Mkw1Ljg2NTA1IDguODA5MTdMNi42NTkwOSA5LjkyMDg0TDUuOTAxNDUgMTAuOTI0TDYuOTQ4MzIgMTIuMDEzTDcuNTY1NzcgMTEuMzkyNlY2LjI3MjIxQzguMDg2MDUgNi4xMzE0NCA4LjUwNzU5IDUuODU3NTggOC44MzA0MSA1LjQ1MDYyQzkuMTUzMjMgNS4wNDM2NiA5LjMxNDY0IDQuNTY0OTUgOS4zMTQ2NCA0LjAxNDQ5QzkuMzE0NjQgMy4zNzA4NSA5LjA4OSAyLjgyMjMxIDguNjM3NzMgMi4zNjg4NUM4LjE4NjQ1IDEuOTE1NCA3LjY0MDU1IDEuNjg4NjcgNyAxLjY4ODY3QzYuMzU5NDUgMS42ODg2NyA1LjgxMzU1IDEuOTE1NCA1LjM2MjI3IDIuMzY4ODVDNC45MTEgMi44MjIzMSA0LjY4NTM2IDMuMzcwODUgNC42ODUzNiA0LjAxNDQ5WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==")',
+    position: 'absolute'
   },
   '.cm-completionLabel': {
     marginLeft: '18px',

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

@@ -27,6 +27,97 @@ export const styles = css`
   nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
     color: red;
   }
+
+  .row-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  cursor: pointer;
+}
+
+.expanded-content {
+  overflow: hidden;
+  /* Optional: smooth height transition */
+  transition: max-height 0.3s ease;
+  max-height: 1000px; /* or set via a CSS variable */
+}
+
+.row-container {
+  display: flex;
+  flex-direction: column; /* keeps expansion content below */
+}
+
+.row {
+  display: flex;          /* turn each row into a flex row */
+  cursor: pointer;        /* keep your expand cursor */
+}
+
+.row.expandable .expand-icon {
+  margin-right: 4px;
+}
+
+/* All direct children of .row (i.e. your cell items & the icon) flex equally */
+.row ::slotted(nile-table-cell-item),
+.row ::slotted(nile-table-header-item) {
+  flex: 1 1 0;            /* grow + shrink equally, zero base-width */
+  box-sizing: border-box; /* so padding/borders stay inside */
+}
+
+/* Make sure the expand-icon doesn’t stretch like a cell: */
+.row ::slotted(.expand-icon) {
+  flex: 0 0 auto;
+}
+
+/* Expansion pane—already in your code: */
+.expanded-content {
+  overflow: hidden;
+  transition: ease-in-out all 10s;
+  max-height: 1000px;     /* or a CSS variable */
+}
+
+ 
+
+ 
+.row-container {
+  display: flex;
+  flex-direction: column;
+}
+
+ 
+.row {
+  position: relative;      /* so the icon can be absolutely positioned */
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--nile-table-row-border-color, #e0e0e0);
+  cursor: default;         /* row itself is inert */
+  background: var(--nile-table-row-background, #fff);
+}
+
+/* Expand/collapse icon */
+.expand-icon {
+  position: absolute;
+  left: 0.40em;            
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  font-size: 1em;
+  line-height: 1;
+  user-select: none;
+  z-index: 1;
+}
+
+
+ 
+ 
+
+
+.expanded-content {
+  overflow: hidden;
+transition: ease-in-out all 10s;
+}
+
 `;
 
 export default [styles];

package/src/nile-table-row/nile-table-row.ts

@@ -1,10 +1,3 @@
-/**
- * Copyright Aquera Inc 2023
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
 import {
   LitElement,
   html,
@@ -16,58 +9,87 @@ import { styles } from './nile-table-row.css';
 import NileElement from '../internal/nile-element';
 
 /**
- *nile-table-row component.
+ * `<nile-table-row>` component.
  *
- * @tag nile-table-row
+ * Renders one table row; if `expandable` is true, shows
+ * a toggle icon at top-left that expands/collapses
+ * the `<slot name="expanded">` content.
  *
+ * @slot            Default slot for cell items
+ * @slot expanded   Content to reveal on expand
+ * @attr {boolean} expandable  enable expansion behavior
+ * @attr {boolean} expanded   reflect current expanded state
  */
 @customElement('nile-table-row')
 export class NileTableRow extends NileElement {
-  /**
-   * The styles for TableRow
-   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-   */
-
+  /** Include our CSS */
   public static get styles(): CSSResultArray {
     return [styles];
   }
 
-  /* #endregion */
+  /** Enable expansion (shows icon) */
+  @property({ type: Boolean, reflect: true }) expandable = false;
 
-  /* #region Methods */
+  /** Current expanded/collapsed state */
+  @property({ type: Boolean, reflect: true }) expanded = false;
 
-  /**
-   * Render method
-   * @slot This is a slot test
-   */
+  @query('slot[name="expanded"]')
+  private _expandedSlot!: HTMLSlotElement;
 
+  /** Icon click toggles expand/collapse */
+  private toggleExpand(e: MouseEvent): void {
+    e.stopPropagation();
+    this.expanded = !this.expanded;
+    this.dispatchEvent(new CustomEvent('nile-row-toggle', {
+      detail: { expanded: this.expanded },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  /** Sorting event pass-through (unchanged) */
   private handleSortingAlter(event: CustomEvent) {
-    const header_items: any = [
-      ...this.querySelectorAll('nile-table-header-item'),
-    ];
-    for (let i = 0; i < header_items.length; i++) {
-      const header = header_items[i];
-      const haveIcon = header.textContent == event.detail.value.curr_sort_string;
-      if (!haveIcon) {
-        header.sorting_ct = 0;
+    const headers = Array.from(this.querySelectorAll('nile-table-header-item'));
+    headers.forEach(header => {
+      if (header.textContent !== event.detail.value.curr_sort_string) {
+        (header as any).sorting_ct = 0;
       }
-    }
+    });
   }
 
   public render(): TemplateResult {
     return html`
-      <slot
-        part="nile-row"
-        @nile-click-sort="${this.handleSortingAlter}"
-      ></slot>
+      <div class="row-container">
+        <div
+          part="nile-row"
+          class="row ${this.expandable ? 'expandable' : ''} ${this.expanded ? 'expanded' : ''}"
+          @nile-click-sort=${this.handleSortingAlter}
+        >
+          ${this.expandable
+            ? html`
+              <nile-icon
+                class="expand-icon"
+                 name="${this.expanded ? 'chevron-up' : 'chevron-down'}"
+                @click=${this.toggleExpand}
+                role="button"
+                size="10"
+                aria-label="${this.expanded ? 'Collapse row' : 'Expand row'}">
+              </nile-icon>`
+            : null}
+          <slot></slot>
+        </div>
+
+        ${this.expandable && this.expanded
+          ? html`
+              <div class="expanded-content">
+                <slot name="expanded"></slot>
+              </div>`
+          : null}
+      </div>
     `;
   }
-
-  /* #endregion */
 }
 
-export default NileTableRow;
-
 declare global {
   interface HTMLElementTagNameMap {
     'nile-table-row': NileTableRow;

package/vscode-html-custom-data.json

@@ -3445,8 +3445,23 @@
     },
     {
       "name": "nile-table-row",
-      "description": "nile-table-row component.\n\nProperties:\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
-      "attributes": []
+      "description": "`<nile-table-row>` component.\n\nRenders one table row; if `expandable` is true, shows\na toggle icon at top-left that expands/collapses\nthe `<slot name=\"expanded\">` content.\n\nEvents:\n\n  * `nile-row-toggle` {`CustomEvent<{ expanded: boolean; }>`} - \n\nSlots:\n\n  * ` ` {} - Default slot for cell items\n\nAttributes:\n\n  * `expandable` {`boolean`} - Enable expansion (shows icon)\n\n  * `expanded` {`boolean`} - Current expanded/collapsed state\n\nProperties:\n\n  * `expandable` {`boolean`} - Enable expansion (shows icon)\n\n  * `expanded` {`boolean`} - Current expanded/collapsed state\n\n  * `_expandedSlot` {`HTMLSlotElement`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "expandable",
+          "description": "`expandable` {`boolean`} - Enable expansion (shows icon)\n\nProperty: expandable\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "expanded",
+          "description": "`expanded` {`boolean`} - Current expanded/collapsed state\n\nProperty: expanded\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "onnile-row-toggle",
+          "description": "`nile-row-toggle` {`CustomEvent<{ expanded: boolean; }>`} - "
+        }
+      ]
     },
     {
       "name": "nile-table",

package/dist/src/nile-slider/index.d.ts

@@ -1 +0,0 @@
-export { NileSlider } from './nile-slider';

package/dist/src/nile-slider/index.js

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

package/dist/src/nile-slider/index.js.map

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

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

@@ -1,12 +0,0 @@
-/**
- * Copyright Aquera Inc 2023
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * Slider CSS
- */
-export declare const styles: import("lit").CSSResult;
-declare const _default: import("lit").CSSResult[];
-export default _default;

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

@@ -1,110 +0,0 @@
-/**
- * Copyright Aquera Inc 2023
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import { css } from 'lit';
-/**
- * Slider CSS
- */
-export const styles = css `
-  :host {
-    display: block;
-  }
-
-  .container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    height: 100px;
-  }
-
-  .align-item-center {
-    align-items: center;
-  }
-
-  slot.span {
-    font-size: var(--nile-font-size-micro);
-    margin-top: 14px;
-  }
-
-  .range-container {
-    display: flex;
-    flex-direction: column;
-    gap: var(--nile-spacing-sm);
-  }
-
-  .column-reverse {
-    flex-direction: column-reverse;
-  }
-
-  .label-container {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .label-container span {
-    margin: var(--nile-spacing-none);
-    padding: var(--nile-spacing-none);
-    font-size: var(--nile-font-size-micro);
-  }
-
-  .range {
-    position: relative;
-    width: 228px;
-    height: 4px;
-    background-color: var(--nile-colors-white-base);
-	  border-radius: var(--nile-radius-radius-3xl);
-  }
-
-  .range-completed {
-    position: absolute;
-    height: 100%;
-    width: 0%;
-    background-color: var(--nile-colors-primary-600);
-    top: 0px;
-    left: 0px;
-    z-index: 98;
-    border-radius: var(--nile-radius-radius-3xl);
-  }
-
-  .range-button {
-    height: 12px;
-    width: 12px;
-    background-color: var(--nile-colors-primary-600);
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    border-radius: var(--nile-radius-radius-3xl);
-    left: 0;
-    z-index: 100;
-    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 4px;
-  }
-
-  .range-button:hover, .range-button-two:hover {
-    cursor: grab;
-    background-color: var(--nile-colors-primary-700);
-  }
-
-  .range-button:active, .range-button-two:active {
-    cursor: grabbing;
-    background-color: var(--nile-colors-primary-700);
-  }
-
-  .range-button-two {
-    height: 12px;
-    width: 12px;
-    background-color: var(--nile-colors-primary-600);
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    border-radius: var(--nile-radius-radius-3xl);
-    left: 100%;
-    z-index: 100;
-    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 4px;
-  }
-`;
-export default [styles];
-//# sourceMappingURL=nile-slider.css.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"nile-slider.css.js","sourceRoot":"","sources":["../../../src/nile-slider/nile-slider.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Slider CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  .container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 10px;\n    height: 100px;\n  }\n\n  .align-item-center {\n    align-items: center;\n  }\n\n  slot.span {\n    font-size: var(--nile-font-size-micro);\n    margin-top: 14px;\n  }\n\n  .range-container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-sm);\n  }\n\n  .column-reverse {\n    flex-direction: column-reverse;\n  }\n\n  .label-container {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .label-container span {\n    margin: var(--nile-spacing-none);\n    padding: var(--nile-spacing-none);\n    font-size: var(--nile-font-size-micro);\n  }\n\n  .range {\n    position: relative;\n    width: 228px;\n    height: 4px;\n    background-color: var(--nile-colors-white-base);\n\t  border-radius: var(--nile-radius-radius-3xl);\n  }\n\n  .range-completed {\n    position: absolute;\n    height: 100%;\n    width: 0%;\n    background-color: var(--nile-colors-primary-600);\n    top: 0px;\n    left: 0px;\n    z-index: 98;\n    border-radius: var(--nile-radius-radius-3xl);\n  }\n\n  .range-button {\n    height: 12px;\n    width: 12px;\n    background-color: var(--nile-colors-primary-600);\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    border-radius: var(--nile-radius-radius-3xl);\n    left: 0;\n    z-index: 100;\n    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 4px;\n  }\n\n  .range-button:hover, .range-button-two:hover {\n    cursor: grab;\n    background-color: var(--nile-colors-primary-700);\n  }\n\n  .range-button:active, .range-button-two:active {\n    cursor: grabbing;\n    background-color: var(--nile-colors-primary-700);\n  }\n\n  .range-button-two {\n    height: 12px;\n    width: 12px;\n    background-color: var(--nile-colors-primary-600);\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    border-radius: var(--nile-radius-radius-3xl);\n    left: 100%;\n    z-index: 100;\n    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 4px;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -1,47 +0,0 @@
-/**
- * Copyright Aquera Inc 2025
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import NileElement from '../internal/nile-element';
-import { CSSResultArray, TemplateResult } from 'lit';
-import { TooltipPosition } from './types/nile-slider.types';
-/**
- * Nile slider component.
- *
- * @tag nile-slider
- */
-export declare class NileSlider extends NileElement {
-    static get styles(): CSSResultArray;
-    value: number;
-    minValue: number;
-    maxValue: number;
-    rangeOneValue: number;
-    rangeTwoValue: number;
-    showLabel: boolean;
-    labelStart: string;
-    labelEnd: string;
-    rangeSlider: boolean;
-    labelPosition: string;
-    tooltipPosition: TooltipPosition;
-    buttonOne: HTMLElement;
-    buttonTwo: HTMLElement;
-    range: HTMLElement;
-    completed: HTMLElement;
-    activeThumb: 'one' | 'two' | null;
-    connectedCallback(): void;
-    firstUpdated(changedProps: Map<string, any>): void;
-    checkValueValidity(value: number, min: number, max: number): number;
-    onMouseMove: (e: MouseEvent) => void;
-    onMouseUp: () => void;
-    onMouseClick: (e: MouseEvent) => void;
-    render(): TemplateResult;
-    disconnectedCallback(): void;
-}
-export default NileSlider;
-declare global {
-    interface HTMLElementTagNameMap {
-        'nile-slider': NileSlider;
-    }
-}