@aquera/nile-elements 0.0.68 → 0.0.70

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

@@ -13,57 +13,38 @@ import {css} from 'lit-element';
 export const styles = css`
 
 	:host {
-		min-height:var(--nile-hero-height);
+		display:block;
+		--transition:2000ms;
+	}
+	.hero__container{
+		overflow:hidden;
 		width:100%;
 		position:relative;
 		display:block;
-		border-bottom: 1px solid #EAECF0;
-		background: linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient) 0%,  var( --nile-hero-color-bg-to-gradient) 100%);
+  		transition: var(--transition);
 	}
-
 	.hero__body {
 		height:100%;
 	}
 
-	.hero__header {
-		display: flex;
-		align-items: center;
-		padding: var(--nile-hero-first-elements-padding);
-		gap: .75rem;
-	}
-
-	.icon__container {
-		height: 25px;
-		place-items: center;
-		display: grid;
-		aspect-ratio: 1 / 1;
-		border-radius: 8px;
-		border: 1px solid #EAECF0;
-		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
-	}
-
-	.hero__text {
-		color: var(--nile-hero-text-color);
-		font-size: var(--nile-hero-text-font-size);
-		font-style: normal;
-		font-weight: var(--nile-hero-text-font-weight);
-	}
-
 	.hero__slot {
-		padding: var(--nile-hero-first-elements-padding);
+		padding-left: 48px;
+		padding-top: 24px 
 	}
 
 	.hero__img__container {
-		height:100%;
+		height:var(--nile-hero-height);
+		overflow:hidden;
 		width:max-content;
 		position: absolute;
 		right: 0;
-		top:0;
+		bottom:0;
+		transition:var(--transition);
 	}
 
 	.hero__img {
 		object-fit:cover;
-		height:100%;
+		height:var(--nile-hero-height);
 		width:auto;
 	}
 `;

package/src/nile-hero/nile-hero.ts

@@ -5,10 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
-import { customElement } from 'lit/decorators.js';
+import {LitElement, html, property, CSSResultArray, TemplateResult,nothing} from 'lit-element';
+import { customElement, query } from 'lit/decorators.js';
 import {styles} from './nile-hero.css';
 import NileElement from '../internal/nile-element';
+import { watch } from '../internal/watch';
+import { classMap } from 'lit/directives/class-map.js';
 
 
 /**
@@ -19,9 +21,14 @@ import NileElement from '../internal/nile-element';
  */
 @customElement('nile-hero')
 export class NileHero extends NileElement {
-	@property({reflect:true}) icon:string='action'
-	@property({ reflect: true, attribute: 'img-src' }) imgSrc:string='';
-	@property({ reflect: true, attribute: 'hero-text' }) heroText:string='Nile Hero';
+	@query('.hero__container') heroContainer:HTMLElement;
+	@query('nile-hero-header') heroHeader:HTMLElement;
+	@query('.hero__img__container') imgContainer:HTMLElement;
+	@property({ reflect: true }) icon: string = 'action';
+	@property({ reflect: true, type: Boolean }) collapse: boolean = false;
+	
+	@property({ reflect: true, attribute: 'img-src' }) imgSrc: string = '';
+	@property({ reflect: true, attribute: 'hero-text' }) heroText: string = 'Nile Hero';
 
 	/**
 	 * The styles for nile-hero
@@ -32,29 +39,48 @@ export class NileHero extends NileElement {
 	}
 
 	/* #endregion */
-
+	connectedCallback() {
+		super.connectedCallback();
+		this.updateComplete.then(() => {
+			this.updateOnCollapseChange();
+		});
+	}
 	/* #region Methods */
 
+	@watch('collapse')
+	updateOnCollapseChange(){
+		if(!this.heroContainer) return;
+		const heroHeaderHeight=this.heroHeader.scrollHeight;
+		if(this.collapse){
+			this.heroContainer.style.height=heroHeaderHeight+'px';
+			this.heroContainer.style.background="var(--nile-hero-collapsed-background,#fff)";
+			this.heroContainer.style.borderBottom="1px solid #EAECF0";
+			this.imgContainer.style.opacity='0';
+		}
+		else{
+			this.heroContainer.style.height="var(--nile-hero-height)";
+			this.heroContainer.style.background="linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient) 0%,  var( --nile-hero-color-bg-to-gradient) 100%)";
+			this.heroContainer.style.borderBottom='';
+			this.imgContainer.style.opacity='1';
+		}
+	}
 	/**
 	 * Render method
 	 * @slot This is a slot test
 	 */
 	public render(): TemplateResult {
 		return html`
+		<div class="hero__container">
 			<div class="hero__body">
-				<div class="hero__header">
-					<span class="icon__container">
-						<nile-icon name="${this.icon}" ></nile-icon>
-					</span>
-					<span class="hero__text">${this.heroText}</span>
-				</div>
+				<nile-hero-header hero-text="${this.heroText}" icon="${this.icon}"></nile-hero-header>
 				<div class="hero__slot">
 					<slot></slot>
 				</div>
 			</div>
-			<div class="hero__img__container">
+			<div class="hero__img__container" id="hero__img__container">
 				<img src="${this.imgSrc}" class="hero__img">
 			</div>
+		</div>
 		`;
 	}
 

package/src/nile-hero-header/index.ts

@@ -0,0 +1 @@
+export { NileHeroHeader } from './nile-hero-header';

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

@@ -0,0 +1,42 @@
+/**
+* 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';
+
+/**
+ * HeroHeader CSS
+ */
+export const styles = css`
+	
+	:host {
+		width:100%;
+		display: flex;
+		align-items: center;
+		padding:16px 48px;
+		gap: 16px;
+	}
+
+	.icon__container {
+		height: 32px;
+		aspect-ratio: 1 / 1;
+		place-items: center;
+		display: grid;
+		border-radius: 8px;
+		border: 1px solid #EAECF0;
+		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
+	}
+
+	.hero__text {
+		color: var(--nile-hero-text-color);
+		font-size: var(--nile-hero-text-font-size);
+		line-height: var(--nile-hero-text-line-height);
+		font-style: normal;
+		font-weight: var(--nile-hero-text-font-weight);
+	}
+`;
+
+export default [styles];

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

@@ -0,0 +1,59 @@
+/**
+ * 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 {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import {styles} from './nile-hero-header.css';
+import NileElement from '../internal/nile-element';
+
+
+/**
+ * Nile hero-header component.
+ *
+ * @tag nile-hero-header
+ *
+ */
+@customElement('nile-hero-header')
+export class NileHeroHeader extends NileElement {
+	@property({ reflect: true }) icon: string = 'action';
+	@property({ reflect: true, attribute: 'hero-text' }) heroText: string = 'Nile Hero';
+
+	/**
+	 * The styles for nile-hero-header
+	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+	 */
+	public static get styles(): CSSResultArray {
+		return [styles];
+	}
+
+	/* #endregion */
+
+	/* #region Methods */
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+	public render(): TemplateResult {
+		return html`
+				<span class="icon__container">
+					<nile-icon size="16" name="${this.icon}"></nile-icon>
+				</span>
+				<span class="hero__text">${this.heroText}</span>
+			`;
+	}
+
+	/* #endregion */
+}
+
+export default NileHeroHeader;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-hero-header': NileHeroHeader;
+  }
+}

package/src/nile-icon/icons/svg/data-insight.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIgNy4yOTMzN0wyLjUwOTI0IDcuODAzMDJMNS41NTEzOSA0Ljc1ODU2TDcuNjM0OTYgNi44NDM4MUwxMS4yNjY0IDMuMjIzMTZWNS4wMTgxMkgxMS45NzkyVjJIOC45NjM1MlYyLjcxMzM3SDEwLjc2NzdMNy42MzQ5NiA1LjgyNDM3TDUuNTUxMzkgMy43MzkxMkwyIDcuMjkzMzdaTTEyIDEzSDExLjE3NjRWNi4zNjczNEgxMlYxM1pNMi44MjM2MyAxM0gyVjkuMjkwNjhIMi44MjM2M1YxM1pNOS4wMzI1NyAxM0g4LjIwODk0VjguMjY4MjhIOS4wMzI1N1YxM1pNNS45MjgxIDEzSDUuMTA0NDdWMTAuOTM5M0g1LjkyODFWMTNaTTUuOTI4MSA5LjI5MDY4SDUuMTA0NDdWNi42NDIxSDUuOTI4MVY5LjI5MDY4WiIgZmlsbD0iYmxhY2siLz48cGF0aCBkPSJNMi41IDQuNUMyLjIgMy4xIDIuMiAzLjEgMSAyLjc1QzIuMiAyLjQgMi4yIDIuNCAyLjUgMUMyLjggMi40IDIuOCAyLjQgNCAyLjc1QzIuOCAzLjEgMi44IDMuMSAyLjUgNC41WiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/index.ts

@@ -97,6 +97,7 @@ export { default as create } from './create';
 export { default as createuser } from './createuser';
 export { default as custom } from './custom';
 export { default as dashboard } from './dashboard';
+export { default as datainsight } from './data-insight';
 export { default as datatypearray } from './data-type-array';
 export { default as datatypeboolean } from './data-type-boolean';
 export { default as datatypeexpression } from './data-type-expression';
@@ -240,6 +241,7 @@ export { default as if } from './if';
 export { default as ifelse } from './ifelse';
 export { default as image } from './image';
 export { default as immutable } from './immutable';
+export { default as infocircle } from './info-circle';
 export { default as infoicon } from './info-icon';
 export { default as infoicon1 } from './info-icon1';
 export { default as info } from './info';
@@ -436,6 +438,7 @@ export { default as updateuser } from './updateuser';
 export { default as updown } from './updown';
 export { default as upgrade } from './upgrade';
 export { default as upload } from './upload';
+export { default as user01 } from './user-01';
 export { default as user03 } from './user-03';
 export { default as useranalysisicon } from './user-analysis-icon';
 export { default as usercircle } from './user-circle';

package/src/nile-icon/icons/svg/info-circle.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyMiAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMTVWMTFNMTEgN0gxMS4wMU0yMSAxMUMyMSAxNi41MjI4IDE2LjUyMjggMjEgMTEgMjFDNS40NzcxNSAyMSAxIDE2LjUyMjggMSAxMUMxIDUuNDc3MTUgNS40NzcxNSAxIDExIDFDMTYuNTIyOCAxIDIxIDUuNDc3MTUgMjEgMTFaIiBzdHJva2U9ImJsYWNrIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/user-01.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAgMjFDMjAgMTkuNjA0NCAyMCAxOC45MDY3IDE5LjgyNzggMTguMzM4OUMxOS40NCAxNy4wNjA1IDE4LjQzOTUgMTYuMDYgMTcuMTYxMSAxNS42NzIyQzE2LjU5MzMgMTUuNSAxNS44OTU2IDE1LjUgMTQuNSAxNS41SDkuNUM4LjEwNDQ0IDE1LjUgNy40MDY2NSAxNS41IDYuODM4ODYgMTUuNjcyMkM1LjU2MDQ1IDE2LjA2IDQuNTYwMDQgMTcuMDYwNSA0LjE3MjI0IDE4LjMzODlDNCAxOC45MDY3IDQgMTkuNjA0NCA0IDIxTTE2LjUgNy41QzE2LjUgOS45ODUyOCAxNC40ODUzIDEyIDEyIDEyQzkuNTE0NzIgMTIgNy41IDkuOTg1MjggNy41IDcuNUM3LjUgNS4wMTQ3MiA5LjUxNDcyIDMgMTIgM0MxNC40ODUzIDMgMTYuNSA1LjAxNDcyIDE2LjUgNy41WiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

package/src/nile-icon/index.ts

@@ -92,6 +92,7 @@ export class NileIcon extends LitElement {
       align-items: center;
       justify-content: center;
       contain: content;
+      --nile-svg-stroke-width: 1.3;
     }
 
     .nds-icon {
@@ -104,7 +105,6 @@ export class NileIcon extends LitElement {
       height: var(--nile-svg-height);
       width: var(--nile-svg-width);
       stroke: var(--nile-svg-stroke);
-      stroke-width: var(--nile-svg-stroke-width);
     }
 
     .nds-icon svg path {
@@ -114,6 +114,7 @@ export class NileIcon extends LitElement {
     .stroke svg path {
       fill: none !important;
       stroke: var(--nile-svg-fill) !important;
+      stroke-width: var(--nile-svg-stroke-width);
     }
 
     .nds-icon--push {

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

@@ -27,13 +27,13 @@ export const styles = css`
   .form-control--has-label .form-control__label {
     display: inline-block;
     color: inherit;
-    margin-bottom: 12px;
+    margin-bottom: 6px;
     color: var(--nile-colors-dark-900);
     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;
   }
 
@@ -198,10 +198,10 @@ export const styles = css`
     -webkit-appearance: none;
     color: var(--nile-colors-dark-900);
     font-family: var(--nile-font-family-sans-serif);
-    font-size: 14px;
+    font-size: 16px;
     font-style: normal;
     font-weight: 400;
-    line-height: 14px;
+    line-height: 24px;
     letter-spacing: 0.2px;
   }
 
@@ -259,11 +259,6 @@ export const styles = css`
 
   .input:hover:not(.input--disabled) .input__control {
     color: #000;
-    font-size: 14px;
-    line-height: 14px;
-    font-style: normal;
-    font-weight: 400;
-    letter-spacing: 0.2px;
   }
 
   .input__control:focus {
@@ -289,8 +284,7 @@ export const styles = css`
   .input--standard:focus {
     border-radius: 4px;
     border: 1px solid #85aad1;
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
-      0px 0px 0px 4px rgba(133, 170, 209, 0.24);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   /*
@@ -327,7 +321,7 @@ export const styles = css`
   .input--medium {
     border-radius: 0.25rem;
     font-size: var(--nile-input-font-size-medium);
-    height: 38px;
+    height: 40px;
   }
 
   .input--medium .input__control {

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

@@ -16,9 +16,10 @@ export const styles = css`
     position: relative;
     background: hsl(0, 0%, 100%);
     border: solid 1px hsl(240 5.9% 90%);
-    border-radius: 0.25rem;
+    border-radius: 6px;
     overflow: auto;
     overscroll-behavior: none;
+    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
   }
   
   .search__wrapper {

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

@@ -27,6 +27,7 @@ export const styles = css`
 
   :host {
     display: block;
+    padding:1px 6px;
   }
 
   :host([inert]) {
@@ -36,13 +37,14 @@ export const styles = css`
   .menu-item {
     position: relative;
     display: flex;
+    border-radius: 4px;
     align-items: stretch;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.8;
     letter-spacing: normal;
     color: hsl(240 5.3% 26.1%);
-    padding : 12px 0;
+    min-height:40px;
     transition: 150ms fill;
     user-select: none;
     white-space: nowrap;
@@ -57,8 +59,9 @@ export const styles = css`
 
   .menu-item .menu-item__label {
     flex: 1 1 auto;
-    display: inline-block;
-    text-align: initial;
+    display: flex;
+    align-items:center;
+    justify-content:center;
   }
 
   .menu-item .menu-item__prefix {
@@ -86,7 +89,7 @@ export const styles = css`
   }
 
   :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
-    background-color: hsl(240 4.8% 95.9%);
+    background-color: #F9FAFB;
     color: hsl(0, 0%, 0%);
   }
 

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

@@ -13,13 +13,12 @@ export default css`
     width: 36px;
     height: 20px;
     line-height: 22px;
-    margin-right: 10px;
+    margin-right: 8px;
   }
 
   .nile-slide-toggle__label {
     display: flex;
     flex-direction: column;
-    margin-right: 6px;
     font-size: 14px;
     color: var(--nile-colors-gray-light-mode-700);
     font-family: var(--nile-font-family-serif);
@@ -28,6 +27,7 @@ export default css`
     font-weight: 500;
     line-height: 20px;
     letter-spacing: 0.2px;
+    gap: 2px;
   }
 
   .nile-slide-toggle__sublabel {
@@ -55,6 +55,14 @@ export default css`
     border-radius: 34px;
   }
 
+  .nile-slide-toggle__slider:active {
+    box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);
+  }
+
+  .nile-slide-toggle__slider:focus {
+    box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);
+  }
+
   .nile-slide-toggle__slider:before {
     position: absolute;
     content: '';
@@ -86,4 +94,20 @@ export default css`
   .nile-slide-toggle__slider.round:before {
     border-radius: 50%;
   }
+
+  .nile-slide--disabled .nile-slide-toggle__slider {
+    background-color: #f2f4f7;
+  }
+
+  .nile-slide--disabled .nile-slide-toggle__switch {
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .nile-slide--disabled
+    .nile-slide-toggle__switch
+    input:checked
+    + .nile-slide-toggle__slider {
+    background-color: #f2f4f7;
+  }
 `;

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

@@ -2,6 +2,7 @@ import { CSSResultGroup } from 'lit';
 import { LitElement, html, property, customElement } from 'lit-element';
 import styles from './nile-slide-toggle.css';
 import NileElement from '../internal/nile-element';
+import { classMap } from 'lit/directives/class-map.js';
 
 @customElement('nile-slide-toggle')
 export class NileSlideToggle extends NileElement {
@@ -12,6 +13,8 @@ export class NileSlideToggle extends NileElement {
 
   @property({ type: Boolean, reflect: true }) isChecked = false;
 
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
   @property({ attribute: 'help-text', reflect: true }) helpText = '';
 
   @property({ attribute: 'error-message', reflect: true }) errorMessage = '';
@@ -38,7 +41,12 @@ export class NileSlideToggle extends NileElement {
     const hasErrorMessage = this.errorMessage ? true : false;
 
     return html`
-      <div class="nile-slide-toggle">
+      <div
+        class=${classMap({
+          'nile-slide-toggle': true,
+          'nile-slide--disabled': this.disabled,
+        })}
+      >
         <label class="nile-slide-toggle__switch">
           <input
             type="checkbox"

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {css} from 'lit-element';
+import { css } from 'lit-element';
 
 /**
  * Tab CSS
@@ -17,6 +17,10 @@ export const styles = css`
 
   :host {
     display: inline-block;
+    --tab-border-radius: 8px;
+    --tab-padding: 0px 3px 12px 3px;
+    --tab-hover-background-color:transparent;
+    --tab-active-background-color: transparent;
   }
 
   :host([centered]) {
@@ -26,10 +30,12 @@ export const styles = css`
 
   .tab {
     display: inline-flex;
+    width: 100%;
     align-items: center;
-    border-radius: 8px;
-    color: #667085;
-    padding: 4px 4px 12px 4px;
+    border-radius: 4px;
+    border-radius: var(--tab-border-radius);
+    color: var(--nile-colors-gray-light-mode-500);
+    padding: var(--tab-padding);
     white-space: nowrap;
     user-select: none;
     cursor: pointer;
@@ -40,11 +46,14 @@ export const styles = css`
     font-weight: 600;
     line-height: 20px;
     letter-spacing: 0.2px;
-    gap: 4px;
+    gap: 8px;
+    height: 36px;
+    box-sizing: border-box;
   }
 
   .tab:hover:not(.tab--disabled) {
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-primary-700);
+    background-color: var(--tab-hover-background-color);
   }
 
   .tab:focus {
@@ -57,6 +66,7 @@ export const styles = css`
 
   .tab.tab--active:not(.tab--disabled) {
     color: var(--nile-colors-primary-700);
+    background-color: var(--tab-active-background-color);
   }
 
   .tab.tab--closable {

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

@@ -19,6 +19,7 @@ export const styles = css`
     --indicator-color: var(--nile-colors-primary-600);
     --track-color: #e5e9eb;
     --track-width: 2px;
+    --tab-gap: 12px;
 
     display: block;
   }
@@ -31,7 +32,12 @@ export const styles = css`
   .tab-group__tabs {
     display: flex;
     position: relative;
-    gap: 24px;
+    gap: var(--tab-gap);
+  }
+
+  .hide__track {
+    --track-width: 0px;
+    --tab-gap: 3px;
   }
 
   .tab-group__indicator {
@@ -107,7 +113,8 @@ export const styles = css`
     flex: 1 1 auto;
     position: relative;
     flex-direction: row;
-    border-bottom: solid var(--track-width) var(--track-color);
+    border-bottom: solid var(--track-width)
+      var(--nile-colors-gray-light-mode-200);
   }
 
   .tab-group--top .tab-group__indicator {
@@ -242,6 +249,13 @@ export const styles = css`
   .tab-group--end ::slotted(nile-tab-panel) {
     --padding: 0 10px;
   }
+
+  .hide__track slot::slotted(nile-tab) {
+    --tab-border-radius: 4px;
+    --tab-padding:8px 12px;
+    --tab-hover-background-color: #f9fafb;
+    --tab-active-background-color: var(--nile-colors-brand-50);
+  }
 `;
 
 export default [styles];