@aquera/nile-elements 0.0.70 → 0.0.71

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

@@ -11,6 +11,7 @@ import { css } from 'lit-element';
 export const styles = css `
 	:host {
 		--stepper-flex-val:1;
+		--bulletin--dot--seperation:30%;
 		
 		display:inline-block;
 		flex-grow:var(--stepper-flex-val);
@@ -20,35 +21,30 @@ export const styles = css `
 	
 	.stepper__item {
 		margin: 0 -1px;
-		--bulletin-inner-color:var(--nile-stepper-color-bulletin-inner-default);
-		--bulletin-outer-color:var(--nile-stepper-color-bulletin-outer-default);
-		--stepper-title-color:var(--stepper-default-text-color);
-		--stepper-subtitle-color:var(--stepper-default-text-color);
-	}
-
-	.stepper__item--selected {
-		--bulletin-inner-color:var(--nile-stepper-color-bulletin-inner-selected);
-		--bulletin-outer-color:var(--nile-stepper-color-bulletin-outer-selected);
-		--stepper-title-color:var(--nile-stepper-color-title-selected);
-		--stepper-subtitle-color:var(--nile-stepper-color-subtitle-selected);
 	}
 
 	.stepper__item--sm {
+		--item-spacing: var(--nile-spacing-spacing-lg);
 		--stepper-item-title-size:14px;
 		--stepper-item-subtitle-size:14px;
-		--circle-height:20px;
+		--stepper-item-text-line-height:20px;
+		--circle-height:16px;
 	}
 
 	.stepper__item--md {
+		--item-spacing: var(--nile-spacing-spacing-xl);
 		--stepper-item-title-size:16px;
 		--stepper-item-subtitle-size:16px;
-		--circle-height:24px;
+		--stepper-item-text-line-heightt:24px;
+		--circle-height:20px;
 	}
 
 	.stepper__item--lg {
+		--item-spacing: var(--nile-spacing-spacing-xl);
 		--stepper-item-title-size:16px;
 		--stepper-item-subtitle-size:16px;
-		--circle-height:32px;
+		--stepper-item-text-line-height:24px;
+		--circle-height:28px;
 	}
 
 	.stepper__line__content {
@@ -70,14 +66,15 @@ export const styles = css `
 	.stepper__line {
 		display: block;
 		border: 0;
-		border-top: 1px solid var(--nile-stepper-color-line-default);
+		border-top: 2px solid var(--nile-colors-gray-light-mode-200);
 	}
 
 	.stepper__line--active {
-		border-top: 1px solid var(--nile-stepper-color-line-selected);
+		border-top: 2px solid var(--nile-colors-primary-600);
 	}
 
 	.stepper__item__content--below {
+		margin-top: var(--item-spacing);
 		display:flex;
 		flex-direction:column;
 		align-items:center;
@@ -90,32 +87,56 @@ export const styles = css `
 	}
 
 	.stepper__content__title {
-		color:var(--stepper-title-color);
+		color:var(--nile-colors-gray-light-mode-700);
 		font-size: var(--stepper-item-title-size);
+		line-height: var(--stepper-item-text-line-height);
+		font-family:Inter;
 		font-weight: 600;
 	}
 
+	.stepper__content__title--inline{
+		padding: 0 8px;
+		color:var(--nile-colors-gray-light-mode-500);
+	}
+
+	.stepper__content__title--active{
+		color:var(--nile-colors-primary-700);
+	}
+
 	.stepper__content__subtitle {
-		color:var(--stepper-subtitle-color);
+		color:var(--nile-colors-gray-light-mode-600);
 		font-size: var(--stepper-item-subtitle-size);
+		line-height: var(--stepper-item-text-line-height);
+		font-family:Inter;
 		font-weight: 400;
 	}
 
+	.stepper__content__subtitle--active{
+		color:var(--nile-colors-primary-600);
+	}
+
 	.stepper__bulletin--dot {
 		width: var(--circle-height);
 		aspect-ratio: 1 / 1;
 		border-radius: 50%;
-		background: radial-gradient(var(--bulletin-inner-color) 35%, var(--bulletin-outer-color) 35%);
-		border: 1px solid var(--bulletin-inner-color);
+		background: radial-gradient(var(--nile-colors-gray-light-mode-300) var(--bulletin--dot--seperation), var(--nile-colors-gray-neutral-50) var(--bulletin--dot--seperation));
+		border: 2px solid var(--nile-colors-gray-light-mode-200);
+	}
+
+	.stepper__bulletin__dot--active{
+		background: radial-gradient(#fff var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));
+		border: 2px solid #85AAD18A;
 	}
 
 	.stepper__bulletin--icon {
 		display:grid;
 		place-content:center;
 		width: var(--circle-height);
+		border: 2px solid var(--nile-colors-primary-600);
 		aspect-ratio: 1 / 1;
 		border-radius: 50%;
-		background-color:var(--nile-stepper-color-highlight);
+		background-color:var(--nile-colors-primary-600);
+		overflow:hidden;
 	}
 `;
 export default [styles];

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,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6GxB,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-element';\n\n/**\n * StepperItem CSS\n */\nexport const styles = css`\n\t:host {\n\t\t--stepper-flex-val:1;\n\t\t\n\t\tdisplay:inline-block;\n\t\tflex-grow:var(--stepper-flex-val);\n\t\tcolor: var(--nile-stepper-color-text-default);\n\t\tmin-width:var(--nile-stepper-min-width);\n\t}\n\t\n\t.stepper__item {\n\t\tmargin: 0 -1px;\n\t\t--bulletin-inner-color:var(--nile-stepper-color-bulletin-inner-default);\n\t\t--bulletin-outer-color:var(--nile-stepper-color-bulletin-outer-default);\n\t\t--stepper-title-color:var(--stepper-default-text-color);\n\t\t--stepper-subtitle-color:var(--stepper-default-text-color);\n\t}\n\n\t.stepper__item--selected {\n\t\t--bulletin-inner-color:var(--nile-stepper-color-bulletin-inner-selected);\n\t\t--bulletin-outer-color:var(--nile-stepper-color-bulletin-outer-selected);\n\t\t--stepper-title-color:var(--nile-stepper-color-title-selected);\n\t\t--stepper-subtitle-color:var(--nile-stepper-color-subtitle-selected);\n\t}\n\n\t.stepper__item--sm {\n\t\t--stepper-item-title-size:14px;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--circle-height:20px;\n\t}\n\n\t.stepper__item--md {\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:16px;\n\t\t--circle-height:24px;\n\t}\n\n\t.stepper__item--lg {\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:16px;\n\t\t--circle-height:32px;\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: 1px solid var(--nile-stepper-color-line-default);\n\t}\n\n\t.stepper__line--active {\n\t\tborder-top: 1px solid var(--nile-stepper-color-line-selected);\n\t}\n\n\t.stepper__item__content--below {\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__content__title {\n\t\tcolor:var(--stepper-title-color);\n\t\tfont-size: var(--stepper-item-title-size);\n\t\tfont-weight: 600;\n\t}\n\n\t.stepper__content__subtitle {\n\t\tcolor:var(--stepper-subtitle-color);\n\t\tfont-size: var(--stepper-item-subtitle-size);\n\t\tfont-weight: 400;\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(--bulletin-inner-color) 35%, var(--bulletin-outer-color) 35%);\n\t\tborder: 1px solid var(--bulletin-inner-color);\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\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground-color:var(--nile-stepper-color-highlight);\n\t}\n`;\nexport default [styles];"]}
+{"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,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkIxB,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-element';\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\n\t\tdisplay:inline-block;\n\t\tflex-grow:var(--stepper-flex-val);\n\t\tcolor: var(--nile-stepper-color-text-default);\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-lg);\n\t\t--stepper-item-title-size:14px;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:20px;\n\t\t--circle-height:16px;\n\t}\n\n\t.stepper__item--md {\n\t\t--item-spacing: var(--nile-spacing-spacing-xl);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:16px;\n\t\t--stepper-item-text-line-heightt:24px;\n\t\t--circle-height:20px;\n\t}\n\n\t.stepper__item--lg {\n\t\t--item-spacing: var(--nile-spacing-spacing-xl);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:16px;\n\t\t--stepper-item-text-line-height:24px;\n\t\t--circle-height:28px;\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: 2px solid var(--nile-colors-gray-light-mode-200);\n\t}\n\n\t.stepper__line--active {\n\t\tborder-top: 2px solid var(--nile-colors-primary-600);\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__content__title {\n\t\tcolor:var(--nile-colors-gray-light-mode-700);\n\t\tfont-size: var(--stepper-item-title-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family:Inter;\n\t\tfont-weight: 600;\n\t}\n\n\t.stepper__content__title--inline{\n\t\tpadding: 0 8px;\n\t\tcolor:var(--nile-colors-gray-light-mode-500);\n\t}\n\n\t.stepper__content__title--active{\n\t\tcolor:var(--nile-colors-primary-700);\n\t}\n\n\t.stepper__content__subtitle {\n\t\tcolor:var(--nile-colors-gray-light-mode-600);\n\t\tfont-size: var(--stepper-item-subtitle-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family:Inter;\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-gray-light-mode-300) var(--bulletin--dot--seperation), var(--nile-colors-gray-neutral-50) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid var(--nile-colors-gray-light-mode-200);\n\t}\n\n\t.stepper__bulletin__dot--active{\n\t\tbackground: radial-gradient(#fff var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));\n\t\tborder: 2px solid #85AAD18A;\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: 2px 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`;\nexport default [styles];"]}

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

@@ -61,7 +61,7 @@ let NileStepperItem = class NileStepperItem extends NileElement {
             if (this.calculatedCompletedStepValue == this.value)
                 suffixStepperLineActive = false;
         }
-        let iconSize = this.size == 'sm' ? 14 : this.size == 'md' ? 16 : 20;
+        let iconSize = this.size == 'sm' ? 20 : this.size == 'md' ? 24 : 28;
         return html `
 			<div class="${classMap({
             'stepper__item': true,
@@ -81,17 +81,24 @@ let NileStepperItem = class NileStepperItem extends NileElement {
 					</div>
 
 					<div class="stepper__item__bulletin">
-						${showCompletedIcon ? html `<div class="stepper__bulletin--icon"><nile-icon size="${iconSize}" name="${this.icon}" color="white"></nile-icon> </div>`
-            : html `<div class="stepper__bulletin--dot"></div>`}
-						
+						${showCompletedIcon ?
+            html `<div class="stepper__bulletin--icon">
+									<svg width="${iconSize}" height="${iconSize}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+										<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z" fill="white"/>
+									</svg>
+								</div>`
+            : html `<div class="${classMap({ 'stepper__bulletin--dot': true, 'stepper__bulletin__dot--active': isCurrent })}"></div>`}
 					</div>
 					
 					<div class="${classMap({
             'stepper__line__container': true,
             'stepper__line--hastitle': !this.contentBelow
         })}">
-						${this.contentBelow ? nothing : html `
-							<div class="stepper__content__title" style="${!this.contentBelow && this.title ? 'padding-left:5px;' : ''}">${this.title}</div>
+						${this.contentBelow || !this.title ? nothing : html `
+							<div 
+							class="${classMap({ 'stepper__content__title stepper__content__title--inline': true, 'stepper__content__title--active': isCurrent, })}">
+							${this.title}
+							</div>
 						`}
 						${this.isLast ? nothing : html `
 							<hr class="${classMap({
@@ -103,8 +110,10 @@ let NileStepperItem = class NileStepperItem extends NileElement {
 				</div>
 				${!this.contentBelow ? nothing : html `
 					<div class="stepper__item__content--below">
-						<div class="stepper__content__title">${this.title}</div>
-						<div class="stepper__content__subtitle">${this.subtitle}</div>
+						<div class="${classMap({ 'stepper__content__title': true, 'stepper__content__title--active': isCurrent })}">
+							${this.title}
+						</div>
+						<div class="${classMap({ 'stepper__content__subtitle': true, 'stepper__content__subtitle--active': isCurrent })}">${this.subtitle}</div>
 					</div>
 				`}
 			</div>

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

@@ -1 +1 @@
-{"version":3,"file":"nile-stepper-item.js","sourceRoot":"","sources":["../../../src/nile-stepper-item/nile-stepper-item.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, nothing, html, property, state, CSSResultArray, TemplateResult } from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-stepper-item.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile stepper-item component.\n *\n * @tag nile-stepper-item\n *\n */\n@customElement('nile-stepper-item')\nexport class NileStepperItem extends NileElement {\n\t/* Properties passed directly */\n\t@property() title: string = '';\n\t@property() subtitle: string = '';\n\n\n\t/* Properties passed to parent component: NileStepper */\n\t@state() private contentBelow = false;\n\t@state() private size : 'sm' | 'md' | 'lg' = 'md';\n\t@state() private icon = 'tick';\n\n\n\t/* Properties Computed at parent level component NileStepper */\n\t@state() private isFirst = false;\n\t@state() private isLast = false;\n\n\t@state() private isComplete = false;\n\t@state() private isCurrent = false;\n\t@state() private currentStepValue :Number;\n\t@state() private completedStepValue :Number;\n\t@state() private calculatedCompletedStepValue :Number;\n\n\t@state() private value :Number;\n\t@state() private haveFlex :Boolean=true;\n\n\n\t/**\n\t * The styles for nile-stepper-item\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\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\n\t\tif (!this.haveFlex) this.style.setProperty('--stepper-flex-val', `0`);\n\t\tconst isCurrent = this.isCurrent;\n\t\tconst isComplete = this.isComplete;\n\n\t\tlet showCompletedIcon=false;\n\t\tif(isComplete && !isCurrent || this.completedStepValue==this.value) showCompletedIcon=true;\n\n\t\tlet suffixStepperLineActive = false;\n\t\tif(isComplete){\n\t\t\tsuffixStepperLineActive=true;\n\t\t\tif (this.calculatedCompletedStepValue==this.value) suffixStepperLineActive=false;\n\t\t}\n\t\tlet iconSize = this.size == 'sm'?14:this.size == 'md'?16:20;\n\t\treturn html`\n\t\t\t<div class=\"${classMap({\n\t\t\t\t'stepper__item':true,\n\t\t\t\t'stepper__item--selected':isCurrent,\n\t\t\t\t'stepper__item--sm':this.size=='sm',\n\t\t\t\t'stepper__item--md':this.size=='md',\n\t\t\t\t'stepper__item--lg':this.size=='lg',\n\t\t\t})}\">\n\t\t\t\t<div class=\"stepper__line__content\">\n\t\t\t\t\t<div class=\"stepper__line__container\">\n\t\t\t\t\t\t${this.isFirst ? nothing : html`\n\t\t\t\t\t\t\t<hr class=\"${classMap({\n\t\t\t\t\t\t\t\t'stepper__line':true,\n\t\t\t\t\t\t\t\t'stepper__line--active':isComplete || isCurrent\n\t\t\t\t\t\t\t})}\"/>\n\t\t\t\t\t\t`}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div class=\"stepper__item__bulletin\">\n\t\t\t\t\t\t${showCompletedIcon ? html`<div class=\"stepper__bulletin--icon\"><nile-icon size=\"${iconSize}\" name=\"${this.icon}\" color=\"white\"></nile-icon> </div>`\n\t\t\t\t\t\t\t: html`<div class=\"stepper__bulletin--dot\"></div>`\n\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t</div>\n\t\t\t\t\t\n\t\t\t\t\t<div class=\"${classMap({\n\t\t\t\t\t\t'stepper__line__container':true,\n\t\t\t\t\t\t'stepper__line--hastitle':!this.contentBelow\n\t\t\t\t\t})}\">\n\t\t\t\t\t\t${this.contentBelow?nothing:html`\n\t\t\t\t\t\t\t<div class=\"stepper__content__title\" style=\"${!this.contentBelow && this.title?'padding-left:5px;':''}\">${this.title}</div>\n\t\t\t\t\t\t`}\n\t\t\t\t\t\t${this.isLast ? nothing : html`\n\t\t\t\t\t\t\t<hr class=\"${classMap({\n\t\t\t\t\t\t\t\t'stepper__line':true,\n\t\t\t\t\t\t\t\t'stepper__line--active':suffixStepperLineActive\n\t\t\t\t\t\t\t})}\" style=\"flex-grow:1;\"/>\n\t\t\t\t\t\t`}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t${!this.contentBelow?nothing:html`\n\t\t\t\t\t<div class=\"stepper__item__content--below\">\n\t\t\t\t\t\t<div class=\"stepper__content__title\">${this.title}</div>\n\t\t\t\t\t\t<div class=\"stepper__content__subtitle\">${this.subtitle}</div>\n\t\t\t\t\t</div>\n\t\t\t\t`}\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileStepperItem;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'nile-stepper-item': NileStepperItem;\n\t}\n}"]}
+{"version":3,"file":"nile-stepper-item.js","sourceRoot":"","sources":["../../../src/nile-stepper-item/nile-stepper-item.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, nothing, html, property, state, CSSResultArray, TemplateResult } from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-stepper-item.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile stepper-item component.\n *\n * @tag nile-stepper-item\n *\n */\n@customElement('nile-stepper-item')\nexport class NileStepperItem extends NileElement {\n\t/* Properties passed directly */\n\t@property() title: string = '';\n\t@property() subtitle: string = '';\n\n\n\t/* Properties passed to parent component: NileStepper */\n\t@state() private contentBelow = false;\n\t@state() private size : 'sm' | 'md' | 'lg' = 'md';\n\t@state() private icon = 'tick';\n\n\n\t/* Properties Computed at parent level component NileStepper */\n\t@state() private isFirst = false;\n\t@state() private isLast = false;\n\n\t@state() private isComplete = false;\n\t@state() private isCurrent = false;\n\t@state() private currentStepValue :Number;\n\t@state() private completedStepValue :Number;\n\t@state() private calculatedCompletedStepValue :Number;\n\n\t@state() private value :Number;\n\t@state() private haveFlex :Boolean=true;\n\n\n\t/**\n\t * The styles for nile-stepper-item\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\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\n\t\tif (!this.haveFlex) this.style.setProperty('--stepper-flex-val', `0`);\n\t\tconst isCurrent = this.isCurrent;\n\t\tconst isComplete = this.isComplete;\n\n\t\tlet showCompletedIcon = false;\n\t\tif (isComplete && !isCurrent || this.completedStepValue == this.value) showCompletedIcon = true;\n\n\t\tlet suffixStepperLineActive = false;\n\t\tif (isComplete) {\n\t\t\tsuffixStepperLineActive = true;\n\t\t\tif (this.calculatedCompletedStepValue == this.value) suffixStepperLineActive = false;\n\t\t}\n\t\tlet iconSize = this.size == 'sm' ? 20 : this.size == 'md' ? 24 : 28;\n\t\treturn html`\n\t\t\t<div class=\"${classMap({\n\t\t\t\t'stepper__item':true,\n\t\t\t\t'stepper__item--selected':isCurrent,\n\t\t\t\t'stepper__item--sm':this.size=='sm',\n\t\t\t\t'stepper__item--md':this.size=='md',\n\t\t\t\t'stepper__item--lg':this.size=='lg',\n\t\t\t})}\">\n\t\t\t\t<div class=\"stepper__line__content\">\n\t\t\t\t\t<div class=\"stepper__line__container\">\n\t\t\t\t\t\t${this.isFirst ? nothing : html`\n\t\t\t\t\t\t\t<hr class=\"${classMap({\n\t\t\t\t\t\t\t\t'stepper__line':true,\n\t\t\t\t\t\t\t\t'stepper__line--active':isComplete || isCurrent\n\t\t\t\t\t\t\t})}\"/>\n\t\t\t\t\t\t`}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div class=\"stepper__item__bulletin\">\n\t\t\t\t\t\t${showCompletedIcon ? \n\t\t\t\t\t\t\thtml`<div class=\"stepper__bulletin--icon\">\n\t\t\t\t\t\t\t\t\t<svg width=\"${iconSize}\" height=\"${iconSize}\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z\" fill=\"white\"/>\n\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t\t: html`<div class=\"${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}\"></div>`\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t\n\t\t\t\t\t<div class=\"${classMap({\n\t\t\t\t\t\t'stepper__line__container':true,\n\t\t\t\t\t\t'stepper__line--hastitle':!this.contentBelow\n\t\t\t\t\t})}\">\n\t\t\t\t\t\t${this.contentBelow || !this.title ? nothing:html`\n\t\t\t\t\t\t\t<div \n\t\t\t\t\t\t\tclass=\"${classMap({ 'stepper__content__title stepper__content__title--inline':true, 'stepper__content__title--active':isCurrent, })}\">\n\t\t\t\t\t\t\t${this.title}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`}\n\t\t\t\t\t\t${this.isLast ? nothing : html`\n\t\t\t\t\t\t\t<hr class=\"${classMap({\n\t\t\t\t\t\t\t\t'stepper__line':true,\n\t\t\t\t\t\t\t\t'stepper__line--active':suffixStepperLineActive\n\t\t\t\t\t\t\t})}\" style=\"flex-grow:1;\"/>\n\t\t\t\t\t\t`}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t${!this.contentBelow?nothing:html`\n\t\t\t\t\t<div class=\"stepper__item__content--below\">\n\t\t\t\t\t\t<div class=\"${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}\">\n\t\t\t\t\t\t\t${this.title}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}\">${this.subtitle}</div>\n\t\t\t\t\t</div>\n\t\t\t\t`}\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileStepperItem;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'nile-stepper-item': NileStepperItem;\n\t}\n}"]}

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

@@ -11,21 +11,21 @@ import { css } from 'lit-element';
 export const styles = css `
   :host {
     display: inline-block;
+    --nile-remove-icon-color: var(--nile-colors-blue-500);
   }
 
   .tag {
     display: flex;
     align-items: center;
-    line-height: 1;
+    justify-items: center;
+    text-align: center;
+    gap: 3px;
     white-space: nowrap;
     user-select: none;
     border-radius: 4px;
-    gap: 6px;
-  }
-
-  .tag__remove::part(base) {
-    color: inherit;
-    padding: 0;
+    box-sizing: border-box;
+    color: var(--colors-text-text-secondary-700, #344054);
+    font-family: var(--nile-font-family-serif);
   }
 
   /*
@@ -33,94 +33,120 @@ export const styles = css `
    */
 
   .tag--primary {
-    background: #005EA6;
-    color: #FFF;
+    background: #005ea6;
+    color: #fff;
+    --nile-remove-icon-color: var(--nile-colors-blue-500);
   }
 
   .tag--primary:hover {
-    outline: 2px solid rgba(0, 94, 166, 0.50);
+    outline: 2px solid rgba(0, 94, 166, 0.5);
   }
 
-  .tag--primary:active > nile-icon-button {
+  .tag--primary:active > nile-icon {
     color: hsl(200.4 98% 39.4%);
   }
 
   .tag--success {
-    background: #A5F3E1;
+    background: #a5f3e1;
     color: #000;
+    --nile-remove-icon-color: var(--nile-colors-green-500);
   }
 
   .tag--success:hover {
-    outline: 2px solid #43E5C0;
+    outline: 2px solid #43e5c0;
   }
 
-  .tag--success:active > nile-icon-button {
+  .tag--success:active > nile-icon {
     color: hsl(142.1 76.2% 36.3%);
   }
 
   .tag--normal {
-    background: #E5E9EB;
+    background: #e5e9eb;
     color: #000;
+    --nile-remove-icon-color: var(--nile-colors-dark-500);
   }
 
   .tag--normal:hover {
-    outline: 2px solid #C7CED4;
+    outline: 2px solid #c7ced4;
   }
 
-
-  .tag--normal:active > nile-icon-button {
+  .tag--normal:active > nile-icon {
     color: hsl(240 5.2% 33.9%);
   }
 
   .tag--warning {
-    background: #F3E0A5;
+    background: #f3e0a5;
     color: #000;
+    --nile-remove-icon-color: var(--nile-colors-yellow-500);
   }
 
   .tag--warning:hover {
-    outline: 2px solid #E5BF43;
+    outline: 2px solid #e5bf43;
   }
 
-  .tag--warning:active > nile-icon-button {
+  .tag--warning:active > nile-icon {
     color: hsl(32.1 94.6% 43.7%);
   }
 
-
   .tag--error {
-    background: #F3A5AA;
+    background: #f3a5aa;
     color: #000;
+    --nile-remove-icon-color: var(--nile-colors-red-500);
   }
 
   .tag--error:hover {
-    outline: 2px solid #E5434D;
+    outline: 2px solid #e5434d;
   }
 
-  .tag--error:active > nile-icon-button {
+  .tag--error:active > nile-icon {
     color: hsl(0 72.2% 50.6%);
   }
 
   .tag--info {
-    background: #A5D3F3;
+    background: #a5d3f3;
     color: #000000;
+    --nile-remove-icon-color: var(--nile-colors-blue-500);
   }
 
   .tag--info:hover {
-    outline: 2px solid #42A3E5;
+    outline: 2px solid #42a3e5;
   }
 
-  .tag--info:active > nile-icon-button {
+  .tag--info:active > nile-icon {
     color: hsl(0 72.2% 50.6%);
   }
 
+  .tag--gray {
+    background: var(--nile-tag-gray-background-color);
+    border: 1px solid var(--nile-colors-gray-light-mode-300);
+    color: var(--nile-tag-gray-color);
+    --nile-remove-icon-color: var(--nile-tag-gray-x-color);
+  }
+
+  .tag--gray:hover {
+    background-color: var(--nile-tag-gray-hover-background-color);
+  }
 
-  .tag--medium {
-    font-size: 14px;
-    height: 26px;
-    padding: 0 6px;
+  /* .tag--gray:active > nile-icon {
+    color: #101828;
+  } */
+
+  .tag--small {
+    height: 24px;
+    padding: 3px 8px;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 18px;
   }
 
-  .tag__remove {
-    margin-inline-start: 0.5rem;
+  .tag--medium {
+    height: 24px;
+    padding: 2px 9px;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
   }
 
   /*
@@ -131,14 +157,37 @@ export const styles = css `
     border-radius: 9999px;
   }
 
-  .tag__prefix {
-  padding: 3px 6px;
-}
+  .tag__content {
+    display: inline-block;
+  }
+
+  .tag--medium .tag__remove-wrapper {
+    display: inline-flex;
+    justify-content: centre;
+    box-sizing: border-box;
+    height: 16px;
+    width: 16px;
+    padding: 2px;
+  }
 
- .tag__content {
-  font-size: 14px;
-}
+  .tag--small .tag__remove-wrapper {
+    display: inline-flex;
+    justify-content: centre;
+    box-sizing: border-box;
+    height: 14px;
+    width: 14px;
+    padding: 2px;
+  }
 
+  .tag--removable {
+    padding: 2px 2px 2px 9px;
+  }
+
+  .tag__remove:hover {
+    cursor: pointer;
+    --nile-remove-icon-color: #101828;
+    color: red;
+  }
 `;
 export default [styles];
 //# sourceMappingURL=nile-tag.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-tag.css.js","sourceRoot":"","sources":["../../../src/nile-tag/nile-tag.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmIxB,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-element';\n\n/**\n * Tag CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n  }\n\n  .tag {\n    display: flex;\n    align-items: center;\n    line-height: 1;\n    white-space: nowrap;\n    user-select: none;\n    border-radius: 4px;\n    gap: 6px;\n  }\n\n  .tag__remove::part(base) {\n    color: inherit;\n    padding: 0;\n  }\n\n  /*\n   * Variant modifiers\n   */\n\n  .tag--primary {\n    background: #005EA6;\n    color: #FFF;\n  }\n\n  .tag--primary:hover {\n    outline: 2px solid rgba(0, 94, 166, 0.50);\n  }\n\n  .tag--primary:active > nile-icon-button {\n    color: hsl(200.4 98% 39.4%);\n  }\n\n  .tag--success {\n    background: #A5F3E1;\n    color: #000;\n  }\n\n  .tag--success:hover {\n    outline: 2px solid #43E5C0;\n  }\n\n  .tag--success:active > nile-icon-button {\n    color: hsl(142.1 76.2% 36.3%);\n  }\n\n  .tag--normal {\n    background: #E5E9EB;\n    color: #000;\n  }\n\n  .tag--normal:hover {\n    outline: 2px solid #C7CED4;\n  }\n\n\n  .tag--normal:active > nile-icon-button {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .tag--warning {\n    background: #F3E0A5;\n    color: #000;\n  }\n\n  .tag--warning:hover {\n    outline: 2px solid #E5BF43;\n  }\n\n  .tag--warning:active > nile-icon-button {\n    color: hsl(32.1 94.6% 43.7%);\n  }\n\n\n  .tag--error {\n    background: #F3A5AA;\n    color: #000;\n  }\n\n  .tag--error:hover {\n    outline: 2px solid #E5434D;\n  }\n\n  .tag--error:active > nile-icon-button {\n    color: hsl(0 72.2% 50.6%);\n  }\n\n  .tag--info {\n    background: #A5D3F3;\n    color: #000000;\n  }\n\n  .tag--info:hover {\n    outline: 2px solid #42A3E5;\n  }\n\n  .tag--info:active > nile-icon-button {\n    color: hsl(0 72.2% 50.6%);\n  }\n\n\n  .tag--medium {\n    font-size: 14px;\n    height: 26px;\n    padding: 0 6px;\n  }\n\n  .tag__remove {\n    margin-inline-start: 0.5rem;\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .tag--pill {\n    border-radius: 9999px;\n  }\n\n  .tag__prefix {\n  padding: 3px 6px;\n}\n\n .tag__content {\n  font-size: 14px;\n}\n\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tag.css.js","sourceRoot":"","sources":["../../../src/nile-tag/nile-tag.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoLxB,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-element';\n\n/**\n * Tag CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    --nile-remove-icon-color: var(--nile-colors-blue-500);\n  }\n\n  .tag {\n    display: flex;\n    align-items: center;\n    justify-items: center;\n    text-align: center;\n    gap: 3px;\n    white-space: nowrap;\n    user-select: none;\n    border-radius: 4px;\n    box-sizing: border-box;\n    color: var(--colors-text-text-secondary-700, #344054);\n    font-family: var(--nile-font-family-serif);\n  }\n\n  /*\n   * Variant modifiers\n   */\n\n  .tag--primary {\n    background: #005ea6;\n    color: #fff;\n    --nile-remove-icon-color: var(--nile-colors-blue-500);\n  }\n\n  .tag--primary:hover {\n    outline: 2px solid rgba(0, 94, 166, 0.5);\n  }\n\n  .tag--primary:active > nile-icon {\n    color: hsl(200.4 98% 39.4%);\n  }\n\n  .tag--success {\n    background: #a5f3e1;\n    color: #000;\n    --nile-remove-icon-color: var(--nile-colors-green-500);\n  }\n\n  .tag--success:hover {\n    outline: 2px solid #43e5c0;\n  }\n\n  .tag--success:active > nile-icon {\n    color: hsl(142.1 76.2% 36.3%);\n  }\n\n  .tag--normal {\n    background: #e5e9eb;\n    color: #000;\n    --nile-remove-icon-color: var(--nile-colors-dark-500);\n  }\n\n  .tag--normal:hover {\n    outline: 2px solid #c7ced4;\n  }\n\n  .tag--normal:active > nile-icon {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .tag--warning {\n    background: #f3e0a5;\n    color: #000;\n    --nile-remove-icon-color: var(--nile-colors-yellow-500);\n  }\n\n  .tag--warning:hover {\n    outline: 2px solid #e5bf43;\n  }\n\n  .tag--warning:active > nile-icon {\n    color: hsl(32.1 94.6% 43.7%);\n  }\n\n  .tag--error {\n    background: #f3a5aa;\n    color: #000;\n    --nile-remove-icon-color: var(--nile-colors-red-500);\n  }\n\n  .tag--error:hover {\n    outline: 2px solid #e5434d;\n  }\n\n  .tag--error:active > nile-icon {\n    color: hsl(0 72.2% 50.6%);\n  }\n\n  .tag--info {\n    background: #a5d3f3;\n    color: #000000;\n    --nile-remove-icon-color: var(--nile-colors-blue-500);\n  }\n\n  .tag--info:hover {\n    outline: 2px solid #42a3e5;\n  }\n\n  .tag--info:active > nile-icon {\n    color: hsl(0 72.2% 50.6%);\n  }\n\n  .tag--gray {\n    background: var(--nile-tag-gray-background-color);\n    border: 1px solid var(--nile-colors-gray-light-mode-300);\n    color: var(--nile-tag-gray-color);\n    --nile-remove-icon-color: var(--nile-tag-gray-x-color);\n  }\n\n  .tag--gray:hover {\n    background-color: var(--nile-tag-gray-hover-background-color);\n  }\n\n  /* .tag--gray:active > nile-icon {\n    color: #101828;\n  } */\n\n  .tag--small {\n    height: 24px;\n    padding: 3px 8px;\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 18px;\n  }\n\n  .tag--medium {\n    height: 24px;\n    padding: 2px 9px;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 20px;\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .tag--pill {\n    border-radius: 9999px;\n  }\n\n  .tag__content {\n    display: inline-block;\n  }\n\n  .tag--medium .tag__remove-wrapper {\n    display: inline-flex;\n    justify-content: centre;\n    box-sizing: border-box;\n    height: 16px;\n    width: 16px;\n    padding: 2px;\n  }\n\n  .tag--small .tag__remove-wrapper {\n    display: inline-flex;\n    justify-content: centre;\n    box-sizing: border-box;\n    height: 14px;\n    width: 14px;\n    padding: 2px;\n  }\n\n  .tag--removable {\n    padding: 2px 2px 2px 9px;\n  }\n\n  .tag__remove:hover {\n    cursor: pointer;\n    --nile-remove-icon-color: #101828;\n    color: red;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-tag/nile-tag.d.ts

@@ -32,7 +32,7 @@ import type { CSSResultGroup } from 'lit';
 export declare class NileTag extends NileElement {
     static styles: CSSResultGroup;
     /** The tag's theme variant. */
-    variant: 'primary' | 'success' | 'normal' | 'warning' | 'error' | 'info';
+    variant: 'primary' | 'success' | 'normal' | 'warning' | 'error' | 'info' | 'gray';
     /** The tag's size. */
     size: 'small' | 'medium' | 'large';
     /** Draws a pill-style tag with rounded edges. */
@@ -40,7 +40,6 @@ export declare class NileTag extends NileElement {
     /** Makes the tag removable and shows a remove button. */
     removable: boolean;
     private handleRemoveClick;
-    getCloseButtonColor(): "--nile-colors-blue-500" | "--nile-colors-green-500" | "--nile-colors-dark-500" | "--nile-colors-yellow-500" | "--nile-colors-red-500";
     render(): TemplateResult<1>;
 }
 export default NileTag;

package/dist/src/nile-tag/nile-tag.js

@@ -47,26 +47,7 @@ let NileTag = class NileTag extends NileElement {
     handleRemoveClick() {
         this.emit('nile-remove');
     }
-    getCloseButtonColor() {
-        switch (this.variant) {
-            case 'primary':
-                return '--nile-colors-blue-500';
-            case 'success':
-                return '--nile-colors-green-500';
-            case 'normal':
-                return '--nile-colors-dark-500';
-            case 'warning':
-                return '--nile-colors-yellow-500';
-            case 'error':
-                return '--nile-colors-red-500';
-            case 'info':
-                return '--nile-colors-blue-500';
-            default:
-                return '--nile-colors-dark-500';
-        }
-    }
     render() {
-        const colorVariable = this.getCloseButtonColor();
         return html `
       <span
         part="base"
@@ -79,6 +60,7 @@ let NileTag = class NileTag extends NileElement {
             'tag--warning': this.variant === 'warning',
             'tag--error': this.variant === 'error',
             'tag--info': this.variant === 'info',
+            'tag--gray': this.variant === 'gray',
             // Sizes
             'tag--small': this.size === 'small',
             'tag--medium': this.size === 'medium',
@@ -94,17 +76,18 @@ let NileTag = class NileTag extends NileElement {
 
         ${this.removable
             ? html `
-              <nile-icon-button
-                part="remove-button"
-                exportparts="base:remove-button__base"
-                name="close"
-                library="system"
-                label="remove"
-                class="tag__remove"
-                @click=${this.handleRemoveClick}
-                tabindex="-1"
-                color="var(${colorVariable})"
-              ></nile-icon-button>
+          <span class="tag__remove-wrapper">
+              <nile-icon 
+              name="close"
+              part="remove-button"
+              exportparts="base:remove-button__base"
+              class="tag__remove"
+              @click=${this.handleRemoveClick}
+              tabindex="-1"
+              color="var(--nile-remove-icon-color)"
+              size="${this.size === 'small' ? '10' : '12'}"
+              /> </nile-icon>
+          </span>
             `
             : ''}
       </span>

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

@@ -1 +1 @@
-{"version":3,"file":"nile-tag.js","sourceRoot":"","sources":["../../../src/nile-tag/nile-tag.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEH;;;;;;;;;;;;;;GAcG;AAGI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,WAAW;IAAjC;;QAGL,+BAA+B;QACF,YAAO,GAMvB,QAAQ,CAAC;QAEtB,sBAAsB;QACO,SAAI,GAAiC,QAAQ,CAAC;QAE3E,iDAAiD;QACL,SAAI,GAAG,KAAK,CAAC;QAEzD,yDAAyD;QAC5B,cAAS,GAAG,KAAK,CAAC;IA2EjD,CAAC;IAzES,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC3B,CAAC;IAED,mBAAmB;QACjB,QAAQ,IAAI,CAAC,OAAO,EAAE;YACpB,KAAK,SAAS;gBACZ,OAAQ,wBAAwB,CAAC;YACnC,KAAK,SAAS;gBACZ,OAAO,yBAAyB,CAAC;YACnC,KAAK,QAAQ;gBACX,OAAO,wBAAwB,CAAC;YAClC,KAAK,SAAS;gBACZ,OAAO,0BAA0B,CAAC;YACpC,KAAK,OAAO;gBACV,OAAO,uBAAuB,CAAC;YACjC,KAAK,MAAM;gBACT,OAAO,wBAAwB,CAAC;YAClC;gBACE,OAAO,wBAAwB,CAAC;SACnC;IACH,CAAC;IAGD,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACjD,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,GAAG,EAAE,IAAI;YAET,QAAQ;YACR,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC1C,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACxC,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC1C,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YACtC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAEpC,QAAQ;YACR,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;YACrC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YAEnC,YAAY;YACZ,WAAW,EAAE,IAAI,CAAC,IAAI;YACtB,gBAAgB,EAAE,IAAI,CAAC,SAAS;SAEjC,CAAC;;;;;;UAMA,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;;;;;;;yBAQS,IAAI,CAAC,iBAAiB;;6BAElB,aAAa;;aAE7B;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AA5FM,cAAM,GAAmB,MAAM,CAAC;AAGV;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAMN;AAGO;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAA+C;AAG/B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAc;AAG5B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAnBpC,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA8FnB;SA9FY,OAAO;AAgGpB,eAAe,OAAO,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 {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { styles } from './nile-tag.css';\nimport '../nile-icon-button/nile-icon-button';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n/**\n * Nile icon component.\n *\n * @tag nile-tag\n *\n */\n\n/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @status stable\n *\n * @dependency nile-icon-button\n *\n * @slot - The tag's content.\n *\n * @event nile-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, an `<nile-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */\n\n@customElement('nile-tag')\nexport class NileTag extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  /** The tag's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'primary'\n    | 'success'\n    | 'normal'\n    | 'warning'\n    | 'error'\n    | 'info' = 'normal';\n\n  /** The tag's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Draws a pill-style tag with rounded edges. */\n  @property({ type: Boolean, reflect: true }) pill = false;\n\n  /** Makes the tag removable and shows a remove button. */\n  @property({ type: Boolean }) removable = false;\n\n  private handleRemoveClick() {\n    this.emit('nile-remove');\n  }\n\n  getCloseButtonColor() {\n    switch (this.variant) {\n      case 'primary':\n        return  '--nile-colors-blue-500'; \n      case 'success':\n        return '--nile-colors-green-500'; \n      case 'normal':\n        return '--nile-colors-dark-500'; \n      case 'warning':\n        return '--nile-colors-yellow-500';\n      case 'error':\n        return '--nile-colors-red-500';\n      case 'info':\n        return '--nile-colors-blue-500';\n      default:\n        return '--nile-colors-dark-500'; \n    }\n  }\n  \n\n  render() {\n    const colorVariable = this.getCloseButtonColor();\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          tag: true,\n\n          // Types\n          'tag--primary': this.variant === 'primary',\n          'tag--success': this.variant === 'success',\n          'tag--normal': this.variant === 'normal',\n          'tag--warning': this.variant === 'warning',\n          'tag--error': this.variant === 'error',\n          'tag--info': this.variant === 'info',\n\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n\n          // Modifiers\n          'tag--pill': this.pill,\n          'tag--removable': this.removable,\n\n        })}\n      >\n        <slot name=\"prefix\" part=\"prefix\" class=\"tag__prefix\"></slot>\n\n        <slot part=\"content\" class=\"tag__content\"></slot>\n\n        ${this.removable\n          ? html`\n              <nile-icon-button\n                part=\"remove-button\"\n                exportparts=\"base:remove-button__base\"\n                name=\"close\"\n                library=\"system\"\n                label=\"remove\"\n                class=\"tag__remove\"\n                @click=${this.handleRemoveClick}\n                tabindex=\"-1\"\n                color=\"var(${colorVariable})\"\n              ></nile-icon-button>\n            `\n          : ''}\n      </span>\n    `;\n  }\n}\n\nexport default NileTag;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tag': NileTag;\n  }\n}\n"]}
+{"version":3,"file":"nile-tag.js","sourceRoot":"","sources":["../../../src/nile-tag/nile-tag.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEH;;;;;;;;;;;;;;GAcG;AAGI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,WAAW;IAAjC;;QAGL,+BAA+B;QACF,YAAO,GAOvB,QAAQ,CAAC;QAEtB,sBAAsB;QACO,SAAI,GAAiC,QAAQ,CAAC;QAE3E,iDAAiD;QACL,SAAI,GAAG,KAAK,CAAC;QAEzD,yDAAyD;QAC5B,cAAS,GAAG,KAAK,CAAC;IAuDjD,CAAC;IArDS,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,GAAG,EAAE,IAAI;YAET,QAAQ;YACR,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC1C,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACxC,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC1C,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YACtC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACpC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAEpC,QAAQ;YACR,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;YACrC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YAEnC,YAAY;YACZ,WAAW,EAAE,IAAI,CAAC,IAAI;YACtB,gBAAgB,EAAE,IAAI,CAAC,SAAS;SACjC,CAAC;;;;;;UAMA,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;;;;;;uBAOO,IAAI,CAAC,iBAAiB;;;sBAGvB,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;;;aAG5C;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AAzEM,cAAM,GAAmB,MAAM,CAAC;AAGV;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAON;AAGO;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAA+C;AAG/B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAc;AAG5B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AApBpC,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA2EnB;SA3EY,OAAO;AA6EpB,eAAe,OAAO,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 {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { styles } from './nile-tag.css';\nimport '../nile-icon-button/nile-icon-button';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n/**\n * Nile icon component.\n *\n * @tag nile-tag\n *\n */\n\n/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @status stable\n *\n * @dependency nile-icon-button\n *\n * @slot - The tag's content.\n *\n * @event nile-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, an `<nile-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */\n\n@customElement('nile-tag')\nexport class NileTag extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  /** The tag's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'primary'\n    | 'success'\n    | 'normal'\n    | 'warning'\n    | 'error'\n    | 'info'\n    | 'gray' = 'normal';\n\n  /** The tag's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Draws a pill-style tag with rounded edges. */\n  @property({ type: Boolean, reflect: true }) pill = false;\n\n  /** Makes the tag removable and shows a remove button. */\n  @property({ type: Boolean }) removable = false;\n\n  private handleRemoveClick() {\n    this.emit('nile-remove');\n  }\n  \n  render() {\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          tag: true,\n\n          // Types\n          'tag--primary': this.variant === 'primary',\n          'tag--success': this.variant === 'success',\n          'tag--normal': this.variant === 'normal',\n          'tag--warning': this.variant === 'warning',\n          'tag--error': this.variant === 'error',\n          'tag--info': this.variant === 'info',\n          'tag--gray': this.variant === 'gray',\n\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n\n          // Modifiers\n          'tag--pill': this.pill,\n          'tag--removable': this.removable,\n        })}\n      >\n        <slot name=\"prefix\" part=\"prefix\" class=\"tag__prefix\"></slot>\n\n        <slot part=\"content\" class=\"tag__content\"></slot>\n\n        ${this.removable\n          ? html`\n          <span class=\"tag__remove-wrapper\">\n              <nile-icon \n              name=\"close\"\n              part=\"remove-button\"\n              exportparts=\"base:remove-button__base\"\n              class=\"tag__remove\"\n              @click=${this.handleRemoveClick}\n              tabindex=\"-1\"\n              color=\"var(--nile-remove-icon-color)\"\n              size=\"${this.size === 'small' ? '10' : '12'}\"\n              /> </nile-icon>\n          </span>\n            `\n          : ''}\n      </span>\n    `;\n  }\n}\n\nexport default NileTag;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tag': NileTag;\n  }\n}\n"]}

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

@@ -186,6 +186,10 @@ export const styles = css `
     border-radius: 4px;
   }
 
+  .alert--no-content{
+    align-items:center ;
+  }
+
   [hidden] {
     display: none;
   }