@aquera/nile-elements 0.0.81 → 0.0.84

package/src/nile-popover/nile-popover.test.ts

@@ -0,0 +1,86 @@
+import { fixture, html, expect, oneEvent } from '@open-wc/testing';
+import './nile-popover';
+import { NilePopover } from './nile-popover';
+describe('NilePopover', () => {
+  it('renders correctly', async () => {
+    const el = await fixture(html`
+      <nile-popover title="Test Popover">
+        <button slot="anchor">Click me</button>
+        <div>Popover Content</div>
+      </nile-popover>
+    `);
+    expect(el).shadowDom.to.equalSnapshot();
+  });
+
+  it('has default properties', async () => {
+    const el = await fixture<NilePopover>(html`<nile-popover></nile-popover>`);
+    expect(el.placement).to.equal('top');
+    expect(el.distance).to.equal(18);
+    expect(el.title).to.equal('');
+    expect(el.arrowPlacement).to.equal('anchor');
+    expect(el.hoist).to.be.false;
+    expect(el.flip).to.be.false;
+  });
+
+  it('displays title when popover is shown', async () => {
+    const el = await fixture<NilePopover>(html`
+      <nile-popover title="Test Popover">
+        <button slot="anchor">Click me</button>
+        <div>Popover Content</div>
+      </nile-popover>
+    `);
+
+    const button = el.querySelector('button');
+    button!.click();
+    await el.updateComplete;
+    const popoverBox = el.shadowRoot!.querySelector('.popover__box');
+    expect(popoverBox).to.exist;
+
+    const titleSlot = el.shadowRoot!.querySelector('slot[name="title"]');
+    expect(titleSlot).to.exist;
+    expect(titleSlot!.textContent).to.equal('Test Popover');
+  });
+
+  it('toggles isShow state on anchor click', async () => {
+    const el = await fixture<NilePopover>(html`
+      <nile-popover title="Test Popover">
+        <button slot="anchor">Click me</button>
+        <div>Popover Content</div>
+      </nile-popover>
+    `);
+
+    const button = el.querySelector('button');
+    button!.click();
+    await el.updateComplete;
+    const popOverBox = el.shadowRoot!.querySelector('div[part="popover"]');
+    expect(popOverBox).to.exist;
+
+    button!.click();
+    await el.updateComplete;
+
+    const afterPopOverBox = el.shadowRoot!.querySelector('div[part="popover"]');
+    expect(afterPopOverBox).to.null;
+  });
+
+  it('hides popover on document click', async () => {
+    const el = await fixture<NilePopover>(html`
+      <nile-popover title="Test Popover">
+        <button slot="anchor">Click me</button>
+        <div>Popover Content</div>
+      </nile-popover>
+    `);
+
+    const button = el.querySelector('button');
+    button!.click();
+    await el.updateComplete;
+
+    let popoverBox = el.shadowRoot!.querySelector('.popover__box');
+    expect(popoverBox).to.exist;
+
+    document.body.click();
+    await el.updateComplete;
+
+    popoverBox = el.shadowRoot!.querySelector('.popover__box');
+    expect(popoverBox).to.not.exist;
+  });
+});

package/src/nile-popover/nile-popover.ts

@@ -54,6 +54,8 @@ export class NilePopover extends LitElement {
   /** The distance in pixels from which to offset the popover away from its target. */
   @property({ type: Number }) distance = 18;
 
+  @property({ type: Boolean, attribute: 'arrow' }) arrow = true;
+
   /** Gives the title to the popover */
   @property({ type: String }) title = '';
 
@@ -65,7 +67,6 @@ export class NilePopover extends LitElement {
     | 'center'
     | 'anchor' = 'anchor';
 
-
   /**
    * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
    * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
@@ -74,7 +75,6 @@ export class NilePopover extends LitElement {
 
   @property({ type: Boolean }) flip = false;
 
-
   /* #endregion */
 
   /* #region Methods */
@@ -97,10 +97,10 @@ export class NilePopover extends LitElement {
   private handleClick = () => {
     this.isShow = !this.isShow;
     const allPopovers = document.querySelectorAll('nile-popover');
-    
+
     allPopovers.forEach(popover => {
       if (popover !== this) {
-        popover.isShow=false;
+        popover.isShow = false;
       }
     });
   };
@@ -115,7 +115,7 @@ export class NilePopover extends LitElement {
     return html`
       <nile-popup
         active
-        ?arrow="${this.title ? this.isShow : false}"
+        .arrow="${this.arrow && this.isShow}"
         distance="${this.distance}"
         placement="${this.placement}"
         @click=${(e: Event) => e.stopPropagation()}
@@ -130,11 +130,8 @@ export class NilePopover extends LitElement {
           aria-describedby="tooltip"
           @click=${this.handleClick}
         ></slot>
-        ${this.title && this.isShow
-          ? html` <div
-              part="popover"
-              class="popover__box"
-            >
+        ${this.isShow
+          ? html` <div part="popover" class="popover__box">
               <slot name="title" class="popover__title">${this.title}</slot>
               <slot part="base"></slot>
               <slot name="action" class="popover__action"> </slot>

package/src/nile-popup/nile-popup.css.ts

@@ -1,19 +1,17 @@
 /**
-* 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.
-*/
+ * 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';
+import { css } from 'lit-element';
 
 /**
  * Popup CSS
  */
 export const styles = css`
-
-
-:host {
+  :host {
     --arrow-color: hsl(240 4.8% 95.9%);
     --arrow-size: 6px;
 
@@ -22,7 +20,9 @@ export const styles = css`
      * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.
      */
     --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
-    --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));
+    --arrow-padding-offset: calc(
+      var(--arrow-size-diagonal) - var(--arrow-size)
+    );
 
     display: contents;
   }
@@ -50,6 +50,10 @@ export const styles = css`
     rotate: 45deg;
     background: var(--arrow-color);
     z-index: -1;
+    /* Added border and box-shadow to arrow */
+    border: solid 1px hsl(240 5.9% 90%);
+    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+      0px 8px 8px -4px rgba(16, 24, 40, 0.03);
   }
 `;
 

package/src/nile-progress-bar/nile-progress-bar.test.ts

@@ -0,0 +1,55 @@
+import { fixture, html, expect } from '@open-wc/testing';
+import './nile-progress-bar'; // Make sure to import the component to be tested
+import { NileProgressBar } from './nile-progress-bar';
+
+describe('NileProgressBar', () => {
+  it('should have a default value of 0', async () => {
+    const el = await fixture<NileProgressBar>(html`<nile-progress-bar></nile-progress-bar>`);
+    expect(el.value).to.equal(0);
+    const span = el.shadowRoot!.querySelector('span') ?? {} as HTMLSpanElement;
+    expect(span.style.width).to.equal('0%');
+  });
+
+  it('should set and display the provided value', async () => {
+    const el = await fixture<NileProgressBar>(html`<nile-progress-bar value="50"></nile-progress-bar>`);
+    expect(el.value).to.equal(50);
+    const span = el.shadowRoot!.querySelector('span') ?? {} as HTMLSpanElement;
+    expect(span.style.width).to.equal('50%');
+  });
+
+  it('should handle boundary value 0%', async () => {
+    const el = await fixture<NileProgressBar>(html`<nile-progress-bar value="0"></nile-progress-bar>`);
+    expect(el.value).to.equal(0);
+    const span = el.shadowRoot!.querySelector('span') ?? {} as HTMLSpanElement;
+    expect(span.style.width).to.equal('0%');
+  });
+
+  it('should handle boundary value 100%', async () => {
+    const el = await fixture<NileProgressBar>(html`<nile-progress-bar value="100"></nile-progress-bar>`);
+    expect(el.value).to.equal(100);
+    const span = el.shadowRoot!.querySelector('span') ?? {} as HTMLSpanElement;
+    expect(span.style.width).to.equal('100%');
+  });
+
+  it('should handle values greater than 100', async () => {
+    const el = await fixture<NileProgressBar>(html`<nile-progress-bar value="150"></nile-progress-bar>`);
+    expect(el.value).to.equal(150);
+    const span = el.shadowRoot!.querySelector('span') ?? {} as HTMLSpanElement;
+    expect(span.style.width).to.equal('150%');
+  });
+
+  it('should handle negative values', async () => {
+    const el = await fixture<NileProgressBar>(html`<nile-progress-bar value="-50"></nile-progress-bar>`);
+    expect(el.value).to.equal(-50);
+    const span = el.shadowRoot!.querySelector('span') ?? {} as HTMLSpanElement;
+    expect(span.style.width).to.equal('');
+  });
+
+  it('should update the value dynamically', async () => {
+    const el = await fixture<NileProgressBar>(html`<nile-progress-bar value="20"></nile-progress-bar>`);
+    el.value = 80;
+    await el.updateComplete;
+    const span = el.shadowRoot!.querySelector('span') ?? {} as HTMLSpanElement;
+    expect(span.style.width).to.equal('80%');
+  });
+});

package/src/nile-radio/nile-radio.test.ts

@@ -0,0 +1,81 @@
+import { html, fixture, expect, elementUpdated } from '@open-wc/testing';
+import './nile-radio';
+import { NileRadio } from './nile-radio';
+
+describe('NileRadio', () => {
+  it('should have the correct default properties', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    expect(el.checked).to.be.false;
+    expect(el.disabled).to.be.false;
+    expect(el.size).to.equal('medium');
+  });
+
+  it('should reflect the disabled attribute', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio disabled></nile-radio>`);
+    expect(el.disabled).to.be.true;
+    expect(el.hasAttribute('aria-disabled')).to.be.true;
+  });
+
+  it('should update aria-checked when checked changes', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    el.checked = true;
+    await el.updateComplete;
+    expect(el.getAttribute('aria-checked')).to.equal('true');
+  });
+
+  it('should toggle checked state on click when not disabled', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    el.click();
+    await elementUpdated(el);
+    expect(el.checked).to.be.true;
+  });
+
+  it('should not toggle checked state on click when disabled', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio disabled></nile-radio>`);
+    el.click();
+    await elementUpdated(el);
+    expect(el.checked).to.be.false;
+  });
+
+  it('should emit nile-blur event on blur', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    const blurEvent = new Promise(resolve => el.addEventListener('nile-blur', resolve));
+    el.dispatchEvent(new Event('blur'));
+    const event = await blurEvent;
+    expect(event).to.exist;
+  });
+
+  it('should emit nile-focus event on focus', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    const focusEvent = new Promise(resolve => el.addEventListener('nile-focus', resolve));
+    el.dispatchEvent(new Event('focus'));
+    const event = await focusEvent;
+    expect(event).to.exist;
+  });
+
+  it('should apply the correct classes based on state', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    el.checked = true;
+    el.disabled = true;
+    el.size = 'medium';
+    await el.updateComplete;
+    const base = el.shadowRoot!.querySelector('[part="base"]');
+    expect(base!.classList.contains('radio--checked')).to.be.true;
+    expect(base!.classList.contains('radio--disabled')).to.be.true;
+    expect(base!.classList.contains('radio--medium')).to.be.true;
+  });
+
+  it('should update aria-disabled when disabled changes', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    el.disabled = true;
+    await elementUpdated(el);
+    expect(el.getAttribute('aria-disabled')).to.equal('true');
+  });
+
+  it('should set initial attributes correctly', async () => {
+    const el = await fixture<NileRadio>(html`<nile-radio></nile-radio>`);
+    expect(el.getAttribute('role')).to.equal('radio');
+    expect(el.getAttribute('tabindex')).to.equal('-1');
+    expect(el.getAttribute('aria-disabled')).to.equal('false');
+  });
+});

package/src/nile-select/nile-select.ts

@@ -149,6 +149,8 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @property({ type: Boolean, reflect: true }) searchEnabled = false;
 
+  @property({attribute:'internal-search-placeholder'}) internalSearchPlaceHolder = 'Search...';
+
   @property({ type: Boolean, reflect: true }) blockValueChange = false;
 
   @property({ type: Boolean, reflect: true }) disableLocalSearch = false;
@@ -1248,7 +1250,7 @@ export class NileSelect extends NileElement implements NileFormControl {
                       size="small"
                       clearable
                       .value=${this.searchValue}
-                      placeholder="Search..."
+                      placeholder="${this.internalSearchPlaceHolder}"
                       @nile-input=${this.handleSearchChange}
                       @nile-focus=${this.handleSearchFocus}
                       @nile-change="${this.onInputChange}"

package/src/nile-slide-toggle/nile-slide-toggle.test.ts

@@ -0,0 +1,61 @@
+import { fixture, expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import './nile-slide-toggle';
+import { NileSlideToggle } from './nile-slide-toggle';
+
+describe('NileSlideToggle', () => {
+    it('should default to unchecked', async () => {
+      const el: NileSlideToggle = await fixture(html`<nile-slide-toggle></nile-slide-toggle>`);
+      expect(el.isChecked).to.be.false;
+    });
+
+    it('should toggle isChecked property when clicked', async () => {
+        const el: NileSlideToggle = await fixture(html`<nile-slide-toggle></nile-slide-toggle>`);
+        const input = el.shadowRoot!.querySelector('input')!;
+        input.click();
+        expect(el.isChecked).to.be.true;
+        input.click();
+        expect(el.isChecked).to.be.false;
+    });
+
+    it('should display the label and sublabel', async () => {
+        const el: NileSlideToggle = await fixture(html`<nile-slide-toggle label="Test Label" sublabel="Test Sublabel"></nile-slide-toggle>`);
+        const label = el.shadowRoot!.querySelector('.nile-slide-toggle__label span')!;
+        const sublabel = el.shadowRoot!.querySelector('.nile-slide-toggle__sublabel')!;
+        expect(label.textContent).to.equal('Test Label');
+        expect(sublabel.textContent).to.equal('Test Sublabel');
+    });
+
+    it('should apply disabled class when disabled', async () => {
+        const el: NileSlideToggle = await fixture(html`<nile-slide-toggle disabled></nile-slide-toggle>`);
+        const toggleContainer = el.shadowRoot!.querySelector('.nile-slide-toggle')!;
+        expect(toggleContainer.classList.contains('nile-slide--disabled')).to.be.true;
+    });
+
+    it('should emit a change event with correct detail when toggled', async () => {
+        const el: NileSlideToggle = await fixture(html`<nile-slide-toggle></nile-slide-toggle>`);
+        let changeDetail = null;
+        el.addEventListener('change', (e: Event) => {
+          changeDetail = (e as CustomEvent).detail;
+        });
+        const input = el.shadowRoot!.querySelector('input')!;
+        input.click();
+        expect(changeDetail).to.deep.equal({ checked: true });
+        input.click();
+        expect(changeDetail).to.deep.equal({ checked: false });
+    });
+
+    it('should show help text when provided', async () => {
+        const el: NileSlideToggle = await fixture(html`<nile-slide-toggle help-text="Help text here"></nile-slide-toggle>`);
+        const helpText = el.shadowRoot!.querySelector('nile-form-help-text');
+        expect(helpText).to.exist;
+        expect(helpText?.textContent).to.equal('Help text here');
+    });
+
+    it('should show error message when provided', async () => {
+        const el: NileSlideToggle = await fixture(html`<nile-slide-toggle error-message="Error message here"></nile-slide-toggle>`);
+        const errorMessage = el.shadowRoot!.querySelector('nile-form-error-message');
+        expect(errorMessage).to.exist;
+        expect(errorMessage?.textContent).to.equal('Error message here');
+    });
+})

package/src/nile-tab-group/nile-tab-group.css.ts

@@ -114,11 +114,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);
   }
 

package/src/nile-tab-group/nile-tab-group.ts

@@ -299,7 +299,7 @@ export class NileTabGroup extends NileElement {
   private repositionIndicator() {
     const currentTab = this.getActiveTab();
 
-    if (!currentTab) {
+    if (!currentTab || !this.indicator) {
       return;
     }
 
@@ -363,6 +363,7 @@ export class NileTabGroup extends NileElement {
 
   @watch('placement', { waitUntilFirstUpdate: true })
   syncIndicator() {
+    if(!this.indicator) return;
     const tab = this.getActiveTab();
 
     if (tab) {

package/src/nile-table-cell-item/nile-table-cell-item.css.ts

@@ -29,7 +29,8 @@ export const styles = css`
     font-size: var(--nile-type-scale-3);
     font-style: normal;
     font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-type-scale-6);
+    /* line-height: var(--nile-type-scale-6); */
+    line-height: normal;
     letter-spacing: 0.2px;
   }
 `;

package/src/nile-table-header-item/nile-table-header-item.css.ts

@@ -31,11 +31,8 @@ export const styles = css`
     font-size: var(--nile-type-scale-2);
     font-weight: 500;
     font-style: normal;
-    line-height: var(--nile-type-scale-5);
-  }
-
-  slot {
-    cursor: pointer;
+    /* line-height: var(--nile-type-scale-5); */
+    line-height: normal;
   }
 
   nile-icon {

package/src/nile-textarea/nile-textarea.test.ts

@@ -0,0 +1,102 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import './nile-textarea.js';
+import { NileTextarea } from './nile-textarea.js';
+
+describe('<nile-textarea>', () => {
+  it('should render the default properties correctly', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea></nile-textarea>`);
+    expect(el.value).to.equal('');
+    expect(el.size).to.equal('medium');
+    expect(el.filled).to.be.false;
+    expect(el.disabled).to.be.false;
+    expect(el.readonly).to.be.false;
+    expect(el.required).to.be.false;
+  });
+
+  it('should reflect properties to attributes', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea disabled readonly required></nile-textarea>`);
+    expect(el.getAttribute('disabled')).to.equal('');
+    expect(el.getAttribute('readonly')).to.equal('');
+    expect(el.getAttribute('required')).to.equal('');
+  });
+
+  it('should emit events correctly', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea></nile-textarea>`);
+    const input = el.shadowRoot?.querySelector('textarea') ?? {} as HTMLTextAreaElement;
+    
+    // Focus event
+    setTimeout(() => input.dispatchEvent(new Event('focus')));
+    const { detail: focusDetail } = await oneEvent(el, 'nile-focus');
+    expect(focusDetail.value).to.equal('');
+
+    // Input event
+    input.value = 'test';
+    setTimeout(() => input.dispatchEvent(new Event('input')));
+    const { detail: inputDetail } = await oneEvent(el, 'nile-input');
+    expect(inputDetail.value).to.equal('test');
+
+    // Change event
+    setTimeout(() => input.dispatchEvent(new Event('change')));
+    const { detail: changeDetail } = await oneEvent(el, 'nile-change');
+    expect(changeDetail.value).to.equal('test');
+
+    // Blur event
+    setTimeout(() => input.dispatchEvent(new Event('blur')));
+    const { detail: blurDetail } = await oneEvent(el, 'nile-blur');
+    expect(blurDetail.value).to.equal('test');
+  });
+
+  it('should update value property on input event', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea></nile-textarea>`);
+    const input = el.shadowRoot?.querySelector('textarea') ?? {} as HTMLTextAreaElement;
+
+    input.value = 'new value';
+    input.dispatchEvent(new Event('input'));
+    expect(el.value).to.equal('new value');
+  });
+
+  it('should handle the "rows" property correctly', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea rows="10"></nile-textarea>`);
+    const input = el.shadowRoot?.querySelector('textarea') ?? {} as HTMLTextAreaElement;
+    expect(input.rows).to.equal(10);
+  });
+
+  it('should handle the "resize" property correctly', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea resize="none"></nile-textarea>`);
+    const textarea = el.shadowRoot?.querySelector('.textarea') ?? {} as HTMLTextAreaElement;
+    expect(textarea.classList.contains('textarea--resize-none')).to.be.true;
+  });
+
+  it('should select all text when select() is called', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea value="test value"></nile-textarea>`);
+    el.select();
+    const input = el.shadowRoot?.querySelector('textarea') ?? {} as HTMLTextAreaElement;
+    expect(input.selectionStart).to.equal(0);
+    expect(input.selectionEnd).to.equal(el.value.length);
+  });
+
+  it('should set selection range correctly', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea value="test value"></nile-textarea>`);
+    el.setSelectionRange(0, 4);
+    const input = el.shadowRoot?.querySelector('textarea') ?? {} as HTMLTextAreaElement;
+    expect(input.selectionStart).to.equal(0);
+    expect(input.selectionEnd).to.equal(4);
+  });
+
+  it('should handle non-printable characters', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea checkNonPrintableChar></nile-textarea>`);
+    el.value = 'test乇乂丅尺卂'; // 乇乂丅尺卂 is a non-printable character
+    el.handleValueChange();
+    await el.updateComplete;
+    expect(el.hasPrintableCharacters).to.be.true;
+    const hasInvalidStr=String('乇乂丅尺卂').split('').some(ch=>el.markedValue.indexOf(ch)!=-1)
+    expect(hasInvalidStr).to.be.true
+  });
+
+  it('should remove non-printable characters correctly', async () => {
+    const el = await fixture<NileTextarea>(html`<nile-textarea></nile-textarea>`);
+    el.value = 'test乇乂丅尺卂'; // 乇乂丅尺卂 is a non-printable character
+    el.removeAllNonPrintableCharacters();
+    expect(el.value).to.equal('test');
+  });
+});

package/src/nile-tree/index.ts

@@ -0,0 +1 @@
+export { NileTree } from './nile-tree';

package/src/nile-tree/nile-tree.css.ts

@@ -0,0 +1,50 @@
+/**
+* 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';
+
+/**
+ * Tree CSS
+ */
+export const styles = css`
+  :host {
+    box-sizing: border-box;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    /*
+     * These are actually used by tree item, but we define them here so they can more easily be set and all tree items
+     * stay consistent.
+     */
+    --indent-guide-color: #F5F7F7;
+    --indent-guide-offset: 0;
+    --indent-guide-style: solid;
+    --indent-guide-width: 0;
+    --indent-size: 1.25rem;
+
+    display: block;
+    isolation: isolate;
+
+    /*
+     * Tree item indentation uses the "em" unit to increment its width on each level, so setting the font size to zero
+     * here removes the indentation for all the nodes on the first level.
+     */
+    font-size: 0;
+  }
+`;
+
+export default [styles];