@aquera/nile-elements 0.1.60-beta-1.0 → 0.1.61-beta-1.0

package/dist/src/nile-stepper-item/nile-stepper-item.css.js

@@ -12,41 +12,38 @@ export const styles = css `
 	:host {
 		--stepper-flex-val:1;
 		--bulletin--dot--seperation:30%;
-		--lines-thickness: var(--nile-width-1px, var(--ng-border-width-2));
+		--lines-thickness: 1px;
 		
 		display: inline-block;
 		flex-grow:var(--stepper-flex-val);
-		min-width: 200px;
-		-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));
+		min-width:var(--nile-stepper-min-width);
 	}
 	
 	.stepper__item {
-		margin: var( --nile-spacing-none, var(--ng-spacing-none)) -1px;
+		margin: 0 -1px;
 	}
 
 	.stepper__item--sm {
-		--item-spacing: var( --nile-spacing-md, var(--ng-spacing-md));
-		--stepper-item-title-size: var( --nile-type-scale-2, var(--ng-font-size-text-sm) );
-		--stepper-item-subtitle-size: var( --nile-type-scale-1, var(--ng-font-size-text-sm) );
-		--stepper-item-text-line-height: var( --nile-height-16px, var(--ng-line-height-text-sm) );
+		--item-spacing: var(--nile-spacing-spacing-md);
+		--stepper-item-title-size:12px;
+		--stepper-item-subtitle-size:10.24px;
+		--stepper-item-text-line-height:16px;
 		--circle-height:18px;
 	}
 
 	.stepper__item--lg {
-		--item-spacing: var( --nile-spacing-md, var(--ng-spacing-lg));
-		--stepper-item-title-size: var( --nile-type-scale-3, var(--ng-font-size-text-sm) );
-		--stepper-item-subtitle-size: var( --nile-type-scale-2, var(--ng-font-size-text-sm) );
-		--stepper-item-text-line-height: var( --nile-height-18px, var(--ng-line-height-text-md) );
+		--item-spacing: var(--nile-spacing-spacing-md);
+		--stepper-item-title-size:14px;
+		--stepper-item-subtitle-size:12px;
+		--stepper-item-text-line-height:18px;
 		--circle-height:22px;
 	}
 
 	.stepper__item--xl {
-		--item-spacing: var( --nile-spacing-lg, var(--ng-spacing-lg));
-		--stepper-item-title-size: var( --nile-type-scale-4, var(--ng-font-size-text-md) );
-		--stepper-item-subtitle-size: var( --nile-type-scale-3, var(--ng-font-size-text-md) );
-		--stepper-item-text-line-height: var( --nile-height-22px, var(--ng-line-height-text-lg) );
+		--item-spacing: var(--nile-spacing-spacing-lg);
+		--stepper-item-title-size:16px;
+		--stepper-item-subtitle-size:14px;
+		--stepper-item-text-line-height:22px;
 		--circle-height:26px;
 	}
 
@@ -54,12 +51,11 @@ export const styles = css `
 		display:flex;
 		width:100%;
 		align-items:center;
-		gap: var(--nile-spacing-none, var(--ng-spacing-lg));
 	}
 
 	.stepper__line__container {
 		flex-grow:1;
-		padding: var( --nile-spacing-none, var(--ng-spacing-none)) 1px;
+		padding:0 1px;
 	}
 
 	.stepper__line--hastitle {
@@ -70,16 +66,16 @@ export const styles = css `
 	.stepper__line {
 		display: block;
 		border: 0;
-		border-top: var(--lines-thickness) solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary) );
+		border-top: var(--lines-thickness) solid var(--nile-colors-neutral-500);
 	}
 
 	.stepper__line--active {
-		border-top: var(--lines-thickness) solid var( --nile-colors-primary-600, var(--ng-colors-border-brand-alt) );
+		border-top: var(--lines-thickness) solid var(--nile-colors-primary-600);
 	}
 
 	.stepper__item__content--above{
 		position: relative;
-		margin-right: var( --nile-spacing-md, var(--ng-spacing-md));
+		margin-right: var(--nile-spacing-spacing-md);
 	}
 
 	.stepper__item__content--above .stepper__content__subtitle{
@@ -98,81 +94,71 @@ export const styles = css `
 	.stepper__item__bulletin {
 		display:grid;
 		place-content:center;
-		margin: var( --nile-spacing-none, var(--ng-spacing-none)) -1px;
+		margin:0 -1px;
 	}
 
 	.stepper__item__bulletin{
-		margin-left: var( --nile-spacing-sm, var(--ng-spacing-none));
-		margin-right: var( --nile-spacing-sm, var(--ng-spacing-none));
-	}
-	
-	.stepper__item__bulletin--inline{
-		margin-right: var( --nile-spacing-sm, var(--ng-spacing-sm));
-	}
-
-	.stepper__item--selected .stepper__item__bulletin{
-		padding: var(--nile-spacing-none, var(--ng-spacing-xxs));
-    	border: var(--nile-spacing-none, var(--ng-border-width-2)) solid var(--ng-colors-effects-focus-ring);
-    	border-radius: 50%;
+		margin-left: 6px;
+		margin-right: 6px;
 	}
 
 	.stepper__content__title {
-		color:var( --nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+		color:var(--nile-colors-dark-900);
 		font-size: var(--stepper-item-title-size);
 		line-height: var(--stepper-item-text-line-height);
-		font-family: var(--nile-font-family-medium, var(--ng-font-family-body));
-		font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
+		font-family: var(--nile-font-family-medium);
+		font-weight: 400;
 	}
 
 	.stepper__content__title--inline{
-		padding: var( --nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-md, var(--ng-spacing-md));
-		color:var( --nile-colors-dark-900, var(--ng-colors-text-secondary-700) );
+		padding: 0 8px;
+		color:var(--nile-colors-dark-900);
 	}
 
 	.stepper__content__title--active{
-		color:var( --nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700) );
-		font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
+		color:var(--nile-colors-primary-600);
+		font-weight: 600;
 	}
 
 	.stepper__content__subtitle {
-		color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600) );
+		color:var(--nile-colors-dark-500);
 		font-size: var(--stepper-item-subtitle-size);
 		line-height: var(--stepper-item-text-line-height);
-		font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
-		font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+		font-family: var(--nile-font-family-sans-serif);
+		font-weight: 400;
 	}
 
 	.stepper__content__subtitle--active{
-		color:var( --nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600) );
+		color:var(--nile-colors-primary-600);
 	}
 
 	.stepper__bulletin--dot {
 		width: var(--circle-height);
 		aspect-ratio: 1 / 1;
-		border-radius: var(--nile-radius-full, var(--ng-radius-full));
-		background: radial-gradient(var(--nile-colors-neutral-500, var(--ng-colors-border-secondary) ) var(--bulletin--dot--seperation), var(--nile-colors-dark-200, var(--ng-colors-bg-primary)) var(--bulletin--dot--seperation));
-		border: var(--lines-thickness) solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary) );
+		border-radius: 50%;
+		background: radial-gradient(var(--nile-colors-neutral-500) var(--bulletin--dot--seperation), var(--nile-colors-dark-200) var(--bulletin--dot--seperation));
+		border: var(--lines-thickness) solid var(--nile-colors-neutral-500);
 	}
 
 	.stepper__bulletin__dot--active{
-		background: radial-gradient(var(--nile-colors-white-base, var(--ng-colors-bg-primary) ) var(--bulletin--dot--seperation), var( --nile-colors-primary-600, var(--ng-colors-bg-brand-solid) ) var(--bulletin--dot--seperation));
-		border: var(--lines-thickness) solid var( --nile-colors-primary-500, var(--ng-colors-border-brand-alt) );
+		background: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));
+		border: var(--lines-thickness) solid var(--nile-colors-primary-500);
 		width: calc( var(--circle-height) + calc( var(--lines-thickness) * 2 ) );
 	}
 
 	.stepper__bulletin--icon {
-		display: grid;
+		display:grid;
 		place-content:center;
 		width: var(--circle-height);
-		border: var(--lines-thickness) solid var( --nile-colors-primary-600, var(--ng-colors-bg-brand-solid) );
+		border: var(--lines-thickness) solid var(--nile-colors-primary-600);
 		aspect-ratio: 1 / 1;
-		border-radius: var(--nile-radius-full, var(--ng-radius-full));
-		background-color:var( --nile-colors-primary-600, var(--ng-colors-bg-brand-solid) );
+		border-radius: 50%;
+		background-color:var(--nile-colors-primary-600);
 		overflow:hidden;
 	}
 	
 	.stepper__bulletin__icon--active {
-		border: 1px solid var( --nile-colors-primary-500, var(--ng-colors-bg-brand-solid) );
+		border: 1px solid var(--nile-colors-primary-500);
 		width: calc(var(--circle-height) + calc( var(--lines-thickness) * 2));
 	}
 `;

package/dist/src/nile-stepper-item/nile-stepper-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-stepper-item.css.js","sourceRoot":"","sources":["../../../src/nile-stepper-item/nile-stepper-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuKxB,CAAC;AACF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport { css } from 'lit';\n\n/**\n * StepperItem CSS\n */\nexport const styles = css`\n\t:host {\n\t\t--stepper-flex-val:1;\n\t\t--bulletin--dot--seperation:30%;\n\t\t--lines-thickness: var(--nile-width-1px, var(--ng-border-width-2));\n\t\t\n\t\tdisplay: inline-block;\n\t\tflex-grow:var(--stepper-flex-val);\n\t\tmin-width: 200px;\n\t\t-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n\t}\n\t\n\t.stepper__item {\n\t\tmargin: var( --nile-spacing-none, var(--ng-spacing-none)) -1px;\n\t}\n\n\t.stepper__item--sm {\n\t\t--item-spacing: var( --nile-spacing-md, var(--ng-spacing-md));\n\t\t--stepper-item-title-size: var( --nile-type-scale-2, var(--ng-font-size-text-sm) );\n\t\t--stepper-item-subtitle-size: var( --nile-type-scale-1, var(--ng-font-size-text-sm) );\n\t\t--stepper-item-text-line-height: var( --nile-height-16px, var(--ng-line-height-text-sm) );\n\t\t--circle-height:18px;\n\t}\n\n\t.stepper__item--lg {\n\t\t--item-spacing: var( --nile-spacing-md, var(--ng-spacing-lg));\n\t\t--stepper-item-title-size: var( --nile-type-scale-3, var(--ng-font-size-text-sm) );\n\t\t--stepper-item-subtitle-size: var( --nile-type-scale-2, var(--ng-font-size-text-sm) );\n\t\t--stepper-item-text-line-height: var( --nile-height-18px, var(--ng-line-height-text-md) );\n\t\t--circle-height:22px;\n\t}\n\n\t.stepper__item--xl {\n\t\t--item-spacing: var( --nile-spacing-lg, var(--ng-spacing-lg));\n\t\t--stepper-item-title-size: var( --nile-type-scale-4, var(--ng-font-size-text-md) );\n\t\t--stepper-item-subtitle-size: var( --nile-type-scale-3, var(--ng-font-size-text-md) );\n\t\t--stepper-item-text-line-height: var( --nile-height-22px, var(--ng-line-height-text-lg) );\n\t\t--circle-height:26px;\n\t}\n\n\t.stepper__line__content {\n\t\tdisplay:flex;\n\t\twidth:100%;\n\t\talign-items:center;\n\t\tgap: var(--nile-spacing-none, var(--ng-spacing-lg));\n\t}\n\n\t.stepper__line__container {\n\t\tflex-grow:1;\n\t\tpadding: var( --nile-spacing-none, var(--ng-spacing-none)) 1px;\n\t}\n\n\t.stepper__line--hastitle {\n\t\tdisplay:flex;\n\t\talign-items:center;\n\t}\n\n\t.stepper__line {\n\t\tdisplay: block;\n\t\tborder: 0;\n\t\tborder-top: var(--lines-thickness) solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary) );\n\t}\n\n\t.stepper__line--active {\n\t\tborder-top: var(--lines-thickness) solid var( --nile-colors-primary-600, var(--ng-colors-border-brand-alt) );\n\t}\n\n\t.stepper__item__content--above{\n\t\tposition: relative;\n\t\tmargin-right: var( --nile-spacing-md, var(--ng-spacing-md));\n\t}\n\n\t.stepper__item__content--above .stepper__content__subtitle{\n\t\tposition: absolute;\n    top: 100%;\n    white-space: nowrap;\n\t}\n\n\t.stepper__item__content--below {\n\t\tmargin-top: var(--item-spacing);\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\talign-items:center;\n\t}\n\t\n\t.stepper__item__bulletin {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\tmargin: var( --nile-spacing-none, var(--ng-spacing-none)) -1px;\n\t}\n\n\t.stepper__item__bulletin{\n\t\tmargin-left: var( --nile-spacing-sm, var(--ng-spacing-none));\n\t\tmargin-right: var( --nile-spacing-sm, var(--ng-spacing-none));\n\t}\n\t\n\t.stepper__item__bulletin--inline{\n\t\tmargin-right: var( --nile-spacing-sm, var(--ng-spacing-sm));\n\t}\n\n\t.stepper__item--selected .stepper__item__bulletin{\n\t\tpadding: var(--nile-spacing-none, var(--ng-spacing-xxs));\n    \tborder: var(--nile-spacing-none, var(--ng-border-width-2)) solid var(--ng-colors-effects-focus-ring);\n    \tborder-radius: 50%;\n\t}\n\n\t.stepper__content__title {\n\t\tcolor:var( --nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n\t\tfont-size: var(--stepper-item-title-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n\t\tfont-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));\n\t}\n\n\t.stepper__content__title--inline{\n\t\tpadding: var( --nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-md, var(--ng-spacing-md));\n\t\tcolor:var( --nile-colors-dark-900, var(--ng-colors-text-secondary-700) );\n\t}\n\n\t.stepper__content__title--active{\n\t\tcolor:var( --nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700) );\n\t\tfont-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n\t}\n\n\t.stepper__content__subtitle {\n\t\tcolor:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600) );\n\t\tfont-size: var(--stepper-item-subtitle-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n\t\tfont-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n\t}\n\n\t.stepper__content__subtitle--active{\n\t\tcolor:var( --nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600) );\n\t}\n\n\t.stepper__bulletin--dot {\n\t\twidth: var(--circle-height);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: var(--nile-radius-full, var(--ng-radius-full));\n\t\tbackground: radial-gradient(var(--nile-colors-neutral-500, var(--ng-colors-border-secondary) ) var(--bulletin--dot--seperation), var(--nile-colors-dark-200, var(--ng-colors-bg-primary)) var(--bulletin--dot--seperation));\n\t\tborder: var(--lines-thickness) solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary) );\n\t}\n\n\t.stepper__bulletin__dot--active{\n\t\tbackground: radial-gradient(var(--nile-colors-white-base, var(--ng-colors-bg-primary) ) var(--bulletin--dot--seperation), var( --nile-colors-primary-600, var(--ng-colors-bg-brand-solid) ) var(--bulletin--dot--seperation));\n\t\tborder: var(--lines-thickness) solid var( --nile-colors-primary-500, var(--ng-colors-border-brand-alt) );\n\t\twidth: calc( var(--circle-height) + calc( var(--lines-thickness) * 2 ) );\n\t}\n\n\t.stepper__bulletin--icon {\n\t\tdisplay: grid;\n\t\tplace-content:center;\n\t\twidth: var(--circle-height);\n\t\tborder: var(--lines-thickness) solid var( --nile-colors-primary-600, var(--ng-colors-bg-brand-solid) );\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: var(--nile-radius-full, var(--ng-radius-full));\n\t\tbackground-color:var( --nile-colors-primary-600, var(--ng-colors-bg-brand-solid) );\n\t\toverflow:hidden;\n\t}\n\t\n\t.stepper__bulletin__icon--active {\n\t\tborder: 1px solid var( --nile-colors-primary-500, var(--ng-colors-bg-brand-solid) );\n\t\twidth: calc(var(--circle-height) + calc( var(--lines-thickness) * 2));\n\t}\n`;\nexport default [styles];\n"]}
+{"version":3,"file":"nile-stepper-item.css.js","sourceRoot":"","sources":["../../../src/nile-stepper-item/nile-stepper-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyJxB,CAAC;AACF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport { css } from 'lit';\n\n/**\n * StepperItem CSS\n */\nexport const styles = css`\n\t:host {\n\t\t--stepper-flex-val:1;\n\t\t--bulletin--dot--seperation:30%;\n\t\t--lines-thickness: 1px;\n\t\t\n\t\tdisplay: inline-block;\n\t\tflex-grow:var(--stepper-flex-val);\n\t\tmin-width:var(--nile-stepper-min-width);\n\t}\n\t\n\t.stepper__item {\n\t\tmargin: 0 -1px;\n\t}\n\n\t.stepper__item--sm {\n\t\t--item-spacing: var(--nile-spacing-spacing-md);\n\t\t--stepper-item-title-size:12px;\n\t\t--stepper-item-subtitle-size:10.24px;\n\t\t--stepper-item-text-line-height:16px;\n\t\t--circle-height:18px;\n\t}\n\n\t.stepper__item--lg {\n\t\t--item-spacing: var(--nile-spacing-spacing-md);\n\t\t--stepper-item-title-size:14px;\n\t\t--stepper-item-subtitle-size:12px;\n\t\t--stepper-item-text-line-height:18px;\n\t\t--circle-height:22px;\n\t}\n\n\t.stepper__item--xl {\n\t\t--item-spacing: var(--nile-spacing-spacing-lg);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:22px;\n\t\t--circle-height:26px;\n\t}\n\n\t.stepper__line__content {\n\t\tdisplay:flex;\n\t\twidth:100%;\n\t\talign-items:center;\n\t}\n\n\t.stepper__line__container {\n\t\tflex-grow:1;\n\t\tpadding:0 1px;\n\t}\n\n\t.stepper__line--hastitle {\n\t\tdisplay:flex;\n\t\talign-items:center;\n\t}\n\n\t.stepper__line {\n\t\tdisplay: block;\n\t\tborder: 0;\n\t\tborder-top: var(--lines-thickness) solid var(--nile-colors-neutral-500);\n\t}\n\n\t.stepper__line--active {\n\t\tborder-top: var(--lines-thickness) solid var(--nile-colors-primary-600);\n\t}\n\n\t.stepper__item__content--above{\n\t\tposition: relative;\n\t\tmargin-right: var(--nile-spacing-spacing-md);\n\t}\n\n\t.stepper__item__content--above .stepper__content__subtitle{\n\t\tposition: absolute;\n    top: 100%;\n    white-space: nowrap;\n\t}\n\n\t.stepper__item__content--below {\n\t\tmargin-top: var(--item-spacing);\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\talign-items:center;\n\t}\n\t\n\t.stepper__item__bulletin {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\tmargin:0 -1px;\n\t}\n\n\t.stepper__item__bulletin{\n\t\tmargin-left: 6px;\n\t\tmargin-right: 6px;\n\t}\n\n\t.stepper__content__title {\n\t\tcolor:var(--nile-colors-dark-900);\n\t\tfont-size: var(--stepper-item-title-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-medium);\n\t\tfont-weight: 400;\n\t}\n\n\t.stepper__content__title--inline{\n\t\tpadding: 0 8px;\n\t\tcolor:var(--nile-colors-dark-900);\n\t}\n\n\t.stepper__content__title--active{\n\t\tcolor:var(--nile-colors-primary-600);\n\t\tfont-weight: 600;\n\t}\n\n\t.stepper__content__subtitle {\n\t\tcolor:var(--nile-colors-dark-500);\n\t\tfont-size: var(--stepper-item-subtitle-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-sans-serif);\n\t\tfont-weight: 400;\n\t}\n\n\t.stepper__content__subtitle--active{\n\t\tcolor:var(--nile-colors-primary-600);\n\t}\n\n\t.stepper__bulletin--dot {\n\t\twidth: var(--circle-height);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground: radial-gradient(var(--nile-colors-neutral-500) var(--bulletin--dot--seperation), var(--nile-colors-dark-200) var(--bulletin--dot--seperation));\n\t\tborder: var(--lines-thickness) solid var(--nile-colors-neutral-500);\n\t}\n\n\t.stepper__bulletin__dot--active{\n\t\tbackground: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));\n\t\tborder: var(--lines-thickness) solid var(--nile-colors-primary-500);\n\t\twidth: calc( var(--circle-height) + calc( var(--lines-thickness) * 2 ) );\n\t}\n\n\t.stepper__bulletin--icon {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\twidth: var(--circle-height);\n\t\tborder: var(--lines-thickness) solid var(--nile-colors-primary-600);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground-color:var(--nile-colors-primary-600);\n\t\toverflow:hidden;\n\t}\n\t\n\t.stepper__bulletin__icon--active {\n\t\tborder: 1px solid var(--nile-colors-primary-500);\n\t\twidth: calc(var(--circle-height) + calc( var(--lines-thickness) * 2));\n\t}\n`;\nexport default [styles];"]}

package/dist/src/nile-switcher/nile-switcher.css.js

@@ -12,9 +12,6 @@ export const styles = css `
   :host {
     width: 100%;
     box-sizing: border-box;
-    -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));
   }
 
   .pointer-cursor {
@@ -30,10 +27,10 @@ export const styles = css `
     color: inherit;
     color: var(--nile-colors-dark-900);
     font-family:var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
+    font-size: 14px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-line-height-xsmall);
+    font-weight: 400;
+    line-height: 14px;
     letter-spacing: 0.2px;
   }
 
@@ -50,7 +47,7 @@ export const styles = css `
   }
 
   .switcher-inline {
-    gap: var(--nile-spacing-md);
+    gap: 0.5rem;
   }
 
   .switcher-block {
@@ -65,7 +62,7 @@ export const styles = css `
   .switcher-icons-container {
     display: flex;
     margin-left: auto;
-    gap: var(--nile-spacing-md);
+    gap: 0.5rem;
     max-height: 38px;
     align-items: center;
   }
@@ -83,14 +80,14 @@ export const styles = css `
     justify-content: center;
     display: flex;
     align-items: center;
-    margin-bottom: var(--nile-spacing-sm);
+    margin-bottom: 6px;
     height: 28px;
     width: 28px;
-    border-radius: var(--nile-radius-sm);
+    border-radius: 4px;
   }
   nile-radio {
     display: inline-block;
-    padding-right: var(--nile-spacing-lg);
+    padding-right: 10px;
   }
 
   .switcher-object-mapper-icon {

package/dist/src/nile-switcher/nile-switcher.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-switcher.css.js","sourceRoot":"","sources":["../../../src/nile-switcher/nile-switcher.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * FieldGenerator CSS\n */\nexport const styles = css`\n  :host {\n    width: 100%;\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .pointer-cursor {\n    cursor: pointer;\n  }\n  .pointer-cursor-not-allowed {\n    pointer-events: none;\n  }\n\n  .switcher__label {\n    display: flex;\n    align-items: center;\n    color: inherit;\n    color: var(--nile-colors-dark-900);\n    font-family:var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-line-height-xsmall);\n    letter-spacing: 0.2px;\n  }\n\n  switcher-object-mapper:hover {\n    display: flex;\n  }\n\n  .switcher-icon-container.current {\n    background: var(--nile-colors-primary-100);\n  }\n\n  .switcher-container {\n    display: flex;\n  }\n\n  .switcher-inline {\n    gap: var(--nile-spacing-md);\n  }\n\n  .switcher-block {\n    flex-direction: column;\n  }\n\n  .switcher-inline > :nth-child(2) {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .switcher-icons-container {\n    display: flex;\n    margin-left: auto;\n    gap: var(--nile-spacing-md);\n    max-height: 38px;\n    align-items: center;\n  }\n\n  .switcher-block > .switcher-icons-container {\n    margin-left: auto;\n  }\n\n  .label-container {\n    display: flex;\n  }\n\n  .switcher-icon-container {\n    cursor: pointer;\n    justify-content: center;\n    display: flex;\n    align-items: center;\n    margin-bottom: var(--nile-spacing-sm);\n    height: 28px;\n    width: 28px;\n    border-radius: var(--nile-radius-sm);\n  }\n  nile-radio {\n    display: inline-block;\n    padding-right: var(--nile-spacing-lg);\n  }\n\n  .switcher-object-mapper-icon {\n    display: none;\n  }\n  .switcher-object-mapper:hover > .switcher-object-mapper-icon {\n    display: block;\n  }\n  .switcher-object-mapper::part(input) {\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n  }\n\n  .switcher-input--noborder::part(base) {\n    border: none;\n  }\n  .switcher-object-mapper--noborder::part(base) {\n    border: none;\n  }\n\n  .switcher-dropdown--noborder::part(combobox) {\n    border: none;\n  }\n\n  .switcher-dropdown--noborder::part(expand-icon) {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-switcher.css.js","sourceRoot":"","sources":["../../../src/nile-switcher/nile-switcher.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * FieldGenerator CSS\n */\nexport const styles = css`\n  :host {\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .pointer-cursor {\n    cursor: pointer;\n  }\n  .pointer-cursor-not-allowed {\n    pointer-events: none;\n  }\n\n  .switcher__label {\n    display: flex;\n    align-items: center;\n    color: inherit;\n    color: var(--nile-colors-dark-900);\n    font-family:var(--nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  switcher-object-mapper:hover {\n    display: flex;\n  }\n\n  .switcher-icon-container.current {\n    background: var(--nile-colors-primary-100);\n  }\n\n  .switcher-container {\n    display: flex;\n  }\n\n  .switcher-inline {\n    gap: 0.5rem;\n  }\n\n  .switcher-block {\n    flex-direction: column;\n  }\n\n  .switcher-inline > :nth-child(2) {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .switcher-icons-container {\n    display: flex;\n    margin-left: auto;\n    gap: 0.5rem;\n    max-height: 38px;\n    align-items: center;\n  }\n\n  .switcher-block > .switcher-icons-container {\n    margin-left: auto;\n  }\n\n  .label-container {\n    display: flex;\n  }\n\n  .switcher-icon-container {\n    cursor: pointer;\n    justify-content: center;\n    display: flex;\n    align-items: center;\n    margin-bottom: 6px;\n    height: 28px;\n    width: 28px;\n    border-radius: 4px;\n  }\n  nile-radio {\n    display: inline-block;\n    padding-right: 10px;\n  }\n\n  .switcher-object-mapper-icon {\n    display: none;\n  }\n  .switcher-object-mapper:hover > .switcher-object-mapper-icon {\n    display: block;\n  }\n  .switcher-object-mapper::part(input) {\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n  }\n\n  .switcher-input--noborder::part(base) {\n    border: none;\n  }\n  .switcher-object-mapper--noborder::part(base) {\n    border: none;\n  }\n\n  .switcher-dropdown--noborder::part(combobox) {\n    border: none;\n  }\n\n  .switcher-dropdown--noborder::part(expand-icon) {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-tab/nile-tab.css.js

@@ -15,13 +15,10 @@ export const styles = css `
 
   :host {
     display: inline-block;
-    --tab-border-radius: var(--nile-radius-md, var(--ng-radius-md));
-    --tab-padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-3px, var(--ng-spacing-xs)) var(--nile-spacing-lg, var(--ng--spacing-3)) var(--nile-spacing-3px, var(--ng-spacing-xs));
+    --tab-border-radius: 8px;
+    --tab-padding: 0px 3px 12px 3px;
     --tab-hover-background-color:transparent;
     --tab-active-background-color: transparent;
-    -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));
   }
 
   :host([centered]) {
@@ -34,25 +31,25 @@ export const styles = css `
     width: 100%;
     align-items: center;
     border-radius: var(--tab-border-radius);
-    color: var(--nile-colors-gray-light-mode-500, var(--ng-colors-text-quaternary-500));
+    color: var(--nile-colors-gray-light-mode-500);
     padding: var(--tab-padding);
     white-space: nowrap;
     user-select: none;
     cursor: pointer;
     transition: 0.2s box-shadow, 0.2s color;
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-family: var(--nile-font-family-serif);
+    font-size: 14px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
-    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
+    font-weight: 600;
+    line-height: 20px;
     letter-spacing: 0.2px;
-    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    gap: 8px;
     height: 36px;
     box-sizing: border-box;
   }
 
   .tab:hover:not(.tab--disabled) {
-    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));
+    color: var(--nile-colors-primary-700);
     background-color: var(--tab-hover-background-color);
   }
 
@@ -61,16 +58,16 @@ export const styles = css `
   }
 
   .tab:focus-visible:not(.tab--disabled) {
-    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+    color: var(--nile-colors-primary-600);
   }
 
   .tab.tab--active:not(.tab--disabled) {
-    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));
+    color: var(--nile-colors-primary-700);
     background-color: var(--tab-active-background-color);
   }
 
   .tab.tab--closable {
-    padding-inline-end: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    padding-inline-end: 4px;
   }
 
   .tab.tab--disabled {
@@ -79,12 +76,12 @@ export const styles = css `
   }
 
   .tab__close-button {
-    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
-    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    font-size: 14px;
+    margin-inline-start: 4px;
   }
 
   .tab__close-button::part(base) {
-    padding: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    padding: 3px;
   }
 
   @media (forced-colors: active) {

package/dist/src/nile-tab/nile-tab.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tab.css.js","sourceRoot":"","sources":["../../../src/nile-tab/nile-tab.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tab CSS\n */\nexport const styles = css`\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: inline-block;\n    --tab-border-radius: var(--nile-radius-md, var(--ng-radius-md));\n    --tab-padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-3px, var(--ng-spacing-xs)) var(--nile-spacing-lg, var(--ng--spacing-3)) var(--nile-spacing-3px, var(--ng-spacing-xs));\n    --tab-hover-background-color:transparent;\n    --tab-active-background-color: transparent;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host([centered]) {\n    flex: 1;\n    text-align: center;\n  }\n\n  .tab {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n    border-radius: var(--tab-border-radius);\n    color: var(--nile-colors-gray-light-mode-500, var(--ng-colors-text-quaternary-500));\n    padding: var(--tab-padding);\n    white-space: nowrap;\n    user-select: none;\n    cursor: pointer;\n    transition: 0.2s box-shadow, 0.2s color;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    height: 36px;\n    box-sizing: border-box;\n  }\n\n  .tab:hover:not(.tab--disabled) {\n    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));\n    background-color: var(--tab-hover-background-color);\n  }\n\n  .tab:focus {\n    outline: none;\n  }\n\n  .tab:focus-visible:not(.tab--disabled) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  .tab.tab--active:not(.tab--disabled) {\n    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));\n    background-color: var(--tab-active-background-color);\n  }\n\n  .tab.tab--closable {\n    padding-inline-end: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .tab.tab--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .tab__close-button {\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .tab__close-button::part(base) {\n    padding: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  @media (forced-colors: active) {\n    .tab.tab--active:not(.tab--disabled) {\n      outline: solid 1px transparent;\n      outline-offset: -3px;\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tab.css.js","sourceRoot":"","sources":["../../../src/nile-tab/nile-tab.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tab CSS\n */\nexport const styles = css`\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: inline-block;\n    --tab-border-radius: 8px;\n    --tab-padding: 0px 3px 12px 3px;\n    --tab-hover-background-color:transparent;\n    --tab-active-background-color: transparent;\n  }\n\n  :host([centered]) {\n    flex: 1;\n    text-align: center;\n  }\n\n  .tab {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n    border-radius: var(--tab-border-radius);\n    color: var(--nile-colors-gray-light-mode-500);\n    padding: var(--tab-padding);\n    white-space: nowrap;\n    user-select: none;\n    cursor: pointer;\n    transition: 0.2s box-shadow, 0.2s color;\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 600;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n    gap: 8px;\n    height: 36px;\n    box-sizing: border-box;\n  }\n\n  .tab:hover:not(.tab--disabled) {\n    color: var(--nile-colors-primary-700);\n    background-color: var(--tab-hover-background-color);\n  }\n\n  .tab:focus {\n    outline: none;\n  }\n\n  .tab:focus-visible:not(.tab--disabled) {\n    color: var(--nile-colors-primary-600);\n  }\n\n  .tab.tab--active:not(.tab--disabled) {\n    color: var(--nile-colors-primary-700);\n    background-color: var(--tab-active-background-color);\n  }\n\n  .tab.tab--closable {\n    padding-inline-end: 4px;\n  }\n\n  .tab.tab--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .tab__close-button {\n    font-size: 14px;\n    margin-inline-start: 4px;\n  }\n\n  .tab__close-button::part(base) {\n    padding: 3px;\n  }\n\n  @media (forced-colors: active) {\n    .tab.tab--active:not(.tab--disabled) {\n      outline: solid 1px transparent;\n      outline-offset: -3px;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-tab-group/nile-tab-group.css.js

@@ -14,20 +14,17 @@ export const styles = css `
   }
 
   :host {
-    --indicator-color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
-    --track-color: var(--nile-colors-neutral-400, var(--ng-componentcolors-utility-gray-500));
-    --track-width: var(--nile-width-2px, var(--ng-width-0-5));
-    --tab-gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
-    -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));
+    --indicator-color: var(--nile-colors-primary-600);
+    --track-color: var(--nile-colors-neutral-400);
+    --track-width: 2px;
+    --tab-gap: 12px;
 
     display: block;
   }
 
   .tab-group {
     display: flex;
-    border-radius: var(--nile-radius-none, var(--ng-radius-none));
+    border-radius: 0;
   }
 
   .tab-group__tabs {
@@ -38,7 +35,7 @@ export const styles = css `
 
   .hide__track {
     --track-width: 0px;
-    --tab-gap: var(--nile-spacing-3px, var(--ng-spacing-xs));
+    --tab-gap: 3px;
   }
 
   .tab-group__indicator {
@@ -50,14 +47,14 @@ export const styles = css `
     position: absolute;
     height: var(--track-width);
     width: 100%;
-    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-quaternary));
+    background: var(--nile-colors-neutral-400);
     bottom:0px;
     z-index:0;
   }
 
   .tab-group--has-scroll-controls .tab-group__nav-container {
     position: relative;
-    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-10px, var(--ng-spacing-lg));
+    padding: 0 10px;
   }
 
   .tab-group__body {
@@ -127,7 +124,7 @@ export const styles = css `
 
   .tab-group--top .tab-group__indicator {
     bottom: 0px;
-    border-bottom: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+    border-bottom: 2px solid var(--nile-colors-primary-600);
     z-index:0;
   }
 
@@ -136,7 +133,7 @@ export const styles = css `
   }
 
   .tab-group--top ::slotted(nile-tab-panel) {
-    --padding: var(--nile-spacing-10px, var(--ng-spacing-lg)) var(--nile-spacing-none, var(--ng-spacing-none));
+    --padding: 10px 0;
   }
 
   /*
@@ -182,7 +179,7 @@ export const styles = css `
   }
 
   .tab-group--bottom ::slotted(nile-tab-panel) {
-    --padding: var(--nile-spacing-10px, var(--ng-spacing-2-5)) var(--nile-spacing-none, var(--ng-spacing-none));
+    --padding: 10px 0;
   }
 
   /*
@@ -219,7 +216,7 @@ export const styles = css `
   }
 
   .tab-group--start ::slotted(nile-tab-panel) {
-    --padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-10px, var(--ng-spacing-lg));
+    --padding: 0 10px;
   }
 
   /*
@@ -256,14 +253,14 @@ export const styles = css `
   }
 
   .tab-group--end ::slotted(nile-tab-panel) {
-    --padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+    --padding: 0 10px;
   }
 
   .hide__track slot::slotted(nile-tab) {
-    --tab-border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
-    --tab-padding:var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
-    --tab-hover-background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    --tab-active-background-color: var(--nile-colors-brand-50, var(--ng-colors-bg-brand-primary-alt));
+    --tab-border-radius: 4px;
+    --tab-padding:8px 12px;
+    --tab-hover-background-color: var(--nile-colors-neutral-100);
+    --tab-active-background-color: var(--nile-colors-brand-50);
   }
 `;
 export default [styles];

package/dist/src/nile-tab-group/nile-tab-group.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tab-group.css.js","sourceRoot":"","sources":["../../../src/nile-tab-group/nile-tab-group.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiQxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * TabGroup CSS\n */\nexport const styles = css`\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --indicator-color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    --track-color: var(--nile-colors-neutral-400, var(--ng-componentcolors-utility-gray-500));\n    --track-width: var(--nile-width-2px, var(--ng-width-0-5));\n    --tab-gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n\n    display: block;\n  }\n\n  .tab-group {\n    display: flex;\n    border-radius: var(--nile-radius-none, var(--ng-radius-none));\n  }\n\n  .tab-group__tabs {\n    display: flex;\n    position: relative;\n    gap: var(--tab-gap);\n  }\n\n  .hide__track {\n    --track-width: 0px;\n    --tab-gap: var(--nile-spacing-3px, var(--ng-spacing-xs));\n  }\n\n  .tab-group__indicator {\n    position: absolute;\n    transition: 0.3s translate ease, 0.3s width ease;\n  }\n\n  .tab-group__indicator__path{\n    position: absolute;\n    height: var(--track-width);\n    width: 100%;\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-quaternary));\n    bottom:0px;\n    z-index:0;\n  }\n\n  .tab-group--has-scroll-controls .tab-group__nav-container {\n    position: relative;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-10px, var(--ng-spacing-lg));\n  }\n\n  .tab-group__body {\n    display: block;\n    overflow: auto;\n  }\n\n  .tab-group__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 20px;\n  }\n\n  .tab-group__scroll-button--start {\n    left: 0;\n  }\n\n  .tab-group__scroll-button--end {\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--start {\n    left: auto;\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--end {\n    left: 0;\n    right: auto;\n  }\n\n  /*\n   * Top\n   */\n\n  .tab-group--top {\n    flex-direction: column;\n  }\n\n  .tab-group--top .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--top .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--top .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--top .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n  }\n\n  .tab-group--top .tab-group__indicator {\n    bottom: 0px;\n    border-bottom: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    z-index:0;\n  }\n\n  .tab-group--top .tab-group__body {\n    order: 2;\n  }\n\n  .tab-group--top ::slotted(nile-tab-panel) {\n    --padding: var(--nile-spacing-10px, var(--ng-spacing-lg)) var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  /*\n   * Bottom\n   */\n\n  .tab-group--bottom {\n    flex-direction: column;\n  }\n\n  .tab-group--bottom .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--bottom .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--bottom .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-top: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--bottom .tab-group__indicator {\n    top: calc(-1 * var(--track-width));\n    border-top: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--bottom .tab-group__body {\n    order: 1;\n  }\n\n  .tab-group--bottom ::slotted(nile-tab-panel) {\n    --padding: var(--nile-spacing-10px, var(--ng-spacing-2-5)) var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  /*\n   * Start\n   */\n\n  .tab-group--start {\n    flex-direction: row;\n  }\n\n  .tab-group--start .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--start .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-inline-end: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--start .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    border-right: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--start.tab-group--rtl .tab-group__indicator {\n    right: auto;\n    left: calc(-1 * var(--track-width));\n  }\n\n  .tab-group--start .tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n\n  .tab-group--start ::slotted(nile-tab-panel) {\n    --padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-10px, var(--ng-spacing-lg));\n  }\n\n  /*\n   * End\n   */\n\n  .tab-group--end {\n    flex-direction: row;\n  }\n\n  .tab-group--end .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--end .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-left: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--end .tab-group__indicator {\n    left: calc(-1 * var(--track-width));\n    border-inline-start: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--end.tab-group--rtl .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    left: auto;\n  }\n\n  .tab-group--end .tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n\n  .tab-group--end ::slotted(nile-tab-panel) {\n    --padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .hide__track slot::slotted(nile-tab) {\n    --tab-border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    --tab-padding:var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    --tab-hover-background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    --tab-active-background-color: var(--nile-colors-brand-50, var(--ng-colors-bg-brand-primary-alt));\n  }\n`;\n\nexport default [styles];\n\n"]}
+{"version":3,"file":"nile-tab-group.css.js","sourceRoot":"","sources":["../../../src/nile-tab-group/nile-tab-group.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8PxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * TabGroup CSS\n */\nexport const styles = css`\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --indicator-color: var(--nile-colors-primary-600);\n    --track-color: var(--nile-colors-neutral-400);\n    --track-width: 2px;\n    --tab-gap: 12px;\n\n    display: block;\n  }\n\n  .tab-group {\n    display: flex;\n    border-radius: 0;\n  }\n\n  .tab-group__tabs {\n    display: flex;\n    position: relative;\n    gap: var(--tab-gap);\n  }\n\n  .hide__track {\n    --track-width: 0px;\n    --tab-gap: 3px;\n  }\n\n  .tab-group__indicator {\n    position: absolute;\n    transition: 0.3s translate ease, 0.3s width ease;\n  }\n\n  .tab-group__indicator__path{\n    position: absolute;\n    height: var(--track-width);\n    width: 100%;\n    background: var(--nile-colors-neutral-400);\n    bottom:0px;\n    z-index:0;\n  }\n\n  .tab-group--has-scroll-controls .tab-group__nav-container {\n    position: relative;\n    padding: 0 10px;\n  }\n\n  .tab-group__body {\n    display: block;\n    overflow: auto;\n  }\n\n  .tab-group__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 20px;\n  }\n\n  .tab-group__scroll-button--start {\n    left: 0;\n  }\n\n  .tab-group__scroll-button--end {\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--start {\n    left: auto;\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--end {\n    left: 0;\n    right: auto;\n  }\n\n  /*\n   * Top\n   */\n\n  .tab-group--top {\n    flex-direction: column;\n  }\n\n  .tab-group--top .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--top .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--top .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--top .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n  }\n\n  .tab-group--top .tab-group__indicator {\n    bottom: 0px;\n    border-bottom: 2px solid var(--nile-colors-primary-600);\n    z-index:0;\n  }\n\n  .tab-group--top .tab-group__body {\n    order: 2;\n  }\n\n  .tab-group--top ::slotted(nile-tab-panel) {\n    --padding: 10px 0;\n  }\n\n  /*\n   * Bottom\n   */\n\n  .tab-group--bottom {\n    flex-direction: column;\n  }\n\n  .tab-group--bottom .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--bottom .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--bottom .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-top: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--bottom .tab-group__indicator {\n    top: calc(-1 * var(--track-width));\n    border-top: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--bottom .tab-group__body {\n    order: 1;\n  }\n\n  .tab-group--bottom ::slotted(nile-tab-panel) {\n    --padding: 10px 0;\n  }\n\n  /*\n   * Start\n   */\n\n  .tab-group--start {\n    flex-direction: row;\n  }\n\n  .tab-group--start .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--start .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-inline-end: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--start .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    border-right: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--start.tab-group--rtl .tab-group__indicator {\n    right: auto;\n    left: calc(-1 * var(--track-width));\n  }\n\n  .tab-group--start .tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n\n  .tab-group--start ::slotted(nile-tab-panel) {\n    --padding: 0 10px;\n  }\n\n  /*\n   * End\n   */\n\n  .tab-group--end {\n    flex-direction: row;\n  }\n\n  .tab-group--end .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--end .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-left: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--end .tab-group__indicator {\n    left: calc(-1 * var(--track-width));\n    border-inline-start: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--end.tab-group--rtl .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    left: auto;\n  }\n\n  .tab-group--end .tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n\n  .tab-group--end ::slotted(nile-tab-panel) {\n    --padding: 0 10px;\n  }\n\n  .hide__track slot::slotted(nile-tab) {\n    --tab-border-radius: 4px;\n    --tab-padding:8px 12px;\n    --tab-hover-background-color: var(--nile-colors-neutral-100);\n    --tab-active-background-color: var(--nile-colors-brand-50);\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-tab-panel/nile-tab-panel.css.js

@@ -14,10 +14,8 @@ export const styles = css `
   }
 
   :host {
-    --padding: var(--nile-spacing-none, var(--ng-spacing-none));
--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));
+    --padding: 0;
+
     display: none;
   }
 

package/dist/src/nile-tab-panel/nile-tab-panel.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tab-panel.css.js","sourceRoot":"","sources":["../../../src/nile-tab-panel/nile-tab-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;CAqBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * TabPanel CSS\n */\nexport const styles = css`\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --padding: var(--nile-spacing-none, var(--ng-spacing-none));\n-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n    display: none;\n  }\n\n  :host([active]) {\n    display: block;\n  }\n\n  .tab-panel {\n    display: block;\n    padding: var(--padding);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tab-panel.css.js","sourceRoot":"","sources":["../../../src/nile-tab-panel/nile-tab-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;CAmBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * TabPanel CSS\n */\nexport const styles = css`\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --padding: 0;\n\n    display: none;\n  }\n\n  :host([active]) {\n    display: block;\n  }\n\n  .tab-panel {\n    display: block;\n    padding: var(--padding);\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-table/nile-table.css.js

@@ -12,9 +12,6 @@ export const styles = css `
 	:host {
 		display:block;
 		width:100%;
-		-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));
 	}
 `;
 export default [styles];

package/dist/src/nile-table/nile-table.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table.css.js","sourceRoot":"","sources":["../../../src/nile-table/nile-table.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;CAQxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * Table CSS\n */\nexport const styles = css`\n\t:host {\n\t\tdisplay:block;\n\t\twidth:100%;\n\t\t-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n\t}\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-table.css.js","sourceRoot":"","sources":["../../../src/nile-table/nile-table.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;CAKxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * Table CSS\n */\nexport const styles = css`\n\t:host {\n\t\tdisplay:block;\n\t\twidth:100%;\n\t}\n`;\n\nexport default [styles];"]}

package/dist/src/nile-table/nile-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table.js","sourceRoot":"","sources":["../../../src/nile-table/nile-table.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, CSSResultArray, TemplateResult, PropertyValues} from 'lit';\nimport { customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './nile-table.css';\nimport NileElement from '../internal/nile-element';\nimport { NileTableBody } from '../nile-table-body';\nimport { NileTableCellItem } from '../nile-table-cell-item';\nimport { NileTableHeaderItem } from '../nile-table-header-item';\n\n\n/**\n * Nile table component.\n *\n * @tag nile-table\n *\n */\n@customElement('nile-table')\nexport class NileTable extends NileElement {\n  @query('slot') defaultSlot: HTMLSlotElement;\n\tprivate rows:Array<NileTableBody>=[];\n\tprivate primaryRowWidths:Array<number>=[]\n\tprivate resizeObserver:ResizeObserver ;\n\tprivate debounceTimeout:any\n\n\n\t/**\n\t * The styles for nile-table\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tthis.addEventListener('nile-body-load',this.handleRows)\n\t}\n\n\tprotected firstUpdated(_changedProperties: PropertyValues): void {\n\t\tthis.updateComplete.then(()=>{\n\t\t\tthis.handleResizeObserver();\n\t\t})\n\t}\n\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<slot @slotchange=\"${this.repaintTable}\"></slot>\n\t\t\t`;\n\t}\n\n\trepaintTable(){\n\t\tthis.realignStructure();\n\t\tthis.handleBodyCssUpdate();\n\t}\n\n\thandleRows(e:CustomEvent){\n\t\tthis.rows=[...this.rows,e.detail.comp]\n\t}\n\n\thandleBodyCssUpdate(){\n    if (this.rows.length<2) return;\n    const tableBodies = this.rows;\n\t\tconst firstEl=tableBodies[0].shadowRoot?.querySelector<HTMLDivElement>('div.base');\n\t\tif(firstEl) {\n\t\t\tfirstEl.style.borderTopRightRadius=\"var(--nile-radius-radius-xl)\";\n\t\t\tfirstEl.style.borderTopLeftRadius = 'var(--nile-radius-radius-xl)';\n\t\t\tfirstEl.style.borderBottomRightRadius=\"0px\";\n\t\t\tfirstEl.style.borderBottomLeftRadius = '0px';\n\t\t\tfirstEl.style.borderBottom = 'none';\n\t\t}\n\t\ttableBodies.forEach((tb,i)=>{\n\t\t\tif(i>0 && i<tableBodies.length-1){\n\t\t\t\tconst el=tb.shadowRoot?.querySelector<HTMLDivElement>('div.base');\n\t\t\t\tif(el) {\n\t\t\t\t\tel.style.borderTopRightRadius=\"0px\";\n\t\t\t\t\tel.style.borderTopLeftRadius = \"0px\";\n\t\t\t\t\tel.style.borderBottomRightRadius=\"0px\";\n\t\t\t\t\tel.style.borderBottomLeftRadius = \"0px\";\n\t\t\t\t\tel.style.borderBottom = 'none';\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t\tconst lastEl=tableBodies[tableBodies.length - 1].shadowRoot?.querySelector<HTMLDivElement>('div.base')\n\t\tif(lastEl){\n\t\t\tlastEl.style.borderTopRightRadius=\"0px\";\n\t\t\tlastEl.style.borderTopLeftRadius = '0px';\n\t\t\tlastEl.style.borderBottomRightRadius=\"var(--nile-radius-radius-xl)\";\n\t\t\tlastEl.style.borderBottomLeftRadius = 'var(--nile-radius-radius-xl)';\n\t\t}\n\t}\n\n\tgetPrimaryColumnWidths(){\n\t\tconst primaryTb=this.rows.find(tb=>tb.type=='primary')!;\n\t\tconst widthArray=this.getTableCellFetchQuery(primaryTb).map((e:LitElement)=>e.clientWidth) as Array<number>\n\t\treturn widthArray;\n\t}\n\t\n\trealignStructure(){\n    if (this.rows.length<2) return;\n\t\tconst primaryRowWidths=this.getPrimaryColumnWidths();\n\t\tconst secondaryRows=this.rows.filter(tb=>tb.type!='primary');\n\t\tsecondaryRows.forEach((row)=>{\n\t\t\tlet elements=this.getTableCellFetchQuery(row)\n\t\t\telements?.forEach((el:NileTableCellItem|NileTableHeaderItem,ind)=>{\n\t\t\t\tel.style.setProperty('--cell-width',primaryRowWidths.at(ind)+'px')\n\t\t\t})\n\t\t})\n\t}\n\n\tgetTableCellFetchQuery(row:NileTableBody):Array<Element>{\n\t\treturn row?.shadowRoot?.\n\t\t\tquerySelector<HTMLSlotElement>('slot:not([name])')?.\n\t\t\tassignedElements()[0]\n\t\t\t.shadowRoot?.querySelector<HTMLSlotElement>('slot')?.\n\t\t\tassignedElements()!\n\t}\n\n\thandleResizeObserver(){\n\t\tconst onResize = (entries:ResizeObserverEntry[]): void=> {\n\t\t\tfor (let entry of entries) {\n\t\t\t\tif(this.debounceTimeout){\n\t\t\t\t\tclearTimeout(this.debounceTimeout);\n\t\t\t\t}\n\t\t\t\tthis.debounceTimeout=setTimeout(() => {\n\t\t\t\t\tthis.realignStructure();\n\t\t\t\t\tthis.debounceTimeout=null;\n\t\t\t\t}, 50);\n\t\t\t}\n\t\t};\n\t\tthis.resizeObserver=new ResizeObserver(onResize)\n\t\tthis.resizeObserver.observe(this);\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tthis.resizeObserver.disconnect()\n\t\tsuper.disconnectedCallback()\n\t}\n\t/* #endregion */\n}\n\nexport default NileTable;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table': NileTable;\n  }\n}"]}
+{"version":3,"file":"nile-table.js","sourceRoot":"","sources":["../../../src/nile-table/nile-table.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, CSSResultArray, TemplateResult, PropertyValues} from 'lit';\nimport { customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './nile-table.css';\nimport NileElement from '../internal/nile-element';\nimport { NileTableBody } from '../nile-table-body';\nimport { NileTableCellItem } from '../nile-table-cell-item';\nimport { NileTableHeaderItem } from '../nile-table-header-item';\n\n\n/**\n * Nile table component.\n *\n * @tag nile-table\n *\n */\n@customElement('nile-table')\nexport class NileTable extends NileElement {\n  @query('slot') defaultSlot: HTMLSlotElement;\n\tprivate rows:Array<NileTableBody>=[];\n\tprivate primaryRowWidths:Array<number>=[]\n\tprivate resizeObserver:ResizeObserver ;\n\tprivate debounceTimeout:any\n\n\n\t/**\n\t * The styles for nile-table\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tthis.addEventListener('nile-body-load',this.handleRows)\n\t}\n\n\tprotected firstUpdated(_changedProperties: PropertyValues): void {\n\t\tthis.updateComplete.then(()=>{\n\t\t\tthis.handleResizeObserver();\n\t\t})\n\t}\n\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<slot @slotchange=\"${this.repaintTable}\"></slot>\n\t\t\t`;\n\t}\n\n\trepaintTable(){\n\t\tthis.realignStructure();\n\t\tthis.handleBodyCssUpdate();\n\t}\n\n\thandleRows(e:CustomEvent){\n\t\tthis.rows=[...this.rows,e.detail.comp]\n\t}\n\n\thandleBodyCssUpdate(){\n    if (this.rows.length<2) return;\n    const tableBodies = this.rows;\n\t\tconst firstEl=tableBodies[0].shadowRoot?.querySelector<HTMLDivElement>('div.base')\n\t\tif(firstEl) {\n\t\t\tfirstEl.style.borderTopRightRadius=\"var(--nile-radius-radius-xl)\";\n\t\t\tfirstEl.style.borderTopLeftRadius = 'var(--nile-radius-radius-xl)';\n\t\t\tfirstEl.style.borderBottomRightRadius=\"0px\";\n\t\t\tfirstEl.style.borderBottomLeftRadius = '0px';\n\t\t\tfirstEl.style.borderBottom = 'none';\n\t\t}\n\t\ttableBodies.forEach((tb,i)=>{\n\t\t\tif(i>0 && i<tableBodies.length-1){\n\t\t\t\tconst el=tb.shadowRoot?.querySelector<HTMLDivElement>('div.base')\n\t\t\t\tif(el) {\n\t\t\t\t\tel.style.borderTopRightRadius=\"0px\";\n\t\t\t\t\tel.style.borderTopLeftRadius = \"0px\";\n\t\t\t\t\tel.style.borderBottomRightRadius=\"0px\";\n\t\t\t\t\tel.style.borderBottomLeftRadius = \"0px\";\n\t\t\t\t\tel.style.borderBottom = 'none';\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t\tconst lastEl=tableBodies[tableBodies.length - 1].shadowRoot?.querySelector<HTMLDivElement>('div.base')\n\t\tif(lastEl){\n\t\t\tlastEl.style.borderTopRightRadius=\"0px\";\n\t\t\tlastEl.style.borderTopLeftRadius = '0px';\n\t\t\tlastEl.style.borderBottomRightRadius=\"var(--nile-radius-radius-xl)\";\n\t\t\tlastEl.style.borderBottomLeftRadius = 'var(--nile-radius-radius-xl)';\n\t\t}\n\t}\n\n\tgetPrimaryColumnWidths(){\n\t\tconst primaryTb=this.rows.find(tb=>tb.type=='primary')!;\n\t\tconst widthArray=this.getTableCellFetchQuery(primaryTb).map((e:LitElement)=>e.clientWidth) as Array<number>\n\t\treturn widthArray;\n\t}\n\t\n\trealignStructure(){\n    if (this.rows.length<2) return;\n\t\tconst primaryRowWidths=this.getPrimaryColumnWidths();\n\t\tconst secondaryRows=this.rows.filter(tb=>tb.type!='primary');\n\t\tsecondaryRows.forEach((row)=>{\n\t\t\tlet elements=this.getTableCellFetchQuery(row)\n\t\t\telements?.forEach((el:NileTableCellItem|NileTableHeaderItem,ind)=>{\n\t\t\t\tel.style.setProperty('--cell-width',primaryRowWidths.at(ind)+'px')\n\t\t\t})\n\t\t})\n\t}\n\n\tgetTableCellFetchQuery(row:NileTableBody):Array<Element>{\n\t\treturn row?.shadowRoot?.\n\t\t\tquerySelector<HTMLSlotElement>('slot:not([name])')?.\n\t\t\tassignedElements()[0]\n\t\t\t.shadowRoot?.querySelector<HTMLSlotElement>('slot')?.\n\t\t\tassignedElements()!\n\t}\n\n\thandleResizeObserver(){\n\t\tconst onResize = (entries:ResizeObserverEntry[]): void=> {\n\t\t\tfor (let entry of entries) {\n\t\t\t\tif(this.debounceTimeout){\n\t\t\t\t\tclearTimeout(this.debounceTimeout);\n\t\t\t\t}\n\t\t\t\tthis.debounceTimeout=setTimeout(() => {\n\t\t\t\t\tthis.realignStructure();\n\t\t\t\t\tthis.debounceTimeout=null;\n\t\t\t\t}, 50);\n\t\t\t}\n\t\t};\n\t\tthis.resizeObserver=new ResizeObserver(onResize)\n\t\tthis.resizeObserver.observe(this);\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tthis.resizeObserver.disconnect()\n\t\tsuper.disconnectedCallback()\n\t}\n\t/* #endregion */\n}\n\nexport default NileTable;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table': NileTable;\n  }\n}"]}