@aquera/nile-elements 0.1.39-beta-1.0 → 0.1.39-beta-1.2

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

@@ -1 +1 @@
-{"version":3,"file":"nile-toast.css.js","sourceRoot":"","sources":["../../../src/nile-toast/nile-toast.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLxB,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 * Toast CSS\n */\nexport const styles = css`\n  :host {\n    display: contents;\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: var(--nile-spacing-none);\n  }\n\n  .alert {\n    max-width: 100%;\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    border: solid 2px 2px;\n    border-radius: var(--nile-radius-md, var(--ng-radius-xl));\n    margin: inherit;\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    width: max-content;\n    min-width: 400px;\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  .alert__prefix-icon-container {\n    background-color: var(--nile-colors-red-500);\n    border-radius: var(--nile-radius-sm);\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .alert__icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: var(--nile-type-scale-1);\n  }\n\n  .alert--success {\n    border: 1px solid var(--nile-toast-color-border-success, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-success, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--success .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-success, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--info {\n    border: 1px solid var(--nile-toast-color-border-info, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-info, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--info .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-info, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--warning {\n    border: 1px solid var(--nile-toast-color-border-warning, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-warning, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--warning .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-warning, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--error {\n    border: 1px solid var(--nile-toast-color-border-error, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-error, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--error .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-error, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--gray {\n    border: 1px solid var(--nile-toast-color-border-gray, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-gray, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--gray .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-gray, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--black {\n    border: 1px solid var(--nile-toast-color-border-black);\n    background: var(--nile-toast-color-background-black);\n    box-shadow: var(--nile-toast-color-box-black);\n  }\n\n  .alert--black .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-black);\n  }\n\n  .alert__message {\n    flex: 1 1 auto;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    align-items: flex-start;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-display));\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-dark-900);\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .alert__message--title {\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n    color:var(--nile-colors-dark-900, var(--ng-colors-primary-900));\n  }\n\n  .alert__message--content {\n    font-weight:var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  .alert__message--content-only {\n  }\n\n  .alert__close-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .alert__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .alert__tag {\n    height: 24px;\n    display: flex;\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n    border: 1px solid var(--nile-colors-neutral-400);\n    background: var(--nile-colors-white-base);\n  }\n\n  .alert__tag-content {\n    border-left: 1px solid var(--nile-colors-neutral-400);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-sm, var(--ng-spacing-sm));\n\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    font-family:  var(--nile-font-family-serif, var(--ng-font-family-display));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-600));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .alert__tag-image {\n    height: 24px;\n    width: 24px;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));\n  }\n\n  .alert__prefix-img {\n    height: 24px;\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  }\n\n  .alert--no-content{\n    align-items:center ;\n  }\n\n  [hidden] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-toast.css.js","sourceRoot":"","sources":["../../../src/nile-toast/nile-toast.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4LxB,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 * Toast CSS\n */\nexport const styles = css`\n  :host {\n    display: contents;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: var(--nile-spacing-none);\n  }\n\n  .alert {\n    max-width: 100%;\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    border: solid 2px 2px;\n    border-radius: var(--nile-radius-md, var(--ng-radius-xl));\n    margin: inherit;\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    width: max-content;\n    min-width: 400px;\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  .alert__prefix-icon-container {\n    background-color: var(--nile-colors-red-500);\n    border-radius: var(--nile-radius-sm);\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .alert__icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: var(--nile-type-scale-1);\n  }\n\n  .alert--success {\n    border: 1px solid var(--nile-toast-color-border-success, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-success, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--success .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-success, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--info {\n    border: 1px solid var(--nile-toast-color-border-info, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-info, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--info .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-info, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--warning {\n    border: 1px solid var(--nile-toast-color-border-warning, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-warning, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--warning .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-warning, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--error {\n    border: 1px solid var(--nile-toast-color-border-error, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-error, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--error .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-error, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--gray {\n    border: 1px solid var(--nile-toast-color-border-gray, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-gray, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--gray .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-gray, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--black {\n    border: 1px solid var(--nile-toast-color-border-black);\n    background: var(--nile-toast-color-background-black);\n    box-shadow: var(--nile-toast-color-box-black);\n  }\n\n  .alert--black .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-black);\n  }\n\n  .alert__message {\n    flex: 1 1 auto;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    align-items: flex-start;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-display));\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-dark-900);\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .alert__message--title {\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n    color:var(--nile-colors-dark-900, var(--ng-colors-primary-900));\n  }\n\n  .alert__message--content {\n    font-weight:var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  .alert__message--content-only {\n  }\n\n  .alert__close-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .alert__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .alert__tag {\n    height: 24px;\n    display: flex;\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n    border: 1px solid var(--nile-colors-neutral-400);\n    background: var(--nile-colors-white-base);\n  }\n\n  .alert__tag-content {\n    border-left: 1px solid var(--nile-colors-neutral-400);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-sm, var(--ng-spacing-sm));\n\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    font-family:  var(--nile-font-family-serif, var(--ng-font-family-display));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-600));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .alert__tag-image {\n    height: 24px;\n    width: 24px;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));\n  }\n\n  .alert__prefix-img {\n    height: 24px;\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  }\n\n  .alert--no-content{\n    align-items:center ;\n  }\n\n  [hidden] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -12,6 +12,9 @@ export const styles = css `
   :host {
     display: block;
     width: 100%;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .toolbar {

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

@@ -1 +1 @@
-{"version":3,"file":"nile-toolbar.css.js","sourceRoot":"","sources":["../../../src/nile-toolbar/nile-toolbar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoBxB,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 * Toolbar CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .toolbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 48px;\n    box-sizing: border-box;\n    min-height: 64px;\n    line-height: var(--nile-toolbar-line-height, var(--ng-line-height-text-xl));\n    font-weight: var(--nile-toolbar-font-weight, var(--ng-font-weight-500));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-size: var(--nile-toolbar-font-size, var(--ng-font-size-text-xl));\n    background-color: var(--nile-toolbar-background-color, var(--ng-colors-text-primary-on-brand));\n    color: var(--nile-toolbar-text-color, var(--ng-color-base-black));\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-toolbar.css.js","sourceRoot":"","sources":["../../../src/nile-toolbar/nile-toolbar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;CAuBxB,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 * Toolbar CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .toolbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 48px;\n    box-sizing: border-box;\n    min-height: 64px;\n    line-height: var(--nile-toolbar-line-height, var(--ng-line-height-text-xl));\n    font-weight: var(--nile-toolbar-font-weight, var(--ng-font-weight-500));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-size: var(--nile-toolbar-font-size, var(--ng-font-size-text-xl));\n    background-color: var(--nile-toolbar-background-color, var(--ng-colors-text-primary-on-brand));\n    color: var(--nile-toolbar-text-color, var(--ng-color-base-black));\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -9,93 +9,65 @@ import { css } from 'lit';
  * Tooltip CSS
  */
 export const styles = css `
-
-
-:host {
-      position: relative;
-      display: inline-block;
-    }
-    .tooltip {
-      position: fixed;
-      z-index: 1000;
-      background-color: var(--nile-tooltip-color-background, var(--ng-colors-bg-primary-solid));
-      color: var(--nile-colors-white-base, var(--ng-color-base-white));
-      padding: var(--nile-spacing-lg, var(--ng-spacing-lg));
-      border-radius: var(--nile-radius-sm, var(--ng-spacing-md));
-      font-size: var(--nile-tooltip-font-size-sm);
-      line-height: var(--nile-tooltip-line-height-sm);
-      opacity: 0;
-      transition: opacity 0.2s, transform 0.2s;
-      pointer-events: none;
-      white-space: normal;
-      visibility: hidden;
-      overflow: visible;
- 
-    }
-    :host([open]) .tooltip {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: auto;
-    }
-    .tooltip-content {
-      overflow: auto;
-      max-width: 250px;
-      max-height: 116px;
-    }
-    .tooltip-caret {
-      position: absolute;
-      width: calc(2 * var(--caret-size, 6px));
-      height: calc(2 * var(--caret-size, 6px));
-      background-color: inherit;
-      transform: rotate(45deg);
-      z-index: -1;
-    }
-    .trigger-container {
-      display: inline-block;
-    }
- 
- 
-:host([open]) .tooltip {
-  visibility: visible;
-  pointer-events: auto;
-  animation: fadeIn 150ms forwards;
-}
-
- 
-.tooltip.hide {
-  animation: fadeOut 100ms forwards;
-}
-
- 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(5px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+  :host {
+    --max-width: 20rem;
+    --hide-delay: 0ms;
+    --show-delay: 150ms;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+    
+    display: contents;
   }
-}
 
- 
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-    transform: translateY(0);
+  .tooltip {
+    --arrow-size: 5px;
+    --arrow-color: var(--nile-tooltip-color-background, var(--ng-colors-bg-primary-solid));
   }
-  to {
-    opacity: 0;
-    transform: translateY(5px);
+
+  .tooltip::part(popup) {
+    pointer-events: none;
+    z-index: 1000;
   }
-}
 
+  .tooltip[placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
 
+  .tooltip[placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
 
+  .tooltip[placement^='left']::part(popup) {
+    transform-origin: right;
+  }
 
+  .tooltip[placement^='right']::part(popup) {
+    transform-origin: left;
+  }
 
+  .tooltip__body {
+    display: block;
+    width: max-content;
+    max-width: var(--max-width);
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    background-color: var(--nile-tooltip-color-background, var(--ng-colors-bg-primary-solid));
+    font-size: var(--nile-tooltip-font-size-sm, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-tooltip-font-weight-sm, var(--ng-font-weight-600));
+    line-height: var(--nile-tooltip-line-height-sm, var(--ng-line-height-text-xs));
+    padding: var(--nile-tooltip-padding-y, var(--ng-spacing-md)) var(--nile-tooltip-padding-x, var(--ng-spacing-md));
+    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+    pointer-events: none;
+    word-break: break-word;
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    box-shadow:var(--nile-box-shadow-none, var(--ng-shadow-lg));
+  }
 
- 
+  .tooltip__body--large {
+    font-size: var(--nile-tooltip-font-size-lg);
+    line-height: var(--nile-tooltip-line-height-lg);
+    font-weight: var(--nile-tooltip-font-weight-lg);
+  }
 `;
 export default [styles];
 //# sourceMappingURL=nile-tooltip.css.js.map

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwFxB,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\n\n:host {\n      position: relative;\n      display: inline-block;\n    }\n    .tooltip {\n      position: fixed;\n      z-index: 1000;\n      background-color: var(--nile-tooltip-color-background, var(--ng-colors-bg-primary-solid));\n      color: var(--nile-colors-white-base, var(--ng-color-base-white));\n      padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n      border-radius: var(--nile-radius-sm, var(--ng-spacing-md));\n      font-size: var(--nile-tooltip-font-size-sm);\n      line-height: var(--nile-tooltip-line-height-sm);\n      opacity: 0;\n      transition: opacity 0.2s, transform 0.2s;\n      pointer-events: none;\n      white-space: normal;\n      visibility: hidden;\n      overflow: visible;\n \n    }\n    :host([open]) .tooltip {\n      opacity: 1;\n      visibility: visible;\n      pointer-events: auto;\n    }\n    .tooltip-content {\n      overflow: auto;\n      max-width: 250px;\n      max-height: 116px;\n    }\n    .tooltip-caret {\n      position: absolute;\n      width: calc(2 * var(--caret-size, 6px));\n      height: calc(2 * var(--caret-size, 6px));\n      background-color: inherit;\n      transform: rotate(45deg);\n      z-index: -1;\n    }\n    .trigger-container {\n      display: inline-block;\n    }\n \n \n:host([open]) .tooltip {\n  visibility: visible;\n  pointer-events: auto;\n  animation: fadeIn 150ms forwards;\n}\n\n \n.tooltip.hide {\n  animation: fadeOut 100ms forwards;\n}\n\n \n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(5px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n \n@keyframes fadeOut {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(5px);\n  }\n}\n\n\n\n\n\n\n \n`;\n\nexport default [styles];"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DxB,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    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n    \n    display: contents;\n  }\n\n  .tooltip {\n    --arrow-size: 5px;\n    --arrow-color: var(--nile-tooltip-color-background, var(--ng-colors-bg-primary-solid));\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: var(--nile-radius-sm, var(--ng-radius-md));\n    background-color: var(--nile-tooltip-color-background, var(--ng-colors-bg-primary-solid));\n    font-size: var(--nile-tooltip-font-size-sm, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-tooltip-font-weight-sm, var(--ng-font-weight-600));\n    line-height: var(--nile-tooltip-line-height-sm, var(--ng-line-height-text-xs));\n    padding: var(--nile-tooltip-padding-y, var(--ng-spacing-md)) var(--nile-tooltip-padding-x, var(--ng-spacing-md));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    pointer-events: none;\n    word-break: break-word;\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    box-shadow:var(--nile-box-shadow-none, var(--ng-shadow-lg));\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];"]}

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

@@ -4,53 +4,75 @@
  * This source code is licensed under the BSD-3-Clause license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { CSSResultArray } from 'lit';
+import { CSSResultArray, TemplateResult } from 'lit';
+import '../nile-popup/nile-popup';
 import NileElement from '../internal/nile-element';
+import type NilePopup from '../nile-popup/nile-popup';
 /**
- * Nile tooltip component.
+ * Nile icon component.
  *
  * @tag nile-tooltip
  *
  */
 export declare class NileTooltip extends NileElement {
+    /**
+     * The styles for Tooltip
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    private hoverTimeout;
+    defaultSlot: HTMLSlotElement;
+    body: HTMLElement;
+    popup: NilePopup;
+    /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
     content: string;
+    /** Size Property to decide the tool tip size */
+    size: 'small' | 'large';
+    /**
+     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
+     * inside of the viewport.
+     */
     placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    /** Disables the tooltip so it won't show when triggered. */
     disabled: boolean;
+    /** The distance in pixels from which to offset the tooltip away from its target. */
+    distance: number;
+    /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
     open: boolean;
+    /** The distance in pixels from which to offset the tooltip along its target. */
+    skidding: number;
     /**
      * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
      * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
      * programmatically.
      */
     trigger: string;
-    distance: number;
-    private readonly SHIFT_OFFSET;
-    /** The distance in pixels from which to offset the tooltip along its target. */
-    skidding: number;
+    /**
+     * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+     * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
+     * scenarios.
+     */
     hoist: boolean;
-    tooltip: HTMLElement;
-    triggerContainer: HTMLElement;
-    caret: HTMLElement;
-    tooltipSlot: HTMLSlotElement;
-    private hasTooltipSlot;
-    private hoverTimeout;
-    private caretSize;
-    private originalPlacement;
-    static get styles(): CSSResultArray;
     connectedCallback(): void;
-    updated(changedProps: Map<string, unknown>): void;
+    firstUpdated(): void;
     disconnectedCallback(): void;
-    private handleTooltipSlotChange;
-    private updateTooltipPosition;
-    private showTooltip;
-    private hideTooltip;
-    private handleMouseOver;
-    private handleMouseOut;
+    private handleBlur;
     private handleClick;
     private handleFocus;
-    private handleBlur;
-    render(): import("lit-html").TemplateResult<1>;
+    private handleKeyDown;
+    private handleMouseOver;
+    private handleMouseOut;
+    private hasTrigger;
+    handleOpenChange(): Promise<void>;
+    handleOptionsChange(): Promise<void>;
+    handleDisabledChange(): void;
+    /** Shows the tooltip. */
+    show(): Promise<void>;
+    /** Hides the tooltip */
+    hide(): Promise<void>;
+    render(): TemplateResult<1>;
 }
+export default NileTooltip;
 declare global {
     interface HTMLElementTagNameMap {
         'nile-tooltip': NileTooltip;