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

package/package.json

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

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

@@ -14,6 +14,9 @@ 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-auto-complete/nile-auto-complete.css.ts

@@ -14,6 +14,9 @@ export const styles = css`
   :host {
     --virtual-scroll-container-width:110px;
     --virtual-scroll-container-height: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));
   }
 
   .nile-dropdown--input {

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

@@ -12,6 +12,9 @@ import { css } from 'lit';
  */
 export const styles = 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));
   }
 
   .text__avatar {

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

@@ -12,6 +12,9 @@ import { css } from 'lit';
  */
 export const styles = 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));
   }
 
   .badge {

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

@@ -14,6 +14,9 @@ export const styles = css`
   :host {
     display: flex;
     align-items: center;
+    -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-breadcrumb-item/nile-breadcrumb-item.css.ts

@@ -21,6 +21,9 @@ export const styles = css`
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-600));
     line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
     letter-spacing: 0.2px; 
+    -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-breadcrumb-item__arrow {

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

@@ -16,6 +16,9 @@ export const styles = css`
     position: relative;
     width: auto;
     cursor: pointer;
+    -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));
   }
 
   .button {
@@ -72,23 +75,23 @@ export const styles = css`
   /* Primary */
   .button--standard.button--primary {
     background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
-    border-color: var(--nile-colors-primary-600, var(--nile-primary-standard));
+    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));  
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
     box-shadow: var(
       --nile-textarea-standard-disabled-box-shadow,
       var(--ng-shadow-xs-skeuomorphic)
-    );
+    ); //TODO: fix
   }
 
   .button--standard.button--primary:hover:not(.button--disabled) {
     background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));
-    border-color: var(--nile-colors-primary-700, var(--nile-primary-standard));
+    border-color: var(--nile-colors-primary-700, var(--ng-primary-standard));
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
   }
 
   .button--standard.button--primary:active:not(.button--disabled) {
     background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid));
-    border-color: var(--nile-colors-primary-900, var(--nile-primary-standard));
+    border-color: var(--nile-colors-primary-900, var(--ng-primary-standard));
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
   }
 
@@ -110,7 +113,7 @@ export const styles = css`
 
   .button--standard.button--primary:focus-visible:not(.button--disabled) {
     background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
-    border-color: var(--nile-colors-primary-600, var(--nile-primary-standard));
+    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
     box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));
   }
@@ -251,25 +254,25 @@ export const styles = css`
   /* destructive */
   .button--standard.button--destructive {
     background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));
-    border-color:  var(--nile-colors-red-500, var(--nile-primary-standard));
+    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
     box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));
   }
 
   .button--standard.button--destructive:hover:not(.button--disabled) {
     background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));
-    border-color: var(--nile-colors-red-700, var(--nile-primary-standard));
+    border-color: var(--nile-colors-red-700, var(--ng-primary-standard));
     box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));
   }
 
   .button--standard.button--destructive:active:not(.button--disabled) {
     background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));
-    border-color:  var(--nile-colors-red-500, var(--nile-primary-standard));
+    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
   }
   .button--standard.button--destructive:focus-visible:not(.button--disabled) {
     background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));
-    border-color:  var(--nile-colors-red-500, var(--nile-primary-standard));
+    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
     box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-error-shadow-xs-skeumorphic))
   }
@@ -284,7 +287,7 @@ export const styles = css`
 
   .button--standard.button--destructive.button--disabled:active {
     background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));
-    border-color: var(--nile-colors-neutral-400, var(--nile-primary-standard));
+    border-color: var(--nile-colors-neutral-400, var(--ng-primary-standard));
     color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
     cursor: not-allowed;
   }

package/src/nile-button-filter/nile-button-filter.css.ts

@@ -12,6 +12,9 @@ import { css } from 'lit';
  */
 export const styles = 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));
   }
 
   .inner__text {

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

@@ -12,6 +12,9 @@ import { css } from 'lit';
  */
 export const styles = 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-button-toggle {

package/src/nile-button-toggle-group/nile-button-toggle-group.css.ts

@@ -16,6 +16,9 @@ export const styles = css`
     border-radius: var(--nile-radius-none, var(--ng-radius-md));
     border:var(--nile-border-style-none), var(--ng-border-width-1) var(--ng-border-style-solid) var(--ng-colors-border-primary);
     box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));
+    -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-calendar/nile-calendar.css.ts

@@ -19,6 +19,9 @@ export const styles = css`
     box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);
     box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100, var(--ng-colors-effects-shadow-xl-01));
     border: var(--nile-spacing-spacing-none, 1px solid var(--ng-colors-border-secondary-alt));
+    -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));
   }
 
   .calendar-container {

package/src/nile-card/nile-card.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-checkbox/nile-checkbox.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));
   }
 
   :host(.full-width) {

package/src/nile-chip/nile-chip.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-circular-progressbar/nile-circular-progressbar.css.ts

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

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

@@ -17,6 +17,9 @@ 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));
   }
 
   .code__editor__container {

package/src/nile-content-editor/nile-content-editor.css.ts

@@ -15,6 +15,9 @@ export const styles = css`
     box-sizing: border-box;
     font-size: var(--nile-type-scale-3);
     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));
   }
 
   .content-editable-wrapper {

package/src/nile-date-picker/nile-date-picker.css.ts

@@ -12,6 +12,9 @@ import { css } from 'lit';
  */
 export const styles = 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-dropdown{
     display:block;

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

@@ -19,6 +19,9 @@ export const styles = css`
     --nile-dialog-remove-icon-color: var(--nile-colors-dark-900);
     --nile-border: 1px solid var(--nile-colors-neutral-400);
     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));
   }
 
   :host *,

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

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

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

@@ -14,6 +14,9 @@ export const styles = css`
   :host {
     box-sizing: border-box;
     --nile-drawer-remove-icon-color:var(--nile-colors-dark-900, var(--ng-componentcolors-alpha-black-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));
   }
 
   :host *,

package/src/nile-dropdown/nile-dropdown.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));
   }
 
   .dropdown::part(popup) {

package/src/nile-empty-state/nile-empty-state.css.ts

@@ -14,6 +14,9 @@ export const styles = css`
   :host {
     display:inline-flex;
     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));
   }
 
   .empty-state--sm {

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

@@ -15,6 +15,9 @@ export const styles = css`
     --ng-error-expanded-padding: var(--ng-spacing-md) var(--ng-spacing-lg);
     --ng-nile-private-max-width: var(--nile-width-535px, var(--ng-width-120));
     --ng-nile-private-max-height: var(--nile-height-48px, var(--ng-height-48px));
+    -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-error-message {

package/src/nile-error-notification/nile-error-notification.css.ts

@@ -13,6 +13,9 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     --indication-color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+    -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-error-notification {

package/src/nile-file-preview/nile-file-preview.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));
   }
 
   * {

package/src/nile-file-upload/nile-file-upload.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));
   }
 
   * {

package/src/nile-filter-chip/nile-filter-chip.css.ts

@@ -13,6 +13,11 @@ import {css} from 'lit';
 
 export const styles = 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));
+  }
 
   .filter-chips {
     display: flex;

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

@@ -12,7 +12,9 @@ import {css} from 'lit';
  */
 export const styles = 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));
 	}
 `;
 

package/src/nile-form-error-message/nile-form-error-message.css.ts

@@ -12,6 +12,9 @@ import { css } from 'lit';
  */
 export const styles = 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-form-error-message {

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

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

package/src/nile-form-help-text/nile-form-help-text.css.ts

@@ -18,6 +18,9 @@ export const styles = css`
     font-size: var(--nile-form-help-text-font-size, var(--ng-font-size-text-sm));
     font-style: normal;
     line-height: var(--nile-form-help-text-line-height, var(--ng-line-height-text-sm));
+    -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-form-help-text {

package/src/nile-format-date/nile-format-date.css.ts

@@ -12,6 +12,9 @@ import {css} from 'lit';
  */
 export const styles = 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));
 
 	}
 `;

package/src/nile-heading/index.ts

@@ -16,7 +16,10 @@ export class NileHeading extends LitElement {
       border: solid 1px gray;
       padding: 16px;
       font-size: var(--nile-type-scale-5);
-      padding-bottom: var(--nile-spacing-1-x);      
+      padding-bottom: var(--nile-spacing-1-x);   
+      -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([size='header-1']) {

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

@@ -15,6 +15,9 @@ export const styles = css`
 	:host {
 		display:block;
 		--nile-hero-transition-time:2000ms;
+		-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));
 	}
 
 	.hero__header--collapsed{

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

@@ -19,6 +19,9 @@ export const styles = css`
 		padding:var(--nile-spacing-xl) var(--nile-spacing-5xl);
 		gap: var(--nile-spacing-xl);
 		border-bottom: 1px solid rgb(234, 236, 240);
+		-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));
 	}
 
 	.icon__container {

package/src/nile-icon/index.ts

@@ -100,6 +100,9 @@ export class NileIcon extends LitElement {
       justify-content: center;
       contain: content;
       --nile-svg-stroke-width: 1.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));
     }
 
     .nds-icon {

package/src/nile-icon-button/nile-icon-button.css.ts

@@ -13,7 +13,10 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     display: inline-block;
-    color:  var(--nile-colors-neutral-700)
+    color:  var(--nile-colors-neutral-700);
+    -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));
   }
 
   .icon-button {

package/src/nile-inline-edit/nile-inline-edit.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));
   }
 
   .inline__edit--label {

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

@@ -17,6 +17,9 @@ export const styles = css`
     --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);
     --ng-nxt-gent-outline-transparent: var(--ng-border-width-1) solid transparent;
     --ng-box-shadow-1: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);
+    -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-link/nile-link.css.ts

@@ -12,6 +12,9 @@ import { css } from 'lit';
  */
 export const styles = 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));
   }
 
   .link {

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

@@ -16,6 +16,9 @@ export const styles = css`
     flex-direction: column;
     gap: var(--nile-spacing-md, var(--ng-spacing-2));
     padding: var(--nile-spacing-xl, var(--ng-spacing-4));
+    -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-list-item/nile-list-item.css.ts

@@ -21,6 +21,9 @@ export const styles = css`
     justify-content: start;
     position: relative;
     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));
   }
 
   :host(:hover) {
@@ -56,7 +59,7 @@ export const styles = css`
   .subheading {
     display: inline-block;
     font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
-    font-weight: var(--nile-font-weight-regular, , var(--ng-font-weight-regular));
+    font-weight: var(--nile-font-weight-regular,  var(--ng-font-weight-regular));
   }
 
   .list-item__suffix {

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

@@ -5,6 +5,9 @@ export default css`
     --loader-spacing: var(--nile-spacing-lg, var(--ng-spacing-xl));
     --loader-label-font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));
     --loader-label-line-height: var(--nile-line-height-small,var(--ng-line-height-text-sm));
+    -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));
   }
 
   .loader__container {

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 {