@aquera/nile-elements 0.0.67 → 0.0.68

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

@@ -0,0 +1,135 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html, property } from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-stepper.css';
+import NileElement from '../internal/nile-element';
+import { watch } from '../internal/watch';
+/**
+ * Nile stepper component.
+ *
+ * @tag nile-stepper
+ *
+ */
+let NileStepper = class NileStepper extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.contentBelow = false;
+        this.currentStep = 0;
+        this.completedStep = 0;
+        this.size = 'md';
+        this.icon = 'tick';
+        /* #endregion */
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateComplete.then(() => {
+            this.updateItems();
+        });
+    }
+    handleCurrentStepChanges() {
+        this.updateItems();
+        this.emit('nile-current-change', { value: this.currentStep });
+    }
+    handleCompletedStepChanges() {
+        this.updateItems();
+        this.emit('nile-completed-change', { value: this.completedStep });
+    }
+    updateItems() {
+        const items = [...this.querySelectorAll('nile-stepper-item')];
+        if (!items.length)
+            return;
+        const haveFlex = items.length < 3;
+        const current = (this.currentStep == 0 || this.currentStep > items.length) ? 1 : this.currentStep;
+        const calculatedCompleted = this.completedStep > items.length ? current : this.completedStep < current ? current : this.completedStep;
+        const completed = this.completedStep > items.length ? 0 : this.completedStep;
+        items.forEach((el, index) => {
+            // set item is complete and is current values
+            if (index + 1 < current) {
+                el.isComplete = true;
+                el.isCurrent = false;
+            }
+            else if (index + 1 == current) {
+                if (index + 1 <= calculatedCompleted)
+                    el.isComplete = true;
+                else
+                    el.isComplete = false;
+                el.isCurrent = true;
+            }
+            else {
+                if (index + 1 <= calculatedCompleted)
+                    el.isComplete = true;
+                else
+                    el.isComplete = false;
+                el.isCurrent = false;
+            }
+            // Set isLast and isFirst
+            if (index == 0)
+                el.isFirst = true;
+            if (index == items.length - 1)
+                el.isLast = true;
+            // setting default values
+            el.currentStepValue = current;
+            el.calculatedCompletedStepValue = calculatedCompleted;
+            el.completedStepValue = completed;
+            el.icon = this.icon;
+            el.value = index + 1;
+            el.contentBelow = this.contentBelow;
+            if (index == 0 || index == items.length - 1) {
+                el.haveFlex = haveFlex;
+            }
+        });
+    }
+    /**
+     * The styles for nile-stepper
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /* #endregion */
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html `
+			<slot
+				@slotchange=${this.updateItems}
+			></slot>
+			`;
+    }
+};
+__decorate([
+    property({ type: Boolean, attribute: 'content-below' })
+], NileStepper.prototype, "contentBelow", void 0);
+__decorate([
+    property({ type: Number, attribute: 'current-step' })
+], NileStepper.prototype, "currentStep", void 0);
+__decorate([
+    property({ type: Number, attribute: 'completed-step' })
+], NileStepper.prototype, "completedStep", void 0);
+__decorate([
+    property({ type: String, attribute: 'size' })
+], NileStepper.prototype, "size", void 0);
+__decorate([
+    property()
+], NileStepper.prototype, "icon", void 0);
+__decorate([
+    watch('currentStep')
+], NileStepper.prototype, "handleCurrentStepChanges", null);
+__decorate([
+    watch('completedStep')
+], NileStepper.prototype, "handleCompletedStepChanges", null);
+NileStepper = __decorate([
+    customElement('nile-stepper')
+], NileStepper);
+export { NileStepper };
+export default NileStepper;
+//# sourceMappingURL=nile-stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-stepper.js","sourceRoot":"","sources":["../../../src/nile-stepper/nile-stepper.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, property, CSSResultArray, TemplateResult } from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-stepper.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\n\n\n/**\n * Nile stepper component.\n *\n * @tag nile-stepper\n *\n */\n@customElement('nile-stepper')\nexport class NileStepper extends NileElement {\n\n\t@property({ type: Boolean, attribute: 'content-below' }) contentBelow: boolean = false;\n\t@property({ type: Number, attribute: 'current-step' }) currentStep: number = 0;\n\t@property({ type: Number, attribute: 'completed-step' }) completedStep: number = 0;\n\t@property({ type: String, attribute: 'size' }) size: 'sm' | 'md' | 'lg' = 'md';\n\t@property() icon: string = 'tick';\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.updateComplete.then(() => {\n\t\t\tthis.updateItems();\n\t\t});\n\t}\n\n\t@watch('currentStep')\n\thandleCurrentStepChanges() {\n\t\tthis.updateItems();\n\t\tthis.emit('nile-current-change', { value: this.currentStep });\n\t}\n\n\t@watch('completedStep')\n\thandleCompletedStepChanges() {\n\t\tthis.updateItems()\n\t\tthis.emit('nile-completed-change', { value: this.completedStep });\n\t}\n\n\tprivate updateItems() {\n\t\tconst items: any = [...this.querySelectorAll('nile-stepper-item')];\n\t\tif (!items.length) return;\n\n\t\tconst haveFlex = items.length < 3;\n\n\t\tconst current = (this.currentStep == 0 || this.currentStep > items.length) ? 1 : this.currentStep;\n\t\tconst calculatedCompleted = this.completedStep > items.length ? current : this.completedStep < current ? current : this.completedStep;\n\t\tconst completed = this.completedStep > items.length ? 0 : this.completedStep;\n\n\t\titems.forEach((el: any, index: number) => {\n\t\t\t// set item is complete and is current values\n\t\t\tif (index + 1 < current) {\n\t\t\t\tel.isComplete = true;\n\t\t\t\tel.isCurrent = false;\n\t\t\t}\n\t\t\telse if (index + 1 == current) {\n\t\t\t\tif (index + 1 <= calculatedCompleted) el.isComplete = true;\n\t\t\t\telse el.isComplete = false;\n\t\t\t\tel.isCurrent = true;\n\t\t\t}\n\t\t\telse {\n\t\t\t\tif (index + 1 <= calculatedCompleted) el.isComplete = true;\n\t\t\t\telse el.isComplete = false;\n\t\t\t\tel.isCurrent = false;\n\t\t\t}\n\n\t\t\t// Set isLast and isFirst\n\t\t\tif (index == 0) el.isFirst = true;\n\t\t\tif (index == items.length - 1) el.isLast = true;\n\n\t\t\t// setting default values\n\t\t\tel.currentStepValue = current;\n\t\t\tel.calculatedCompletedStepValue = calculatedCompleted;\n\t\t\tel.completedStepValue = completed;\n\n\t\t\tel.icon = this.icon;\n\t\t\tel.value = index + 1;\n\t\t\tel.contentBelow = this.contentBelow\n\t\t\tif (index == 0 || index == items.length - 1) {\n\t\t\t\tel.haveFlex = haveFlex;\n\t\t\t}\n\t\t})\n\t}\n\n\t/**\n\t * The styles for nile-stepper\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\t\treturn html`\n\t\t\t<slot\n\t\t\t\t@slotchange=${this.updateItems}\n\t\t\t></slot>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileStepper;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'nile-stepper': NileStepper;\n\t}\n}"]}

package/dist/src/nile-stepper-item/index.d.ts

@@ -0,0 +1 @@
+export { NileStepperItem } from './nile-stepper-item';

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

@@ -0,0 +1,2 @@
+export { NileStepperItem } from './nile-stepper-item';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-stepper-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { NileStepperItem } from './nile-stepper-item';"]}

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

@@ -0,0 +1,12 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+ * StepperItem CSS
+ */
+export declare const styles: import("lit-element").CSSResult;
+declare const _default: import("lit-element").CSSResult[];
+export default _default;

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

@@ -0,0 +1,122 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+import { css } from 'lit-element';
+/**
+ * StepperItem CSS
+ */
+export const styles = css `
+	:host {
+		--stepper-flex-val:1;
+		
+		display:inline-block;
+		flex-grow:var(--stepper-flex-val);
+		color: var(--nile-stepper-color-text-default);
+		min-width:var(--nile-stepper-min-width);
+	}
+	
+	.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 {
+		--stepper-item-title-size:14px;
+		--stepper-item-subtitle-size:14px;
+		--circle-height:20px;
+	}
+
+	.stepper__item--md {
+		--stepper-item-title-size:16px;
+		--stepper-item-subtitle-size:16px;
+		--circle-height:24px;
+	}
+
+	.stepper__item--lg {
+		--stepper-item-title-size:16px;
+		--stepper-item-subtitle-size:16px;
+		--circle-height:32px;
+	}
+
+	.stepper__line__content {
+		display:flex;
+		width:100%;
+		align-items:center;
+	}
+
+	.stepper__line__container {
+		flex-grow:1;
+		padding:0 1px;
+	}
+
+	.stepper__line--hastitle {
+		display:flex;
+		align-items:center;
+	}
+
+	.stepper__line {
+		display: block;
+		border: 0;
+		border-top: 1px solid var(--nile-stepper-color-line-default);
+	}
+
+	.stepper__line--active {
+		border-top: 1px solid var(--nile-stepper-color-line-selected);
+	}
+
+	.stepper__item__content--below {
+		display:flex;
+		flex-direction:column;
+		align-items:center;
+	}
+	
+	.stepper__item__bulletin {
+		display:grid;
+		place-content:center;
+		margin:0 -1px;
+	}
+
+	.stepper__content__title {
+		color:var(--stepper-title-color);
+		font-size: var(--stepper-item-title-size);
+		font-weight: 600;
+	}
+
+	.stepper__content__subtitle {
+		color:var(--stepper-subtitle-color);
+		font-size: var(--stepper-item-subtitle-size);
+		font-weight: 400;
+	}
+
+	.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);
+	}
+
+	.stepper__bulletin--icon {
+		display:grid;
+		place-content:center;
+		width: var(--circle-height);
+		aspect-ratio: 1 / 1;
+		border-radius: 50%;
+		background-color:var(--nile-stepper-color-highlight);
+	}
+`;
+export default [styles];
+//# sourceMappingURL=nile-stepper-item.css.js.map

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

@@ -0,0 +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];"]}

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

@@ -0,0 +1,46 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { CSSResultArray, TemplateResult } from 'lit-element';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile stepper-item component.
+ *
+ * @tag nile-stepper-item
+ *
+ */
+export declare class NileStepperItem extends NileElement {
+    title: string;
+    subtitle: string;
+    private contentBelow;
+    private size;
+    private icon;
+    private isFirst;
+    private isLast;
+    private isComplete;
+    private isCurrent;
+    private currentStepValue;
+    private completedStepValue;
+    private calculatedCompletedStepValue;
+    private value;
+    private haveFlex;
+    /**
+     * 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]`
+     */
+    static get styles(): CSSResultArray;
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render(): TemplateResult;
+}
+export default NileStepperItem;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-stepper-item': NileStepperItem;
+    }
+}

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

@@ -0,0 +1,161 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { nothing, html, property, state } from 'lit-element';
+import { customElement } 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';
+/**
+ * Nile stepper-item component.
+ *
+ * @tag nile-stepper-item
+ *
+ */
+let NileStepperItem = class NileStepperItem extends NileElement {
+    constructor() {
+        super(...arguments);
+        /* Properties passed directly */
+        this.title = '';
+        this.subtitle = '';
+        /* Properties passed to parent component: NileStepper */
+        this.contentBelow = false;
+        this.size = 'md';
+        this.icon = 'tick';
+        /* Properties Computed at parent level component NileStepper */
+        this.isFirst = false;
+        this.isLast = false;
+        this.isComplete = false;
+        this.isCurrent = false;
+        this.haveFlex = true;
+        /* #endregion */
+    }
+    /**
+     * 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]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /* #endregion */
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        if (!this.haveFlex)
+            this.style.setProperty('--stepper-flex-val', `0`);
+        const isCurrent = this.isCurrent;
+        const isComplete = this.isComplete;
+        let showCompletedIcon = false;
+        if (isComplete && !isCurrent || this.completedStepValue == this.value)
+            showCompletedIcon = true;
+        let suffixStepperLineActive = false;
+        if (isComplete) {
+            suffixStepperLineActive = true;
+            if (this.calculatedCompletedStepValue == this.value)
+                suffixStepperLineActive = false;
+        }
+        let iconSize = this.size == 'sm' ? 14 : this.size == 'md' ? 16 : 20;
+        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',
+        })}">
+				<div class="stepper__line__content">
+					<div class="stepper__line__container">
+						${this.isFirst ? nothing : html `
+							<hr class="${classMap({
+            'stepper__line': true,
+            'stepper__line--active': isComplete || isCurrent
+        })}"/>
+						`}
+					</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>`}
+						
+					</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.isLast ? nothing : html `
+							<hr class="${classMap({
+            'stepper__line': true,
+            'stepper__line--active': suffixStepperLineActive
+        })}" style="flex-grow:1;"/>
+						`}
+					</div>
+				</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>
+				`}
+			</div>
+		`;
+    }
+};
+__decorate([
+    property()
+], NileStepperItem.prototype, "title", void 0);
+__decorate([
+    property()
+], NileStepperItem.prototype, "subtitle", void 0);
+__decorate([
+    state()
+], NileStepperItem.prototype, "contentBelow", void 0);
+__decorate([
+    state()
+], NileStepperItem.prototype, "size", void 0);
+__decorate([
+    state()
+], NileStepperItem.prototype, "icon", void 0);
+__decorate([
+    state()
+], NileStepperItem.prototype, "isFirst", void 0);
+__decorate([
+    state()
+], NileStepperItem.prototype, "isLast", void 0);
+__decorate([
+    state()
+], NileStepperItem.prototype, "isComplete", void 0);
+__decorate([
+    state()
+], NileStepperItem.prototype, "isCurrent", void 0);
+__decorate([
+    state()
+], NileStepperItem.prototype, "currentStepValue", void 0);
+__decorate([
+    state()
+], NileStepperItem.prototype, "completedStepValue", void 0);
+__decorate([
+    state()
+], NileStepperItem.prototype, "calculatedCompletedStepValue", void 0);
+__decorate([
+    state()
+], NileStepperItem.prototype, "value", void 0);
+__decorate([
+    state()
+], NileStepperItem.prototype, "haveFlex", void 0);
+NileStepperItem = __decorate([
+    customElement('nile-stepper-item')
+], NileStepperItem);
+export { NileStepperItem };
+export default NileStepperItem;
+//# sourceMappingURL=nile-stepper-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-stepper-item.js","sourceRoot":"","sources":["../../../src/nile-stepper-item/nile-stepper-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAc,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAkC,MAAM,aAAa,CAAC;AACzG,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;GAKG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IAAzC;;QACN,gCAAgC;QACpB,UAAK,GAAW,EAAE,CAAC;QACnB,aAAQ,GAAW,EAAE,CAAC;QAGlC,wDAAwD;QACvC,iBAAY,GAAG,KAAK,CAAC;QACrB,SAAI,GAAwB,IAAI,CAAC;QACjC,SAAI,GAAG,MAAM,CAAC;QAG/B,+DAA+D;QAC9C,YAAO,GAAG,KAAK,CAAC;QAChB,WAAM,GAAG,KAAK,CAAC;QAEf,eAAU,GAAG,KAAK,CAAC;QACnB,cAAS,GAAG,KAAK,CAAC;QAMlB,aAAQ,GAAU,IAAI,CAAC;QAoFxC,gBAAgB;IACjB,CAAC;IAlFA;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QAEZ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,GAAG,CAAC,CAAC;QACtE,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACjC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QAEnC,IAAI,iBAAiB,GAAC,KAAK,CAAC;QAC5B,IAAG,UAAU,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK;YAAE,iBAAiB,GAAC,IAAI,CAAC;QAE3F,IAAI,uBAAuB,GAAG,KAAK,CAAC;QACpC,IAAG,UAAU,EAAC;YACb,uBAAuB,GAAC,IAAI,CAAC;YAC7B,IAAI,IAAI,CAAC,4BAA4B,IAAE,IAAI,CAAC,KAAK;gBAAE,uBAAuB,GAAC,KAAK,CAAC;SACjF;QACD,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAA,CAAC,CAAA,EAAE,CAAA,CAAC,CAAA,IAAI,CAAC,IAAI,IAAI,IAAI,CAAA,CAAC,CAAA,EAAE,CAAA,CAAC,CAAA,EAAE,CAAC;QAC5D,OAAO,IAAI,CAAA;iBACI,QAAQ,CAAC;YACtB,eAAe,EAAC,IAAI;YACpB,yBAAyB,EAAC,SAAS;YACnC,mBAAmB,EAAC,IAAI,CAAC,IAAI,IAAE,IAAI;YACnC,mBAAmB,EAAC,IAAI,CAAC,IAAI,IAAE,IAAI;YACnC,mBAAmB,EAAC,IAAI,CAAC,IAAI,IAAE,IAAI;SACnC,CAAC;;;QAGG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;oBACjB,QAAQ,CAAC;YACrB,eAAe,EAAC,IAAI;YACpB,uBAAuB,EAAC,UAAU,IAAI,SAAS;SAC/C,CAAC;OACF;;;;QAIC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAA,yDAAyD,QAAQ,WAAW,IAAI,CAAC,IAAI,qCAAqC;YACnJ,CAAC,CAAC,IAAI,CAAA,4CACP;;;;mBAIa,QAAQ,CAAC;YACtB,0BAA0B,EAAC,IAAI;YAC/B,yBAAyB,EAAC,CAAC,IAAI,CAAC,YAAY;SAC5C,CAAC;QACC,IAAI,CAAC,YAAY,CAAA,CAAC,CAAA,OAAO,CAAA,CAAC,CAAA,IAAI,CAAA;qDACe,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,CAAA,CAAC,CAAA,mBAAmB,CAAA,CAAC,CAAA,EAAE,KAAK,IAAI,CAAC,KAAK;OACpH;QACC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;oBAChB,QAAQ,CAAC;YACrB,eAAe,EAAC,IAAI;YACpB,uBAAuB,EAAC,uBAAuB;SAC/C,CAAC;OACF;;;MAGD,CAAC,IAAI,CAAC,YAAY,CAAA,CAAC,CAAA,OAAO,CAAA,CAAC,CAAA,IAAI,CAAA;;6CAEQ,IAAI,CAAC,KAAK;gDACP,IAAI,CAAC,QAAQ;;KAExD;;GAEF,CAAC;IACH,CAAC;CAGD,CAAA;AA1GY;IAAX,QAAQ,EAAE;8CAAoB;AACnB;IAAX,QAAQ,EAAE;iDAAuB;AAIzB;IAAR,KAAK,EAAE;qDAA8B;AAC7B;IAAR,KAAK,EAAE;6CAA0C;AACzC;IAAR,KAAK,EAAE;6CAAuB;AAItB;IAAR,KAAK,EAAE;gDAAyB;AACxB;IAAR,KAAK,EAAE;+CAAwB;AAEvB;IAAR,KAAK,EAAE;mDAA4B;AAC3B;IAAR,KAAK,EAAE;kDAA2B;AAC1B;IAAR,KAAK,EAAE;yDAAkC;AACjC;IAAR,KAAK,EAAE;2DAAoC;AACnC;IAAR,KAAK,EAAE;qEAA8C;AAE7C;IAAR,KAAK,EAAE;8CAAuB;AACtB;IAAR,KAAK,EAAE;iDAAgC;AAvB5B,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA4G3B;SA5GY,eAAe;AA8G5B,eAAe,eAAe,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 { 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}"]}

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

@@ -16,7 +16,7 @@ export const styles = css `
   :host {
     --indicator-color: var(--nile-colors-primary-600);
     --track-color: #e5e9eb;
-    --track-width: 1px;
+    --track-width: 2px;
 
     display: block;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"nile-tab-group.css.js","sourceRoot":"","sources":["../../../src/nile-tab-group/nile-tab-group.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwOxB,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 * TabGroup CSS\n */\nexport const styles = css`\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --indicator-color: var(--nile-colors-primary-600);\n    --track-color: #e5e9eb;\n    --track-width: 1px;\n\n    display: block;\n  }\n\n  .tab-group {\n    display: flex;\n    border-radius: 0;\n  }\n\n  .tab-group__tabs {\n    display: flex;\n    position: relative;\n    gap: 24px;\n  }\n\n  .tab-group__indicator {\n    position: absolute;\n    transition: 0.3s translate ease, 0.3s width ease;\n  }\n\n  .tab-group--has-scroll-controls .tab-group__nav-container {\n    position: relative;\n    padding: 0 10px;\n  }\n\n  .tab-group__body {\n    display: block;\n    overflow: auto;\n  }\n\n  .tab-group__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 20px;\n  }\n\n  .tab-group__scroll-button--start {\n    left: 0;\n  }\n\n  .tab-group__scroll-button--end {\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--start {\n    left: auto;\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--end {\n    left: 0;\n    right: auto;\n  }\n\n  /*\n   * Top\n   */\n\n  .tab-group--top {\n    flex-direction: column;\n  }\n\n  .tab-group--top .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--top .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--top .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--top .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-bottom: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--top .tab-group__indicator {\n    bottom: calc(-1 * var(--track-width));\n    border-bottom: 2px solid var(--nile-colors-brand-600);\n  }\n\n  .tab-group--top .tab-group__body {\n    order: 2;\n  }\n\n  .tab-group--top ::slotted(nile-tab-panel) {\n    --padding: 10px 0;\n  }\n\n  /*\n   * Bottom\n   */\n\n  .tab-group--bottom {\n    flex-direction: column;\n  }\n\n  .tab-group--bottom .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--bottom .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--bottom .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-top: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--bottom .tab-group__indicator {\n    top: calc(-1 * var(--track-width));\n    border-top: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--bottom .tab-group__body {\n    order: 1;\n  }\n\n  .tab-group--bottom ::slotted(nile-tab-panel) {\n    --padding: 10px 0;\n  }\n\n  /*\n   * Start\n   */\n\n  .tab-group--start {\n    flex-direction: row;\n  }\n\n  .tab-group--start .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--start .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-inline-end: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--start .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    border-right: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--start.tab-group--rtl .tab-group__indicator {\n    right: auto;\n    left: calc(-1 * var(--track-width));\n  }\n\n  .tab-group--start .tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n\n  .tab-group--start ::slotted(nile-tab-panel) {\n    --padding: 0 10px;\n  }\n\n  /*\n   * End\n   */\n\n  .tab-group--end {\n    flex-direction: row;\n  }\n\n  .tab-group--end .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--end .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-left: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--end .tab-group__indicator {\n    left: calc(-1 * var(--track-width));\n    border-inline-start: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--end.tab-group--rtl .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    left: auto;\n  }\n\n  .tab-group--end .tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n\n  .tab-group--end ::slotted(nile-tab-panel) {\n    --padding: 0 10px;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tab-group.css.js","sourceRoot":"","sources":["../../../src/nile-tab-group/nile-tab-group.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwOxB,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 * TabGroup CSS\n */\nexport const styles = css`\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --indicator-color: var(--nile-colors-primary-600);\n    --track-color: #e5e9eb;\n    --track-width: 2px;\n\n    display: block;\n  }\n\n  .tab-group {\n    display: flex;\n    border-radius: 0;\n  }\n\n  .tab-group__tabs {\n    display: flex;\n    position: relative;\n    gap: 24px;\n  }\n\n  .tab-group__indicator {\n    position: absolute;\n    transition: 0.3s translate ease, 0.3s width ease;\n  }\n\n  .tab-group--has-scroll-controls .tab-group__nav-container {\n    position: relative;\n    padding: 0 10px;\n  }\n\n  .tab-group__body {\n    display: block;\n    overflow: auto;\n  }\n\n  .tab-group__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 20px;\n  }\n\n  .tab-group__scroll-button--start {\n    left: 0;\n  }\n\n  .tab-group__scroll-button--end {\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--start {\n    left: auto;\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--end {\n    left: 0;\n    right: auto;\n  }\n\n  /*\n   * Top\n   */\n\n  .tab-group--top {\n    flex-direction: column;\n  }\n\n  .tab-group--top .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--top .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--top .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--top .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-bottom: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--top .tab-group__indicator {\n    bottom: calc(-1 * var(--track-width));\n    border-bottom: 2px solid var(--nile-colors-brand-600);\n  }\n\n  .tab-group--top .tab-group__body {\n    order: 2;\n  }\n\n  .tab-group--top ::slotted(nile-tab-panel) {\n    --padding: 10px 0;\n  }\n\n  /*\n   * Bottom\n   */\n\n  .tab-group--bottom {\n    flex-direction: column;\n  }\n\n  .tab-group--bottom .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--bottom .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--bottom .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-top: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--bottom .tab-group__indicator {\n    top: calc(-1 * var(--track-width));\n    border-top: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--bottom .tab-group__body {\n    order: 1;\n  }\n\n  .tab-group--bottom ::slotted(nile-tab-panel) {\n    --padding: 10px 0;\n  }\n\n  /*\n   * Start\n   */\n\n  .tab-group--start {\n    flex-direction: row;\n  }\n\n  .tab-group--start .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--start .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-inline-end: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--start .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    border-right: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--start.tab-group--rtl .tab-group__indicator {\n    right: auto;\n    left: calc(-1 * var(--track-width));\n  }\n\n  .tab-group--start .tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n\n  .tab-group--start ::slotted(nile-tab-panel) {\n    --padding: 0 10px;\n  }\n\n  /*\n   * End\n   */\n\n  .tab-group--end {\n    flex-direction: row;\n  }\n\n  .tab-group--end .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--end .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-left: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--end .tab-group__indicator {\n    left: calc(-1 * var(--track-width));\n    border-inline-start: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--end.tab-group--rtl .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    left: auto;\n  }\n\n  .tab-group--end .tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n\n  .tab-group--end ::slotted(nile-tab-panel) {\n    --padding: 0 10px;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -244,7 +244,7 @@ let NileTabGroup = class NileTabGroup extends NileElement {
         const precedingTabs = allTabs.slice(0, allTabs.indexOf(currentTab));
         const offset = precedingTabs.reduce((previous, current) => ({
             left: previous.left + current.clientWidth + 24,
-            top: previous.top + current.clientHeight
+            top: previous.top + current.clientHeight + 24
         }), { left: 0, top: 0 });
         switch (this.placement) {
             case 'top':