@aquera/nile-elements 0.0.66 → 0.0.67

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 {