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

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.2",
+  "version": "0.1.40-beta-1.1",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -37,26 +37,27 @@ export const styles = css`
     border-top:solid 1px var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));
     background-color: var(--nile-colors-white-base , var(--ng-colors-bg-primary));
     overflow-anchor: none;
+    line-height: var(--nile-line-height-inherit , var(--ng-line-height-text-sm));
   }
 
   .accordian--lg{
     --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
-    --accordian-heading-padding: var(--nile-spacing-xl , var(--ng-spacing-4)) var(--nile-spacing-lg , var(--ng-spacing-3));
-    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-1-5)) var(--nile-spacing-lg , var(--ng-spacing-3)) var(--nile-spacing-xl , var(--ng-spacing-6));
+    --accordian-heading-padding: var(--nile-spacing-xl , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg));
+    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-xl , var(--ng-spacing-3xl));
     --accordion-font-family : var(--nile-font-family-sans-serif, var(--ng-font-family-body));
   }
 
   .accordian--md{
     --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
-    --accordian-heading-padding: var(--nile-spacing-lg , var(--ng-spacing-3)) var(--nile-spacing-lg , var(--ng-spacing-3));
-    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-1-5)) var(--nile-spacing-lg , var(--ng-spacing-3)) var(--nile-spacing-xl , var(--ng-spacing-6));
+    --accordian-heading-padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-lg , var(--ng-spacing-lg));
+    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-xl , var(--ng-spacing-3xl));
     --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
   }
 
   .accordian--sm{
     --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
-    --accordian-heading-padding: var(--nile-spacing-sm , var(--ng-spacing-1-5)) var(--nile-spacing-lg , var(--ng-spacing-3));
-    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-1-5)) var(--nile-spacing-lg , var(--ng-spacing-4)) var(--nile-spacing-lg , var(--ng-spacing-3));
+    --accordian-heading-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg));
+    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg));
     --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
   }
   
@@ -71,7 +72,7 @@ export const styles = css`
 
   .accordian__header {
     display: flex;
-    gap:var(--nile-spacing-lg , var(--ng-spacing-3));
+    gap:var(--nile-spacing-lg , var(--ng-spacing-lg));
     align-items: center;
     border-radius: inherit;
     font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-600));
@@ -139,7 +140,7 @@ export const styles = css`
   }
 
   .accordian__content--arrow-left{
-   margin-left: var(--nile-spacing-4-x , var(--ng-spacing-7));  
+   margin-left: var(--nile-spacing-4-x , var(--ng-spacing-3xl-alt));  
   }
 `;
 

package/src/nile-auto-complete/nile-auto-complete.ts

@@ -39,6 +39,8 @@ export class NileAutoComplete extends NileElement {
   
   @property({ type: Boolean }) noOutline: boolean = false;
 
+  @property({ type: Boolean }) noPadding: boolean = false;
+
   @property({ type: Boolean }) loading: boolean = false;
 
   @property({ attribute:false}) filterFunction: (item:string,searchedValue:string)=>boolean=(item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());
@@ -73,6 +75,7 @@ export class NileAutoComplete extends NileElement {
         <nile-input class="nile-auto-complete--input"
           ?no-border=${this.noBorder}
           ?no-outline=${this.noOutline}
+          ?no-padding=${this.noPadding}
           .disabled=${this.disabled}
           .value=${this.value}
           @nile-input=${this.handleSearch}

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

@@ -79,8 +79,8 @@ export const styles = css`
   }
 
   .avatar__2xl {
-    height: var(--nile-spacing-spacing-7xl, var(--ng-spacing-16));
-    width: var(--nile-spacing-spacing-7xl, var(--ng-spacing-16));
+    height: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));
+    width: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));
     font-size: var(--nile-spacing-3xl, var(--ng-line-height-display-xs));
     line-height: var(--nile-spacing-4xl, var(--ng-line-height-display-xs));
   }

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

@@ -107,7 +107,7 @@ export const styles = css`
     color: var(--nile-badge-color-font-grayblue, var(--ng-componentcolors-utility-gray-blue-700));
     border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
     border-style: solid;
-    border-color: var(--nile-badge-color-border-color-grablue, var(--ng-componentcolors-utility-gray-blue-200));
+    border-color: var(--nile-badge-color-border-color-grayblue, var(--ng-componentcolors-utility-gray-blue-200));
     background: var(--nile-badge-color-background-grayblue, var(--ng-componentcolors-utility-gray-blue-50));
   }
 

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

@@ -41,6 +41,9 @@ export class NileBreadcrumbItem extends NileElement {
    * Render method
    * @slot This is a slot test
    */
+
+  @property({ type: String }) separator = 'arrowright';
+
   private handleClick() {
     if (this.isLast) {
       return;
@@ -58,8 +61,8 @@ export class NileBreadcrumbItem extends NileElement {
         @click=${this.handleClick}
       ></slot>
       <nile-icon
-        name="arrowright"
-        aria-label="arrowright"
+        name=${this.separator}
+        aria-label=${this.separator}
         color="var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))"
         class=${classMap({
           'nile-breadcrumb-item__arrow': true,

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

@@ -20,7 +20,7 @@ export const styles = css`
   .inner__text {
     display: flex;
     gap: var(--nile-radius-base-standard);
-	align-items: flex-start;
+	  align-items: flex-start;
   }
 
   .inner__text span {

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

@@ -19,7 +19,7 @@ export const styles = css`
 
   .nile-button-toggle {
     display: flex;
-    padding: var(--nile-spacing-sm, var(--ng-spacing-1-5)) var(--nile-spacing-xl, var(--ng-spacing-4));
+    padding: var(--nile-spacing-sm, var(--ng-spacing-sm)) var(--nile-spacing-xl, var(--ng-spacing-xl));
     border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     cursor: pointer;
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));
@@ -32,7 +32,7 @@ export const styles = css`
     letter-spacing: 0.2px;
     justify-content: center;
     align-items: center;
-    gap: var(--nile-spacing-md, var(--ng-spacing-2));
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
     height: 40px;
     box-sizing: border-box;
   }

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

@@ -59,7 +59,7 @@ export const styles = css`
 
   .days_container {
 		display: grid;
-    padding: var(--nile-spacing-none, var(--ng-spacing-0)) var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-lg, var(--ng-spacing-3));
+    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-lg, var(--ng-spacing-lg));
 		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 		grid-row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
   }
@@ -179,18 +179,18 @@ export const styles = css`
 
   .calender-input {
     box-sizing:border-box;
-    padding: var(--nile-spacing-none, var(--ng-spacing-0)) var(--nile-spacing-xl, var(--ng-spacing-4));
+    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));
     width:100%;
     justify-content: space-between;
     display: flex;
-    gap: var(--nile-spacing-md, var(--ng-spacing-2));
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
     flex-wrap: wrap;
   }
 
   .from {
     display: flex;
     justify-content: space-between;
-    gap: var(--nile-spacing-md, var(--ng-spacing-2));
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
     width: auto;
   }
 
@@ -207,8 +207,8 @@ export const styles = css`
     width: 100%;
     display:flex;
     justify-content: end;
-    gap: var(--nile-spacing-lg, var(--ng-spacing-3));
-    padding: var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-lg, var(--ng-spacing-4)) var(--nile-spacing-lg, var(--ng-spacing-4)) var(--nile-spacing-lg, var(--ng-spacing-4));
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-lg, var(--ng-spacing-xl));
     box-sizing: border-box;
   }
 
@@ -220,8 +220,8 @@ export const styles = css`
 
   .calendar-switcher {
     width: 100%;
-    margin: var(--nile-spacing-none, var(--ng-spacing-0)) var(--nile-spacing-lg, var(--ng-spacing-3));
-    margin-top: var(--nile-spacing-xl, var(--ng-spacing-4));
+    margin: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+    margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
 
   .units-wrapper{
@@ -232,10 +232,10 @@ export const styles = css`
   .unit-container{
     display:grid;
     grid-template-columns: auto auto;
-    row-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-5));
-    column-gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-1-5));
-    padding: var(--nile-spacing-xl, var(--ng-spacing-4));
-    padding-bottom: var(--nile-spacing-none, var(--ng-spacing-0));
+    row-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));
+    column-gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-sm));
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    padding-bottom: var(--nile-spacing-none, var(--ng-spacing-none));
   }
 
   .duration-name{
@@ -291,9 +291,9 @@ export const styles = css`
   .unit-input-container {
     display: flex;
     justify-content: space-between;
-    gap: var(--nile-spacing-md, var(--ng-spacing-2));
-    padding: var(--nile-spacing-none, var(--ng-spacing-4)) var(--nile-spacing-xl, var(--ng-spacing-4));
-    padding-top: var(--nile-spacing-xl, var(--ng-spacing-4));
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    padding: var(--nile-spacing-none, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));
+    padding-top: var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
 
   .duration-input,.time-input,.manual-input {

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

@@ -31,7 +31,6 @@ export const styles = css`
   :host {
     --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));
     --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));
-    --border-width: 0.5px;
     --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
     display: inline-block;
   }
@@ -39,9 +38,10 @@ export const styles = css`
   .card {
     display: flex;
     flex-direction: column;
-    justify-items: strecth;
+    justify-items: stretch;
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    outline: solid var(--border-width) var(--border-color);
+    outline: var(--ng-colors-border-secondary) solid  var(--nile-outline-0-5px, var(--ng-outline-1px)); 
+    outline-offset: var(--nile-outline-none, --ng-outline-neg-1);  
     border-radius: var(--border-radius);
     min-width: 273px;
     max-width: 350px;

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

@@ -25,7 +25,6 @@ export const styles = css`
   .checkbox {
     position: relative;
     display: inline-flex;
-    align-items: top;
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
     vertical-align: middle;
@@ -133,19 +132,11 @@ export const styles = css`
   } */
 
   /* Checked/indeterminate + focus */
-  .checkbox.checkbox--checked:not(.checkbox--disabled)
-    .checkbox__input:focus-visible
-    ~ .checkbox__control,
-  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
-    .checkbox__input:focus-visible
-    ~ .checkbox__control {
-    outline: solid 3px var(--ng-nile-checkbox-color-outline-standard);
-    outline-offset: 1px;
-  }
+ 
 
   .checkbox--disabled .checkbox__control {
     background-color: var(
-      --nile-checkbox-color-background-standard,
+      --nile-checkbox-color-border-checked-standard,
       var(--ng-colors-bg-disabled-subtle)
     );
     border-color: var(
@@ -153,6 +144,27 @@ export const styles = css`
       var(--ng-colors-border-disabled)
     );
   }
+ 
+.checkbox--disabled.checkbox--checked .checkbox__control,
+.checkbox--disabled.checkbox--indeterminate .checkbox__control {
+  background-color: var(
+    --nile-checkbox-color-background-checked-standard,
+    var(--ng-colors-bg-disabled-subtle)
+  );
+  border-color: var(
+    --nile-checkbox-color-border-checked-standard,
+    var(--ng-colors-border-disabled)
+  );
+}
+
+ 
+.checkbox--disabled:not(.checkbox--checked):not(.checkbox--indeterminate) .checkbox__control {
+  background-color: transparent;
+  border-color: var(
+    --nile-checkbox-color-border-standard,
+    var(--ng-colors-border-disabled)
+  );
+}
 
   .checkbox__label {
     display: inline-block;
@@ -184,7 +196,7 @@ export const styles = css`
   .checkbox--disabled .checkbox__checked-icon,
   .checkbox--disabled .checkbox__indeterminate-icon {
     --nile-svg-stroke: var(
-      --ng-colors-border-border-disabled,
+       --nile-checkbox-color-border-standard,
       var(--ng-colors-fg-disabled-subtle)
     );
   }

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

@@ -57,7 +57,6 @@ export const styles = css`
   :host([required]) .form-control--has-label .form-control__label::after {
     content: '*';
     margin-inline-start: -2px;
-    color: undefined;
   }
 
   /* Help text */
@@ -90,7 +89,7 @@ export const styles = css`
   }
 
   .nile-chip {
-    padding: var(--nile-spacing-sm,var( --ng-spacing-lg)) var(--nile-spacing-lg,var(--ng-spacing-lg));
+    padding: var(--nile-spacing-sm,var( --ng-spacing-md)) var(--nile-spacing-lg,var(--ng-spacing-lg));
     background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));
     border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
     border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));
@@ -98,10 +97,14 @@ export const styles = css`
     flex-wrap: wrap;
     width: 100%;
     overflow-x: hidden;
-    gap : var(--ng-spacing-md);
+    gap : var(--nile-spacing-md, var(--ng-spacing-md));
     align-items: center;
   }
 
+  nile-input::part(base) {
+    padding: 0px !important;
+  }
+
   .nile-chip--no-wrap {
     flex-wrap: nowrap;
     overflow-x: scroll;

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

@@ -202,6 +202,7 @@ export class NileChip extends NileElement {
               ?isDropdownOpen=${this.isDropdownOpen}
               .noBorder=${true}
               .noOutline=${true}
+              .noPadding=${true}
               .disabled=${this.disabled}
               openOnFocus
               exportparts="options__wrapper"

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

@@ -24,7 +24,7 @@ export const styles = css`
 
   .code__editor__container {
     display: flex;
-    padding: var(--nile-spacing-sm, var(--ng-spacing-0));
+    padding: var(--nile-spacing-sm, var(--ng-spacing-none));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
     position: relative;
@@ -61,10 +61,10 @@ export const styles = css`
     position: absolute;
     border-radius: var(--nile-radius-base-standard, var(--ng-radius-none));
     cursor: pointer;
-    right: 0px;
+    right: var(--nile-spacing-none, var(--ng-spacing-1-5));
     top: 5px;
     z-index: 1;
-    padding: var(--nile-spacing-sm, var(--ng-spacing-0));
+    padding: var(--nile-spacing-sm, var(--ng-spacing-none));
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
   

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

@@ -31,9 +31,9 @@ export const styles = css`
 
   :host {
     --size: 25rem;
-    --header-spacing: var(--nile-line-height-small, var(--ng-spacing-5));
-    --body-spacing: var(--nile-line-height-small, var(--ng-spacing-5));
-    --footer-spacing: var(--nile-line-height-small, var(--ng-spacing-5));
+    --header-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));
+    --body-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));
+    --footer-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));
 
     display: contents;
   }
@@ -150,7 +150,7 @@ export const styles = css`
 
   .drawer__footer {
     text-align: right;
-    padding: var(--footer-spacing, var(--ng-spacing-4)) var(--footer-spacing, var(--ng-spacing-6)) var(--footer-spacing, var(--ng-spacing-4)) var(--footer-spacing, var(--ng-spacing-6));
+    padding: var(--footer-spacing, var(--ng-spacing-xl)) var(--footer-spacing, var(--ng-spacing-3xl)) var(--footer-spacing, var(--ng-spacing-xl)) var(--footer-spacing, var(--ng-spacing-3xl));
   }
 
   .drawer__footer ::slotted(nile-button:not(:last-of-type)) {

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

@@ -96,7 +96,7 @@ export const styles = css`
   }
 
   .empty-state__body--tonal {
-    background: linear-gradient(180deg, var(--nile-colors-neutral-100, var(--ng-color-graylightmode-50)) 0%, var(--nile-colors-neutral-400, var(--ng-color-graylightmode-200)) 100%);
+    background:  var(--nile-gradient-1, var(--ng-white-gradient-6));
     width: 104px;
     height: 104px;
     border-radius: var(--nile-radius-full, var(--ng-radius-full));

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

@@ -13,8 +13,8 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     --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));
+    --ng-private-error-max-width: var(--nile-width-535px, var(--ng-width-120));
+    --ng-private-error-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));
@@ -26,7 +26,7 @@ export const styles = css`
     letter-spacing: 0.2px;
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
     line-height: var(--nile-font-size-small, var(--ng-line-height-text-xs));
-    max-width: var(--nile-error-max-width, var(--ng-nile-private-max-width)); 
+    max-width: var(--nile-error-max-width, var(--ng-private-error-max-width)); 
   }
 
   .nile-error-message__error {
@@ -38,7 +38,7 @@ export const styles = css`
     color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
     margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));
     line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
-    max-height: var(--nile-error-max-height, var(--ng-nile-private-max-height));
+    max-height: var(--nile-error-max-height, var(--ng-private-error-max-height));
     overflow-x: auto;
   }
 
@@ -80,7 +80,7 @@ export const styles = css`
   }
 
   .nile-error-message__response-expanded.expanded {
-    max-height: var(--nile-error-max-dialog-height, var(--ng-nile-private-max-height));
+    max-height: var(--nile-error-max-dialog-height, var(--ng-private-error-max-height));
     transition: max-height 0.3s ease-in-out;
     visibility: visible;
     padding: var(--nile-spacing-md, var(--ng-error-expanded-padding));

package/src/nile-file-preview/nile-file-preview.css.ts

@@ -95,7 +95,7 @@ export const styles = css`
 
   .icons-container {
     display: flex;
-    gap: var(--nile-spacing-xs, var(--ng-spacing-1));
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
   }
 
   .general-icon {
@@ -244,7 +244,7 @@ export const styles = css`
     height: var(--nile-height-40px, var(--ng-height-40px));
     width: var(--nile-width-40px, var(--ng-width-10));
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
-    padding: var(--nile-spacing-2px, var(--ng-spacing-0-5)) var(--nile-spacing-3px, 3px);
+    padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));
     display: flex;
     justify-content: center;
     align-items: center;
@@ -304,7 +304,7 @@ export const styles = css`
     height: var(--nile-height-40px, var(--ng-height-40px));
     width: var(--nile-width-40px, var(--ng-width-10));
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
-    padding: var(--nile-spacing-2px, var(--ng-spacing-0-5)) var(--nile-spacing-3px, 3px);
+    padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));
     display: flex;
     justify-content: center;
     align-items: center;
@@ -418,7 +418,7 @@ export const styles = css`
     display: flex;
     justify-content: center;
     align-items: center;
-    padding-top: var(--nile-spacing-5xl, --ng-spacing-5xl);
+    padding-top: var(--nile-spacing-5xl, var(--ng-spacing-5xl));
   }
 
   .corner-icon {
@@ -459,7 +459,7 @@ export const styles = css`
   .vertical-document-icon {
     height: var(--nile-height-80px, var(--ng-height-80px));
     width: var(--nile-width-80px, var(--ng-spacing-8xl));
-    padding: var(--nile-spacing-2px, var(--ng-spacing-0-5)) var(--nile-spacing-3px, 3px);
+    padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));
     display: flex;
     justify-content: center;
     align-items: center;

package/src/nile-file-upload/nile-file-upload.css.ts

@@ -48,18 +48,18 @@ export const styles = css`
     justify-content: space-between;
     gap: 18px;
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
-    border: 
-      var(--nile-border-width-1, var(--ng-border-width-1)) 
-      var(--nile-border-style-dashed, var(--ng-border-style-solid)) 
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-dashed, var(--ng-border-style-solid))
       var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
 
   .hover-border {
-    border: 
-      var(--nile-border-width-1, var(--ng-border-width-1)) 
-      var(--nile-border-style-dashed, var(--ng-border-style-solid)) 
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-dashed, var(--ng-border-style-solid))
       var(--nile-colors-primary-600, var(--ng-colors-border-brand));
   }
 
@@ -77,7 +77,7 @@ export const styles = css`
     color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
     border: var(--nile-border-width-1, var(--ng-border-width-2)) var(--nile-border-style-dashed, var(--ng-border-style-solid)) var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    position: relative; 
+    position: relative;
   }
 
   .vertical-div:hover {
@@ -97,7 +97,7 @@ export const styles = css`
   }
 
   .content {
-    display: flex;  
+    display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 8px;
@@ -109,7 +109,7 @@ export const styles = css`
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
   }
-      
+
   .content p {
     margin: var(--nile-spacing-none, var(--ng-spacing-none));
     font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
@@ -127,9 +127,9 @@ export const styles = css`
   /* DRAGGING */
   .dragging {
     background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));
-    border: 
-      var(--nile-border-width-1, var(--ng-border-width-1)) 
-      var(--nile-border-style-dashed, var(--ng-border-style-solid)) 
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-dashed, var(--ng-border-style-solid))
       var(--nile-colors-primary-600, var(--ng-colors-border-primary));
     display: flex;
     align-items: center;
@@ -168,12 +168,12 @@ export const styles = css`
     align-items: center;
     gap: 18px;
     box-sizing: border-box;
-    border: 
-      var(--nile-border-width-1, var(--ng-border-width-1)) 
-      var(--nile-border-style-solid, var(--ng-border-style-solid)) 
+    border:
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))
       var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
-  
+
   .uploading:hover {
     border-color: var(--nile-colors-neutral-400);
   }
@@ -204,9 +204,9 @@ export const styles = css`
 
   /* PREVIEW STATE */
   .preview {
-    border: 
+    border:
       var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))  
+      var(--nile-border-style-solid, var(--ng-border-style-solid))
       var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
@@ -229,12 +229,12 @@ export const styles = css`
     width: var(--nile-width-42px, 42px); // check it once
     object-fit: contain;
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
-    border: 
+    border:
       var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))  
+      var(--nile-border-style-solid, var(--ng-border-style-solid))
       var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
-  
+
   .preview-file-info {
     width: 100%;
     display: flex;
@@ -291,7 +291,7 @@ export const styles = css`
     height: 40px;
     width: 40px;
   }
-  
+
   .preview-file-info {
     width: 100%;
     display: flex;
@@ -318,7 +318,7 @@ export const styles = css`
   }
 
   /* ERROR STATE */
-  
+
   .error {
     border: 1px solid var(--nile-colors-neutral-400);
   }
@@ -349,7 +349,7 @@ export const styles = css`
     height: 40px;
     width: 40px;
   }
-  
+
   .file-info {
     width: 100%;
     display: flex;
@@ -543,7 +543,7 @@ export const styles = css`
     max-height: 200px;
     overflow-y: auto;
     border: 1px solid var(--nile-colors-neutral-700);
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: var(--nile-radius-sm);
     scrollbar-width: none;
     padding: 12px;
   }
@@ -568,4 +568,4 @@ export const styles = css`
   }
 `;
 
-export default [styles];
+export default [styles];

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

@@ -24,7 +24,7 @@ export const styles = css`
     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: var(--nile-font-weight-regular, var(--ng-nile-font-weight-regular));
+    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: var(--nile-spacing-sm, var(--ng-spacing-sm));