@aquera/nile-elements 0.1.31-beta-1.0 → 0.1.31-beta-1.1

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.31-beta-1.0",
+  "version": "0.1.31-beta-1.1",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-stepper/nile-stepper.ts

@@ -26,7 +26,7 @@ export class NileStepper extends NileElement {
 	@property({ type: Boolean, attribute: true, reflect:true }) contentBelow: boolean = false;
 	@property({ type: Number, attribute: true, reflect:true }) currentStep: number = 0;
 	@property({ type: Number, attribute: true, reflect:true  }) completedStep: number = 0;
-	@property({ type: String, attribute: true, reflect:true  }) size: 'sm' | 'md' | 'lg' = 'md';
+	@property({ type: String, attribute: true, reflect:true  }) size: 'sm' | 'lg' = 'lg';
 	@property() icon: string = 'tick';
 
 	protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void{

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

@@ -14,6 +14,7 @@ export const styles = css`
 	:host {
 		--stepper-flex-val:1;
 		--bulletin--dot--seperation:30%;
+		--lines-thickness: 1px;
 		
 		display: inline-block;
 		flex-grow:var(--stepper-flex-val);
@@ -29,23 +30,23 @@ export const styles = css`
 		--stepper-item-title-size:12px;
 		--stepper-item-subtitle-size:10.24px;
 		--stepper-item-text-line-height:16px;
-		--circle-height:16px;
+		--circle-height:18px;
 	}
 
-	.stepper__item--md {
+	.stepper__item--lg {
 		--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:20px;
+		--circle-height:22px;
 	}
 
-	.stepper__item--lg {
+	.stepper__item--xl {
 		--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:28px;
+		--circle-height:26px;
 	}
 
 	.stepper__line__content {
@@ -67,16 +68,16 @@ export const styles = css`
 	.stepper__line {
 		display: block;
 		border: 0;
-		border-top: 2px solid var(--nile-colors-neutral-500);
+		border-top: var(--lines-thickness) solid var(--nile-colors-neutral-500);
 	}
 
 	.stepper__line--active {
-		border-top: 2px solid var(--nile-colors-primary-600);
+		border-top: var(--lines-thickness) solid var(--nile-colors-primary-600);
 	}
 
 	.stepper__item__content--above{
-		position:relative;
-		padding: 0 var(--nile-spacing-spacing-md);
+		position: relative;
+		margin-right: var(--nile-spacing-spacing-md);
 	}
 
 	.stepper__item__content--above .stepper__content__subtitle{
@@ -103,10 +104,6 @@ export const styles = css`
 		margin-right: 6px;
 	}
 
-	.stepper__item__bulletin--inline{
-		margin-right: 0px;
-	}
-
 	.stepper__content__title {
 		color:var(--nile-colors-dark-900);
 		font-size: var(--stepper-item-title-size);
@@ -142,23 +139,29 @@ export const styles = css`
 		aspect-ratio: 1 / 1;
 		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: 2px solid var(--nile-colors-neutral-500);
+		border: var(--lines-thickness) solid var(--nile-colors-neutral-500);
 	}
 
 	.stepper__bulletin__dot--active{
 		background: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));
-		border: 2px solid var(--nile-colors-primary-500);
+		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;
 		place-content:center;
 		width: var(--circle-height);
-		border: 2px solid var(--nile-colors-primary-600);
+		border: var(--lines-thickness) solid var(--nile-colors-primary-600);
 		aspect-ratio: 1 / 1;
 		border-radius: 50%;
 		background-color:var(--nile-colors-primary-600);
 		overflow:hidden;
 	}
+	
+	.stepper__bulletin__icon--active {
+		border: 1px solid var(--nile-colors-primary-500);
+		width: calc(var(--circle-height) + calc( var(--lines-thickness) * 2));
+	}
 `;
 export default [styles];

package/src/nile-stepper-item/nile-stepper-item.ts

@@ -30,7 +30,7 @@ export class NileStepperItem extends NileElement {
 
 	/* Properties passed to parent component: NileStepper */
 	@state() private contentBelow = false;
-	@state() private size : 'sm' | 'md' | 'lg' = 'md';
+	@state() private size : 'sm' | 'lg' = 'lg';
 	@state() private icon = 'tick';
 
 
@@ -89,8 +89,7 @@ export class NileStepperItem extends NileElement {
 				'stepper__item':true,
 				'stepper__item--selected':isCurrent,
 				'stepper__item--sm':this.size=='sm',
-				'stepper__item--md':this.size=='md',
-				'stepper__item--lg':this.size=='lg'
+				'stepper__item--lg':this.size=='lg',
 			})}">
 				<div class="stepper__line__content">
 					<div class="stepper__line__container">
@@ -104,7 +103,7 @@ export class NileStepperItem extends NileElement {
 
 					<div class=${classMap({ 'stepper__item__bulletin':true, 'stepper__item__bulletin--inline': !this.contentBelow })}>
 						${showCompletedIcon ? 
-							html`<div class="stepper__bulletin--icon">${this.getSvg()}</div>`
+							html`<div class="${classMap({ 'stepper__bulletin--icon':true, 'stepper__bulletin__icon--active':isCurrent })}">${this.getSvg()}</div>`
 							: html`<div class="${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}"></div>`
 						}
 					</div>
@@ -144,7 +143,7 @@ export class NileStepperItem extends NileElement {
 	}
 
 	getSvg():TemplateResult{
-		let iconSize = this.size == 'sm' ? 20 : this.size == 'md' ? 24 : 28;
+		let iconSize = this.size == 'sm' ? 20 : this.size == 'lg' ? 24 : 28;
 		return html`
 		<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"/>

package/src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.ts

@@ -16,39 +16,37 @@ export const styles = css`
 		flex-grow:var(--vertical-stepper-flex-val);
 		--bulletin--dot--seperation:30%;
 		--min-line-container-height:25px;
+		--lines-thickness: 1px;
 	}
 
 	.stepper__item {
 		display:flex;
 		column-gap:var(--item-spacing);
-		height:100%;
+		height: 100%;
 	}
 
 	.stepper__item--sm {
 		--item-spacing: var(--nile-spacing-spacing-md);
 		--stepper-item-title-size:12px;
-		--stepper-item-title-margin-top:15%;
 		--stepper-item-subtitle-size:10.24px;
 		--stepper-item-text-line-height:16px;
-		--circle-height:16px;
+		--circle-height:18px;
 	}
 
-	.stepper__item--md {
+	.stepper__item--lg {
 		--item-spacing: var(--nile-spacing-spacing-md);
 		--stepper-item-title-size:14px;
-		--stepper-item-title-margin-top:15%;
 		--stepper-item-subtitle-size:12px;
 		--stepper-item-text-line-height:18px;
-		--circle-height:20px;
+		--circle-height:22px;
 	}
 
-	.stepper__item--lg {
+	.stepper__item--xl {
 		--item-spacing: var(--nile-spacing-spacing-lg);
 		--stepper-item-title-size:16px;
-		--stepper-item-title-margin-top:25%;
 		--stepper-item-subtitle-size:14px;
 		--stepper-item-text-line-height:24px;
-		--circle-height:28px;
+		--circle-height:26px;
 	}
 	
 	.stepper-item__connector-content{
@@ -71,24 +69,30 @@ export const styles = css`
 		aspect-ratio: 1 / 1;
 		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: 2px solid var(--nile-colors-neutral-500);
+		border: var(--lines-thickness) solid var(--nile-colors-neutral-500);
 	}
 
 	.stepper__bulletin__dot--active{
 		background: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));
-		border: 2px solid var(--nile-colors-primary-500);
+		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;
 		place-content:center;
 		width: var(--circle-height);
-		border: 2px solid var(--nile-colors-primary-600);
+		border: var(--lines-thickness) solid var(--nile-colors-primary-600);
 		aspect-ratio: 1 / 1;
 		border-radius: 50%;
 		background-color:var(--nile-colors-primary-600);
 		overflow:hidden;
 	}
+	
+	.stepper__bulletin__icon--active {
+		border: var(--lines-thickness) solid var(--nile-colors-primary-500);
+		width: calc(var(--circle-height) + calc( var(--lines-thickness) * 2));
+	}
 
 	.stepper__item__line__container{
 		flex-grow: 1;
@@ -100,10 +104,10 @@ export const styles = css`
 
 	.stepper__item__line{
 		height:100%;
-		border-left: 2px solid var(--nile-colors-neutral-500);
+		border-left: var(--lines-thickness) solid var(--nile-colors-neutral-500);
 	}
 	.stepper__item__line--active{
-		border-left: 2px solid var(--nile-colors-primary-600);
+		border-left: var(--lines-thickness) solid var(--nile-colors-primary-600);
 	}
 
 	.stepper__item__content{
@@ -120,7 +124,11 @@ export const styles = css`
 	}
 
 	.stepper__content__title--alone{
-		margin-top: var(--stepper-item-title-margin-top);
+		margin-top: 25%;
+	}
+
+	.stepper__content__subtitle--alone{
+		margin-top: 6.25%;
 	}
 
 	.stepper__content__title--active{

package/src/nile-vertical-stepper-item/nile-vertical-stepper-item.ts

@@ -27,7 +27,7 @@ export class NileVerticalStepperItem extends NileElement {
 
 	/* Properties passed to parent component: NileStepper */
 	@state() private contentBelow = false;
-	@state() private size : 'sm' | 'md' | 'lg' = 'md';
+	@state() private size : 'sm' | 'lg' = 'lg';
 	@state() private icon = 'tick';
 
 
@@ -74,20 +74,19 @@ export class NileVerticalStepperItem 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'?14:this.size == 'lg'?16:20;
 		return html`
 			<div class="${classMap({
 				'stepper__item':true,
 				'stepper__item--selected':isCurrent,
 				'stepper__item--default':!isCurrent,
 				'stepper__item--sm':this.size=='sm',
-				'stepper__item--md':this.size=='md',
 				'stepper__item--lg':this.size=='lg',
 			})}">
 				<div class="stepper-item__connector-content">
 					<div class="stepper__item__bulletin">
 						${showCompletedIcon ? 
-							html`<div class="stepper__bulletin--icon">${this.getSvg()}</div>`
+							html`<div class="${classMap({ 'stepper__bulletin--icon':true, 'stepper__bulletin__icon--active':isCurrent })}">${this.getSvg()}</div>`
 							: html`<div class="${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}"></div>`
 						}
 					</div>
@@ -97,14 +96,14 @@ export class NileVerticalStepperItem extends NileElement {
 				</div>
 				<div class="stepper__item__content">
 					<div class="${classMap({ 'stepper__content__title':true, "stepper__content__title--alone": !this.subtitle, 'stepper__content__title--active':isCurrent })}">${this.title}</div>
-					<div class="${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}">${this.subtitle}</div>
+					<div class="${classMap({ 'stepper__content__subtitle':true, "stepper__content__subtitle--alone": !this.title, 'stepper__content__subtitle--active':isCurrent })}">${this.subtitle}</div>
 				</div>
 			</div>
 			`;
 	}
 
 	getSvg():TemplateResult{
-		let iconSize = this.size == 'sm' ? 20 : this.size == 'md' ? 24 : 28;
+		let iconSize = this.size == 'sm' ? 20 : this.size == 'lg' ? 24 : 28;
 		return html`
 		<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"/>

package/vscode-html-custom-data.json

@@ -3100,7 +3100,7 @@
     },
     {
       "name": "nile-stepper-item",
-      "description": "Nile stepper-item component.\n\nAttributes:\n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\nProperties:\n\n  * `absoluteTitle` {`HTMLDivElement`} - \n\n  * `absoluteSubtitle` {`HTMLDivElement`} - \n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\n  * `contentBelow` {`boolean`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - \n\n  * `icon` {`string`} - \n\n  * `isFirst` {`boolean`} - \n\n  * `isLast` {`boolean`} - \n\n  * `isComplete` {`boolean`} - \n\n  * `isCurrent` {`boolean`} - \n\n  * `currentStepValue` {`Number`} - \n\n  * `completedStepValue` {`Number`} - \n\n  * `calculatedCompletedStepValue` {`Number`} - \n\n  * `value` {`Number`} - \n\n  * `haveFlex` {`Boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile stepper-item component.\n\nAttributes:\n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\nProperties:\n\n  * `absoluteTitle` {`HTMLDivElement`} - \n\n  * `absoluteSubtitle` {`HTMLDivElement`} - \n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\n  * `contentBelow` {`boolean`} - \n\n  * `size` {`\"sm\" | \"lg\"`} - \n\n  * `icon` {`string`} - \n\n  * `isFirst` {`boolean`} - \n\n  * `isLast` {`boolean`} - \n\n  * `isComplete` {`boolean`} - \n\n  * `isCurrent` {`boolean`} - \n\n  * `currentStepValue` {`Number`} - \n\n  * `completedStepValue` {`Number`} - \n\n  * `calculatedCompletedStepValue` {`Number`} - \n\n  * `value` {`Number`} - \n\n  * `haveFlex` {`Boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "title",
@@ -3114,7 +3114,7 @@
     },
     {
       "name": "nile-stepper",
-      "description": "Nile stepper component.\n\nAttributes:\n\n  * `vertical` {`boolean`} - \n\n  * `contentBelow` {`boolean`} - \n\n  * `currentStep` {`number`} - \n\n  * `completedStep` {`number`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - \n\n  * `icon` {`string`} - \n\nProperties:\n\n  * `isVertical` {`boolean`} - \n\n  * `contentBelow` {`boolean`} - \n\n  * `currentStep` {`number`} - \n\n  * `completedStep` {`number`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - \n\n  * `icon` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile stepper component.\n\nAttributes:\n\n  * `vertical` {`boolean`} - \n\n  * `contentBelow` {`boolean`} - \n\n  * `currentStep` {`number`} - \n\n  * `completedStep` {`number`} - \n\n  * `size` {`\"sm\" | \"lg\"`} - \n\n  * `icon` {`string`} - \n\nProperties:\n\n  * `isVertical` {`boolean`} - \n\n  * `contentBelow` {`boolean`} - \n\n  * `currentStep` {`number`} - \n\n  * `completedStep` {`number`} - \n\n  * `size` {`\"sm\" | \"lg\"`} - \n\n  * `icon` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "vertical",
@@ -3136,14 +3136,11 @@
         },
         {
           "name": "size",
-          "description": "`size` {`\"sm\" | \"md\" | \"lg\"`} - \n\nProperty: size\n\nDefault: md",
+          "description": "`size` {`\"sm\" | \"lg\"`} - \n\nProperty: size\n\nDefault: lg",
           "values": [
             {
               "name": "sm"
             },
-            {
-              "name": "md"
-            },
             {
               "name": "lg"
             }
@@ -3917,7 +3914,7 @@
     },
     {
       "name": "nile-vertical-stepper-item",
-      "description": "Nile vertical-stepper-item component.\n\nAttributes:\n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\nProperties:\n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\n  * `contentBelow` {`boolean`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - \n\n  * `icon` {`string`} - \n\n  * `isFirst` {`boolean`} - \n\n  * `isLast` {`boolean`} - \n\n  * `isComplete` {`boolean`} - \n\n  * `isCurrent` {`boolean`} - \n\n  * `currentStepValue` {`Number`} - \n\n  * `completedStepValue` {`Number`} - \n\n  * `calculatedCompletedStepValue` {`Number`} - \n\n  * `value` {`Number`} - \n\n  * `haveFlex` {`Boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile vertical-stepper-item component.\n\nAttributes:\n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\nProperties:\n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\n  * `contentBelow` {`boolean`} - \n\n  * `size` {`\"sm\" | \"lg\"`} - \n\n  * `icon` {`string`} - \n\n  * `isFirst` {`boolean`} - \n\n  * `isLast` {`boolean`} - \n\n  * `isComplete` {`boolean`} - \n\n  * `isCurrent` {`boolean`} - \n\n  * `currentStepValue` {`Number`} - \n\n  * `completedStepValue` {`Number`} - \n\n  * `calculatedCompletedStepValue` {`Number`} - \n\n  * `value` {`Number`} - \n\n  * `haveFlex` {`Boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "title",