@aquera/nile-elements 0.1.17 → 0.1.18

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

@@ -44,20 +44,20 @@ export const styles = css`
   :host([required]) .form-control--has-label .form-control__label::after {
     content: '*';
     margin-inline-start: -2px;
-    color: #a4121c;
+    color: var(--nile-colors-red-700);
   }
 
   /* Help text */
   .form-control--has-help-text .form-control__help-text {
     display: block;
-    color: #7f7f7f;
+    color: var(--nile-colors-dark-500);
     margin-top: 6px;
   }
 
   /* Error message */
   .form-control__error-message {
     display: block;
-    color: #a4121c;
+    color: var(--nile-colors-red-700);
     margin-top: 12px;
     font-size: 12px;
     font-style: normal;
@@ -105,12 +105,12 @@ export const styles = css`
 
   .input--standard:hover:not(.input--disabled) {
     background-color: hsl(0, 0%, 100%);
-    border-color: #000;
+    border-color: var(--nile-colors-dark-900);
   }
 
   .input--standard.input--focused:not(.input--disabled) {
     background-color: hsl(0, 0%, 100%);
-    border-color: #85aad1;
+    border-color: var(--nile-colors-primary-500);
     box-shadow: var(--nile-input-shadow-standard-focused-not-disabled);
   }
 
@@ -119,8 +119,8 @@ export const styles = css`
   }
 
   .input--standard.input--disabled {
-    background-color: #fff;
-    border-color: #c7ced4;
+    background-color: var(--nile-colors-white-base);
+    border-color: var(--nile-colors-neutral-500);
     opacity: 0.5;
     cursor: not-allowed;
   }
@@ -138,46 +138,46 @@ export const styles = css`
   }
 
   .input--standard.input--error {
-    border-color: #e5434d;
+    border-color: var(--nile-colors-red-500);
   }
 
   .input--standard.input--success {
-    border-color: #43e5c0;
+    border-color: var(--nile-colors-green-500);
   }
 
   .input--standard.input--destructive {
-    border-color: #fda29b;
+    border-color: var(--nile-colors-red-400);
   }
 
   .input--standard.input--focused.input--destructive:not(.input--disabled) {
-    border: 1px solid #fda29b;
+    border: 1px solid var(--nile-colors-red-400);
     box-shadow: var(--nile-input-shadow-destructive-active);
   }
 
   .input--destructive:active {
-    border: 1px solid #fda29b;
+    border: 1px solid var(--nile-colors-red-400);
     box-shadow: var(--nile-input-shadow-destructive-active);
   }
 
   /* Filled inputs */
   .input--filled {
     border: none;
-    background-color: #F1F1F2;
+    background-color: var(--nile-colors-dark-100);
     color: hsl(240 5.3% 26.1%);
   }
 
   .input--filled:hover:not(.input--disabled) {
-    background-color: #F1F1F2;
+    background-color: var(--nile-colors-dark-100);
   }
 
   .input--filled.input--focused:not(.input--disabled) {
-    background-color: #F1F1F2;
+    background-color: var(--nile-colors-dark-100);
     outline: solid 3px hsl(200.4 98% 39.4%);
     outline-offset: 1px;
   }
 
   .input--filled.input--disabled {
-    background-color: #F1F1F2;
+    background-color: var(--nile-colors-dark-100);
     opacity: 0.5;
     cursor: not-allowed;
   }
@@ -234,28 +234,28 @@ export const styles = css`
   }
 
   .input--filled .input__control:-webkit-autofill {
-    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;
+    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;
   }
 
   .input--filled .input__control:-webkit-autofill:hover {
-    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;
+    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;
   }
 
   .input--filled .input__control:-webkit-autofill:focus {
-    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;
+    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;
   }
 
   .input--filled .input__control:-webkit-autofill:active {
-    box-shadow: 0 0 0 3.125rem #F1F1F2 inset !important;
+    box-shadow: 0 0 0 3.125rem var(--nile-colors-dark-100) inset !important;
   }
 
   .input__control::placeholder {
-    color: #667085;
+    color: var(--nile-colors-neutral-700);
     user-select: none;
   }
 
   .input:hover:not(.input--disabled) .input__control {
-    color: #000;
+    color: var(--nile-colors-dark-900);
   }
 
   .input__control:focus {
@@ -280,7 +280,7 @@ export const styles = css`
 
   .input--standard:focus {
     border-radius: 4px;
-    border: 1px solid #85aad1;
+    border: 1px solid var(--nile-colors-primary-500);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 

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

@@ -54,17 +54,17 @@ export const styles = css`
 
   .link:not(.link--disabled):not(.link__button):active,
   .link:not(.link--disabled):not(.link__button):active .link__label {
-    color: #002f53;
+    color: var(--nile-colors-primary-900);
   }
 
   .link__button:hover {
     color: var(--nile-colors-primary-700);
     border-radius: var(--nile-radius-radius-xs);
-    background: #f5f7f7;
+    background: var(--nile-colors-dark-200);
   }
 
   .link__button:active {
-    color: #005EA61A;
+    color: var(--nile-colors-primary-100);
     border-radius: var(--nile-radius-radius-xs);
     background: rgba(0, 94, 166, 0.1);
   }

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

@@ -22,7 +22,7 @@ export const styles = css`
   }
 
   :host(:hover) {
-    background-color: #f0f0f0; /* Change background color on hover */
+    background-color: var(--nile-colors-neutral-400); /* Change background color on hover */
   }
 
   .preffix__icon {

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

@@ -111,7 +111,7 @@ export class NileLoader extends LitElement {
           <path
             id="Background"
             d="M30 16C30 17.8385 29.6379 19.659 28.9343 21.3576C28.2308 23.0561 27.1995 24.5995 25.8995 25.8995C24.5995 27.1995 23.0561 28.2307 21.3576 28.9343C19.659 29.6379 17.8385 30 16 30C14.1615 30 12.341 29.6379 10.6424 28.9343C8.94387 28.2307 7.40052 27.1995 6.1005 25.8995C4.80048 24.5995 3.76925 23.0561 3.06569 21.3576C2.36212 19.659 2 17.8385 2 16C2 14.1615 2.36212 12.341 3.06569 10.6424C3.76926 8.94387 4.80049 7.40052 6.10051 6.1005C7.40053 4.80048 8.94388 3.76925 10.6424 3.06568C12.341 2.36212 14.1615 2 16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76926 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16Z"
-            stroke="#F2F4F7"
+            stroke="var(--nile-colors-dark-200)"
             stroke-width="4"
             stroke-linecap="round"
             stroke-linejoin="round"
@@ -119,7 +119,7 @@ export class NileLoader extends LitElement {
           <path
             id="Line"
             d="M16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76925 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16"
-            stroke="#005EA6"
+            stroke="var(--nile-colors-primary-600)"
             stroke-width="4"
             stroke-linecap="round"
             stroke-linejoin="round"
@@ -151,7 +151,7 @@ export class NileLoader extends LitElement {
           <path
             id="Line"
             d="M6.10051 6.1005C7.66275 4.53826 9.57255 3.36793 11.6738 2.68521C13.775 2.00248 16.0079 1.82675 18.1901 2.17236C20.3722 2.51798 22.4416 3.37514 24.229 4.67376C26.0164 5.97238 27.4711 7.67559 28.4741 9.64414C29.4771 11.6127 30 13.7907 30 16C30 18.2093 29.4771 20.3873 28.4741 22.3559C27.4711 24.3244 26.0164 26.0276 24.229 27.3262C22.4416 28.6249 20.3722 29.482 18.1901 29.8276"
-            stroke="#005EA6"
+            stroke="var(--nile-colors-primary-600)"
             stroke-width="4"
             stroke-linecap="round"
             stroke-linejoin="round"

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

@@ -87,7 +87,7 @@ export const styles = css`
   }
 
   :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
-    background-color: #F9FAFB;
+    background-color: var(--nile-colors-neutral-100);
     color: hsl(0, 0%, 0%);
   }
 

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

@@ -46,7 +46,7 @@ export const styles = css`
   .option--current,
   .option--current.option--disabled {
     background-color: rgba(0, 94, 166, 0.1);
-    color: #005ea6;
+    color: var(--nile-colors-primary-600);
     opacity: 1;
   }
 

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

@@ -17,7 +17,7 @@ export const styles = css`
 
   .popover__title {
     display: block;
-    color: #000;
+    color: var(--nile-colors-dark-900);
     font-family: var(--nile-font-family-serif);
     font-size: var(--nile-type-scale-4);
     font-style: normal;
@@ -47,7 +47,7 @@ export const styles = css`
 
   nile-popup {
     --arrow-size: 18px;
-    --arrow-color: #ffff;
+    --arrow-color: var(--nile-colors-white-base);
   }
 `;
 

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

@@ -107,12 +107,12 @@ export const styles = css`
   }
 
   .radio--disabled .radio__checked-icon {
-    background-color:#D0D5DD; // for v2
+    background-color:var(--nile-colors-neutral-500); // for v2
   }
 
   .radio--disabled .radio__control {
-    background-color:#F9FAFB;
-    border: 1px solid #D0D5DD;
+    background-color:var(--nile-colors-neutral-100)F9FAFB;
+    border: 1px solid var(--nile-colors-neutral-500);
   }
 
   /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
@@ -132,6 +132,6 @@ export const styles = css`
   .radio__label_border {
     padding: 0.75rem;
     border-radius: 4px;
-    border: 1px solid var(--Neutral-Normal, #e5e9eb);
+    border: 1px solid var(--Neutral-Normal, var(--nile-colors-neutral-400));
   }
 `;

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

@@ -84,7 +84,7 @@ export class NileSectionMessage extends NileElement {
             <nile-icon-button
               name="${this.iconMap[this.variant]}"
               size="${this.iconSize}"
-              color="#fff"
+              color="var(--nile-colors-white-base)"
             >
             </nile-icon-button>
           </slot>

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

@@ -53,13 +53,13 @@ export const styles = css`
   :host([required]) .form-control--has-label .form-control__label::after {
     content: '*';
     margin-inline-start: -2px;
-    color: #a4121c;
+    color: var(--nile-colors-red-700);
   }
 
   /* Help text */
   .form-control--has-help-text .form-control__help-text {
     display: block;
-    color: #666666;
+    color: var(--nile-colors-dark-500);
     margin-top: 0.75rem;
   }
 
@@ -177,7 +177,7 @@ export const styles = css`
   }
 
   .select__tags-count {
-    color: #005ea6;
+    color: var(--nile-colors-primary-600);
     font-family: Colfax-regular;
     font-size: 14px;
     font-style: normal;
@@ -202,19 +202,19 @@ export const styles = css`
 
   /* Standard selects */
   .select--standard .select__combobox {
-    background-color: #ffffff;
-    border: solid 1px #cccccc;
+    background-color: var(--nile-colors-white-base);
+    border: solid 1px var(--nile-colors-neutral-500);
   }
 
   .select--standard .select__combobox:hover {
     border: 1px solid  var(--nile-colors-dark-900);
-    background: #fff;
+    background: var(--nile-colors-white-base);
   }
 
   .select--standard.select--disabled .select__combobox {
-    background-color: #f4f4f4;
-    border-color: #cccccc;
-    color: #999999;
+    background-color: var(--nile-colors-neutral-100);
+    border-color: var(--nile-colors-neutral-500);
+    color: var(--nile-colors-dark-500);
     opacity: 0.5;
     cursor: not-allowed;
     outline: none;
@@ -222,7 +222,7 @@ export const styles = css`
 
   .select--standard:not(.select--disabled).select--open .select__combobox,
   .select--standard:not(.select--disabled).select--focused .select__combobox {
-    background-color: #f4f4f4;
+    background-color: var(--nile-colors-neutral-100);
   }
 
   .select--warning .select__combobox {
@@ -230,33 +230,33 @@ export const styles = css`
   }
 
   .select--error .select__combobox {
-    border-color: #e5434d;
+    border-color: var(--nile-colors-red-500);
   }
 
   .select--success {
-    border-color: #43e5c0;
+    border-color: var(--nile-colors-green-500);
   }
 
   /* Filled selects */
   .select--filled .select__combobox {
     border: none;
-    background-color: #f4f4f4;
-    color: #333333;
+    background-color: var(--nile-colors-neutral-100);
+    color: var(--nile-colors-dark-900);
   }
 
   .select--filled:hover:not(.select--disabled) .select__combobox {
-    background-color: #f4f4f4;
+    background-color: var(--nile-colors-neutral-100);
   }
 
   .select--filled.select--disabled .select__combobox {
-    background-color: #f4f4f4;
+    background-color: var(--nile-colors-neutral-100);
     opacity: 0.5;
     cursor: not-allowed;
   }
 
   .select--filled:not(.select--disabled).select--open .select__combobox,
   .select--filled:not(.select--disabled).select--focused .select__combobox {
-    background-color: #f4f4f4;
+    background-color: var(--nile-colors-neutral-100);
     outline: 3px solid rgba(0, 89, 255, 0.4);
   }
 
@@ -299,14 +299,14 @@ export const styles = css`
     flex: 0;
     display: inline-flex;
     align-items: center;
-    color: #aaaaaa;
+    color: var(--nile-colors-dark-500);
   }
 
   .select__suffix {
     flex: 0;
     display: inline-flex;
     align-items: center;
-    color: #aaaaaa;
+    color: var(--nile-colors-dark-500);
   }
 
   /* Clear button */
@@ -315,7 +315,7 @@ export const styles = css`
     align-items: center;
     justify-content: center;
     font-size: inherit;
-    color: #005ea6;
+    color: var(--nile-colors-primary-600);
     border: none;
     background: none;
     padding: 0;
@@ -324,7 +324,7 @@ export const styles = css`
   }
 
   .select__clear:hover {
-    color: #999999;
+    color: var(--nile-colors-dark-500);
   }
 
   .select__clear:focus {
@@ -351,8 +351,8 @@ export const styles = css`
     position: relative;
     font-size: 1rem;
     font-weight: 400;
-    background: #ffffff;
-    border: solid 1px #cccccc;
+    background: var(--nile-colors-white-base);
+    border: solid 1px var(--nile-colors-neutral-500);
     border-radius: 0.25rem;
     padding-block: 0;
     padding-inline: 0;
@@ -379,7 +379,7 @@ export const styles = css`
   .select__listbox::slotted(small) {
     font-size: 0.875rem;
     font-weight: 600;
-    color: #888888;
+    color: var(--nile-colors-dark-500);
     padding-block: 0.25rem;
     padding-inline: 1rem;
   }
@@ -397,8 +397,8 @@ export const styles = css`
   .select__footer {
     position: sticky;
     bottom: 0px;
-    background: #fafafa;
-    border: 1px solid #e5e9eb;
+    background: var(--nile-colors-neutral-100);
+    border: 1px solid var(--nile-colors-neutral-400);
     display: flex;
     height: 15px;
     /* Auto layout */

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

@@ -336,6 +336,7 @@ export class NileSelect extends NileElement implements NileFormControl {
     this.value = '';
     this.selectionChanged();
     this.emit('nile-change', { value: this.value, name: this.name });
+    this.emit('nile-clear',{ value: this.multiple?this.value:'', name: this.name })
   }
 
   private handleDocumentKeyDown(event: KeyboardEvent) {
@@ -854,6 +855,7 @@ export class NileSelect extends NileElement implements NileFormControl {
       this.listbox.hidden = true;
       this.popup.active = false;
 
+      this.searchValue = '';
       this.emit('nile-after-hide', { value: this.value, name: this.name });
     }
   }

package/src/nile-sidebar/index.ts

@@ -28,10 +28,10 @@ export class NileSidebar extends LitElement {
   static override styles = css`
     :host {
       background-color: var(--nile-alert-color-background-base);
-      border-right: 1px solid #e5e9eb;      
+      border-right: 1px solid var(--nile-colors-neutral-400);      
       min-height: 100vh;
-      background: #fafafa;
-      border: 1px solid #e5e9eb;
+      background: var(--nile-colors-neutral-100);
+      border: 1px solid var(--nile-colors-neutral-400);
     }
     :host([showSidebar=true]) {
       min-width: 240px;
@@ -48,12 +48,12 @@ export class NileSidebar extends LitElement {
     }
 
     .view-component {
-      background-color: #fff;
+      background-color: var(--nile-colors-white-base);
       min-width: 240px;
     }
     // padding: 3rem;
     .view-component__item {
-      background-color: #fff;
+      background-color: var(--nile-colors-white-base);
       // padding: 1rem;
       border-radius: 3px;
       border: solid 1px #eee;

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

@@ -31,7 +31,7 @@ export const styles = css`
   }
 
   .nile__sidebar-menu-item:hover {
-    background-color: #f9fafb;
+    background-color: var(--nile-colors-neutral-100);
     border-radius: 6px;
   }
 

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

@@ -117,7 +117,7 @@ export default css`
   }
 
   .nile-slide--disabled .nile-slide-toggle__slider {
-    background-color: #f2f4f7;
+    background-color: var(--nile-colors-dark-200);
   }
 
   .nile-slide--disabled .nile-slide-toggle__switch {
@@ -129,6 +129,6 @@ export default css`
     .nile-slide-toggle__switch
     input:checked
     + .nile-slide-toggle__slider {
-    background-color: #f2f4f7;
+    background-color: var(--nile-colors-dark-200);
   }
 `;

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

@@ -67,11 +67,11 @@ export const styles = css`
 	.stepper__line {
 		display: block;
 		border: 0;
-		border-top: 2px solid var(--nile-colors-gray-light-mode-200, #eaecf0);
+		border-top: 2px solid var(--nile-colors-gray-light-mode-200);
 	}
 
 	.stepper__line--active {
-		border-top: 2px solid var(--nile-colors-primary-600,#005EA6);
+		border-top: 2px solid var(--nile-colors-primary-600);
 	}
 
 	.stepper__item__content--below {
@@ -88,7 +88,7 @@ export const styles = css`
 	}
 
 	.stepper__content__title {
-		color:var(--nile-colors-gray-light-mode-700, #344054);
+		color:var(--nile-colors-gray-light-mode-700);
 		font-size: var(--stepper-item-title-size);
 		line-height: var(--stepper-item-text-line-height);
 		font-family: var(--nile-font-family-medium);
@@ -97,15 +97,15 @@ export const styles = css`
 
 	.stepper__content__title--inline{
 		padding: 0 8px;
-		color:var(--nile-colors-gray-light-mode-500, #667085);
+		color:var(--nile-colors-gray-light-mode-500);
 	}
 
 	.stepper__content__title--active{
-		color:var(--nile-colors-primary-700, #005291);
+		color:var(--nile-colors-primary-700);
 	}
 
 	.stepper__content__subtitle {
-		color:var(--nile-colors-gray-light-mode-600, #475467);
+		color:var(--nile-colors-gray-light-mode-600);
 		font-size: var(--stepper-item-subtitle-size);
 		line-height: var(--stepper-item-text-line-height);
 		font-family: var(--nile-font-family-sans-serif);
@@ -113,30 +113,30 @@ export const styles = css`
 	}
 
 	.stepper__content__subtitle--active{
-		color:var(--nile-colors-primary-600, #005EA6);
+		color:var(--nile-colors-primary-600);
 	}
 
 	.stepper__bulletin--dot {
 		width: var(--circle-height);
 		aspect-ratio: 1 / 1;
 		border-radius: 50%;
-		background: radial-gradient(var(--nile-colors-gray-light-mode-300, #d0d5dd) var(--bulletin--dot--seperation), var(--nile-colors-gray-neutral-50, #f9fafb) var(--bulletin--dot--seperation));
-		border: 2px solid var(--nile-colors-gray-light-mode-200, #eaecf0);
+		background: radial-gradient(var(--nile-colors-gray-light-mode-300) var(--bulletin--dot--seperation), var(--nile-colors-gray-neutral-50) var(--bulletin--dot--seperation));
+		border: 2px solid var(--nile-colors-gray-light-mode-200);
 	}
 
 	.stepper__bulletin__dot--active{
-		background: radial-gradient(#fff var(--bulletin--dot--seperation), var(--nile-colors-primary-600, #005EA6) var(--bulletin--dot--seperation));
-		border: 2px solid #85AAD18A;
+		background: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));
+		border: 2px solid var(--nile-colors-primary-400);
 	}
 
 	.stepper__bulletin--icon {
 		display:grid;
 		place-content:center;
 		width: var(--circle-height);
-		border: 2px solid var(--nile-colors-primary-600, #005EA6);
+		border: 2px solid var(--nile-colors-primary-600);
 		aspect-ratio: 1 / 1;
 		border-radius: 50%;
-		background-color:var(--nile-colors-primary-600, #005EA6);
+		background-color:var(--nile-colors-primary-600);
 		overflow:hidden;
 	}
 `;

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

@@ -310,7 +310,7 @@ export class NileSwitcher extends NileElement {
         class="pointer-cursor switcher-object-mapper-icon"
         slot="suffix"
         name="expand-2"
-        color="#005EA6"
+        color="var(--nile-colors-primary-600)"
         size="16"
       >
       </nile-icon>

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

@@ -32,7 +32,6 @@ export const styles = css`
     display: inline-flex;
     width: 100%;
     align-items: center;
-    border-radius: 4px;
     border-radius: var(--tab-border-radius);
     color: var(--nile-colors-gray-light-mode-500);
     padding: var(--tab-padding);

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

@@ -17,7 +17,7 @@ export const styles = css`
 
   :host {
     --indicator-color: var(--nile-colors-primary-600);
-    --track-color: #e5e9eb;
+    --track-color: var(--nile-colors-neutral-400);
     --track-width: 2px;
     --tab-gap: 12px;
 
@@ -114,7 +114,7 @@ export const styles = css`
     position: relative;
     flex-direction: row;
     border-bottom: solid var(--track-width)
-      var(--nile-colors-gray-light-mode-200,#eaecf0);
+      var(--nile-colors-gray-light-mode-200);
   }
 
   .tab-group--top .tab-group__indicator {
@@ -253,7 +253,7 @@ export const styles = css`
   .hide__track slot::slotted(nile-tab) {
     --tab-border-radius: 4px;
     --tab-padding:8px 12px;
-    --tab-hover-background-color: #f9fafb;
+    --tab-hover-background-color: var(--nile-colors-neutral-100);
     --tab-active-background-color: var(--nile-colors-brand-50);
   }
 `;

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

@@ -37,7 +37,7 @@ export const styles = css`
   }
 
   slot::slotted(nile-table-row:nth-child(odd)) {
-    border-bottom: 1px solid #eaecf0;
+    border-bottom: 1px solid var(--nile-colors-neutral-400);
     background: var(--nile-table-background--odd);
   }