@aquera/nile-elements 0.0.65 → 0.0.67

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

@@ -73,8 +73,7 @@ export class NileInput extends NileElement implements NileFormControl {
   /** The current value of the input, submitted as a name/value pair with form data. */
   @property() value = '';
 
-  @property({type: Boolean}) checkNonPrintableChar: boolean = false;
-
+  @property({ type: Boolean }) checkNonPrintableChar: boolean = false;
 
   /** The default value of the form control. Primarily used for resetting the form control. */
   @defaultValue() defaultValue = '';
@@ -94,7 +93,6 @@ export class NileInput extends NileElement implements NileFormControl {
   /** Sets the input to a success state, changing its visual appearance. */
   @property({ type: Boolean }) success = false;
 
-
   /** Sets the input to a Destructive state, changing its visual appearance. */
   @property({ type: Boolean }) destructive = false;
 
@@ -181,7 +179,7 @@ export class NileInput extends NileElement implements NileFormControl {
    * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
    * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
    */
-  @property() autocomplete: string = "off";
+  @property() autocomplete: string = 'off';
 
   /** Indicates that the input should receive focus on page load. */
   @property({ type: Boolean }) autofocus: boolean;
@@ -309,10 +307,9 @@ export class NileInput extends NileElement implements NileFormControl {
     this.hasFocus = true;
     this.emit('nile-focus', { value: this.value });
 
-    if(this.checkNonPrintableChar){
+    if (this.checkNonPrintableChar) {
       this.markNonPrintableCharacters();
     }
-
   }
 
   private handleInput() {
@@ -368,7 +365,7 @@ export class NileInput extends NileElement implements NileFormControl {
   async handleValueChange() {
     await this.updateComplete;
 
-    if(this.checkNonPrintableChar){
+    if (this.checkNonPrintableChar) {
       this.markNonPrintableCharacters();
     }
   }
@@ -382,7 +379,9 @@ export class NileInput extends NileElement implements NileFormControl {
         const charCode = this.value.charCodeAt(i);
 
         if (charCode > 127) {
-          markedValue += `<span class="input__srtiked-text">${this.value.charAt(i)}</span>`;
+          markedValue += `<span class="input__srtiked-text">${this.value.charAt(
+            i
+          )}</span>`;
           this.hasPrintableCharacters = true;
         } else {
           markedValue += this.value.charAt(i);
@@ -391,10 +390,12 @@ export class NileInput extends NileElement implements NileFormControl {
     }
 
     this.markedValue = markedValue;
-    this.emit('nile-value-marked', { value: this.markedValue, hasNonPrintableCharacters: this.hasPrintableCharacters });
+    this.emit('nile-value-marked', {
+      value: this.markedValue,
+      hasNonPrintableCharacters: this.hasPrintableCharacters,
+    });
   }
 
-
   /** Removes all non printable characters from the value. */
   removeAllNonPrintableCharacters() {
     let cleanedValue = '';
@@ -412,10 +413,8 @@ export class NileInput extends NileElement implements NileFormControl {
 
     this.value = cleanedValue;
     this.emit('nile-npchar-removed', { value: this.value });
-
   }
 
-
   /** Sets focus on the input. */
   focus(options?: FocusOptions) {
     this.input.focus(options);

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

@@ -28,6 +28,7 @@ export const styles = css`
     display: block;
     color: var(--nile-page-header-heading-font-color);
     font-size: var(--nile-page-header-heading-font-size);
+    font-style: normal;
     font-weight: var(--nile-page-header-heading-font-weight);
     line-height: var(--nile-page-header-heading-line-height);
   }
@@ -36,17 +37,12 @@ export const styles = css`
     display: block;
     color: var(--nile-page-header-subheading-font-color);
     font-size: var(--nile-page-header-subheading-font-size);
+    font-style: normal;
     font-weight: var(--nile-page-header-subheading-font-weight);
     line-height: var(--nile-page-header-subheading-line-height);
     margin-top: 3px;
   }
 
-  .line {
-    border: none;
-    border-top: 1px solid var(--nile-page-header-line-border-color);
-    margin: 20px 0 0 0;
-  }
-
   [hidden] {
     display: none;
   }

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

@@ -58,7 +58,6 @@ export class NilePageHeader extends NileElement {
       >
         ${this.subHeading}
       </slot>
-      <hr class="line" />
     </slot>`;
   }
 

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

@@ -2,32 +2,41 @@ import { css } from 'lit';
 
 export default css`
   .nile-slide-toggle {
-    display: flex;
-    align-items: center;
+    display: inline-flex;
+    align-items: baseline;
   }
 
   .nile-slide-toggle__switch {
     flex: 0 0 auto;
     position: relative;
     display: inline-block;
-    width: 32px;
-    height: 16px;
+    width: 36px;
+    height: 20px;
     line-height: 22px;
     margin-right: 10px;
   }
 
   .nile-slide-toggle__label {
+    display: flex;
+    flex-direction: column;
     margin-right: 6px;
     font-size: 14px;
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-gray-light-mode-700);
     font-family: var(--nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
-    font-weight: 400;
-    line-height: 14px;
+    font-weight: 500;
+    line-height: 20px;
     letter-spacing: 0.2px;
   }
 
+  .nile-slide-toggle__sublabel {
+    color: var(--nile-colors-gray-light-mode-600);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+  }
+
   .nile-slide-toggle__switch input {
     opacity: 0;
     width: 0;
@@ -49,8 +58,8 @@ export default css`
   .nile-slide-toggle__slider:before {
     position: absolute;
     content: '';
-    height: 12px;
-    width: 12px;
+    height: 16px;
+    width: 16px;
     bottom: 2px;
     left: 2px;
     background-color: var(--nile-slide-toggle-color-indicator);

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

@@ -8,13 +8,14 @@ export class NileSlideToggle extends NileElement {
   public static styles: CSSResultGroup = styles;
 
   @property({ type: String }) label = '';
+  @property({ type: String }) sublabel = '';
+
   @property({ type: Boolean, reflect: true }) isChecked = false;
 
   @property({ attribute: 'help-text' }) helpText = '';
 
   @property({ attribute: 'error-message' }) errorMessage = '';
 
-
   connectedCallback() {
     super.connectedCallback();
     this.emit('nile-init');
@@ -25,7 +26,6 @@ export class NileSlideToggle extends NileElement {
     this.emit('nile-destroy');
   }
 
-
   toggleValue() {
     this.isChecked = !this.isChecked;
     this.dispatchEvent(
@@ -38,36 +38,30 @@ export class NileSlideToggle extends NileElement {
     const hasErrorMessage = this.errorMessage ? true : false;
 
     return html`
-    <div class="nile-slide-toggle">
-    <span class="nile-slide-toggle__label">
-        ${this.label}
-      </span>
-      <label class="nile-slide-toggle__switch">
-        <input
-          type="checkbox"
-          .checked=${this.isChecked}
-          @change=${this.toggleValue}
-        />
-        <span class="nile-slide-toggle__slider"></span>
-      </label>
-    </div>
-    ${
-          hasHelpText
-            ? html`
-                <nile-form-help-text>${this.helpText}</nile-form-help-text>
-              `
-            : ``
-        }
-
-        ${
-          hasErrorMessage
-            ? html`
-                <nile-form-error-message
-                  >${this.errorMessage}</nile-form-error-message
-                >
-              `
-            : ``
-        }
+      <div class="nile-slide-toggle">
+        <label class="nile-slide-toggle__switch">
+          <input
+            type="checkbox"
+            .checked=${this.isChecked}
+            @change=${this.toggleValue}
+          />
+          <span class="nile-slide-toggle__slider"></span>
+        </label>
+        <span class="nile-slide-toggle__label">
+          <span>${this.label}</span>
+          <span class="nile-slide-toggle__sublabel">${this.sublabel}</span>
+        </span>
+      </div>
+      ${hasHelpText
+        ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
+        : ``}
+      ${hasErrorMessage
+        ? html`
+            <nile-form-error-message
+              >${this.errorMessage}</nile-form-error-message
+            >
+          `
+        : ``}
     `;
   }
 }

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

@@ -1,9 +1,9 @@
 /**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
 import {css} from 'lit-element';
 
@@ -28,17 +28,17 @@ export const styles = css`
     display: inline-flex;
     align-items: center;
     border-radius: 8px;
-    color: var(--nile-colors-dark-500);
+    color: #667085;
     padding: 4px 4px 12px 4px;
     white-space: nowrap;
     user-select: none;
     cursor: pointer;
     transition: 0.2s box-shadow, 0.2s color;
-    font-family:var(--nile-font-family-serif);
-    font-size: 16px;
+    font-family: var(--nile-font-family-serif);
+    font-size: 14px;
     font-style: normal;
-    font-weight: 500;
-    line-height: 16px;
+    font-weight: 600;
+    line-height: 20px;
     letter-spacing: 0.2px;
     gap: 4px;
   }
@@ -56,7 +56,7 @@ export const styles = css`
   }
 
   .tab.tab--active:not(.tab--disabled) {
-    color: var(--nile-colors-primary-600);
+    color: var(--nile-colors-primary-700);
   }
 
   .tab.tab--closable {

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

@@ -112,7 +112,7 @@ export const styles = css`
 
   .tab-group--top .tab-group__indicator {
     bottom: calc(-1 * var(--track-width));
-    border-bottom: solid 3px var(--indicator-color);
+    border-bottom: 2px solid var(--nile-colors-brand-600);
   }
 
   .tab-group--top .tab-group__body {

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

@@ -13,20 +13,15 @@ import { css } from 'lit-element';
 export const styles = css`
   :host {
     box-sizing: border-box;
-    --nile-table-background--odd: var(
-      --nile-table-body-row-odd-background-color
-    );
-    --nile-table-background--even: var(
-      --nile-table-body-row-even-background-color
-    );
+    --nile-table-background--odd: var(--nile-colors-base-white);
+    --nile-table-background--even: var(--nile-colors-base-white);
   }
 
   .base {
     background-color: var(--nile-colors-white-base);
     border: 1px solid var(--nile-table-row-border-color);
     border-radius: var(--nile-radius-radius-xl);
-    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
-      0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),0px 1px 2px 0px rgba(16, 24, 40, 0.06);
     overflow: hidden;
   }
 
@@ -38,11 +33,11 @@ export const styles = css`
   .nile__table__body {
     display: table;
     border-collapse: collapse;
-    width:100%;
+    width: 100%;
   }
 
   slot::slotted(nile-table-row:nth-child(odd)) {
-    border-bottom: 1px solid #e4e2e4;
+    border-bottom: 1px solid #eaecf0;
     background: var(--nile-table-background--odd);
   }
 

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

@@ -11,30 +11,25 @@ import { css } from 'lit-element';
  * TableCellItem CSS
  */
 export const styles = css`
-
   :host {
     box-sizing: border-box;
     display: table-cell;
+    vertical-align: middle;
     --min--height: 52px;
-    --max--cell-width:auto;
+    --max--cell-width: auto;
     max-width: var(--max--cell-width);
-    overflow: hidden;
+    padding: 16px 24px;
+    min-height: var(--min--height);
   }
 
   .column {
-    display: flex;
-    flex-direction: row;
-    padding: 0 var(--nile-type-scale-4);
-    align-items: center;
-    min-height: var(--min--height);
-    height: auto;
-    width: auto;
-    color: var(--nile-colors-dark-900);
-    font-feature-settings: 'clig' off, 'liga' off;
+    height: 100%;
+    color: var(--nile-colors-gray-light-mode-600);
+    font-family: var(--nile-font-family-serif);
     font-size: var(--nile-type-scale-3);
     font-style: normal;
     font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-type-scale-3); /* 100% */
+    line-height: var(--nile-type-scale-6);
     letter-spacing: 0.2px;
   }
 `;

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

@@ -14,24 +14,23 @@ export const styles = css`
   :host {
     display: table-cell;
     box-sizing: border-box;
-    --min-height: 52px;
+    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);
+    min-height: 44px;
   }
 
   .headers {
     display: flex;
-    padding: 0 var(--nile-type-scale-4);
     align-items: center;
     height: auto;
-    min-height: var(--min-height);
     width: 100%;
     gap: 8px;
     color: var(--nile-colors-dark-900);
+    font-family: var(--nile-font-family-serif);
     font-feature-settings: 'clig' off, 'liga' off;
-    font-size: var(--nile-type-scale-3);
+    font-size: var(--nile-type-scale-2);
+    font-weight: 500;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-type-scale-3);
-    letter-spacing: 0.2px;
+    line-height: var(--nile-type-scale-5);
   }
 
   slot {
@@ -45,7 +44,7 @@ export const styles = css`
   .sorting__icons {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    /* justify-content: space-between; */
     align-items: centre;
   }
 

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

@@ -13,14 +13,20 @@ import { css } from 'lit-element';
 export const styles = css`
   :host {
     display: table-row;
-    width:100%;
-    --nile-header-background:var(--nile-table-header-background-color);
+    width: 100%;
+    height: 100%;
+    height: max-content;
+    --nile-header-background: var(--nile-table-header-background-color);
     border-bottom: 1px solid var(--nile-table-row-border-color);
   }
 
   slot::slotted(nile-table-header-item) {
     background-color: var(--nile-header-background);
   }
+
+  nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
+    color: red;
+  }
 `;
 
 export default [styles];