@aquera/nile-elements 0.1.46-beta-2.1 → 0.1.46-beta-2.2

package/src/nile-file-upload/utils/drag-drop.util.ts

@@ -1,8 +1,9 @@
-import { preventDefaultAndStopPropagation } from "./file-validation.util";
-import { FileUploadState } from "../types";
+import { FileUploadError, FileUploadState } from "../types";
 
 export class DragHandler {
   private currentState: FileUploadState = FileUploadState.DEFAULT;
+  private size: number = 0;
+  private uploadedFiles: File[] = [];
 
   private stateChangeCallback?: (state: FileUploadState) => void;
   private fileDropCallback?: (files: File[]) => void;
@@ -14,8 +15,10 @@ export class DragHandler {
     this.errorMessageCallback = callback;
   }
 
-  public setValuesInDragHandler(state: FileUploadState): void {
+  public setValuesInDragHandler(state: FileUploadState, size: number, uploadedFiles: File[]): void {
     this.currentState = state;
+    this.size = size;
+    this.uploadedFiles = uploadedFiles;
   }
 
   public onFileDrop(callback: (files: File[]) => void): void {
@@ -34,31 +37,31 @@ export class DragHandler {
   }
 
   public dragEnter(e: DragEvent): void {
-    preventDefaultAndStopPropagation(e);
-
     if (this.currentState === FileUploadState.DISABLED) return;
+
+    e.preventDefault();
     this.errorMessageCallback?.("");
     this.setState(FileUploadState.DRAG);
   }
 
   public dragLeave(e: DragEvent): void {
-    preventDefaultAndStopPropagation(e);
-    
     if (this.currentState === FileUploadState.DISABLED) return;
 
+    e.preventDefault();
     this.setState(FileUploadState.DEFAULT);
   }
 
   public dragOver(e: DragEvent): void {
-    preventDefaultAndStopPropagation(e);
-    
     if (this.currentState === FileUploadState.DISABLED) return;
+
+    e.preventDefault();
   }
 
   public drop(e: DragEvent): void {
-    preventDefaultAndStopPropagation(e);
-    
     if (this.currentState === FileUploadState.DISABLED) return;
+
+    e.preventDefault();
+    e.stopPropagation();
     this.setState(FileUploadState.DEFAULT);
     this.handleFiles(e);
   }
@@ -66,31 +69,32 @@ export class DragHandler {
   public handleDocumentDrop(e: DragEvent): void {
     if (this.currentState === FileUploadState.DISABLED) return;
 
-    preventDefaultAndStopPropagation(e);
-    
+    e.preventDefault();
+    e.stopPropagation();
     this.setState(FileUploadState.DEFAULT);
   }
 
   public preventDragOver(e: DragEvent): void {
-    preventDefaultAndStopPropagation(e); 
+    e.preventDefault();
   }
 
   public preventDrop(e: DragEvent): void {
-    preventDefaultAndStopPropagation(e); 
+    e.preventDefault();
+    e.stopPropagation();
   }
 
-  public handleFiles(e: Event | DragEvent): void {
-    preventDefaultAndStopPropagation(e);
+  public handleFiles(event: Event | DragEvent): void {
     if (this.currentState === FileUploadState.DISABLED) return;
 
+    event.preventDefault?.();
     let files: FileList | null = null;
 
-    if ('dataTransfer' in e && e.dataTransfer) {
-      files = e.dataTransfer.files;
+    if ('dataTransfer' in event && event.dataTransfer) {
+      files = event.dataTransfer.files;
     }
 
-    if (!files && e.target instanceof HTMLInputElement) {
-      files = e.target.files;
+    if (!files && event.target instanceof HTMLInputElement) {
+      files = event.target.files;
     }
 
     if (files && files.length > 0) {

package/src/nile-file-upload/utils/file-validation.util.ts

@@ -1,9 +1,8 @@
 import { DragHandler } from "./drag-drop.util";
 import { FileUploadState, FileUploadError, FileUploadEvent } from "../types";
 import { NileFileUpload } from "../nile-file-upload";
-import { RemoveFileDetail } from "../../nile-file-preview/types";
 
-// optimise this function
+// write a function to check for duplicatse in the files name it as areDuplicates
 export const areDuplicates = (files: File[], uploadedFiles: File[]): boolean => {
   return files.some(file =>
     uploadedFiles.some(existing =>
@@ -14,51 +13,41 @@ export const areDuplicates = (files: File[], uploadedFiles: File[]): boolean =>
   );
 };
 
+// set up the drag handler
 export const setUpDragHandler = (
   nileFileUpload: NileFileUpload,
-  dragHandler: DragHandler,
-  allowMultiple: boolean,
-  uploadedFiles: File[],
-  errorMessage: string,
-  size: string,
-  allowDuplicates: boolean
+  dragHandler: DragHandler
 ): void => {
   dragHandler.onStateChange((newState: FileUploadState) => {
     nileFileUpload.state = newState;
   });
 
   dragHandler.onFileDrop((files: File[]) => {
-    let maxSize = parseSize(size);
+    let { allowMultiple, uploadedFiles, errorMessage, requestUpdate } = nileFileUpload;
+
     if (!allowMultiple) {
-      const total = nileFileUpload.uploadedFiles.length + files.length;
+      const total = uploadedFiles.length + files.length;
       if (total > 1) {
-        nileFileUpload.errorMessage = FileUploadError.MULTIPLE_NOT_ALLOWED;
-        nileFileUpload.requestUpdate();
-        return;
-      }
-    }
-
-    for (const file of files) {
-      if (file.size > maxSize) {
-        nileFileUpload.errorMessage = FileUploadError.SIZE_LIMIT_EXCEEDED;
-        nileFileUpload.requestUpdate();
+        errorMessage = FileUploadError.MULTIPLE_NOT_ALLOWED;
+        requestUpdate();
         return;
       }
     }
 
     let newFiles = files;
-    if (!allowDuplicates) {
+
+    if (!nileFileUpload.allowDuplicates) {
       newFiles = files.filter(file =>
-        !uploadedFiles.some(
+        !nileFileUpload.uploadedFiles.some(
           uploaded =>
             uploaded.name === file.name &&
             uploaded.size === file.size &&
             uploaded.type === file.type
         )
       );
-  
+
       if (newFiles.length === 0) {
-        errorMessage = FileUploadError.DUPLICATES_NOT_ALLOWED;
+        nileFileUpload.errorMessage = FileUploadError.DUPLICATES_NOT_ALLOWED;
         nileFileUpload.requestUpdate();
         return;
       }
@@ -66,18 +55,21 @@ export const setUpDragHandler = (
 
     nileFileUpload.uploadedFiles = [...nileFileUpload.uploadedFiles, ...newFiles];
     nileFileUpload.requestUpdate();
-  });  
+  });
 
   dragHandler.setErrorMessage((errorMessage: string) => {
     nileFileUpload.errorMessage = errorMessage;
   });
 };
 
+
+// global listenrers
 export const addGlobalListeners = (dragHandler: DragHandler): void => {
   document.addEventListener('dragover', dragHandler.preventDragOver, { passive: false });
   document.addEventListener('drop', dragHandler.preventDrop, { passive: false });
 }
 
+// for hover & dragging functionality
 export const addInternalListeners = (nileFileUpload: NileFileUpload, dragHandler: DragHandler, uploadRequests: any): void => {
   nileFileUpload.addEventListener('mouseenter', (e) => handleHoverIn(nileFileUpload.setState, nileFileUpload.state));
   nileFileUpload.addEventListener('mouseleave', (e) => handleHoverOut(nileFileUpload.setState, nileFileUpload.state));
@@ -87,7 +79,6 @@ export const addInternalListeners = (nileFileUpload: NileFileUpload, dragHandler
   nileFileUpload.addEventListener('drop', (e) => dragHandler.drop(e));  
 
   cancelFileUpload(nileFileUpload, uploadRequests);
-  removeFile(nileFileUpload.uploadedFiles, nileFileUpload);
 }
 
 export function handleHoverIn(
@@ -111,36 +102,26 @@ export function handleHoverOut(
 export function uploadFiles(nileFileUpload: NileFileUpload) {
   const { uploadedFiles, fileUploadUrl, uploadRequests } = nileFileUpload;
   if (!fileUploadUrl || !uploadedFiles?.length) return;
-  // fileUploadUrl = 'http://localhost:3000/upload';
-  // let url = 'http://localhost:3000/upload';
 
   for (const file of uploadedFiles) {
-    if (uploadRequests.has(file)) continue;
     const formData = new FormData();
     formData.append('file', file);
-    // console.log(uploadRequests);
-    
 
     const xhr = new XMLHttpRequest();
     uploadRequests.set(file, xhr);
 
-    nileFileUpload.emit(FileUploadEvent.NILE_UPLOADING);
-
     xhr.upload.onprogress = (e) => {
-        // console.log(e.lengthComputable);
       const percent = Math.floor((e.loaded / e.total) * 100);
-      // console.log(percent);
-      
       nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_PROGRESS, {
         detail: { file, progress: percent }
       }));
     };
 
-    xhr.onload = (e) => {
-      // uploadRequests.delete(file); // deleting from the list of the uplaoding files, not based on the user request
+    xhr.onload = () => {
+      uploadRequests.delete(file);
       if (xhr.status === 201) {
         // Remove the successfully uploaded file
-        // nileFileUpload.uploadedFiles = nileFileUpload.uploadedFiles.filter(f => f !== file);
+        nileFileUpload.uploadedFiles = nileFileUpload.uploadedFiles.filter(f => f !== file);
 
         nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_SUCCESS, {
           detail: { file, response: xhr.response }
@@ -160,7 +141,6 @@ export function uploadFiles(nileFileUpload: NileFileUpload) {
     };
 
     xhr.open('POST', fileUploadUrl);
-    // xhr.setRequestHeader('Content-Type', 'multipart/form-data');
     xhr.send(formData);
   }
 }
@@ -181,25 +161,3 @@ export const cancelFileUpload = (nileFileUpload: NileFileUpload, uploadRequests:
     }));
   });
 };
-
-function parseSize(sizeStr: string): number {
-  const units = { B: 1, KB: 1024, MB: 1024 ** 2, GB: 1024 ** 3 };
-  const num = parseFloat(sizeStr);
-  const unit = sizeStr.replace(/[0-9.\s]/g, '').toUpperCase();
-  const multiplier = units[unit as keyof typeof units] || 1;
-  return num * multiplier;
-}
-
-export const preventDefaultAndStopPropagation = (event: Event | DragEvent): void => {
-  event.preventDefault?.();
-  event.stopPropagation();
-}
-
-export const removeFile = (uploadedFiles: File[], nileFileUpload: NileFileUpload) => {
-  document.addEventListener('nile-remove', (e: CustomEvent<RemoveFileDetail>) => {
-    const { value } = e.detail;
-    uploadedFiles = uploadedFiles.filter(file => file !== value);
-    nileFileUpload.uploadedFiles = uploadedFiles;
-    nileFileUpload.requestUpdate();
-  });
-}

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;
@@ -25,31 +30,31 @@ export const styles = css`
     align-items: center;
     height: 30px;
     padding: 8px;
-    border: 1px solid var(--nile-filter-chip-chip-border-color-stroke);
-    border-radius: 4px;
+    border: 1px solid var(--nile-filter-chip-chip-border-color-stroke, var(--ng-colors-border-primary));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     font-size: 14px;
-    background-color: var(--nile-filter-chip-background-default);
-    color: var(--nile-filter-chip-text-default);
+    background-color: var(--nile-filter-chip-background-default, var(--ng-colors-bg-primary));
+    color: var(--nile-filter-chip-text-default, var(--ng-colors-text-secondary-700));
     transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
     cursor: pointer;
     box-sizing: border-box;
   }
 
   .chip:hover {
-    background-color: var(--nile-filter-chip-hover-background);
+    background-color: var(--nile-filter-chip-hover-background, var(--ng-colors-bg-primary-hover));
   }
  .chip:active {
-  background-color: var(--nile-filter-chip-active-background);
+  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));
   border-color: var(--nile-filter-chip-active-border-color-stroke);
 }
 :host([active]) .chip {
-  background-color: var(--nile-filter-chip-active-background);
+  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));
   border-color: var(--nile-filter-chip-active-border-color-stroke);
 }
 
 
   .icon {
-    color: var(--nile-filter-chip-icon-color-default);
+    color: var(--nile-filter-chip-icon-color-default, var(--ng-colors-text-primary-900));
     display: flex;
     align-items: center;
     justify-content: center;
@@ -60,7 +65,7 @@ export const styles = css`
 
   .label {
     font-weight: 500;
-    color: var(--nile-filter-chip-label-color-default);
+    color: var(--nile-filter-chip-label-color-default, var(--ng-colors-text-primary-900));
   }
 
   nile-badge::part(base) {
@@ -91,7 +96,7 @@ export const styles = css`
 
 
  .value {
-  color: var(--nile-filter-chip-values-color-default);
+  color: var(--nile-filter-chip-values-color-default, var(--ng-colors-text-brand-secondary-700));
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -102,7 +107,7 @@ export const styles = css`
 
 
   .close-icon {
-    color: var(--nile-filter-chip-close-icon-color-default);
+    color: var(--nile-filter-chip-close-icon-color-default, var(--ng-componentcolors-utility-gray-400));
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -111,8 +116,8 @@ export const styles = css`
   }
 
   .close-icon:hover {
-    background-color: var(--nile-filter-chip-close-icon-hover-background);
-    color: var(--nile-filter-chip-close-icon-hover-color);
+    background-color: var(--nile-filter-chip-close-icon-hover-background, var(--ng-colors-bg-primary-hover));
+    color: var(--nile-filter-chip-close-icon-hover-color, var(--ng-componentcolors-utility-gray-500));
   }
 
 .label-wrapper {

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,24 +12,27 @@ 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 {
     display: flex;
     align-items: center;
-    color: var(--nile-form-error-text-color);
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-form-error-text-font-size);
+    color: var(--nile-form-error-text-color, var(--ng-colors-text-error-primary-600));
+    font-family: var(--nile-font-family-serif,var(--ng-font-family-body));
+    font-size: var(--nile-form-error-text-font-size, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: 400;
-    line-height: 12px;
-    line-height: var(--nile-form-error-text-line-height);
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    line-height: var(--nile-form-error-text-line-height,  var(--ng-line-height-text-md));
     letter-spacing: 0.2px;
-    margin-top: 6px;
+    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));
   }
 
   .nile-form-error-message__icon {
-    margin-right: 6px;
+    display: var(--nile-display-inline-block, var(--ng-display-none));
+    margin-right: var(--nile-spacing-sm, var(--ng-spacing-none));
   }
 `;
 

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

@@ -37,7 +37,7 @@ export class NileFormErrorMessage extends LitElement {
 	public render(): TemplateResult {
 		return html`
       <div class="nile-form-error-message">
-       <nile-icon name="info2" size="14" class="nile-form-error-message__icon" color="var(--nile-colors-red-700)"> </nile-icon> <slot> </slot>
+       <nile-icon name="info2" size="14" class="nile-form-error-message__icon" color="var(--nile-colors-red-700, var(--ng-colors-fg-error-secondary))"> </nile-icon> <slot> </slot>
         </div>
 			`;
 	}

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 {
@@ -20,67 +23,71 @@ export const styles = css`
     flex-direction: column;
     min-width: var(--min-width);
     width: max-content;
-    box-shadow: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);
-    border-radius: var(--nile-radius-base-standard);
-    border: 1px solid var(--nile-colors-neutral-400);
-    background: var(--nile-colors-white-base);
-    font-family: var(--nile-font-family-serif);
+    box-shadow: var(--nile-box-shadow-11, var(--ng-shadow-xs-skeuomorphic));
+    padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
+    border-radius: var(--nile-radius-base-standard, var(--ng-radius-xl));
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
   }
 
   .form__header {
     width: 100%;
-    height: 82px;
     box-sizing: border-box;
-    padding: var(--nile-spacing-3-x);
     display: flex;
-    flex-direction: row;
     align-items: flex-start;
     justify-content: space-between;
-    gap: var(--nile-spacing-1-x);
-    border-radius: var(--nile-radius-base-standard)
-      var(--nile-radius-base-standard) 0 0;
-    background: var(--nile-colors-neutral-100);
+    gap: var(--nile-spacing-1-x, var(--ng-spacing-xl));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
+  }
+
+  .form__divider {
+    width: 100%;
+  }
+
+  .form__divider::part(divider) {
+    width: 100%;
+    height: 1px;
+    margin-top: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
+    margin-bottom: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
   }
 
   .form__title-content {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: var(--nile-spacing-1-x);
-    justify-content:centre;
+    gap: var(--nile-spacing-1-x, var(--ng-spacing-xxs));
+    justify-content:center;
   }
 
-
-
   .form__title {
     display: block;
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     font-feature-settings: 'clig' off, 'liga' off;
-    font-size: var(--nile-type-scale-4);
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-lg));
     font-style: normal;
-    font-weight: 500;
-    line-height: var(--nile-type-scale-4);
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));
+    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-lg));
     letter-spacing: 0.2px;
   }
 
   .form__subtitle {
     display: block;
-    color: var(--nile-colors-dark-500);
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
     font-feature-settings: 'clig' off, 'liga' off;
-    font-size: var(--nile-type-scale-2);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    line-height: var(--nile-type-scale-2, var(--ng-line-height-text-sm));
     letter-spacing: 0.2px;
   }
 
   .form__body {
     width: 100%;
     box-sizing: border-box;
-    padding: var(--nile-spacing-3-x);
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-3-x);
+    gap: var(--nile-spacing-3-x, var(--ng-spacing-3xl));
   }
 `;
 export default [styles];

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

@@ -49,7 +49,7 @@ export class NileFormGroup extends NileElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="form__base">
+      <div part="base" class="form__base">
         ${this.title
           ? html` <div class="form__header">
               <div class="form__title-content">
@@ -63,8 +63,10 @@ export class NileFormGroup extends NileElement {
                   : ``}
               </div>
 
-              <slot name="action" class="form__action"> </slot>
-            </div>`
+              <slot name="action" class="form__action"></slot>
+            </div>
+            <nile-divider class="form__divider"></nile-divider>
+            `
           : ``}
         <div class="form__body">
           <slot></slot>

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

@@ -13,19 +13,22 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     width:100%;
-    color: var(--nile-form-help-text-color);
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-form-help-text-font-size);
+    color: var(--nile-form-help-text-color, var(--ng-colors-text-tertiary-600));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    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);
+    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 {
     display:flex;
-    font-weight: 400;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
     letter-spacing: 0.2px;
-    margin-top: 6px;
-    margin-right: 4px;
+    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    margin-right: var(--nile-spacing-xs, var(--ng-spacing-xs));
     width: auto;
   }
 
@@ -36,8 +39,8 @@ export const styles = css`
 
   .nile-form-help-text__more-button {
     display: inline-flex;
-    gap: 4px;
-    color: var(--nile-colors-primary-600);
+    gap: var(--nile-spacing-xs,var(--ng-spacing-xs));
+    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-brand-500));
     cursor: pointer;
     white-space: nowrap;
     align-items: center;
@@ -49,7 +52,7 @@ export const styles = css`
     white-space: nowrap;
     display:inline;
   }
-  
+
   .help__text__full--expanded{
     white-space: wrap;
   }

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

@@ -14,9 +14,11 @@ export class NileHeading extends LitElement {
     :host {
       display: block;
       border: solid 1px gray;
-      padding: 16px;
+      padding: 16px 16px var(--nile-spacing-1-x) 16px;
       font-size: var(--nile-type-scale-5);
-      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{
@@ -47,14 +50,14 @@ export const styles = css`
 		aspect-ratio: 1 / 1;
 		place-items: center;
 		display: grid;
-		border-radius: 8px;
+		border-radius: var(--nile-radius-radius-xl);
 		border: 1px solid var(--nile-colors-neutral-400);
 		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
 	}
 
 	.hero__slot__container {
 		height:var(--nile-hero-height);
-		padding-left: 48px;
+		padding-left: var(--nile-spacing-5xl);
 		display: flex;
 		align-items: center;
 		gap:var(--nile-spacing-spacing-xl);
@@ -86,4 +89,4 @@ export const styles = css`
 	}
 `;
 
-export default [styles];
+export default [styles];