@aquera/nile-elements 0.0.80 → 0.0.82

package/dist/src/nile-split-panel/nile-split-panel.d.ts

@@ -0,0 +1,78 @@
+/**
+ * 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 { TemplateResult } from 'lit-element';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Split panels display two adjacent panels, allowing the user to reposition them.
+ *
+ * @event nile-reposition - Emitted when the divider's position changes.
+ *
+ * @slot start - Content to place in the start panel.
+ * @slot end - Content to place in the end panel.
+ * @slot divider - The divider. Useful for slotting in a custom icon that renders as a handle.
+ *
+ * @csspart start - The start panel.
+ * @csspart end - The end panel.
+ * @csspart panel - Targets both the start and end panels.
+ * @csspart divider - The divider that separates the start and end panels.
+ *
+ * @cssproperty [--divider-width=4px] - The width of the visible divider.
+ * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is
+ *  usually wider than the divider to facilitate easier dragging.
+ * @cssproperty [--min=0] - The minimum allowed size of the primary panel.
+ * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.
+ */
+export declare class NileSplitPanel extends NileElement {
+    static styles: CSSResultGroup;
+    private cachedPositionInPixels;
+    private resizeObserver;
+    private size;
+    divider: HTMLElement;
+    /**
+     * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
+     * container's initial size.
+     */
+    position: number;
+    /** The current position of the divider from the primary panel's edge in pixels. */
+    positionInPixels: number;
+    /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
+    vertical: boolean;
+    /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
+    disabled: boolean;
+    /**
+     * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a
+     * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the
+     * host element is resized.
+     */
+    primary?: 'start' | 'end';
+    /**
+     * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.
+     * `"100px 50%"`.
+     */
+    snap?: string;
+    /** How close the divider must be to a snap point until snapping occurs. */
+    snapThreshold: number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private detectSize;
+    private percentageToPixels;
+    private pixelsToPercentage;
+    private handleDrag;
+    private handleKeyDown;
+    private handleResize;
+    handlePositionChange(): void;
+    handlePositionInPixelsChange(): void;
+    handleVerticalChange(): void;
+    render(): TemplateResult<1>;
+}
+export default NileSplitPanel;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-split-panel': NileSplitPanel;
+    }
+}

package/dist/src/nile-split-panel/nile-split-panel.js

@@ -0,0 +1,251 @@
+/**
+ * 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 { styles } from './nile-split-panel.css';
+import NileElement from '../internal/nile-element';
+import { clamp } from '../internal/math';
+import { customElement, property, query } from 'lit/decorators.js';
+import { drag } from '../internal/drag';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { watch } from '../internal/watch';
+/**
+ * @summary Split panels display two adjacent panels, allowing the user to reposition them.
+ *
+ * @event nile-reposition - Emitted when the divider's position changes.
+ *
+ * @slot start - Content to place in the start panel.
+ * @slot end - Content to place in the end panel.
+ * @slot divider - The divider. Useful for slotting in a custom icon that renders as a handle.
+ *
+ * @csspart start - The start panel.
+ * @csspart end - The end panel.
+ * @csspart panel - Targets both the start and end panels.
+ * @csspart divider - The divider that separates the start and end panels.
+ *
+ * @cssproperty [--divider-width=4px] - The width of the visible divider.
+ * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is
+ *  usually wider than the divider to facilitate easier dragging.
+ * @cssproperty [--min=0] - The minimum allowed size of the primary panel.
+ * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.
+ */
+let NileSplitPanel = class NileSplitPanel extends NileElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
+         * container's initial size.
+         */
+        this.position = 50;
+        /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
+        this.vertical = false;
+        /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
+        this.disabled = false;
+        /** How close the divider must be to a snap point until snapping occurs. */
+        this.snapThreshold = 12;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resizeObserver = new ResizeObserver(entries => this.handleResize(entries));
+        this.updateComplete.then(() => this.resizeObserver.observe(this));
+        this.detectSize();
+        this.cachedPositionInPixels = this.percentageToPixels(this.position);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver.unobserve(this);
+    }
+    detectSize() {
+        const { width, height } = this.getBoundingClientRect();
+        this.size = this.vertical ? height : width;
+    }
+    percentageToPixels(value) {
+        return this.size * (value / 100);
+    }
+    pixelsToPercentage(value) {
+        return (value / this.size) * 100;
+    }
+    handleDrag(event) {
+        const isRtl = false;
+        if (this.disabled) {
+            return;
+        }
+        // Prevent text selection when dragging
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        drag(this, {
+            onMove: (x, y) => {
+                let newPositionInPixels = this.vertical ? y : x;
+                // Flip for end panels
+                if (this.primary === 'end') {
+                    newPositionInPixels = this.size - newPositionInPixels;
+                }
+                // Check snap points
+                if (this.snap) {
+                    const snaps = this.snap.split(' ');
+                    snaps.forEach(value => {
+                        let snapPoint;
+                        if (value.endsWith('%')) {
+                            snapPoint = this.size * (parseFloat(value) / 100);
+                        }
+                        else {
+                            snapPoint = parseFloat(value);
+                        }
+                        if (isRtl && !this.vertical) {
+                            snapPoint = this.size - snapPoint;
+                        }
+                        if (newPositionInPixels >= snapPoint - this.snapThreshold &&
+                            newPositionInPixels <= snapPoint + this.snapThreshold) {
+                            newPositionInPixels = snapPoint;
+                        }
+                    });
+                }
+                this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100);
+            },
+            initialEvent: event
+        });
+    }
+    handleKeyDown(event) {
+        if (this.disabled) {
+            return;
+        }
+        if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+            let newPosition = this.position;
+            const incr = (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);
+            event.preventDefault();
+            if ((event.key === 'ArrowLeft' && !this.vertical) || (event.key === 'ArrowUp' && this.vertical)) {
+                newPosition -= incr;
+            }
+            if ((event.key === 'ArrowRight' && !this.vertical) || (event.key === 'ArrowDown' && this.vertical)) {
+                newPosition += incr;
+            }
+            if (event.key === 'Home') {
+                newPosition = this.primary === 'end' ? 100 : 0;
+            }
+            if (event.key === 'End') {
+                newPosition = this.primary === 'end' ? 0 : 100;
+            }
+            this.position = clamp(newPosition, 0, 100);
+        }
+    }
+    handleResize(entries) {
+        const { width, height } = entries[0].contentRect;
+        this.size = this.vertical ? height : width;
+        // Resize when a primary panel is set
+        if (this.primary) {
+            this.position = this.pixelsToPercentage(this.cachedPositionInPixels);
+        }
+    }
+    handlePositionChange() {
+        this.cachedPositionInPixels = this.percentageToPixels(this.position);
+        this.positionInPixels = this.percentageToPixels(this.position);
+        this.emit('nile-reposition');
+    }
+    handlePositionInPixelsChange() {
+        this.position = this.pixelsToPercentage(this.positionInPixels);
+    }
+    handleVerticalChange() {
+        this.detectSize();
+    }
+    render() {
+        const gridTemplate = this.vertical ? 'gridTemplateRows' : 'gridTemplateColumns';
+        const gridTemplateAlt = this.vertical ? 'gridTemplateColumns' : 'gridTemplateRows';
+        const isRtl = false;
+        const primary = `
+      clamp(
+        0%,
+        clamp(
+          var(--min),
+          ${this.position}% - var(--divider-width) / 2,
+          var(--max)
+        ),
+        calc(100% - var(--divider-width))
+      )
+    `;
+        const secondary = 'auto';
+        if (this.primary === 'end') {
+            if (isRtl && !this.vertical) {
+                this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
+            }
+            else {
+                this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;
+            }
+        }
+        else {
+            if (isRtl && !this.vertical) {
+                this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;
+            }
+            else {
+                this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
+            }
+        }
+        // Unset the alt grid template property
+        this.style[gridTemplateAlt] = '';
+        return html `
+      <slot name="start" part="panel start" class="start"></slot>
+
+      <div
+        part="divider"
+        class="divider"
+        tabindex=${ifDefined(this.disabled ? undefined : '0')}
+        role="separator"
+        aria-valuenow=${this.position}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-label="resize"
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleDrag}
+        @touchstart=${this.handleDrag}
+      >
+        <slot name="divider"></slot>
+      </div>
+
+      <slot name="end" part="panel end" class="end"></slot>
+    `;
+    }
+};
+NileSplitPanel.styles = styles;
+__decorate([
+    query('.divider')
+], NileSplitPanel.prototype, "divider", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], NileSplitPanel.prototype, "position", void 0);
+__decorate([
+    property({ attribute: 'position-in-pixels', type: Number })
+], NileSplitPanel.prototype, "positionInPixels", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSplitPanel.prototype, "vertical", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSplitPanel.prototype, "disabled", void 0);
+__decorate([
+    property()
+], NileSplitPanel.prototype, "primary", void 0);
+__decorate([
+    property()
+], NileSplitPanel.prototype, "snap", void 0);
+__decorate([
+    property({ type: Number, attribute: 'snap-threshold' })
+], NileSplitPanel.prototype, "snapThreshold", void 0);
+__decorate([
+    watch('position')
+], NileSplitPanel.prototype, "handlePositionChange", null);
+__decorate([
+    watch('positionInPixels')
+], NileSplitPanel.prototype, "handlePositionInPixelsChange", null);
+__decorate([
+    watch('vertical')
+], NileSplitPanel.prototype, "handleVerticalChange", null);
+NileSplitPanel = __decorate([
+    customElement('nile-split-panel')
+], NileSplitPanel);
+export { NileSplitPanel };
+export default NileSplitPanel;
+//# sourceMappingURL=nile-split-panel.js.map

package/dist/src/nile-split-panel/nile-split-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-split-panel.js","sourceRoot":"","sources":["../../../src/nile-split-panel/nile-split-panel.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, CSSResultArray, TemplateResult} from 'lit-element';\nimport {styles} from './nile-split-panel.css';\nimport NileElement from '../internal/nile-element';\n\n\nimport { clamp } from '../internal/math';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { drag } from '../internal/drag';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Split panels display two adjacent panels, allowing the user to reposition them.\n *\n * @event nile-reposition - Emitted when the divider's position changes.\n *\n * @slot start - Content to place in the start panel.\n * @slot end - Content to place in the end panel.\n * @slot divider - The divider. Useful for slotting in a custom icon that renders as a handle.\n *\n * @csspart start - The start panel.\n * @csspart end - The end panel.\n * @csspart panel - Targets both the start and end panels.\n * @csspart divider - The divider that separates the start and end panels.\n *\n * @cssproperty [--divider-width=4px] - The width of the visible divider.\n * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is\n *  usually wider than the divider to facilitate easier dragging.\n * @cssproperty [--min=0] - The minimum allowed size of the primary panel.\n * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.\n */\n@customElement('nile-split-panel')\nexport class NileSplitPanel extends NileElement {\n\n\tstatic styles: CSSResultGroup = styles;\n\n  private cachedPositionInPixels: number;\n  private resizeObserver: ResizeObserver;\n  private size: number;\n\n  @query('.divider') divider: HTMLElement;\n\n  /**\n   * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\n   * container's initial size.\n   */\n  @property({ type: Number, reflect: true }) position = 50;\n\n  /** The current position of the divider from the primary panel's edge in pixels. */\n  @property({ attribute: 'position-in-pixels', type: Number }) positionInPixels: number;\n\n  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n   * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n   * host element is resized.\n   */\n  @property() primary?: 'start' | 'end';\n\n  /**\n   * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n   * `\"100px 50%\"`.\n   */\n  @property() snap?: string;\n\n  /** How close the divider must be to a snap point until snapping occurs. */\n  @property({ type: Number, attribute: 'snap-threshold' }) snapThreshold = 12;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(entries => this.handleResize(entries));\n    this.updateComplete.then(() => this.resizeObserver.observe(this));\n\n    this.detectSize();\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver.unobserve(this);\n  }\n\n  private detectSize() {\n    const { width, height } = this.getBoundingClientRect();\n    this.size = this.vertical ? height : width;\n  }\n\n  private percentageToPixels(value: number) {\n    return this.size * (value / 100);\n  }\n\n  private pixelsToPercentage(value: number) {\n    return (value / this.size) * 100;\n  }\n\n  private handleDrag(event: PointerEvent) {\n    const isRtl = false;\n\n    if (this.disabled) {\n      return;\n    }\n\n    // Prevent text selection when dragging\n    if (event.cancelable) {\n      event.preventDefault();\n    }\n\n    drag(this, {\n      onMove: (x, y) => {\n        let newPositionInPixels = this.vertical ? y : x;\n\n        // Flip for end panels\n        if (this.primary === 'end') {\n          newPositionInPixels = this.size - newPositionInPixels;\n        }\n\n        // Check snap points\n        if (this.snap) {\n          const snaps = this.snap.split(' ');\n\n          snaps.forEach(value => {\n            let snapPoint: number;\n\n            if (value.endsWith('%')) {\n              snapPoint = this.size * (parseFloat(value) / 100);\n            } else {\n              snapPoint = parseFloat(value);\n            }\n\n            if (isRtl && !this.vertical) {\n              snapPoint = this.size - snapPoint;\n            }\n\n            if (\n              newPositionInPixels >= snapPoint - this.snapThreshold &&\n              newPositionInPixels <= snapPoint + this.snapThreshold\n            ) {\n              newPositionInPixels = snapPoint;\n            }\n          });\n        }\n\n        this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100);\n      },\n      initialEvent: event\n    });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n      let newPosition = this.position;\n      const incr = (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n      event.preventDefault();\n\n      if ((event.key === 'ArrowLeft' && !this.vertical) || (event.key === 'ArrowUp' && this.vertical)) {\n        newPosition -= incr;\n      }\n\n      if ((event.key === 'ArrowRight' && !this.vertical) || (event.key === 'ArrowDown' && this.vertical)) {\n        newPosition += incr;\n      }\n\n      if (event.key === 'Home') {\n        newPosition = this.primary === 'end' ? 100 : 0;\n      }\n\n      if (event.key === 'End') {\n        newPosition = this.primary === 'end' ? 0 : 100;\n      }\n\n      this.position = clamp(newPosition, 0, 100);\n    }\n  }\n\n  private handleResize(entries: ResizeObserverEntry[]) {\n    const { width, height } = entries[0].contentRect;\n    this.size = this.vertical ? height : width;\n\n    // Resize when a primary panel is set\n    if (this.primary) {\n      this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n    }\n  }\n\n  @watch('position')\n  handlePositionChange() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.positionInPixels = this.percentageToPixels(this.position);\n    this.emit('nile-reposition');\n  }\n\n  @watch('positionInPixels')\n  handlePositionInPixelsChange() {\n    this.position = this.pixelsToPercentage(this.positionInPixels);\n  }\n\n  @watch('vertical')\n  handleVerticalChange() {\n    this.detectSize();\n  }\n\n  render() {\n    const gridTemplate = this.vertical ? 'gridTemplateRows' : 'gridTemplateColumns';\n    const gridTemplateAlt = this.vertical ? 'gridTemplateColumns' : 'gridTemplateRows';\n    const isRtl = false;\n    const primary = `\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `;\n    const secondary = 'auto';\n\n    if (this.primary === 'end') {\n      if (isRtl && !this.vertical) {\n        this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n      } else {\n        this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n      }\n    } else {\n      if (isRtl && !this.vertical) {\n        this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n      } else {\n        this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n      }\n    }\n\n    // Unset the alt grid template property\n    this.style[gridTemplateAlt] = '';\n\n    return html`\n      <slot name=\"start\" part=\"panel start\" class=\"start\"></slot>\n\n      <div\n        part=\"divider\"\n        class=\"divider\"\n        tabindex=${ifDefined(this.disabled ? undefined : '0')}\n        role=\"separator\"\n        aria-valuenow=${this.position}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-label=\"resize\"\n        @keydown=${this.handleKeyDown}\n        @mousedown=${this.handleDrag}\n        @touchstart=${this.handleDrag}\n      >\n        <slot name=\"divider\"></slot>\n      </div>\n\n      <slot name=\"end\" part=\"panel end\" class=\"end\"></slot>\n    `;\n  }\n}\n\nexport default NileSplitPanel;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-split-panel': NileSplitPanel;\n  }\n}\n"]}

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

@@ -107,7 +107,7 @@ let NileStepper = class NileStepper extends NileElement {
             'nile-stepper': true,
             'nile-stepper--horizontal': !this.isVertical,
             'nile-stepper--vertical': this.isVertical
-        })}> 
+        })}>
 				<slot
 					@slotchange=${this.updateItems}
 				></slot>

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

@@ -1 +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';\nimport { classMap } from 'lit/directives/class-map.js';\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: 'vertical' }) isVertical: boolean = false;\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(this.isVertical?'nile-vertical-stepper-item':'nile-stepper-item')];\n\t\tif (!items.length) return;\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.size = this.size;\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<div class=${classMap({\n\t\t\t\t'nile-stepper':true,\n\t\t\t\t'nile-stepper--horizontal':!this.isVertical,\n\t\t\t\t'nile-stepper--vertical':this.isVertical\n\t\t\t})}> \n\t\t\t\t<slot\n\t\t\t\t\t@slotchange=${this.updateItems}\n\t\t\t\t></slot>\n\t\t\t</div>\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}"]}
+{"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';\nimport { classMap } from 'lit/directives/class-map.js';\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: 'vertical' }) isVertical: boolean = false;\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(this.isVertical?'nile-vertical-stepper-item':'nile-stepper-item')];\n\t\tif (!items.length) return;\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.size = this.size;\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<div class=${classMap({\n\t\t\t\t'nile-stepper':true,\n\t\t\t\t'nile-stepper--horizontal':!this.isVertical,\n\t\t\t\t'nile-stepper--vertical':this.isVertical\n\t\t\t})}>\n\t\t\t\t<slot\n\t\t\t\t\t@slotchange=${this.updateItems}\n\t\t\t\t></slot>\n\t\t\t</div>\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}\n"]}

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

@@ -0,0 +1,165 @@
+"use strict";
+// import { fixture, expect, html } from "@open-wc/testing"
+// import './nile-stepper';
+// import { NileStepper } from "./nile-stepper";
+// import { NileStepperItem } from "../nile-stepper-item";
+// import { NileVerticalStepperItem } from "../nile-vertical-stepper-item";
+// describe('NileStepper', () => {
+//     it('should have default properties in NileStepper', async () => {
+//         const stepper = await fixture<NileStepper>(html`<nile-stepper></nile-stepper>`);
+//         expect(stepper.isVertical).to.be.false;
+//         expect(stepper.contentBelow).to.be.false;
+//         expect(stepper.currentStep).to.equal(0);
+//         expect(stepper.completedStep).to.equal(0);
+//         expect(stepper.size).to.equal('md');
+//         expect(stepper.icon).to.equal('tick');
+//     });
+//     it('should reflect properties to attributes in NileStepper', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper vertical contentBelow current-step="1" completed-step="2" size="lg" icon="check"></nile-stepper>
+//     `);
+//         expect(stepper.getAttribute('vertical')).to.equal('');
+//         expect(stepper.getAttribute('contentBelow')).to.equal('');
+//         expect(stepper.getAttribute('current-step')).to.equal('1');
+//         expect(stepper.getAttribute('completed-step')).to.equal('2');
+//         expect(stepper.getAttribute('size')).to.equal('lg');
+//         expect(stepper.getAttribute('icon')).to.equal('check');
+//     });
+//     it('should render vertical stepper correctly', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper vertical>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//         </nile-stepper>
+//         `);
+//         const container = stepper.shadowRoot!.querySelector('.nile-stepper')!;
+//         expect(container.classList.contains('nile-stepper--vertical')).to.be.true;
+//     });
+//     it('should update NileStepperItems when NileStepper properties change', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper>
+//         <nile-stepper-item></nile-stepper-item>
+//         <nile-stepper-item></nile-stepper-item>
+//         <nile-stepper-item></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         stepper.currentStep = 2;
+//         stepper.completedStep = 3;
+//         await stepper.updateComplete;
+//         const items = stepper.querySelectorAll('nile-stepper-item');
+//         expect(items[0].isComplete).to.be.true;
+//         expect(items[1].isCurrent).to.be.true;
+//         expect(items[2].isComplete).to.be.true;
+//     });
+//     it('should render stepper with content below items correctly', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper content-below>
+//         <nile-stepper-item title="Step 1" subtitle="Subtitle 1"></nile-stepper-item>
+//         <nile-stepper-item title="Step 2" subtitle="Subtitle 2"></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         const items = stepper.querySelectorAll('nile-stepper-item');
+//         expect(items[0].contentBelow).to.be.true;
+//         expect(items[1].contentBelow).to.be.true;
+//     });
+//     // CUSTOM ICONS NOT SUPPORTED YET IGNORE TEST CASE
+//     // it('should render stepper items with correct icons', async () => {
+//     //     const stepper = await fixture<NileStepper>(html`
+//     //     <nile-stepper icon="star">
+//     //     <nile-stepper-item></nile-stepper-item>
+//     //     <nile-stepper-item></nile-stepper-item>
+//     //     </nile-stepper>
+//     // `);
+//     //     const items = stepper.querySelectorAll('nile-stepper-item');
+//     //     expect(items[0].icon).to.equal('star');
+//     //     expect(items[1].icon).to.equal('star');
+//     // });
+//     it('should emit events when currentStep changes', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper current-step="1" completed-step="4">
+//             <nile-stepper-item></nile-stepper-item>
+//             <nile-stepper-item></nile-stepper-item>
+//             <nile-stepper-item></nile-stepper-item>
+//             <nile-stepper-item></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         const items = stepper.querySelectorAll('nile-stepper-item');
+//         let currentChangeEvent: CustomEvent | null = null;
+//         stepper.addEventListener('nile-current-change', (event) => {
+//             currentChangeEvent = event as CustomEvent;
+//         });
+//         stepper.currentStep = 2;
+//         await stepper.updateComplete;
+//         expect(currentChangeEvent).to.exist;
+//         expect(currentChangeEvent!.detail.value).to.equal(2);
+//         expect(items[1].isCurrent).to.equal(true);
+//         expect(items[0].isComplete).to.equal(true);
+//     });
+//     it('should emit events when completedStep changes', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper completed-step="1"></nile-stepper>
+//     `);
+//         let completedChangeEvent: CustomEvent | null = null;
+//         stepper.addEventListener('nile-completed-change', (event) => {
+//             completedChangeEvent = event as CustomEvent;
+//         });
+//         stepper.completedStep = 2;
+//         await stepper.updateComplete;
+//         expect(completedChangeEvent).to.exist;
+//         expect(completedChangeEvent!.detail.value).to.equal(2);
+//     });
+//     it('should render slot content inside stepper', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper current-step="2">
+//         <nile-stepper-item title="Step 1"></nile-stepper-item>
+//         <nile-stepper-item title="Step 2"></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         const items = stepper.querySelectorAll('nile-stepper-item');
+//         expect(items.length).to.equal(2);
+//         expect(items[0].title).to.equal('Step 1');
+//         expect(items[1].title).to.equal('Step 2');
+//         expect(items[1].isCurrent).to.equal(true);
+//     });
+// })
+// describe('NileVerticalStepperItem', () => {
+//     it('should render vertical stepper correctly', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//         <nile-stepper vertical>
+//         <nile-stepper-item></nile-stepper-item>
+//         <nile-stepper-item></nile-stepper-item>
+//         </nile-stepper>
+//     `);
+//         const container = stepper.shadowRoot!.querySelector('.nile-stepper')!;
+//         expect(container.classList.contains('nile-stepper--vertical')).to.be.true;
+//     });
+//     it('should update NileVerticalStepperItems when NileStepper properties change', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//           <nile-stepper vertical>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
+//           </nile-stepper>
+//         `);
+//         stepper.currentStep = 2;
+//         stepper.completedStep = 3;
+//         await stepper.updateComplete;
+//         const items = stepper.querySelectorAll('nile-vertical-stepper-item');
+//         expect(items[0].isComplete).to.be.true;
+//         expect(items[1].isCurrent).to.be.true;
+//         expect(items[2].isComplete).to.be.true;
+//     });
+//     it('should render slot content inside vertical stepper', async () => {
+//         const stepper = await fixture<NileStepper>(html`
+//           <nile-stepper vertical>
+//             <nile-vertical-stepper-item title="Step 1"></nile-vertical-stepper-item>
+//             <nile-vertical-stepper-item title="Step 2"></nile-vertical-stepper-item>
+//           </nile-stepper>
+//         `);
+//         const items = stepper.querySelectorAll('nile-vertical-stepper-item');
+//         expect(items.length).to.equal(2);
+//         expect(items[0].title).to.equal('Step 1');
+//         expect(items[1].title).to.equal('Step 2');
+//     });
+// })
+//# sourceMappingURL=nile-stepper.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-stepper.test.js","sourceRoot":"","sources":["../../../src/nile-stepper/nile-stepper.test.ts"],"names":[],"mappings":"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","sourcesContent":["// import { fixture, expect, html } from \"@open-wc/testing\"\n// import './nile-stepper';\n// import { NileStepper } from \"./nile-stepper\";\n// import { NileStepperItem } from \"../nile-stepper-item\";\n// import { NileVerticalStepperItem } from \"../nile-vertical-stepper-item\";\n// describe('NileStepper', () => {\n//     it('should have default properties in NileStepper', async () => {\n//         const stepper = await fixture<NileStepper>(html`<nile-stepper></nile-stepper>`);\n//         expect(stepper.isVertical).to.be.false;\n//         expect(stepper.contentBelow).to.be.false;\n//         expect(stepper.currentStep).to.equal(0);\n//         expect(stepper.completedStep).to.equal(0);\n//         expect(stepper.size).to.equal('md');\n//         expect(stepper.icon).to.equal('tick');\n//     });\n\n//     it('should reflect properties to attributes in NileStepper', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//         <nile-stepper vertical contentBelow current-step=\"1\" completed-step=\"2\" size=\"lg\" icon=\"check\"></nile-stepper>\n//     `);\n//         expect(stepper.getAttribute('vertical')).to.equal('');\n//         expect(stepper.getAttribute('contentBelow')).to.equal('');\n//         expect(stepper.getAttribute('current-step')).to.equal('1');\n//         expect(stepper.getAttribute('completed-step')).to.equal('2');\n//         expect(stepper.getAttribute('size')).to.equal('lg');\n//         expect(stepper.getAttribute('icon')).to.equal('check');\n//     });\n\n//     it('should render vertical stepper correctly', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//         <nile-stepper vertical>\n//             <nile-vertical-stepper-item></nile-vertical-stepper-item>\n//             <nile-vertical-stepper-item></nile-vertical-stepper-item>\n//         </nile-stepper>\n//         `);\n//         const container = stepper.shadowRoot!.querySelector('.nile-stepper')!;\n//         expect(container.classList.contains('nile-stepper--vertical')).to.be.true;\n//     });\n\n//     it('should update NileStepperItems when NileStepper properties change', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//         <nile-stepper>\n//         <nile-stepper-item></nile-stepper-item>\n//         <nile-stepper-item></nile-stepper-item>\n//         <nile-stepper-item></nile-stepper-item>\n//         </nile-stepper>\n//     `);\n//         stepper.currentStep = 2;\n//         stepper.completedStep = 3;\n//         await stepper.updateComplete;\n//         const items = stepper.querySelectorAll('nile-stepper-item');\n//         expect(items[0].isComplete).to.be.true;\n//         expect(items[1].isCurrent).to.be.true;\n//         expect(items[2].isComplete).to.be.true;\n//     });\n\n//     it('should render stepper with content below items correctly', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//         <nile-stepper content-below>\n//         <nile-stepper-item title=\"Step 1\" subtitle=\"Subtitle 1\"></nile-stepper-item>\n//         <nile-stepper-item title=\"Step 2\" subtitle=\"Subtitle 2\"></nile-stepper-item>\n//         </nile-stepper>\n//     `);\n//         const items = stepper.querySelectorAll('nile-stepper-item');\n//         expect(items[0].contentBelow).to.be.true;\n//         expect(items[1].contentBelow).to.be.true;\n//     });\n\n//     // CUSTOM ICONS NOT SUPPORTED YET IGNORE TEST CASE\n//     // it('should render stepper items with correct icons', async () => {\n//     //     const stepper = await fixture<NileStepper>(html`\n//     //     <nile-stepper icon=\"star\">\n//     //     <nile-stepper-item></nile-stepper-item>\n//     //     <nile-stepper-item></nile-stepper-item>\n//     //     </nile-stepper>\n//     // `);\n//     //     const items = stepper.querySelectorAll('nile-stepper-item');\n//     //     expect(items[0].icon).to.equal('star');\n//     //     expect(items[1].icon).to.equal('star');\n//     // });\n\n//     it('should emit events when currentStep changes', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//         <nile-stepper current-step=\"1\" completed-step=\"4\">\n//             <nile-stepper-item></nile-stepper-item>\n//             <nile-stepper-item></nile-stepper-item>\n//             <nile-stepper-item></nile-stepper-item>\n//             <nile-stepper-item></nile-stepper-item>\n//         </nile-stepper>\n//     `);\n//         const items = stepper.querySelectorAll('nile-stepper-item');\n//         let currentChangeEvent: CustomEvent | null = null;\n//         stepper.addEventListener('nile-current-change', (event) => {\n//             currentChangeEvent = event as CustomEvent;\n//         });\n//         stepper.currentStep = 2;\n//         await stepper.updateComplete;\n//         expect(currentChangeEvent).to.exist;\n//         expect(currentChangeEvent!.detail.value).to.equal(2);\n//         expect(items[1].isCurrent).to.equal(true);\n//         expect(items[0].isComplete).to.equal(true);\n//     });\n\n//     it('should emit events when completedStep changes', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//         <nile-stepper completed-step=\"1\"></nile-stepper>\n//     `);\n//         let completedChangeEvent: CustomEvent | null = null;\n//         stepper.addEventListener('nile-completed-change', (event) => {\n//             completedChangeEvent = event as CustomEvent;\n//         });\n//         stepper.completedStep = 2;\n//         await stepper.updateComplete;\n//         expect(completedChangeEvent).to.exist;\n//         expect(completedChangeEvent!.detail.value).to.equal(2);\n//     });\n\n//     it('should render slot content inside stepper', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//         <nile-stepper current-step=\"2\">\n//         <nile-stepper-item title=\"Step 1\"></nile-stepper-item>\n//         <nile-stepper-item title=\"Step 2\"></nile-stepper-item>\n//         </nile-stepper>\n//     `);\n//         const items = stepper.querySelectorAll('nile-stepper-item');\n//         expect(items.length).to.equal(2);\n//         expect(items[0].title).to.equal('Step 1');\n//         expect(items[1].title).to.equal('Step 2');\n//         expect(items[1].isCurrent).to.equal(true);\n//     });\n// })\n\n// describe('NileVerticalStepperItem', () => {\n//     it('should render vertical stepper correctly', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//         <nile-stepper vertical>\n//         <nile-stepper-item></nile-stepper-item>\n//         <nile-stepper-item></nile-stepper-item>\n//         </nile-stepper>\n//     `);\n//         const container = stepper.shadowRoot!.querySelector('.nile-stepper')!;\n//         expect(container.classList.contains('nile-stepper--vertical')).to.be.true;\n//     });\n\n//     it('should update NileVerticalStepperItems when NileStepper properties change', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//           <nile-stepper vertical>\n//             <nile-vertical-stepper-item></nile-vertical-stepper-item>\n//             <nile-vertical-stepper-item></nile-vertical-stepper-item>\n//             <nile-vertical-stepper-item></nile-vertical-stepper-item>\n//           </nile-stepper>\n//         `);\n//         stepper.currentStep = 2;\n//         stepper.completedStep = 3;\n//         await stepper.updateComplete;\n//         const items = stepper.querySelectorAll('nile-vertical-stepper-item');\n//         expect(items[0].isComplete).to.be.true;\n//         expect(items[1].isCurrent).to.be.true;\n//         expect(items[2].isComplete).to.be.true;\n//     });\n\n//     it('should render slot content inside vertical stepper', async () => {\n//         const stepper = await fixture<NileStepper>(html`\n//           <nile-stepper vertical>\n//             <nile-vertical-stepper-item title=\"Step 1\"></nile-vertical-stepper-item>\n//             <nile-vertical-stepper-item title=\"Step 2\"></nile-vertical-stepper-item>\n//           </nile-stepper>\n//         `);\n//         const items = stepper.querySelectorAll('nile-vertical-stepper-item');\n//         expect(items.length).to.equal(2);\n//         expect(items[0].title).to.equal('Step 1');\n//         expect(items[1].title).to.equal('Step 2');\n//     });\n// })\n"]}

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

@@ -112,11 +112,11 @@ export const styles = css `
     position: relative;
     flex-direction: row;
     border-bottom: solid var(--track-width)
-      var(--nile-colors-gray-light-mode-200);
+      var(--nile-colors-gray-light-mode-200,#eaecf0);
   }
 
   .tab-group--top .tab-group__indicator {
-    bottom: 2px;
+    bottom: -2px;
     border-bottom: 2px solid var(--nile-colors-primary-600);
   }