@aquera/nile-elements 0.1.28 → 0.1.29-beta-1.2

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

@@ -25,25 +25,28 @@ export const styles = css`
 	}
 
 	.stepper__item--sm {
-		--item-spacing: var(--nile-spacing-spacing-lg,12px);
+		--item-spacing: var(--nile-spacing-spacing-md);
 		--stepper-item-title-size:14px;
+		--stepper-item-title-margin-top:15%;
 		--stepper-item-subtitle-size:14px;
 		--stepper-item-text-line-height:20px;
 		--circle-height:16px;
 	}
 
 	.stepper__item--md {
-		--item-spacing: var(--nile-spacing-spacing-xl, 16px);
+		--item-spacing: var(--nile-spacing-spacing-md);
 		--stepper-item-title-size:16px;
-		--stepper-item-subtitle-size:16px;
-		--stepper-item-text-line-heightt:24px;
+		--stepper-item-title-margin-top:15%;
+		--stepper-item-subtitle-size:14px;
+		--stepper-item-text-line-height:24px;
 		--circle-height:20px;
 	}
 
 	.stepper__item--lg {
-		--item-spacing: var(--nile-spacing-spacing-xl, 16px);
+		--item-spacing: var(--nile-spacing-spacing-lg);
 		--stepper-item-title-size:16px;
-		--stepper-item-subtitle-size:16px;
+		--stepper-item-title-margin-top:25%;
+		--stepper-item-subtitle-size:14px;
 		--stepper-item-text-line-height:24px;
 		--circle-height:28px;
 	}
@@ -52,22 +55,28 @@ export const styles = css`
 		display: flex;
 		flex-direction: column;
 	}
+
 	.stepper__item__bulletin {
 		display:grid;
 		place-content:center;
 	}
 
+	.stepper__item__bulletin {
+		margin-top:3px;
+		margin-bottom:3px;
+	}
+
 	.stepper__bulletin--dot {
 		width: var(--circle-height);
 		aspect-ratio: 1 / 1;
 		border-radius: 50%;
-		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);
+		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);
 	}
 
 	.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-400);
+		border: 2px solid var(--nile-colors-primary-500);
 	}
 
 	.stepper__bulletin--icon {
@@ -91,7 +100,7 @@ export const styles = css`
 
 	.stepper__item__line{
 		height:100%;
-		border-left: 2px solid var(--nile-colors-primary-600);
+		border-left: 2px solid var(--nile-colors-neutral-500);
 	}
 	.stepper__item__line--active{
 		border-left: 2px solid var(--nile-colors-primary-600);
@@ -103,19 +112,24 @@ export const styles = css`
 		justify-content:start;
 	}
 	.stepper__content__title {
-		color:var(--nile-colors-gray-light-mode-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);
-		font-weight: 600;
+		font-weight: 400;
+	}
+
+	.stepper__content__title--alone{
+		margin-top: var(--stepper-item-title-margin-top);
 	}
 
 	.stepper__content__title--active{
-		color:var(--nile-colors-primary-700);
+		color:var(--nile-colors-primary-600);
+		font-weight: 600;
 	}
 
 	.stepper__content__subtitle {
-		color:var(--nile-colors-gray-light-mode-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);

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

@@ -87,13 +87,7 @@ export class NileVerticalStepperItem extends NileElement {
 				<div class="stepper-item__connector-content">
 					<div class="stepper__item__bulletin">
 						${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">
-										<g clip-path="url(#clip0_10902_1507)">
-										<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"/>
-										</g>
-									</svg>
-								</div>`
+							html`<div class="stepper__bulletin--icon">${this.getSvg()}</div>`
 							: html`<div class="${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}"></div>`
 						}
 					</div>
@@ -102,13 +96,23 @@ export class NileVerticalStepperItem extends NileElement {
 					</div>
 				</div>
 				<div class="stepper__item__content">
-					<div class="${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}">${this.title}</div>
+					<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>
 			</div>
 			`;
 	}
 
+	getSvg():TemplateResult{
+		let iconSize = this.size == 'sm' ? 20 : this.size == 'md' ? 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"/>
+		</svg>
+		`
+	}
+
+
 	/* #endregion */
 }
 

package/vscode-html-custom-data.json

@@ -3,7 +3,7 @@
   "tags": [
     {
       "name": "nile-accordion",
-      "description": "Nile detail component.\n\nAttributes:\n\n  * `open` {`boolean`} - Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.\n\n  * `variant` {`\"dark\" | \"light\"`} - Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.\nDefaults to `'light'`.\n\n  * `expandIconPlacement` {`\"left\" | \"right\"`} - Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.\nDefaults to `'right'`.\n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.\nDefaults to `'md'`.\n\n  * `summary` {`string`} - The summary to show in the header. If you need to display HTML, use the `summary` slot instead.\n\n  * `disabled` {`boolean`} - Disables the accordian so it can't be toggled.\n\nProperties:\n\n  * `styles` - \n\n  * `accordian` {`HTMLElement`} - \n\n  * `header` {`HTMLElement`} - \n\n  * `body` {`HTMLElement`} - \n\n  * `expandIconSlot` {`HTMLSlotElement`} - \n\n  * `open` {`boolean`} - Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.\n\n  * `variant` {`\"dark\" | \"light\"`} - Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.\nDefaults to `'light'`.\n\n  * `expandIconPlacement` {`\"left\" | \"right\"`} - Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.\nDefaults to `'right'`.\n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.\nDefaults to `'md'`.\n\n  * `summary` {`string`} - The summary to show in the header. If you need to display HTML, use the `summary` slot instead.\n\n  * `disabled` {`boolean`} - Disables the accordian so it can't be toggled.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile detail component.\n\nAttributes:\n\n  * `open` {`boolean`} - Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.\n\n  * `variant` {`\"dark\" | \"light\"`} - Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.\nDefaults to `'light'`.\n\n  * `expandIconPlacement` {`\"left\" | \"right\"`} - Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.\nDefaults to `'right'`.\n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.\nDefaults to `'md'`.\n\n  * `summary` {`string`} - The summary to show in the header. If you need to display HTML, use the `summary` slot instead.\n\n  * `disabled` {`boolean`} - Disables the accordian so it can't be toggled.\n\nProperties:\n\n  * `styles` - \n\n  * `accordian` {`HTMLElement`} - \n\n  * `header` {`HTMLElement`} - \n\n  * `body` {`HTMLElement`} - \n\n  * `expandIconSlot` {`HTMLSlotElement`} - \n\n  * `summarySlot` {`HTMLSlotElement`} - \n\n  * `open` {`boolean`} - Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.\n\n  * `variant` {`\"dark\" | \"light\"`} - Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.\nDefaults to `'light'`.\n\n  * `expandIconPlacement` {`\"left\" | \"right\"`} - Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.\nDefaults to `'right'`.\n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.\nDefaults to `'md'`.\n\n  * `summary` {`string`} - The summary to show in the header. If you need to display HTML, use the `summary` slot instead.\n\n  * `disabled` {`boolean`} - Disables the accordian so it can't be toggled.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "open",
@@ -799,11 +799,20 @@
     },
     {
       "name": "nile-circular-progressbar",
-      "description": "Nile icon component.\n\nAttributes:\n\n  * `progress` {`number`} - \n\nProperties:\n\n  * `progressCircle` - \n\n  * `progress` {`number`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nAttributes:\n\n  * `value` {`number`} - \n\n  * `content` {`string | undefined`} - Render method\n\n  * `size` {`number`} - \n\nProperties:\n\n  * `progressCircle` {`SVGCircleElement`} - \n\n  * `value` {`number`} - \n\n  * `content` {`string | undefined`} - Render method\n\n  * `size` {`number`} - \n\n  * `circleSize` {`{ radius: number; viewBox: number; fontSize: string; }`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
-          "name": "progress",
-          "description": "`progress` {`number`} - \n\nProperty: progress\n\nDefault: 50"
+          "name": "value",
+          "description": "`value` {`number`} - \n\nProperty: value\n\nDefault: 0"
+        },
+        {
+          "name": "content",
+          "description": "`content` {`string | undefined`} - Render method\n\nProperty: content",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "`size` {`number`} - \n\nProperty: size\n\nDefault: 40"
         }
       ]
     },
@@ -2595,11 +2604,23 @@
     },
     {
       "name": "nile-progress-bar",
-      "description": "Attributes:\n\n  * `value` {`number`} - \n\nProperties:\n\n  * `styles` - \n\n  * `value` {`number`} - \n\n  * `override` - ",
+      "description": "Attributes:\n\n  * `value` {`number`} - \n\n  * `variant` {`\"normal\" | \"rounded\"`} - \n\nProperties:\n\n  * `styles` - \n\n  * `value` {`number`} - \n\n  * `variant` {`\"normal\" | \"rounded\"`} - \n\n  * `override` - ",
       "attributes": [
         {
           "name": "value",
           "description": "`value` {`number`} - \n\nProperty: value\n\nDefault: 0"
+        },
+        {
+          "name": "variant",
+          "description": "`variant` {`\"normal\" | \"rounded\"`} - \n\nProperty: variant\n\nDefault: normal",
+          "values": [
+            {
+              "name": "normal"
+            },
+            {
+              "name": "rounded"
+            }
+          ]
         }
       ]
     },
@@ -3131,7 +3152,7 @@
     },
     {
       "name": "nile-stepper-item",
-      "description": "Nile 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 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`} - ",
       "attributes": [
         {
           "name": "title",
@@ -3145,7 +3166,7 @@
     },
     {
       "name": "nile-stepper",
-      "description": "Nile stepper component.\n\nAttributes:\n\n  * `vertical` {`boolean`} - \n\n  * `content-below` {`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\" | \"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`} - ",
       "attributes": [
         {
           "name": "vertical",
@@ -3153,8 +3174,8 @@
           "valueSet": "v"
         },
         {
-          "name": "content-below",
-          "description": "`content-below` {`boolean`} - \n\nProperty: contentBelow\n\nDefault: false",
+          "name": "contentBelow",
+          "description": "`contentBelow` {`boolean`} - \n\nProperty: contentBelow\n\nDefault: false",
           "valueSet": "v"
         },
         {