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

package/src/nile-menu/nile-menu.css.ts

@@ -18,6 +18,9 @@ export const styles = css`
     border: solid 1px var(--nile-colors-dark-200,var(--ng-colors-border-secondary-alt));
     border-radius: var(--nile-radius-sm,var(--ng-radius-md));
     overflow: hidden;
+    -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));
     height: 100%;
     box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
       0px 8px 8px -4px rgba(16, 24, 40, 0.03);

package/src/nile-menu-item/nile-menu-item.css.ts

@@ -13,6 +13,9 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     box-sizing: border-box;
+    -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));
   }
 
   :host *,

package/src/nile-option/nile-option.css.ts

@@ -14,6 +14,9 @@ export const styles = css`
   :host {
     display: block;
     user-select: none;
+    -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));
   }
 
   :host(:focus) {

package/src/nile-page-header/nile-page-header.css.ts

@@ -14,6 +14,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));
   }
 
   .header {

package/src/nile-popover/nile-popover.css.ts

@@ -13,6 +13,9 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     box-sizing: 'border-box';
+    -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));
   }
 
   .popover__title {

package/src/nile-popup/nile-popup.css.ts

@@ -13,6 +13,9 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     --arrow-color: var(--nile-colors-dark-200);
+    -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));
     --arrow-size: 6px;
 
     /*

package/src/nile-progress-bar/nile-progress-bar.css.ts

@@ -1,6 +1,12 @@
 import { css } from 'lit';
 
 export default css`
+
+:host{
+  -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));
+}
   .nile-progress-bar__container {
     width: 100%;
     margin: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-height-auto, var(--ng-height-auto));

package/src/nile-radio/nile-radio.css.ts

@@ -13,6 +13,9 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     display: block;
+    -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));
   }
 
   :host(:focus-visible) {

package/src/nile-radio-group/nile-radio-group.css.ts

@@ -4,6 +4,9 @@ export default css`
 
   :host {
     display: block;
+    -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));
   }
 
   .form-control--inline-radio ::slotted(nile-radio) {

package/src/nile-section-message/nile-section-message.css.ts

@@ -17,6 +17,9 @@ export const styles = css`
     box-sizing: border-box;
     --icon-button-background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-primary-alt));
     min-width: var(--nile-width-width-xxs, var(--ng-spacing-80));
+    -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));
   }
 
   .parent__wrapper {

package/src/nile-select/nile-select.css.ts

@@ -16,7 +16,10 @@ export const styles = css`
     --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);
     --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);
     --ng-nxt-gen-outline-transparent: var(--ng-border-width-1) solid transparent;
-    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadows-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadows-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadows-shadow-lg-03, rgba(10, 13, 18, 0.04))
+    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadows-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadows-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadows-shadow-lg-03, rgba(10, 13, 18, 0.04));
+    -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));
   }
 
   :host *,
@@ -380,12 +383,12 @@ export const styles = css`
     overscroll-behavior: none;
     /* Make sure it adheres to the popup's auto size */
     max-width: var(--nile-width-auto, var(--ng-width-auto));
-    max-height: var(--nile-height-auto,var(--ng-spacing-64));
+    max-height: var(--nile-height-247px, var(--ng-spacing-64));
     box-shadow: var(--nile-box-shadow-none, var(--ng-box-shadow)) ;
   }
 
   .select__options__search-enabled {
-    padding-top: var(--nile-spacing-lg);
+    padding-top: var(--nile-spacing-lg, var(--ng-spacing-lg));
   }
 
   .select__options {
@@ -412,7 +415,7 @@ export const styles = css`
     top: 0px;
     z-index: 1;
     width: calc(100% - 16px);
-    padding: var(--nile-spacing-md);
+    padding: var(--nile-spacing-md, var(--ng-spacing-md));
     background-color: var(--nile-colors-white-base);
     margin-bottom: -8px;
   }
@@ -456,7 +459,7 @@ export const styles = css`
   }
 
   .select__no-results {
-    padding: var(--nile-spacing-lg);
+    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));
   }
 
   @keyframes spin {

package/src/nile-sidebar/index.ts

@@ -32,6 +32,9 @@ export class NileSidebar extends LitElement {
       min-height: 100vh;
       background: var(--nile-colors-neutral-100);
       border: 1px solid var(--nile-colors-neutral-400);
+      -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));
     }
     :host([showSidebar=true]) {
       min-width: 240px;

package/src/nile-sidebar-menu/nile-sidebar-menu.css.ts

@@ -21,6 +21,9 @@ export const styles = css`
     display: flex;
     padding: var(--nile-spacing-none) var(--nile-spacing-xl);
     flex-direction: column;
+    -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));
   }
 
   .submenu__box {

package/src/nile-sidebar-menu-items/nile-sidebar-menu-items.css.ts

@@ -13,6 +13,9 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     --min-width: 280px;
+    -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));
   }
 
   .nile__sidebar-menu-item {

package/src/nile-sidebar-wrapper/nile-sidebar-wrapper.css.ts

@@ -13,6 +13,9 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     display: block;
+    -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));
   }
 
   .wrapper-box {

package/src/nile-slide-toggle/nile-slide-toggle.css.ts

@@ -5,6 +5,9 @@ export default css`
     --slide-toggle-width:auto;
     display:inline-block;
     width:var(--slide-toggle-width);
+    -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));
   }
 
   .nile-slide-toggle {

package/src/nile-spinner/nile-spinner.css.ts

@@ -16,6 +16,9 @@ export const styles = css`
     --track-color: rgb(128 128 128 / 25%);
     --indicator-color: var(--nile-colors-white-base);
     --speed: 2s;
+    -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: inline-flex;
     width: 1em;

package/src/nile-split-panel/nile-split-panel.css.ts

@@ -29,6 +29,9 @@ export const styles = css`
     --max: 100%;
 
     display: grid;
+    -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));
   }
 
   .start,

package/src/nile-stepper/nile-stepper.css.ts

@@ -17,6 +17,9 @@ export const styles = css`
 	:host {
 		display:block;
 		height: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));
 	}
 	.nile-stepper--horizontal{
 		display:flex;

package/src/nile-stepper-item/nile-stepper-item.css.ts

@@ -19,6 +19,9 @@ export const styles = css`
 		display: inline-block;
 		flex-grow:var(--stepper-flex-val);
 		min-width: 200px;
+		-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));
 	}
 	
 	.stepper__item {

package/src/nile-switcher/nile-switcher.css.ts

@@ -14,6 +14,9 @@ export const styles = css`
   :host {
     width: 100%;
     box-sizing: border-box;
+    -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));
   }
 
   .pointer-cursor {

package/src/nile-tab/nile-tab.css.ts

@@ -21,6 +21,9 @@ export const styles = css`
     --tab-padding: var(--nile-spacing-none, var(--ng-spacing-0)) var(--nile-spacing-xs, var(--ng-spacing-1)) var(--nile-spacing-lg, var(--ng--spacing-3)) var(--nile-spacing-xs, var(--ng-spacing-1));
     --tab-hover-background-color:transparent;
     --tab-active-background-color: transparent;
+    -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));
   }
 
   :host([centered]) {

package/src/nile-tab-group/nile-tab-group.css.ts

@@ -20,6 +20,9 @@ export const styles = css`
     --track-color: var(--nile-colors-neutral-400, var(--ng-componentcolors-utility-gray-500));
     --track-width: var(--nile-width-2px, var(--ng-width-0-5));
     --tab-gap: var(--nile-spacing-lg, var(--ng-spacing-3));
+    -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: block;
   }

package/src/nile-tab-panel/nile-tab-panel.css.ts

@@ -17,7 +17,9 @@ export const styles = css`
 
   :host {
     --padding: var(--nile-spacing-none, var(--ng-spacing-none));
-
+-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: none;
   }
 

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

@@ -14,6 +14,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));
 	}
 `;
 

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

@@ -15,6 +15,9 @@ export const styles = css`
     box-sizing: border-box;
     --nile-table-background--odd: var(--nile-colors-base-white , var(--ng-colors-bg-primary));
     --nile-table-background--even: var(--nile-colors-base-white , var(--ng-colors-bg-primary));
+    -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));
   }
 
   .base {

package/src/nile-table-cell-item/nile-table-cell-item.css.ts

@@ -20,8 +20,11 @@ export const styles = css`
     display: table-cell;
     vertical-align: middle;
     max-width: var(--max--cell-width);
-    padding: var(--nile-spacing-xl , var(--ng-spacing-lg)) var(--nile-spacing-2xl , var(--ng-spacing-3xl));
+    padding: var(--nile-spacing-xl , var(--ng-spacing-lg)) var(--nile-spacing-3xl , var(--ng-spacing-3xl));
     min-height: var(--min--height);
+    -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));
   }
 
   .column {

package/src/nile-table-header-item/nile-table-header-item.css.ts

@@ -16,6 +16,9 @@ export const styles = css`
     --cell-width: auto;
     display: table-cell;
     box-sizing: border-box;
+    -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));
   }
   
   .header__item__wrapper{
@@ -24,7 +27,7 @@ export const styles = css`
     display:flex;
     align-items:center;
     box-sizing: border-box;
-    padding: var(--nile-spacing-xl , var(--ng-spacing-lg)) var(--nile-spacing-2xl , var(--ng-spacing-3xl));
+    padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-3-x , var(--ng-spacing-3xl));
     min-height: 44px;
     height: 44px;
   }

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

@@ -17,6 +17,9 @@ export const styles = css`
     height: 100%;
     height: max-content;
     border-bottom: 1px solid var(--nile-table-row-border-color , var(--ng-colors-border-secondary));
+    -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));
   }
 
   slot::slotted(nile-table-header-item) {

package/src/nile-tag/nile-tag.css.ts

@@ -13,6 +13,9 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     display: inline-block;
+    -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));
   }
 
   .tag {

package/src/nile-textarea/nile-textarea.css.ts

@@ -68,6 +68,9 @@ export const styles = css`
   /* Host styles */
   :host {
     display: block;
+    -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));
   }
 
   /* Textarea styles */

package/src/nile-title/nile-title.css.ts

@@ -13,6 +13,9 @@ import {css} from 'lit';
 export const styles = css`
 	:host {
     font: 500 20px / 30px var(--nile-font-family-sans-serif,var(--ng-font-family-body));
+	-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));
 	}
 `;
 

package/src/nile-toast/nile-toast.css.ts

@@ -13,6 +13,9 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     display: contents;
+    -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));
 
     /* For better DX, we'll reset the margin here so the base part can inherit it */
     margin: var(--nile-spacing-none);

package/src/nile-toolbar/nile-toolbar.css.ts

@@ -14,6 +14,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/src/nile-tooltip/nile-tooltip.css.ts

@@ -11,93 +11,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];