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

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

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, nothing, html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';
-import { customElement, property, state, query } from 'lit/decorators.js';
+import { LitElement, nothing, html, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './nile-stepper-item.css';
 import NileElement from '../internal/nile-element';
@@ -20,14 +20,11 @@ import NileElement from '../internal/nile-element';
  */
 @customElement('nile-stepper-item')
 export class NileStepperItem extends NileElement {
-
-	@query('.stepper__item__content--above .stepper__content__title') absoluteTitle:HTMLDivElement;
-	@query('.stepper__item__content--above .stepper__content__subtitle') absoluteSubtitle:HTMLDivElement;
-
 	/* Properties passed directly */
 	@property() title: string = '';
 	@property() subtitle: string = '';
 
+
 	/* Properties passed to parent component: NileStepper */
 	@state() private contentBelow = false;
 	@state() private size : 'sm' | 'md' | 'lg' = 'md';
@@ -47,6 +44,7 @@ export class NileStepperItem extends NileElement {
 	@state() private value :Number;
 	@state() private haveFlex :Boolean=true;
 
+
 	/**
 	 * The styles for nile-stepper-item
 	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
@@ -55,13 +53,6 @@ export class NileStepperItem extends NileElement {
 		return [styles];
 	}
 
-	protected updated(_changedProperties: PropertyValues): void {
-		if(_changedProperties.has('subtitle') && this.isLast && !this.contentBelow && this.subtitle){
-			const subtitleWidth=this.absoluteSubtitle?.scrollWidth as number ?? '0';
-			this.absoluteTitle.style.minWidth=subtitleWidth+"px"
-		}
-	}
-
 	/* #endregion */
 
 	/* #region Methods */
@@ -84,13 +75,14 @@ export class NileStepperItem extends NileElement {
 			suffixStepperLineActive = true;
 			if (this.calculatedCompletedStepValue == this.value) suffixStepperLineActive = false;
 		}
+		let iconSize = this.size == 'sm' ? 20 : this.size == 'md' ? 24 : 28;
 		return html`
 			<div class="${classMap({
 				'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">
@@ -102,9 +94,13 @@ export class NileStepperItem extends NileElement {
 						`}
 					</div>
 
-					<div class=${classMap({ 'stepper__item__bulletin':true, 'stepper__item__bulletin--inline': !this.contentBelow })}>
+					<div class="stepper__item__bulletin">
 						${showCompletedIcon ? 
-							html`<div class="stepper__bulletin--icon">${this.getSvg()}</div>`
+							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>
@@ -114,12 +110,9 @@ export class NileStepperItem extends NileElement {
 						'stepper__line--hastitle':!this.contentBelow
 					})}">
 						${this.contentBelow || !this.title ? nothing:html`
-
-							<div class="stepper__item__content--above">
-								<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 
+							class="${classMap({ 'stepper__content__title stepper__content__title--inline':true, 'stepper__content__title--active':isCurrent, })}">
+							${this.title}
 							</div>
 						`}
 						${this.isLast ? nothing : html`
@@ -130,28 +123,18 @@ export class NileStepperItem extends NileElement {
 						`}
 					</div>
 				</div>
-				${this.contentBelow?
-					html`
+				${!this.contentBelow?nothing:html`
 					<div class="stepper__item__content--below">
 						<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>
-				`:nothing}
+				`}
 			</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/src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.ts

@@ -25,28 +25,25 @@ export const styles = css`
 	}
 
 	.stepper__item--sm {
-		--item-spacing: var(--nile-spacing-spacing-md);
+		--item-spacing: var(--nile-spacing-spacing-lg,12px);
 		--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-md);
+		--item-spacing: var(--nile-spacing-spacing-xl, 16px);
 		--stepper-item-title-size:16px;
-		--stepper-item-title-margin-top:15%;
-		--stepper-item-subtitle-size:14px;
-		--stepper-item-text-line-height:24px;
+		--stepper-item-subtitle-size:16px;
+		--stepper-item-text-line-heightt:24px;
 		--circle-height:20px;
 	}
 
 	.stepper__item--lg {
-		--item-spacing: var(--nile-spacing-spacing-lg);
+		--item-spacing: var(--nile-spacing-spacing-xl, 16px);
 		--stepper-item-title-size:16px;
-		--stepper-item-title-margin-top:25%;
-		--stepper-item-subtitle-size:14px;
+		--stepper-item-subtitle-size:16px;
 		--stepper-item-text-line-height:24px;
 		--circle-height:28px;
 	}
@@ -55,28 +52,22 @@ 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-neutral-500) var(--bulletin--dot--seperation), var(--nile-colors-dark-200) var(--bulletin--dot--seperation));
-		border: 2px solid var(--nile-colors-neutral-500);
+		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(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: 2px solid var(--nile-colors-primary-400);
 	}
 
 	.stepper__bulletin--icon {
@@ -100,7 +91,7 @@ export const styles = css`
 
 	.stepper__item__line{
 		height:100%;
-		border-left: 2px solid var(--nile-colors-neutral-500);
+		border-left: 2px solid var(--nile-colors-primary-600);
 	}
 	.stepper__item__line--active{
 		border-left: 2px solid var(--nile-colors-primary-600);
@@ -112,24 +103,19 @@ export const styles = css`
 		justify-content:start;
 	}
 	.stepper__content__title {
-		color:var(--nile-colors-dark-900);
+		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: var(--nile-font-family-medium);
-		font-weight: 400;
-	}
-
-	.stepper__content__title--alone{
-		margin-top: var(--stepper-item-title-margin-top);
+		font-weight: 600;
 	}
 
 	.stepper__content__title--active{
-		color:var(--nile-colors-primary-600);
-		font-weight: 600;
+		color:var(--nile-colors-primary-700);
 	}
 
 	.stepper__content__subtitle {
-		color:var(--nile-colors-dark-500);
+		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: var( --nile-font-family-sans-serif);

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

@@ -87,7 +87,13 @@ export class NileVerticalStepperItem extends NileElement {
 				<div class="stepper-item__connector-content">
 					<div class="stepper__item__bulletin">
 						${showCompletedIcon ? 
-							html`<div class="stepper__bulletin--icon">${this.getSvg()}</div>`
+							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="${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}"></div>`
 						}
 					</div>
@@ -96,23 +102,13 @@ export class NileVerticalStepperItem extends NileElement {
 					</div>
 				</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__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>
 			`;
 	}
 
-	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  * `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`} - ",
+      "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`} - ",
       "attributes": [
         {
           "name": "open",
@@ -799,20 +799,11 @@
     },
     {
       "name": "nile-circular-progressbar",
-      "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`} - ",
+      "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`} - ",
       "attributes": [
         {
-          "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"
+          "name": "progress",
+          "description": "`progress` {`number`} - \n\nProperty: progress\n\nDefault: 50"
         }
       ]
     },
@@ -2604,23 +2595,11 @@
     },
     {
       "name": "nile-progress-bar",
-      "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` - ",
+      "description": "Attributes:\n\n  * `value` {`number`} - \n\nProperties:\n\n  * `styles` - \n\n  * `value` {`number`} - \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"
-            }
-          ]
         }
       ]
     },
@@ -3152,7 +3131,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  * `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",
@@ -3166,7 +3145,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  * `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`} - ",
       "attributes": [
         {
           "name": "vertical",
@@ -3174,8 +3153,8 @@
           "valueSet": "v"
         },
         {
-          "name": "contentBelow",
-          "description": "`contentBelow` {`boolean`} - \n\nProperty: contentBelow\n\nDefault: false",
+          "name": "content-below",
+          "description": "`content-below` {`boolean`} - \n\nProperty: contentBelow\n\nDefault: false",
           "valueSet": "v"
         },
         {