@aquera/nile-elements 0.1.17 → 0.1.19

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

@@ -1 +1 @@
-{"version":3,"file":"nile-tooltip.css.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tooltip CSS\n */\nexport const styles = css`\n  :host {\n    --max-width: 20rem;\n    --hide-delay: 0ms;\n    --show-delay: 150ms;\n\n    display: contents;\n  }\n\n  .tooltip {\n    --arrow-size: 6px;\n    --arrow-color: var(--nile-tooltip-color-background);\n  }\n\n  .tooltip::part(popup) {\n    pointer-events: none;\n    z-index: 1000;\n  }\n\n  .tooltip[placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .tooltip[placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  .tooltip[placement^='left']::part(popup) {\n    transform-origin: right;\n  }\n\n  .tooltip[placement^='right']::part(popup) {\n    transform-origin: left;\n  }\n\n  .tooltip__body {\n    display: block;\n    width: max-content;\n    max-width: var(--max-width);\n    border-radius: 4px;\n    background-color: var(--nile-tooltip-color-background);\n    font-size: var(--nile-tooltip-font-size-sm);\n    font-weight: var(--nile-tooltip-font-weight-sm);\n    line-height: var(--nile-tooltip-line-height-sm);\n    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);\n    color: #ffffff;\n    pointer-events: none;\n    word-break: break-word;\n  }\n\n  .tooltip__body--large {\n    font-size: var(--nile-tooltip-font-size-lg);\n    line-height: var(--nile-tooltip-line-height-lg);\n    font-weight: var(--nile-tooltip-font-weight-lg);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tooltip.css.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tooltip CSS\n */\nexport const styles = css`\n  :host {\n    --max-width: 20rem;\n    --hide-delay: 0ms;\n    --show-delay: 150ms;\n\n    display: contents;\n  }\n\n  .tooltip {\n    --arrow-size: 6px;\n    --arrow-color: var(--nile-tooltip-color-background);\n  }\n\n  .tooltip::part(popup) {\n    pointer-events: none;\n    z-index: 1000;\n  }\n\n  .tooltip[placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .tooltip[placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  .tooltip[placement^='left']::part(popup) {\n    transform-origin: right;\n  }\n\n  .tooltip[placement^='right']::part(popup) {\n    transform-origin: left;\n  }\n\n  .tooltip__body {\n    display: block;\n    width: max-content;\n    max-width: var(--max-width);\n    border-radius: 4px;\n    background-color: var(--nile-tooltip-color-background);\n    font-size: var(--nile-tooltip-font-size-sm);\n    font-weight: var(--nile-tooltip-font-weight-sm);\n    line-height: var(--nile-tooltip-line-height-sm);\n    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);\n    color: var(--nile-colors-white-base);\n    pointer-events: none;\n    word-break: break-word;\n  }\n\n  .tooltip__body--large {\n    font-size: var(--nile-tooltip-font-size-lg);\n    line-height: var(--nile-tooltip-line-height-lg);\n    font-weight: var(--nile-tooltip-font-weight-lg);\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -13,20 +13,21 @@ export const styles = css `
   }
 
   .introjs-tooltip {
-    background-color: var(--nile-tour-background-color, #1978B8);
+    background-color: var(--nile-tour-background-color, #1978b8);
     color: var(--nile-tour-text-color, #fff);
     width: 300px;
     max-width: 300px;
-    border-radius: 4px;
-    border: 1px solid var(--Neutral-30, #1978B8);
-    background: var(--White-Normal, #1978B8);
+    border-radius: 12px;
+    border: 1px solid var(--Neutral-30, #1978b8);
+    background: var(--White-Normal, #1978b8);
+    /* border: 1px solid var(--Neutral-30, #C7CED4); */
 
     /* Elevation/Lifted */
     box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
   .introjs-tooltip-title {
-    color: #ffffff;
+    color: var(--nile-colors-white-base);
     font-size: 16px;
     font-style: normal;
     font-weight: 500;
@@ -40,8 +41,12 @@ export const styles = css `
     padding-top: 18px;
   }
 
+  .introjs-progress {
+    display: none;
+  }
+
   .introjs-tooltiptext {
-    color: #ffffff;
+    color: #c7ced4;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -90,14 +95,14 @@ export const styles = css `
     transform: rotate(0);
     clip-path: inset(0px 1px 0px 0px);
     left: -13.5px;
-    border-right-color: var(--nile-tour-background-color, #fff) !important;
+    border-right-color: var(--nile-tour-background-color, var(--nile-colors-white-base)) !important;
   }
 
   .introjs-arrow.right-bottom {
     right: -12px;
     transform: rotate(180deg);
     clip-path: inset(0px 3px 0px 0px);
-    border-left-color: var(--nile-tour-background-color, #fff) !important;
+    border-left-color: var(--nile-tour-background-color, var(--nile-colors-white-base)) !important;
   }
 
   .introjs-arrow.top-middle {
@@ -111,12 +116,12 @@ export const styles = css `
   .introjs-button {
     background: none;
     border: none;
-    color: var(--nile-tour-text-color, #fff);
+    color: var(--nile-tour-text-color, var(--nile-colors-white-base));
     font-size: 14px;
     padding: 0;
     cursor: pointer;
     text-shadow: none;
-    background: var(--Primary-Normal, #1978B8);
+    background: var(--Primary-Normal, #1978b8);
     border-color: transparent;
     display: flex;
     padding: 12px;
@@ -129,12 +134,12 @@ export const styles = css `
   .introjs-button:hover {
     background: none;
     border: none;
-    color: var(--nile-tour-text-color, #fff);
+    color: var(--nile-tour-text-color, var(--nile-colors-white-base));
     font-size: 14px;
     padding: 0;
     cursor: pointer;
     text-shadow: none;
-    background: var(--Primary-Normal, #1978B8);
+    background: var(--Primary-Normal, #1978b8);
     border-color: transparent;
     display: flex;
     padding: 12px;
@@ -145,13 +150,13 @@ export const styles = css `
   .introjs-button:focus {
     background: none;
     border: none;
-    color: var(--nile-tour-text-color, #fff);
+    color: var(--nile-tour-text-color, var(--nile-colors-white-base));
     font-size: 14px;
     padding: 0;
     cursor: pointer;
     text-shadow: none;
     box-shadow: none;
-    background: var(--Primary-Normal, #1978B8);
+    background: var(--Primary-Normal, #1978b8);
     border-color: transparent;
     display: flex;
     padding: 12px;
@@ -183,13 +188,8 @@ export const styles = css `
   }
 
   .introjs-helperLayer {
-    display: none;
-    pointer-events: none;
-  }
-
-  .introjs-overlay {
-    display: none;
-    pointer-events: none;
+    box-shadow: rgb(33 33 33 / 0%) 0px 0px 1px 2px,
+      rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;
   }
 
   .introjs-step-counter {
@@ -198,7 +198,7 @@ export const styles = css `
     padding: 0 10px;
     display: flex;
     align-items: center;
-    color: var(--Color-Text-Inverted-Secondary, rgba(255, 255, 255, 0.50));
+    color: var(--Color-Text-Inverted-Secondary, rgba(255, 255, 255, 0.5));
     font-style: normal;
     font-weight: 500;
     line-height: 14px;
@@ -226,6 +226,20 @@ export const styles = css `
   .introjs-shake {
     animation: shake 0.5s ease infinite;
   }
+
+  .introjs-close-btn {
+    position: absolute;
+    top: 15px;
+    right: 10px;
+    background: none;
+    border: none;
+    font-size: 16px;
+    cursor: pointer;
+  }
+
+  a[disabled='true'] {
+    display: none;
+  }
 `;
 export default [styles];
 //# sourceMappingURL=nile-tour.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-tour.css.js","sourceRoot":"","sources":["../../../src/nile-tour/nile-tour.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0NxB,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-element';\n\n/**\n * Tour CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .introjs-tooltip {\n    background-color: var(--nile-tour-background-color, #1978B8);\n    color: var(--nile-tour-text-color, #fff);\n    width: 300px;\n    max-width: 300px;\n    border-radius: 4px;\n    border: 1px solid var(--Neutral-30, #1978B8);\n    background: var(--White-Normal, #1978B8);\n\n    /* Elevation/Lifted */\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .introjs-tooltip-title {\n    color: #ffffff;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 16px;\n    letter-spacing: 0.2px;\n  }\n\n  .introjs-tooltip-header {\n    padding-left: 18px;\n    padding-right: 18px;\n    padding-top: 18px;\n  }\n\n  .introjs-tooltiptext {\n    color: #ffffff;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n    padding: 15px 18px;\n  }\n\n  .introjs-arrow {\n    width: 15px;\n    height: 20px;\n    background-image: url('data:image/svg+xml,%3Csvg width=\"15\" height=\"20\" viewBox=\"0 0 15 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M1.13333 11.6C0.0666661 10.8 0.0666662 9.2 1.13333 8.4L11.8 0.400001C13.1185 -0.588854 15 0.351909 15 2L15 18C15 19.6481 13.1185 20.5889 11.8 19.6L1.13333 11.6Z\" fill=\"%231978B8\"/%3E%3C/svg%3E');\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center;\n    position: absolute;\n    border: none;\n    content: none;\n  }\n\n  .introjs-arrow.top {\n    top: -14.5px;\n    transform: rotate(90deg);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-arrow.bottom {\n    bottom: -14.5px;\n    transform: rotate(270deg);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-arrow.left {\n    left: -11.5px;\n    transform: rotate(0);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-arrow.right {\n    right: -12px;\n    transform: rotate(180deg);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-arrow.left-bottom {\n    transform: rotate(0);\n    clip-path: inset(0px 1px 0px 0px);\n    left: -13.5px;\n    border-right-color: var(--nile-tour-background-color, #fff) !important;\n  }\n\n  .introjs-arrow.right-bottom {\n    right: -12px;\n    transform: rotate(180deg);\n    clip-path: inset(0px 3px 0px 0px);\n    border-left-color: var(--nile-tour-background-color, #fff) !important;\n  }\n\n  .introjs-arrow.top-middle {\n    top: -14px;\n    left: 50%;\n    margin-left: -5px;\n    transform: rotate(90deg);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-button {\n    background: none;\n    border: none;\n    color: var(--nile-tour-text-color, #fff);\n    font-size: 14px;\n    padding: 0;\n    cursor: pointer;\n    text-shadow: none;\n    background: var(--Primary-Normal, #1978B8);\n    border-color: transparent;\n    display: flex;\n    padding: 12px;\n    align-items: center;\n    gap: 12px;\n    border-radius: 4px;\n    font-weight: 500;\n  }\n\n  .introjs-button:hover {\n    background: none;\n    border: none;\n    color: var(--nile-tour-text-color, #fff);\n    font-size: 14px;\n    padding: 0;\n    cursor: pointer;\n    text-shadow: none;\n    background: var(--Primary-Normal, #1978B8);\n    border-color: transparent;\n    display: flex;\n    padding: 12px;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .introjs-button:focus {\n    background: none;\n    border: none;\n    color: var(--nile-tour-text-color, #fff);\n    font-size: 14px;\n    padding: 0;\n    cursor: pointer;\n    text-shadow: none;\n    box-shadow: none;\n    background: var(--Primary-Normal, #1978B8);\n    border-color: transparent;\n    display: flex;\n    padding: 12px;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .introjs-tooltipbuttons {\n    border-top: none;\n    display: flex;\n    justify-content: flex-end;\n    gap: 10px;\n  }\n\n  .introjs-helperNumberLayer {\n    display: none;\n  }\n\n  .introjs-bullets {\n    display: none;\n  }\n\n  .introjs-skipbutton {\n    display: none;\n  }\n\n  .introjs-prev-button {\n    color: #c7ced4;\n  }\n\n  .introjs-helperLayer {\n    display: none;\n    pointer-events: none;\n  }\n\n  .introjs-overlay {\n    display: none;\n    pointer-events: none;\n  }\n\n  .introjs-step-counter {\n    margin-right: auto;\n    font-size: 14px;\n    padding: 0 10px;\n    display: flex;\n    align-items: center;\n    color: var(--Color-Text-Inverted-Secondary, rgba(255, 255, 255, 0.50));\n    font-style: normal;\n    font-weight: 500;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  @keyframes shake {\n    0% {\n      transform: translateX(0);\n    }\n    25% {\n      transform: translateX(-5px);\n    }\n    50% {\n      transform: translateX(5px);\n    }\n    75% {\n      transform: translateX(-5px);\n    }\n    100% {\n      transform: translateX(0);\n    }\n  }\n\n  .introjs-shake {\n    animation: shake 0.5s ease infinite;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tour.css.js","sourceRoot":"","sources":["../../../src/nile-tour/nile-tour.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwOxB,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-element';\n\n/**\n * Tour CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .introjs-tooltip {\n    background-color: var(--nile-tour-background-color, #1978b8);\n    color: var(--nile-tour-text-color, #fff);\n    width: 300px;\n    max-width: 300px;\n    border-radius: 12px;\n    border: 1px solid var(--Neutral-30, #1978b8);\n    background: var(--White-Normal, #1978b8);\n    /* border: 1px solid var(--Neutral-30, #C7CED4); */\n\n    /* Elevation/Lifted */\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .introjs-tooltip-title {\n    color: var(--nile-colors-white-base);\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 16px;\n    letter-spacing: 0.2px;\n  }\n\n  .introjs-tooltip-header {\n    padding-left: 18px;\n    padding-right: 18px;\n    padding-top: 18px;\n  }\n\n  .introjs-progress {\n    display: none;\n  }\n\n  .introjs-tooltiptext {\n    color: #c7ced4;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n    padding: 15px 18px;\n  }\n\n  .introjs-arrow {\n    width: 15px;\n    height: 20px;\n    background-image: url('data:image/svg+xml,%3Csvg width=\"15\" height=\"20\" viewBox=\"0 0 15 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M1.13333 11.6C0.0666661 10.8 0.0666662 9.2 1.13333 8.4L11.8 0.400001C13.1185 -0.588854 15 0.351909 15 2L15 18C15 19.6481 13.1185 20.5889 11.8 19.6L1.13333 11.6Z\" fill=\"%231978B8\"/%3E%3C/svg%3E');\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center;\n    position: absolute;\n    border: none;\n    content: none;\n  }\n\n  .introjs-arrow.top {\n    top: -14.5px;\n    transform: rotate(90deg);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-arrow.bottom {\n    bottom: -14.5px;\n    transform: rotate(270deg);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-arrow.left {\n    left: -11.5px;\n    transform: rotate(0);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-arrow.right {\n    right: -12px;\n    transform: rotate(180deg);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-arrow.left-bottom {\n    transform: rotate(0);\n    clip-path: inset(0px 1px 0px 0px);\n    left: -13.5px;\n    border-right-color: var(--nile-tour-background-color, var(--nile-colors-white-base)) !important;\n  }\n\n  .introjs-arrow.right-bottom {\n    right: -12px;\n    transform: rotate(180deg);\n    clip-path: inset(0px 3px 0px 0px);\n    border-left-color: var(--nile-tour-background-color, var(--nile-colors-white-base)) !important;\n  }\n\n  .introjs-arrow.top-middle {\n    top: -14px;\n    left: 50%;\n    margin-left: -5px;\n    transform: rotate(90deg);\n    clip-path: inset(0px 3px 0px 0px);\n  }\n\n  .introjs-button {\n    background: none;\n    border: none;\n    color: var(--nile-tour-text-color, var(--nile-colors-white-base));\n    font-size: 14px;\n    padding: 0;\n    cursor: pointer;\n    text-shadow: none;\n    background: var(--Primary-Normal, #1978b8);\n    border-color: transparent;\n    display: flex;\n    padding: 12px;\n    align-items: center;\n    gap: 12px;\n    border-radius: 4px;\n    font-weight: 500;\n  }\n\n  .introjs-button:hover {\n    background: none;\n    border: none;\n    color: var(--nile-tour-text-color, var(--nile-colors-white-base));\n    font-size: 14px;\n    padding: 0;\n    cursor: pointer;\n    text-shadow: none;\n    background: var(--Primary-Normal, #1978b8);\n    border-color: transparent;\n    display: flex;\n    padding: 12px;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .introjs-button:focus {\n    background: none;\n    border: none;\n    color: var(--nile-tour-text-color, var(--nile-colors-white-base));\n    font-size: 14px;\n    padding: 0;\n    cursor: pointer;\n    text-shadow: none;\n    box-shadow: none;\n    background: var(--Primary-Normal, #1978b8);\n    border-color: transparent;\n    display: flex;\n    padding: 12px;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .introjs-tooltipbuttons {\n    border-top: none;\n    display: flex;\n    justify-content: flex-end;\n    gap: 10px;\n  }\n\n  .introjs-helperNumberLayer {\n    display: none;\n  }\n\n  .introjs-bullets {\n    display: none;\n  }\n\n  .introjs-skipbutton {\n    display: none;\n  }\n\n  .introjs-prev-button {\n    color: #c7ced4;\n  }\n\n  .introjs-helperLayer {\n    box-shadow: rgb(33 33 33 / 0%) 0px 0px 1px 2px,\n      rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;\n  }\n\n  .introjs-step-counter {\n    margin-right: auto;\n    font-size: 14px;\n    padding: 0 10px;\n    display: flex;\n    align-items: center;\n    color: var(--Color-Text-Inverted-Secondary, rgba(255, 255, 255, 0.5));\n    font-style: normal;\n    font-weight: 500;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  @keyframes shake {\n    0% {\n      transform: translateX(0);\n    }\n    25% {\n      transform: translateX(-5px);\n    }\n    50% {\n      transform: translateX(5px);\n    }\n    75% {\n      transform: translateX(-5px);\n    }\n    100% {\n      transform: translateX(0);\n    }\n  }\n\n  .introjs-shake {\n    animation: shake 0.5s ease infinite;\n  }\n\n  .introjs-close-btn {\n    position: absolute;\n    top: 15px;\n    right: 10px;\n    background: none;\n    border: none;\n    font-size: 16px;\n    cursor: pointer;\n  }\n\n  a[disabled='true'] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -5,25 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { LitElement, CSSResultArray, TemplateResult } from 'lit';
-/**
- * Nile tour component.
- *
- * @tag nile-tour
- */
+import introJs from 'intro.js';
 export declare class NileTour extends LitElement {
-    private tourInstance;
-    /**
-     * The steps for the tour.
-     */
-    steps: Array<{
-        stepNo: number;
-        element: string;
-        title: string;
-        content: string;
-        position: any;
-        beforeChange?: () => Promise<boolean> | boolean;
-        afterChange?: () => Promise<void> | void;
-    }>;
+    tourInstance: ReturnType<typeof introJs> | null;
     /**
      * JSON string for steps.
      */
@@ -39,19 +23,12 @@ export declare class NileTour extends LitElement {
     static get styles(): CSSResultArray;
     createRenderRoot(): this;
     constructor();
-    updated(changedProperties: Map<string | number | symbol, unknown>): void;
-    /**
-     * Parses the JSON string and updates the steps array.
-     */
-    private parseStepsJson;
-    /**
-     * Initializes and starts the Intro.js tour.
-     */
-    startTour(): void;
-    private shakeTooltip;
+    private parseSteps;
+    private getElementWhenNeeded;
+    nextStep(): void;
+    startTour(): Promise<void>;
     render(): TemplateResult;
 }
-export default NileTour;
 declare global {
     interface HTMLElementTagNameMap {
         'nile-tour': NileTour;

package/dist/src/nile-tour/nile-tour.js

@@ -5,15 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __decorate } from "tslib";
-import { LitElement, html, } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { styles } from './nile-tour.css';
 import introJs from 'intro.js';
-/**
- * Nile tour component.
- *
- * @tag nile-tour
- */
+import { styles } from './nile-tour.css';
 let NileTour = class NileTour extends LitElement {
     static get styles() {
         return [styles];
@@ -24,10 +19,6 @@ let NileTour = class NileTour extends LitElement {
     constructor() {
         super();
         this.tourInstance = null;
-        /**
-         * The steps for the tour.
-         */
-        this.steps = [];
         /**
          * JSON string for steps.
          */
@@ -41,79 +32,78 @@ let NileTour = class NileTour extends LitElement {
          */
         this.disableInteraction = false;
     }
-    updated(changedProperties) {
-        if (changedProperties.has('stepsJson')) {
-            this.parseStepsJson();
-        }
-        super.updated(changedProperties);
-    }
-    /**
-     * Parses the JSON string and updates the steps array.
-     */
-    parseStepsJson() {
-        if (this.stepsJson) {
-            try {
-                const parsedSteps = JSON.parse(this.stepsJson);
-                if (Array.isArray(parsedSteps)) {
-                    this.steps = parsedSteps;
-                }
-                else {
-                    console.error('Invalid JSON: Expected an array');
-                }
-            }
-            catch (error) {
-                console.error('Failed to parse stepsJson:', error);
-            }
+    parseSteps() {
+        if (Array.isArray(this.stepsJson)) {
+            return this.stepsJson;
         }
+        console.error('Invalid stepsJson format');
+        return [];
     }
-    /**
-     * Initializes and starts the Intro.js tour.
-     */
-    startTour() {
-        console.log('start of tour');
-        const introSteps = this.steps
-            .map((step) => ({
-            element: document.querySelector(`[data-tour="${step.element}"]`),
+    async getElementWhenNeeded(step) {
+        return {
+            element: () => document.querySelector(`[data-tour="${step.element}"]`),
             intro: step.content,
             title: step.title,
             position: step.position,
             beforeChange: step.beforeChange,
             afterChange: step.afterChange,
-        }));
-        // .filter((step) => step.element !== null);
+            disableNext: step.disableNext || false,
+            disablePrev: step.disablePrev || false
+        };
+    }
+    nextStep() {
+        this.tourInstance?.nextStep();
+    }
+    async startTour() {
+        const steps = await Promise.all(this.parseSteps().map(step => this.getElementWhenNeeded(step)));
+        if (steps.length === 0) {
+            console.error('No valid steps found for the tour.');
+            return;
+        }
         this.tourInstance = introJs().setOptions({
-            steps: introSteps,
-            nextLabel: "Next",
-            prevLabel: "Prev",
-            overlayOpacity: 0,
+            steps: steps,
             disableInteraction: this.disableInteraction,
-            showButtons: true,
-            showStepNumbers: false,
+            nextLabel: 'Next',
+            prevLabel: 'Prev',
+            overlayOpacity: this.showBackdrop ? 0.5 : 0,
             exitOnOverlayClick: false,
+            showProgress: false,
+            showButtons: true
         });
         this.tourInstance.onbeforechange(async (targetElement) => {
             const currentStepIndex = this.tourInstance?._currentStep ?? 0;
-            const currentStep = this.steps[currentStepIndex];
-            if (currentStep?.beforeChange) {
-                const result = await currentStep.beforeChange();
-                if (!result) {
-                    this.shakeTooltip();
-                    return false;
+            const step = steps[currentStepIndex];
+            if (step && typeof step.element === 'function') {
+                const el = step.element();
+                if (el) {
+                    if (this.tourInstance && this.tourInstance._introItems) {
+                        this.tourInstance._introItems[currentStepIndex].element = el;
+                    }
                 }
             }
+            if (step.beforeChange) {
+                return await step.beforeChange();
+            }
             return true;
         });
         this.tourInstance.onafterchange((targetElement) => {
             const currentStepIndex = this.tourInstance?._currentStep ?? 0;
-            const currentStep = this.steps[currentStepIndex];
-            if (currentStep?.afterChange) {
-                currentStep.afterChange();
+            const step = steps[currentStepIndex];
+            if (step?.afterChange) {
+                step.afterChange();
+            }
+            const nextBtn = document.querySelector('.introjs-nextbutton');
+            const prevBtn = document.querySelector('.introjs-prevbutton');
+            if (nextBtn) {
+                nextBtn.setAttribute('disabled', step.disableNext ? 'true' : 'false');
+            }
+            if (prevBtn) {
+                prevBtn.setAttribute('disabled', step.disablePrev ? 'true' : 'false');
             }
         });
-        // Update step counter on change
-        this.tourInstance.onchange((targetElement) => {
+        this.tourInstance.onchange(() => {
             const currentStep = this.tourInstance?._currentStep ?? 0;
-            const totalSteps = this.steps.length;
+            const totalSteps = steps.length;
             const tooltip = document.querySelector('.introjs-tooltip');
             if (tooltip) {
                 const navBar = tooltip.querySelector('.introjs-tooltipbuttons');
@@ -130,7 +120,7 @@ let NileTour = class NileTour extends LitElement {
         });
         this.tourInstance.start().then(() => {
             const currentStep = this.tourInstance?._currentStep ?? 0;
-            const totalSteps = this.steps.length;
+            const totalSteps = steps.length;
             const tooltip = document.querySelector('.introjs-tooltip');
             if (tooltip) {
                 const navBar = tooltip.querySelector('.introjs-tooltipbuttons');
@@ -143,32 +133,37 @@ let NileTour = class NileTour extends LitElement {
                     }
                     stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;
                 }
+                const closeButton = document.createElement('button');
+                closeButton.className = 'introjs-close-btn';
+                closeButton.innerHTML = `
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5.33228 5.99996L0 11.3322L0.667759 12L6.00004 6.66772L11.3323 12L12.0001 11.3322L6.66779 5.99996L12 0.667759L11.3322 0L6.00004 5.3322L0.667842 5.96046e-08L8.40425e-05 0.667759L5.33228 5.99996Z" fill="white" fill-opacity="0.5"/>
+          </svg>`;
+                closeButton.onclick = () => this.tourInstance?.exit(true);
+                tooltip.appendChild(closeButton);
             }
         }).catch(err => {
             console.error('Error starting the tour:', err);
         });
     }
-    shakeTooltip() {
-        const tooltip = document.querySelector('.introjs-tooltip');
-        if (tooltip) {
-            tooltip.classList.add('introjs-shake');
-            setTimeout(() => {
-                tooltip.classList.remove('introjs-shake');
-            }, 1500);
-        }
-    }
     render() {
         return html `
       <style>
         ${styles.cssText}
+        .introjs-close-btn {
+          position: absolute;
+          top: 5px;
+          right: 10px;
+          background: none;
+          border: none;
+          cursor: pointer;
+          padding: 0;
+        }
       </style>
       <slot></slot>
     `;
     }
 };
-__decorate([
-    property({ type: Array })
-], NileTour.prototype, "steps", void 0);
 __decorate([
     property({ type: String })
 ], NileTour.prototype, "stepsJson", void 0);
@@ -182,5 +177,4 @@ NileTour = __decorate([
     customElement('nile-tour')
 ], NileTour);
 export { NileTour };
-export default NileTour;
 //# sourceMappingURL=nile-tour.js.map

package/dist/src/nile-tour/nile-tour.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tour.js","sourceRoot":"","sources":["../../../src/nile-tour/nile-tour.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,GAAoC,MAAM,KAAK,CAAC;AACzE,OAAO,EAAE,aAAa,EAAC,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,OAAO,MAAM,UAAU,CAAC;AAE/B;;;;GAIG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAmC/B,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,gBAAgB;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QA3CF,iBAAY,GAAsC,IAAI,CAAC;QAE/D;;WAEG;QAEH,UAAK,GAQA,EAAE,CAAC;QAER;;WAEG;QAEH,cAAS,GAAW,EAAE,CAAC;QAEvB;;WAEG;QAEH,iBAAY,GAAY,KAAK,CAAC;QAE9B;;WAEG;QAEH,uBAAkB,GAAY,KAAK,CAAC;IAYpC,CAAC;IAED,OAAO,CAAC,iBAAyD;QAC/D,IAAI,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YACvC,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QACD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACnC,CAAC;IAED;;OAEG;IACK,cAAc;QACpB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC;gBACH,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;gBAC/C,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;oBAC/B,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;gBAC3B,CAAC;qBAAM,CAAC;oBACN,OAAO,CAAC,KAAK,CAAC,iCAAiC,CAAC,CAAC;gBACnD,CAAC;YACH,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAC;YACrD,CAAC;QACH,CAAC;IACH,CAAC;IAED;;OAEG;IACI,SAAS;QACd,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;QAC7B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK;aAC1B,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YACd,OAAO,EAAE,QAAQ,CAAC,aAAa,CAAC,eAAe,IAAI,CAAC,OAAO,IAAI,CAAuB;YACtF,KAAK,EAAE,IAAI,CAAC,OAAO;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,YAAY,EAAE,IAAI,CAAC,YAAY;YAC/B,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,CAAC,CAAC,CAAC;QACJ,4CAA4C;QAE9C,IAAI,CAAC,YAAY,GAAG,OAAO,EAAE,CAAC,UAAU,CAAC;YACvC,KAAK,EAAE,UAAU;YACjB,SAAS,EAAE,MAAM;YACjB,SAAS,EAAE,MAAM;YACjB,cAAc,EAAE,CAAC;YACjB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;YAC3C,WAAW,EAAE,IAAI;YACjB,eAAe,EAAE,KAAK;YACtB,kBAAkB,EAAE,KAAK;SAC1B,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE;YACvD,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,EAAE,YAAY,IAAI,CAAC,CAAC;YAC9D,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;YAEjD,IAAI,WAAW,EAAE,YAAY,EAAE,CAAC;gBAC9B,MAAM,MAAM,GAAG,MAAM,WAAW,CAAC,YAAY,EAAE,CAAC;gBAChD,IAAI,CAAC,MAAM,EAAE,CAAC;oBACZ,IAAI,CAAC,YAAY,EAAE,CAAC;oBACpB,OAAO,KAAK,CAAC;gBACf,CAAC;YACH,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC,aAAa,EAAE,EAAE;YAChD,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,EAAE,YAAY,IAAI,CAAC,CAAC;YAC9D,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;YAEjD,IAAI,WAAW,EAAE,WAAW,EAAE,CAAC;gBAC7B,WAAW,CAAC,WAAW,EAAE,CAAC;YAC5B,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,gCAAgC;QAChC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,aAAa,EAAE,EAAE;YAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,YAAY,IAAI,CAAC,CAAC;YACzD,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;YACrC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;YAC3D,IAAI,OAAO,EAAE,CAAC;gBACZ,MAAM,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;gBAChE,IAAI,MAAM,EAAE,CAAC;oBACX,IAAI,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC,uBAAuB,CAAgB,CAAC;oBAC/E,IAAI,CAAC,WAAW,EAAE,CAAC;wBACjB,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;wBAC5C,WAAW,CAAC,SAAS,GAAG,sBAAsB,CAAC;wBAC/C,MAAM,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;oBACtD,CAAC;oBACD,WAAW,CAAC,WAAW,GAAG,GAAG,WAAW,GAAG,CAAC,OAAO,UAAU,EAAE,CAAC;gBAClE,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;QAIH,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;YAClC,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,YAAY,IAAI,CAAC,CAAC;YACzD,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;YACrC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;YAC3D,IAAI,OAAO,EAAE,CAAC;gBACZ,MAAM,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;gBAChE,IAAI,MAAM,EAAE,CAAC;oBACX,IAAI,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC,uBAAuB,CAAgB,CAAC;oBAC/E,IAAI,CAAC,WAAW,EAAE,CAAC;wBACjB,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;wBAC5C,WAAW,CAAC,SAAS,GAAG,sBAAsB,CAAC;wBAC/C,MAAM,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;oBACtD,CAAC;oBACD,WAAW,CAAC,WAAW,GAAG,GAAG,WAAW,GAAG,CAAC,OAAO,UAAU,EAAE,CAAC;gBAClE,CAAC;YACH,CAAC;QAAE,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YAClB,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,GAAG,CAAC,CAAC;QACnD,CAAC,CAAC,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QAC3D,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;YACvC,UAAU,CAAC,GAAG,EAAE;gBACd,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;YAC5C,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;UAEL,MAAM,CAAC,OAAO;;;KAGnB,CAAC;IACJ,CAAC;CACF,CAAA;AA9KC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uCASlB;AAMR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACJ;AAMvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACE;AAM9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACQ;AAjCzB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAqLpB;;AAED,eAAe,QAAQ,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 { LitElement, html, CSSResultArray, TemplateResult,  } from 'lit';\nimport { customElement,property } from 'lit/decorators.js';\nimport { styles } from './nile-tour.css';\nimport introJs from 'intro.js';\n\n/**\n * Nile tour component.\n *\n * @tag nile-tour\n */\n@customElement('nile-tour')\nexport class NileTour extends LitElement {\n  private tourInstance: ReturnType<typeof introJs> | null = null;\n\n  /**\n   * The steps for the tour.\n   */\n  @property({ type: Array })\n  steps: Array<{\n    stepNo: number;\n    element: string;\n    title: string;\n    content: string;\n    position: any;\n    beforeChange?: () => Promise<boolean> | boolean;\n    afterChange?: () => Promise<void> | void;\n  }> = [];\n\n  /**\n   * JSON string for steps.\n   */\n  @property({ type: String })\n  stepsJson: string = '';\n\n  /**\n   * Whether to show the backdrop overlay.\n   */\n  @property({ type: Boolean })\n  showBackdrop: boolean = false;\n\n  /**\n   * Whether to disable interaction during the tour.\n   */\n  @property({ type: Boolean })\n  disableInteraction: boolean = false;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  createRenderRoot() {\n    return this;\n  }\n\n  constructor() {\n    super();\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    if (changedProperties.has('stepsJson')) {\n      this.parseStepsJson();\n    }\n    super.updated(changedProperties);\n  }\n\n  /**\n   * Parses the JSON string and updates the steps array.\n   */\n  private parseStepsJson(): void {\n    if (this.stepsJson) {\n      try {\n        const parsedSteps = JSON.parse(this.stepsJson);\n        if (Array.isArray(parsedSteps)) {\n          this.steps = parsedSteps;\n        } else {\n          console.error('Invalid JSON: Expected an array');\n        }\n      } catch (error) {\n        console.error('Failed to parse stepsJson:', error);\n      }\n    }\n  }\n\n  /**\n   * Initializes and starts the Intro.js tour.\n   */\n  public startTour(): void {\n    console.log('start of tour');\n    const introSteps = this.steps\n      .map((step) => ({\n        element: document.querySelector(`[data-tour=\"${step.element}\"]`) as HTMLElement | null,\n        intro: step.content,\n        title: step.title,\n        position: step.position,\n        beforeChange: step.beforeChange,\n        afterChange: step.afterChange,\n      }));\n      // .filter((step) => step.element !== null);\n\n    this.tourInstance = introJs().setOptions({\n      steps: introSteps,\n      nextLabel: \"Next\",\n      prevLabel: \"Prev\",\n      overlayOpacity: 0,\n      disableInteraction: this.disableInteraction,\n      showButtons: true,\n      showStepNumbers: false,\n      exitOnOverlayClick: false,\n    });\n\n    this.tourInstance.onbeforechange(async (targetElement) => {\n      const currentStepIndex = this.tourInstance?._currentStep ?? 0;\n      const currentStep = this.steps[currentStepIndex];\n\n      if (currentStep?.beforeChange) {\n        const result = await currentStep.beforeChange();\n        if (!result) {\n          this.shakeTooltip();\n          return false;\n        }\n      }\n      return true;\n    });\n\n    this.tourInstance.onafterchange((targetElement) => {\n      const currentStepIndex = this.tourInstance?._currentStep ?? 0;\n      const currentStep = this.steps[currentStepIndex];\n\n      if (currentStep?.afterChange) {\n        currentStep.afterChange();\n      }\n    });\n\n    // Update step counter on change\n    this.tourInstance.onchange((targetElement) => {\n      const currentStep = this.tourInstance?._currentStep ?? 0;\n      const totalSteps = this.steps.length;\n      const tooltip = document.querySelector('.introjs-tooltip');\n      if (tooltip) {\n        const navBar = tooltip.querySelector('.introjs-tooltipbuttons');\n        if (navBar) {\n          let stepCounter = navBar.querySelector('.introjs-step-counter') as HTMLElement;\n          if (!stepCounter) {\n            stepCounter = document.createElement('div');\n            stepCounter.className = 'introjs-step-counter';\n            navBar.insertBefore(stepCounter, navBar.firstChild);\n          }\n          stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;\n        }\n      }\n    });\n\n\n\n    this.tourInstance.start().then(() => {\n      const currentStep = this.tourInstance?._currentStep ?? 0;\n      const totalSteps = this.steps.length;\n      const tooltip = document.querySelector('.introjs-tooltip');\n      if (tooltip) {\n        const navBar = tooltip.querySelector('.introjs-tooltipbuttons');\n        if (navBar) {\n          let stepCounter = navBar.querySelector('.introjs-step-counter') as HTMLElement;\n          if (!stepCounter) {\n            stepCounter = document.createElement('div');\n            stepCounter.className = 'introjs-step-counter';\n            navBar.insertBefore(stepCounter, navBar.firstChild);\n          }\n          stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;\n        }\n      }  }).catch(err => {\n      console.error('Error starting the tour:', err);\n  });\n  }\n\n  private shakeTooltip(): void {\n    const tooltip = document.querySelector('.introjs-tooltip');\n    if (tooltip) {\n      tooltip.classList.add('introjs-shake');\n      setTimeout(() => {\n        tooltip.classList.remove('introjs-shake');\n      }, 1500);\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <style>\n        ${styles.cssText}\n      </style>\n      <slot></slot>\n    `;\n  }\n}\n\nexport default NileTour;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tour': NileTour;\n  }\n}\n"]}
+{"version":3,"file":"nile-tour.js","sourceRoot":"","sources":["../../../src/nile-tour/nile-tour.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,OAAO,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAGlC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAqB/B,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,gBAAgB;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QA7BV,iBAAY,GAAsC,IAAI,CAAC;QAEvD;;WAEG;QAEH,cAAS,GAAW,EAAE,CAAC;QAEvB;;WAEG;QAEH,iBAAY,GAAY,KAAK,CAAC;QAE9B;;WAEG;QAEH,uBAAkB,GAAY,KAAK,CAAC;IAYpC,CAAC;IAEO,UAAU;QAChB,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;YAClC,OAAO,IAAI,CAAC,SAAS,CAAC;QACxB,CAAC;QAED,OAAO,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAC;QAC1C,OAAO,EAAE,CAAC;IACZ,CAAC;IAEO,KAAK,CAAC,oBAAoB,CAAC,IAAS;QAC1C,OAAO;YACL,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,eAAe,IAAI,CAAC,OAAO,IAAI,CAAuB;YAC5F,KAAK,EAAE,IAAI,CAAC,OAAO;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,YAAY,EAAE,IAAI,CAAC,YAAY;YAC/B,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,KAAK;YACtC,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,KAAK;SACvC,CAAC;IACJ,CAAC;IAEM,QAAQ;QACb,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,CAAC;IAChC,CAAC;IAEM,KAAK,CAAC,SAAS;QACpB,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAEhG,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACvB,OAAO,CAAC,KAAK,CAAC,oCAAoC,CAAC,CAAC;YACpD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,GAAG,OAAO,EAAE,CAAC,UAAU,CAAC;YACvC,KAAK,EAAE,KAAY;YACnB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;YAC3C,SAAS,EAAE,MAAM;YACjB,SAAS,EAAE,MAAM;YACjB,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YAC3C,kBAAkB,EAAE,KAAK;YACzB,YAAY,EAAE,KAAK;YACnB,WAAW,EAAE,IAAI;SAClB,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE;YACvD,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,EAAE,YAAY,IAAI,CAAC,CAAC;YAC9D,MAAM,IAAI,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;YACrC,IAAI,IAAI,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;gBAC/C,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;gBAC1B,IAAI,EAAE,EAAE,CAAC;oBACP,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC;wBACvD,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,OAAO,GAAG,EAAE,CAAC;oBAC/D,CAAC;gBACH,CAAC;YACH,CAAC;YACD,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;gBACtB,OAAO,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;YACnC,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC,aAAa,EAAE,EAAE;YAChD,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,EAAE,YAAY,IAAI,CAAC,CAAC;YAC9D,MAAM,IAAI,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;YACrC,IAAI,IAAI,EAAE,WAAW,EAAE,CAAC;gBACtB,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;YAGD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;YAC9D,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;YAE9D,IAAI,OAAO,EAAE,CAAC;gBACZ,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;YACxE,CAAC;YACD,IAAI,OAAO,EAAE,CAAC;gBACZ,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;YACxE,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,GAAG,EAAE;YAC9B,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,YAAY,IAAI,CAAC,CAAC;YACzD,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC;YAChC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;YAC3D,IAAI,OAAO,EAAE,CAAC;gBACZ,MAAM,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;gBAChE,IAAI,MAAM,EAAE,CAAC;oBACX,IAAI,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC,uBAAuB,CAAgB,CAAC;oBAC/E,IAAI,CAAC,WAAW,EAAE,CAAC;wBACjB,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;wBAC5C,WAAW,CAAC,SAAS,GAAG,sBAAsB,CAAC;wBAC/C,MAAM,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;oBACtD,CAAC;oBACD,WAAW,CAAC,WAAW,GAAG,GAAG,WAAW,GAAG,CAAC,OAAO,UAAU,EAAE,CAAC;gBAClE,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;YAClC,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,YAAY,IAAI,CAAC,CAAC;YACzD,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC;YAChC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;YAC3D,IAAI,OAAO,EAAE,CAAC;gBACZ,MAAM,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;gBAChE,IAAI,MAAM,EAAE,CAAC;oBACX,IAAI,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC,uBAAuB,CAAgB,CAAC;oBAC/E,IAAI,CAAC,WAAW,EAAE,CAAC;wBACjB,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;wBAC5C,WAAW,CAAC,SAAS,GAAG,sBAAsB,CAAC;wBAC/C,MAAM,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;oBACtD,CAAC;oBACD,WAAW,CAAC,WAAW,GAAG,GAAG,WAAW,GAAG,CAAC,OAAO,UAAU,EAAE,CAAC;gBAClE,CAAC;gBAED,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;gBACrD,WAAW,CAAC,SAAS,GAAG,mBAAmB,CAAC;gBAC5C,WAAW,CAAC,SAAS,GAAG;;;iBAGf,CAAC;gBACV,WAAW,CAAC,OAAO,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC1D,OAAO,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;YACnC,CAAC;QACH,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YACb,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,GAAG,CAAC,CAAC;QACjD,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;UAEL,MAAM,CAAC,OAAO;;;;;;;;;;;;KAYnB,CAAC;IACJ,CAAC;CACF,CAAA;AA5KC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACJ;AAMvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACE;AAM9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACQ;AAnBzB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAmLpB","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 { LitElement, html, css, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport introJs from 'intro.js';\nimport { styles } from './nile-tour.css';\n\n@customElement('nile-tour')\nexport class NileTour extends LitElement {\n  tourInstance: ReturnType<typeof introJs> | null = null;\n\n  /**\n   * JSON string for steps.\n   */\n  @property({ type: String })\n  stepsJson: string = '';\n\n  /**\n   * Whether to show the backdrop overlay.\n   */\n  @property({ type: Boolean })\n  showBackdrop: boolean = false;\n\n  /**\n   * Whether to disable interaction during the tour.\n   */\n  @property({ type: Boolean })\n  disableInteraction: boolean = false;\n  \n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  createRenderRoot() {\n    return this;\n  }\n\n  constructor() {\n    super();\n  }\n\n  private parseSteps(): any[] {\n    if (Array.isArray(this.stepsJson)) {\n      return this.stepsJson;\n    }\n    \n    console.error('Invalid stepsJson format');\n    return [];\n  }\n\n  private async getElementWhenNeeded(step: any): Promise<any> {\n    return {\n      element: () => document.querySelector(`[data-tour=\"${step.element}\"]`) as HTMLElement | null,\n      intro: step.content,\n      title: step.title,\n      position: step.position,\n      beforeChange: step.beforeChange,\n      afterChange: step.afterChange,\n      disableNext: step.disableNext || false,\n      disablePrev: step.disablePrev || false\n    };\n  }\n\n  public nextStep() {\n    this.tourInstance?.nextStep();\n  }\n  \n  public async startTour(): Promise<void> {\n    const steps = await Promise.all(this.parseSteps().map(step => this.getElementWhenNeeded(step)));\n\n    if (steps.length === 0) {\n      console.error('No valid steps found for the tour.');\n      return;\n    }\n\n    this.tourInstance = introJs().setOptions({\n      steps: steps as any,\n      disableInteraction: this.disableInteraction,\n      nextLabel: 'Next',\n      prevLabel: 'Prev',\n      overlayOpacity: this.showBackdrop ? 0.5 : 0,\n      exitOnOverlayClick: false,\n      showProgress: false,\n      showButtons: true\n    });\n\n    this.tourInstance.onbeforechange(async (targetElement) => {\n      const currentStepIndex = this.tourInstance?._currentStep ?? 0;\n      const step = steps[currentStepIndex];\n      if (step && typeof step.element === 'function') {\n        const el = step.element();\n        if (el) {\n          if (this.tourInstance && this.tourInstance._introItems) {\n            this.tourInstance._introItems[currentStepIndex].element = el;\n          }\n        }\n      }\n      if (step.beforeChange) {\n        return await step.beforeChange();\n      }\n      return true;\n    });\n\n    this.tourInstance.onafterchange((targetElement) => {\n      const currentStepIndex = this.tourInstance?._currentStep ?? 0;\n      const step = steps[currentStepIndex];\n      if (step?.afterChange) {\n        step.afterChange();\n      }\n\n      \n      const nextBtn = document.querySelector('.introjs-nextbutton');\n      const prevBtn = document.querySelector('.introjs-prevbutton');\n\n      if (nextBtn) {\n        nextBtn.setAttribute('disabled', step.disableNext ? 'true' : 'false');\n      }\n      if (prevBtn) {\n        prevBtn.setAttribute('disabled', step.disablePrev ? 'true' : 'false');\n      }\n    });\n\n    this.tourInstance.onchange(() => {\n      const currentStep = this.tourInstance?._currentStep ?? 0;\n      const totalSteps = steps.length;\n      const tooltip = document.querySelector('.introjs-tooltip');\n      if (tooltip) {\n        const navBar = tooltip.querySelector('.introjs-tooltipbuttons');\n        if (navBar) {\n          let stepCounter = navBar.querySelector('.introjs-step-counter') as HTMLElement;\n          if (!stepCounter) {\n            stepCounter = document.createElement('div');\n            stepCounter.className = 'introjs-step-counter';\n            navBar.insertBefore(stepCounter, navBar.firstChild);\n          }\n          stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;\n        }\n      }\n    });\n\n    this.tourInstance.start().then(() => {\n      const currentStep = this.tourInstance?._currentStep ?? 0;\n      const totalSteps = steps.length;\n      const tooltip = document.querySelector('.introjs-tooltip');\n      if (tooltip) {\n        const navBar = tooltip.querySelector('.introjs-tooltipbuttons');\n        if (navBar) {\n          let stepCounter = navBar.querySelector('.introjs-step-counter') as HTMLElement;\n          if (!stepCounter) {\n            stepCounter = document.createElement('div');\n            stepCounter.className = 'introjs-step-counter';\n            navBar.insertBefore(stepCounter, navBar.firstChild);\n          }\n          stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;\n        }\n\n        const closeButton = document.createElement('button');\n        closeButton.className = 'introjs-close-btn';\n        closeButton.innerHTML = `\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.33228 5.99996L0 11.3322L0.667759 12L6.00004 6.66772L11.3323 12L12.0001 11.3322L6.66779 5.99996L12 0.667759L11.3322 0L6.00004 5.3322L0.667842 5.96046e-08L8.40425e-05 0.667759L5.33228 5.99996Z\" fill=\"white\" fill-opacity=\"0.5\"/>\n          </svg>`;\n        closeButton.onclick = () => this.tourInstance?.exit(true);\n        tooltip.appendChild(closeButton);\n      }\n    }).catch(err => {\n      console.error('Error starting the tour:', err);\n    });\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <style>\n        ${styles.cssText}\n        .introjs-close-btn {\n          position: absolute;\n          top: 5px;\n          right: 10px;\n          background: none;\n          border: none;\n          cursor: pointer;\n          padding: 0;\n        }\n      </style>\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tour': NileTour;\n  }\n}\n"]}

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

@@ -28,7 +28,7 @@ export const styles = css `
      * These are actually used by tree item, but we define them here so they can more easily be set and all tree items
      * stay consistent.
      */
-    --indent-guide-color: #F5F7F7;
+    --indent-guide-color: var(--nile-colors-dark-200);
     --indent-guide-offset: 0;
     --indent-guide-style: solid;
     --indent-guide-width: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"nile-tree.css.js","sourceRoot":"","sources":["../../../src/nile-tree/nile-tree.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCxB,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 * Tree CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    /*\n     * These are actually used by tree item, but we define them here so they can more easily be set and all tree items\n     * stay consistent.\n     */\n    --indent-guide-color: #F5F7F7;\n    --indent-guide-offset: 0;\n    --indent-guide-style: solid;\n    --indent-guide-width: 0;\n    --indent-size: 1.25rem;\n\n    display: block;\n    isolation: isolate;\n\n    /*\n     * Tree item indentation uses the \"em\" unit to increment its width on each level, so setting the font size to zero\n     * here removes the indentation for all the nodes on the first level.\n     */\n    font-size: 0;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tree.css.js","sourceRoot":"","sources":["../../../src/nile-tree/nile-tree.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCxB,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 * Tree CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    /*\n     * These are actually used by tree item, but we define them here so they can more easily be set and all tree items\n     * stay consistent.\n     */\n    --indent-guide-color: var(--nile-colors-dark-200);\n    --indent-guide-offset: 0;\n    --indent-guide-style: solid;\n    --indent-guide-width: 0;\n    --indent-size: 1.25rem;\n\n    display: block;\n    isolation: isolate;\n\n    /*\n     * Tree item indentation uses the \"em\" unit to increment its width on each level, so setting the font size to zero\n     * here removes the indentation for all the nodes on the first level.\n     */\n    font-size: 0;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-tree-item/nile-tree-item.css.js

@@ -42,7 +42,7 @@ export const styles = css `
     display: flex;
     align-items: stretch;
     flex-direction: column;
-    color: #777D82;
+    color: var(--nile-colors-neutral-700);
     cursor: pointer;
     user-select: none;
   }
@@ -75,7 +75,7 @@ export const styles = css `
     align-items: center;
     justify-content: center;
     box-sizing: content-box;
-    color: #C7CED4;
+    color: var(--nile-colors-neutral-500);
     padding: 0.5rem;
     width: 1rem;
     height: 1rem;
@@ -121,18 +121,18 @@ export const styles = css `
   }
 
   :host(:focus-visible) .tree-item__item {
-    outline: solid 3px #C7CED4;
+    outline: solid 3px var(--nile-colors-neutral-500);
     outline-offset: 1px;
     z-index: 2;
   }
 
   :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
-    background-color: #eaecf0;
-    border-inline-start-color: #035da6;
+    background-color: var(--nile-colors-neutral-700);
+    border-inline-start-color: var(--nile-colors-primary-700);
   }
 
   :host(:not([aria-disabled='true'])) .tree-item__expand-button {
-    color: #777D82;
+    color: var(--nile-colors-neutral-700);
   }
 
   .tree-item__label {

package/dist/src/nile-tree-item/nile-tree-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tree-item.css.js","sourceRoot":"","sources":["../../../src/nile-tree-item/nile-tree-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKxB,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 * TreeItem CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n    outline: 0;\n    z-index: 0;\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  slot:not([name])::slotted(nile-icon) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .tree-item {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    flex-direction: column;\n    color: #777D82;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .tree-item__checkbox {\n    pointer-events: none;\n  }\n\n  .tree-item__expand-button,\n  .tree-item__checkbox,\n  .tree-item__label {\n    font-family: var(--nile-font-family-serif);\n    font-size: 16px;\n    font-weight: 400;\n  }\n\n  .tree-item__checkbox::part(base) {\n    display: flex;\n    align-items: center;\n  }\n\n  .tree-item__indentation {\n    display: block;\n    width: 1em;\n    flex-shrink: 0;\n  }\n\n  .tree-item__expand-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: content-box;\n    color: #C7CED4;\n    padding: 0.5rem;\n    width: 1rem;\n    height: 1rem;\n    flex-shrink: 0;\n    cursor: pointer;\n  }\n\n  .tree-item__expand-button {\n    transition: 250ms rotate ease;\n  }\n\n  .tree-item--expanded .tree-item__expand-button {\n    rotate: 90deg;\n  }\n\n  .tree-item--expanded.tree-item--rtl .tree-item__expand-button {\n    rotate: -90deg;\n  }\n\n  .tree-item--expanded slot[name='expand-icon'],\n  .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {\n    display: none;\n  }\n\n  .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {\n    display: none;\n  }\n\n  .tree-item__expand-button--visible {\n    cursor: pointer;\n  }\n\n  .tree-item__item {\n    display: flex;\n    align-items: center;\n    border-inline-start: solid 3px transparent;\n  }\n\n  .tree-item--disabled .tree-item__item {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n\n  :host(:focus-visible) .tree-item__item {\n    outline: solid 3px #C7CED4;\n    outline-offset: 1px;\n    z-index: 2;\n  }\n\n  :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n    background-color: #eaecf0;\n    border-inline-start-color: #035da6;\n  }\n\n  :host(:not([aria-disabled='true'])) .tree-item__expand-button {\n    color: #777D82;\n  }\n\n  .tree-item__label {\n    display: flex;\n    align-items: center;\n    transition: 150ms color;\n  }\n\n  .tree-item__children {\n    display: block;\n    font-size: calc(1em + var(--indent-size, 1rem));\n  }\n\n  /* Indentation lines */\n  .tree-item__children {\n    position: relative;\n  }\n\n  .tree-item__children::before {\n    content: '';\n    position: absolute;\n    top: var(--indent-guide-offset);\n    bottom: var(--indent-guide-offset);\n    left: calc(1em - (var(--indent-guide-width) / 2) - 1px);\n    border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);\n    z-index: 1;\n  }\n\n  .tree-item--rtl .tree-item__children::before {\n    left: auto;\n    right: 1em;\n  }\n\n  @media (forced-colors: active) {\n    :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n      outline: dashed 1px SelectedItem;\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tree-item.css.js","sourceRoot":"","sources":["../../../src/nile-tree-item/nile-tree-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKxB,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 * TreeItem CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n    outline: 0;\n    z-index: 0;\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  slot:not([name])::slotted(nile-icon) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .tree-item {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    flex-direction: column;\n    color: var(--nile-colors-neutral-700);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .tree-item__checkbox {\n    pointer-events: none;\n  }\n\n  .tree-item__expand-button,\n  .tree-item__checkbox,\n  .tree-item__label {\n    font-family: var(--nile-font-family-serif);\n    font-size: 16px;\n    font-weight: 400;\n  }\n\n  .tree-item__checkbox::part(base) {\n    display: flex;\n    align-items: center;\n  }\n\n  .tree-item__indentation {\n    display: block;\n    width: 1em;\n    flex-shrink: 0;\n  }\n\n  .tree-item__expand-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: content-box;\n    color: var(--nile-colors-neutral-500);\n    padding: 0.5rem;\n    width: 1rem;\n    height: 1rem;\n    flex-shrink: 0;\n    cursor: pointer;\n  }\n\n  .tree-item__expand-button {\n    transition: 250ms rotate ease;\n  }\n\n  .tree-item--expanded .tree-item__expand-button {\n    rotate: 90deg;\n  }\n\n  .tree-item--expanded.tree-item--rtl .tree-item__expand-button {\n    rotate: -90deg;\n  }\n\n  .tree-item--expanded slot[name='expand-icon'],\n  .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {\n    display: none;\n  }\n\n  .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {\n    display: none;\n  }\n\n  .tree-item__expand-button--visible {\n    cursor: pointer;\n  }\n\n  .tree-item__item {\n    display: flex;\n    align-items: center;\n    border-inline-start: solid 3px transparent;\n  }\n\n  .tree-item--disabled .tree-item__item {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n\n  :host(:focus-visible) .tree-item__item {\n    outline: solid 3px var(--nile-colors-neutral-500);\n    outline-offset: 1px;\n    z-index: 2;\n  }\n\n  :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n    background-color: var(--nile-colors-neutral-700);\n    border-inline-start-color: var(--nile-colors-primary-700);\n  }\n\n  :host(:not([aria-disabled='true'])) .tree-item__expand-button {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .tree-item__label {\n    display: flex;\n    align-items: center;\n    transition: 150ms color;\n  }\n\n  .tree-item__children {\n    display: block;\n    font-size: calc(1em + var(--indent-size, 1rem));\n  }\n\n  /* Indentation lines */\n  .tree-item__children {\n    position: relative;\n  }\n\n  .tree-item__children::before {\n    content: '';\n    position: absolute;\n    top: var(--indent-guide-offset);\n    bottom: var(--indent-guide-offset);\n    left: calc(1em - (var(--indent-guide-width) / 2) - 1px);\n    border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);\n    z-index: 1;\n  }\n\n  .tree-item--rtl .tree-item__children::before {\n    left: auto;\n    right: 1em;\n  }\n\n  @media (forced-colors: active) {\n    :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n      outline: dashed 1px SelectedItem;\n    }\n  }\n`;\n\nexport default [styles];\n"]}