@crowdstrike/glide-core 0.9.5 → 0.10.0

package/dist/tooltip.styles.js

@@ -46,14 +46,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       padding: 0;
       position: absolute;
 
-      ::slotted(kbd) {
-        color: var(--glide-core-text-header-2);
-        display: inline-block;
-        font-family: inherit;
-        font-size: inherit;
-        white-space: nowrap;
-      }
-
       &:popover-open {
         display: flex;
 
@@ -105,22 +97,53 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
     }
 
-    .default-slot {
+    .content {
       align-items: center;
       background-color: var(--glide-core-surface-base-dark);
       border-radius: var(--glide-core-spacing-xs);
-      color: var(--glide-core-text-selected);
-      column-gap: var(--glide-core-spacing-xs);
       display: flex;
       font-family: var(--glide-core-body-md-font-family);
       font-size: var(--glide-core-body-sm-font-size);
       font-style: var(--glide-core-body-sm-font-style);
       font-weight: var(--glide-core-body-sm-font-weight);
-      hyphens: auto;
       inline-size: max-content;
       inset-block-start: 50%;
-      max-inline-size: 11.25rem;
-      overflow-wrap: break-word;
+      line-height: var(--glide-core-body-sm-line-height);
       padding: var(--glide-core-spacing-xs) var(--glide-core-spacing-sm);
+
+      &.reversed {
+        flex-direction: row-reverse;
+      }
+    }
+
+    .default-slot {
+      color: var(--glide-core-text-selected);
+      display: block;
+      hyphens: auto;
+      max-inline-size: 11.25rem;
+      min-inline-size: 1.875rem;
+      overflow-wrap: anywhere;
+    }
+
+    .shortcut {
+      color: var(--glide-core-text-body-lighter);
+      display: none;
+      white-space: nowrap;
+
+      &.visible {
+        display: inline-block;
+      }
+
+      &.reversed {
+        margin-inline-end: var(--glide-core-spacing-xs);
+      }
+
+      &:not(.reversed) {
+        margin-inline-start: var(--glide-core-spacing-xs);
+      }
+    }
+
+    kbd {
+      font-family: var(--glide-core-body-md-font-family);
     }
   `];

package/dist/tooltip.test.basics.d.ts

@@ -1 +1 @@
-import './tooltip.js';
+export {};

package/dist/tooltip.test.basics.js

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import './tooltip.js';
 import { ArgumentError } from 'ow';
 import { aTimeout, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreTooltip from './tooltip.js';
@@ -30,11 +29,11 @@ it('has defaults', async () => {
     expect(component.open).to.be.false;
     expect(component.placement).to.be.be.undefined;
     expect(component.disabled).to.be.false;
-    expect(component.hasAttribute('disabled')).to.be.false;
+    expect(component.shortcut).to.be.deep.equal([]);
     expect(tooltip?.checkVisibility()).to.be.false;
 });
 it('can be open', async () => {
-    const component = await fixture(html `<glide-core-tooltip aria-label="Label" open>
+    const component = await fixture(html `<glide-core-tooltip open>
       Tooltip
       <span slot="target" tabindex="0">Target</span>
     </glide-core-tooltip>`);
@@ -43,29 +42,24 @@ it('can be open', async () => {
     await aTimeout(0);
     expect(tooltip?.checkVisibility()).to.be.true;
 });
-it('can have a tooltip', async () => {
-    const component = await fixture(html `<glide-core-tooltip aria-label="Label">
+it('can have a single-key shortcut', async () => {
+    const component = await fixture(html `<glide-core-tooltip .shortcut=${['Enter']}>
       Tooltip
       <span slot="target" tabindex="0">Target</span>
     </glide-core-tooltip>`);
-    const tooltip = component?.shadowRoot
-        ?.querySelector('slot:not([name])')
-        ?.assignedNodes()
-        .at(0);
-    expect(tooltip?.textContent?.trim()).to.equal('Tooltip');
+    const shortcut = component.shadowRoot?.querySelector('[data-test="shortcut"]');
+    expect(shortcut?.textContent?.trim()).to.equal('Enter');
 });
-it('can have a target', async () => {
-    const component = await fixture(html `<glide-core-tooltip>
+it('can have a multi-key shortcut', async () => {
+    const component = await fixture(html `<glide-core-tooltip .shortcut=${['CMD', 'K']}>
       Tooltip
       <span slot="target" tabindex="0">Target</span>
     </glide-core-tooltip>`);
-    const assignedElements = component.shadowRoot
-        ?.querySelector('slot[name="target"]')
-        ?.assignedElements();
-    expect(assignedElements?.at(0)?.textContent).to.equal('Target');
+    const shortcut = component.shadowRoot?.querySelector('[data-test="shortcut"]');
+    expect(shortcut?.textContent?.replaceAll(/\s/g, '')).to.equal('CMD+K');
 });
-it('does not open when disabled', async () => {
-    const component = await fixture(html `<glide-core-tooltip aria-label="Label" open disabled>
+it('is not open when disabled', async () => {
+    const component = await fixture(html `<glide-core-tooltip open disabled>
       Tooltip
       <span slot="target" tabindex="0">Target</span>
     </glide-core-tooltip>`);
@@ -89,7 +83,7 @@ it('throws if it does not have a default slot', async () => {
 it('throws if it does not have a "target" slot', async () => {
     const spy = sinon.spy();
     try {
-        await fixture(html `<glide-core-tooltip> Tooltip </glide-core-tooltip>`);
+        await fixture(html `<glide-core-tooltip>Tooltip</glide-core-tooltip>`);
     }
     catch (error) {
         if (error instanceof ArgumentError) {
@@ -98,3 +92,9 @@ it('throws if it does not have a "target" slot', async () => {
     }
     expect(spy.callCount).to.equal(1);
 });
+it('has `placement` coverage', async () => {
+    await fixture(html `<glide-core-tooltip open placement="top">
+      Tooltip
+      <span slot="target" tabindex="0">Target</span>
+    </glide-core-tooltip>`);
+});

package/dist/tree.d.ts

@@ -6,8 +6,6 @@ declare global {
     }
 }
 /**
- * @description A tree containing a hierarchy of Tree Items.
- *
  * @slot - One or more of <glide-core-tree-item>
  */
 export default class GlideCoreTree extends LitElement {

package/dist/tree.item.d.ts

@@ -6,12 +6,10 @@ declare global {
     }
 }
 /**
- * @description A single node of a Tree.
- *
- * @slot - One or more of <glide-core-tree-item>, if this tree item contains nested tree items.
- * @slot prefix - An optional icon to display before the label.
- * @slot suffix - An optional icon to add after the label.
- * @slot menu - Place a <glide-core-menu> here, which will be visible on hover or focus
+ * @slot - Zero or more of `<glide-core-tree-item>`.
+ * @slot prefix - An optional icon before the label.
+ * @slot suffix - An optional icon after the label.
+ * @slot menu - A `<glide-core-menu>` made visible on hover or focus.
  */
 export default class GlideCoreTreeItem extends LitElement {
     #private;
@@ -25,7 +23,6 @@ export default class GlideCoreTreeItem extends LitElement {
     nonCollapsible: boolean;
     slotElements: GlideCoreTreeItem[];
     suffixSlotAssignedElements: HTMLElement[];
-    firstUpdated(): void;
     focus(options?: FocusOptions): void;
     get hasChildTreeItems(): boolean;
     get hasExpandIcon(): boolean;
@@ -38,4 +35,5 @@ export default class GlideCoreTreeItem extends LitElement {
     selectItem(item: GlideCoreTreeItem): GlideCoreTreeItem | undefined;
     toggleExpand(): void;
     private childTreeItems;
+    private hasPrefixIcon;
 }

package/dist/tree.item.icon-button.d.ts

@@ -6,10 +6,7 @@ declare global {
     }
 }
 /**
- * @description An icon button that can be used inside of a tree item.
- * Provides correct color styling based on tree item state
- *
- * @slot - Reserved for the icon to display inside of the button.
+ * @slot - An icon.
  */
 export default class GlideCoreTreeItemIconButton extends LitElement {
     #private;

package/dist/tree.item.js

@@ -1 +1 @@
-var _a,GlideCoreTreeItem_1,__decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,l=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(l=(s<3?r(l):s>3?r(t,o,l):r(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import"./tree.item.menu.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,queryAssignedElements,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import GlideCoreIconButton from"./icon-button.js";import GlideCoreTreeItemMenu from"./tree.item.menu.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./tree.item.styles.js";let GlideCoreTreeItem=class GlideCoreTreeItem extends LitElement{constructor(){super(...arguments),this.expanded=!1,this.label="",this.level=1,this.selected=!1,this.removeIndentation=!1,this.nonCollapsible=!1,this.childTreeItems=[],this.#e=createRef(),this.#t=new LocalizeController(this),this.#o=createRef()}static{GlideCoreTreeItem_1=this}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.#i()}focus(e){this.#e.value?.focus(e),this.#r(0)}get hasChildTreeItems(){return this.childTreeItems.length>0}get hasExpandIcon(){return this.hasChildTreeItems&&!this.nonCollapsible}render(){return html`<div class="${classMap({component:!0,expanded:this.expanded,selected:this.selected})}" role="treeitem" aria-label="${this.label}" aria-selected="${ifDefined(this.#s)}" aria-expanded="${ifDefined(this.#l)}"><div class="${classMap({"label-container":!0})}" tabindex="-1" @focusout="${this.#n}" @focusin="${this.#a}" ${ref(this.#e)}><div style="flex-shrink: 0; width:${this.#d};"></div>${when(!this.removeIndentation||this.hasExpandIcon,(()=>html`<div class="expand-icon-container">${when(this.hasExpandIcon,(()=>html`<div><svg aria-hidden="true" class="${classMap({"expand-icon":!0,"expand-icon-expanded":this.expanded})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>`))}</div>`))}<slot name="prefix"></slot><div class="label">${this.label}</div><div class="icon-container"><slot name="menu" ${ref(this.#o)} @slotchange="${this.#c}"></slot><slot name="suffix"></slot></div></div><div class="child-items" role="group"><slot></slot></div></div>`}selectItem(e){let t;for(const o of this.slotElements)if(e===o)o.setAttribute("selected","true"),t=o;else{o.removeAttribute("selected");const i=o.selectItem(e);i&&(t=i)}return t}toggleExpand(){this.expanded=!this.expanded}#e;#t;#o;get#l(){return this.hasChildTreeItems?this.expanded?"true":"false":void 0}get#s(){return this.hasChildTreeItems?void 0:this.selected?"true":"false"}#a(e){this.#m(e.target)&&e.stopPropagation()}#n(e){this.#m(e.relatedTarget)?e.stopPropagation():this.#r(-1)}get#d(){return 20*(this.level-1)+"px"}#m(e){return e&&e instanceof HTMLElement&&!(e instanceof GlideCoreTreeItem_1)&&this.contains(e)}#c(){owSlotType(this.#o.value,[GlideCoreTreeItemMenu]);for(const e of this.#o.value.assignedElements())e instanceof GlideCoreTreeItemMenu&&(e.label=this.#t.term("actionsFor",this.label))}#r(e){ow(this.#e.value,ow.object.instanceOf(HTMLElement)),this.#e.value.tabIndex=e;for(const t of this.querySelectorAll("& > glide-core-tree-item-icon-button"))t.tabIndex=e}#i(){const e=[];for(const t of this.slotElements)t.level=this.level+1,e.push(t);this.childTreeItems=e}};__decorate([property({type:Boolean})],GlideCoreTreeItem.prototype,"expanded",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItem.prototype,"label",void 0),__decorate([property({type:Number})],GlideCoreTreeItem.prototype,"level",void 0),__decorate([property({type:Boolean})],GlideCoreTreeItem.prototype,"selected",void 0),__decorate([property({type:Boolean,attribute:"remove-indentation"})],GlideCoreTreeItem.prototype,"removeIndentation",void 0),__decorate([property({type:Boolean,attribute:"non-collapsible"})],GlideCoreTreeItem.prototype,"nonCollapsible",void 0),__decorate([queryAssignedElements()],GlideCoreTreeItem.prototype,"slotElements",void 0),__decorate([queryAssignedElements({slot:"suffix"})],GlideCoreTreeItem.prototype,"suffixSlotAssignedElements",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"childTreeItems",void 0),GlideCoreTreeItem=GlideCoreTreeItem_1=__decorate([customElement("glide-core-tree-item")],GlideCoreTreeItem);export default GlideCoreTreeItem;
+var _a,GlideCoreTreeItem_1,__decorate=this&&this.__decorate||function(e,t,o,i){var l,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var n=e.length-1;n>=0;n--)(l=e[n])&&(s=(r<3?l(s):r>3?l(t,o,s):l(t,o))||s);return r>3&&s&&Object.defineProperty(t,o,s),s};import"./tree.item.menu.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,queryAssignedElements,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import GlideCoreIconButton from"./icon-button.js";import GlideCoreTreeItemMenu from"./tree.item.menu.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./tree.item.styles.js";let GlideCoreTreeItem=class GlideCoreTreeItem extends LitElement{constructor(){super(...arguments),this.expanded=!1,this.label="",this.level=1,this.selected=!1,this.removeIndentation=!1,this.nonCollapsible=!1,this.childTreeItems=[],this.hasPrefixIcon=!1,this.#e=createRef(),this.#t=createRef(),this.#o=new LocalizeController(this),this.#i=createRef(),this.#l=createRef()}static{GlideCoreTreeItem_1=this}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}focus(e){this.#t.value?.focus(e),this.#r(0)}get hasChildTreeItems(){return this.childTreeItems.length>0}get hasExpandIcon(){return this.hasChildTreeItems&&!this.nonCollapsible}render(){return html`<div class="${classMap({component:!0,expanded:this.expanded,selected:this.selected})}" role="treeitem" aria-label="${this.label}" aria-selected="${ifDefined(this.#s)}" aria-expanded="${ifDefined(this.#n)}"><div class="${classMap({"label-container":!0,"prefix-icon":this.hasPrefixIcon})}" tabindex="-1" @focusout="${this.#a}" @focusin="${this.#d}" ${ref(this.#t)}><div style="flex-shrink: 0; width:${this.#c};"></div>${when(!this.removeIndentation||this.hasExpandIcon,(()=>html`<div class="expand-icon-container">${when(this.hasExpandIcon,(()=>html`<div><svg aria-hidden="true" class="${classMap({"expand-icon":!0,"expand-icon-expanded":this.expanded})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>`))}</div>`))}<slot name="prefix" ${ref(this.#l)} @slotchange="${this.#h}"></slot><div class="label">${this.label}</div><div class="icon-container"><slot name="menu" ${ref(this.#i)} @slotchange="${this.#m}"></slot><slot name="suffix"></slot></div></div><div class="child-items" role="group"><slot @slotchange="${this.#f}" ${ref(this.#e)}></slot></div></div>`}selectItem(e){let t;for(const o of this.slotElements)if(e===o)o.setAttribute("selected","true"),t=o;else{o.removeAttribute("selected");const i=o.selectItem(e);i&&(t=i)}return t}toggleExpand(){this.expanded=!this.expanded}#e;#t;#o;#i;#l;get#n(){return this.hasChildTreeItems?this.expanded?"true":"false":void 0}get#s(){return this.hasChildTreeItems?void 0:this.selected?"true":"false"}#d(e){this.#p(e.target)&&e.stopPropagation()}#a(e){this.#p(e.relatedTarget)?e.stopPropagation():this.#r(-1)}get#c(){return 20*(this.level-1)+"px"}#p(e){return e&&e instanceof HTMLElement&&!(e instanceof GlideCoreTreeItem_1)&&this.contains(e)}#f(){this.#u()}#m(){owSlotType(this.#i.value,[GlideCoreTreeItemMenu]);for(const e of this.#i.value.assignedElements())e instanceof GlideCoreTreeItemMenu&&(e.label=this.#o.term("actionsFor",this.label))}#h(){const e=this.#l.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#r(e){ow(this.#t.value,ow.object.instanceOf(HTMLElement)),this.#t.value.tabIndex=e;for(const t of this.querySelectorAll("& > glide-core-tree-item-icon-button"))t.tabIndex=e}#u(){const e=[];for(const t of this.slotElements)t.level=this.level+1,e.push(t);this.childTreeItems=e}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTreeItem.prototype,"expanded",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItem.prototype,"label",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTreeItem.prototype,"level",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTreeItem.prototype,"selected",void 0),__decorate([property({reflect:!0,type:Boolean,attribute:"remove-indentation"})],GlideCoreTreeItem.prototype,"removeIndentation",void 0),__decorate([property({reflect:!0,type:Boolean,attribute:"non-collapsible"})],GlideCoreTreeItem.prototype,"nonCollapsible",void 0),__decorate([queryAssignedElements()],GlideCoreTreeItem.prototype,"slotElements",void 0),__decorate([queryAssignedElements({slot:"suffix"})],GlideCoreTreeItem.prototype,"suffixSlotAssignedElements",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"childTreeItems",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"hasPrefixIcon",void 0),GlideCoreTreeItem=GlideCoreTreeItem_1=__decorate([customElement("glide-core-tree-item")],GlideCoreTreeItem);export default GlideCoreTreeItem;

package/dist/tree.item.menu.d.ts

@@ -9,8 +9,6 @@ declare global {
     }
 }
 /**
- * @description A menu built into a tree item. Uses <glide-core-menu>
- *
  * @slot - One or more of <glide-core-menu-link> or <glide-core-menu-button>.
  * @slot target - A focusable element against which Menu will be positioned. Opens and closes Menu when interacted with.
  */

package/dist/tree.item.menu.test.basics.js

@@ -33,33 +33,33 @@ it('throws if the default slot is the incorrect type', async () => {
     stub.restore();
 });
 it('defaults the placement of the menu to bottom start', async () => {
-    const treeItemMenu = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree-item-menu>
       <glide-core-menu-link label="One" url="/one"> </glide-core-menu-link>
     </glide-core-tree-item-menu>
   `);
-    expect(treeItemMenu.shadowRoot?.querySelector('glide-core-menu')?.placement).to.equal('bottom-start');
+    expect(component.shadowRoot?.querySelector('glide-core-menu')?.placement).to.equal('bottom-start');
 });
 it('can set placement of the menu', async () => {
-    const treeItemMenu = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree-item-menu placement="bottom-end">
       <glide-core-menu-link label="One" url="/one"> </glide-core-menu-link>
     </glide-core-tree-item-menu>
   `);
-    expect(treeItemMenu.shadowRoot?.querySelector('glide-core-menu')?.placement).to.equal('bottom-end');
+    expect(component.shadowRoot?.querySelector('glide-core-menu')?.placement).to.equal('bottom-end');
 });
 it('can be opened programmatically', async () => {
-    const treeItemMenu = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree-item-menu>
       <glide-core-menu-link label="One" url="/one"> </glide-core-menu-link>
     </glide-core-tree-item-menu>
   `);
-    expect(treeItemMenu.shadowRoot
+    expect(component.shadowRoot
         ?.querySelector('glide-core-menu')
         ?.getAttribute('open')).to.equal(null);
-    treeItemMenu.click();
-    await treeItemMenu.updateComplete;
-    expect(treeItemMenu.shadowRoot
+    component.click();
+    await component.updateComplete;
+    expect(component.shadowRoot
         ?.querySelector('glide-core-menu')
         ?.getAttribute('open')).to.equal('');
 });

package/dist/tree.item.styles.js

@@ -13,6 +13,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       font-style: var(--glide-core-body-sm-font-style);
       font-weight: var(--glide-core-body-sm-font-weight);
       grid-template-columns: repeat(auto-fill, 2.5rem);
+      line-height: 1.25rem;
 
       --color: var(--glide-core-text-body-1);
 
@@ -90,10 +91,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
           background-color: var(--glide-core-color-dark-blue);
         }
       }
-    }
 
-    ::slotted([slot='prefix']) {
-      margin-inline-end: var(--glide-core-spacing-xs);
+      &.prefix-icon .label {
+        padding-inline-start: var(--glide-core-spacing-xs);
+      }
     }
 
     ::slotted([slot='menu']) {

package/dist/tree.item.test.basics.js

@@ -12,22 +12,23 @@ it('registers', () => {
     expect(window.customElements.get('glide-core-tree-item')).to.equal(TreeItem);
 });
 it('renders and sets default attributes', async () => {
-    const treeItem = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree-item label="Item"></glide-core-tree-item>
   `);
-    expect(treeItem.expanded).to.equal(false);
-    expect(treeItem.label).to.equal('Item');
-    expect(treeItem.level).to.equal(1);
-    expect(treeItem.shadowRoot?.querySelector('.expand-icon-container')).to.be.ok;
+    expect(component.expanded).to.be.false;
+    expect(component.label).to.equal('Item');
+    expect(component.level).to.equal(1);
+    expect(component.shadowRoot?.querySelector('.expand-icon-container')).to.be
+        .ok;
 });
 it('does not render expand-icon-container if remove-indentation is set', async () => {
-    const treeItem = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree-item
       label="Item"
       remove-indentation
     ></glide-core-tree-item>
   `);
-    expect(treeItem.shadowRoot?.querySelector('.expand-icon-container')).to.be
+    expect(component.shadowRoot?.querySelector('.expand-icon-container')).to.be
         .null;
 });
 it('renders with a prefix slot', async () => {
@@ -39,14 +40,14 @@ it('renders with a prefix slot', async () => {
     expect(document.querySelector('[data-prefix]')).to.be.ok;
 });
 it('adds label to menu target', async () => {
-    const treeItem = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree-item label="Item">
       <glide-core-tree-item-menu slot="menu" data-menu>
         <glide-core-menu-link label="Move" url="/move"> </glide-core-menu-link>
       </glide-core-tree-item-menu>
     </glide-core-tree-item>
   `);
-    const menuTarget = treeItem
+    const menuTarget = component
         .querySelector('glide-core-tree-item-menu')
         ?.shadowRoot?.querySelector('glide-core-menu')
         ?.querySelector('glide-core-icon-button');
@@ -61,34 +62,34 @@ it('renders with a suffix slot', async () => {
     expect(document.querySelector('[data-suffix]')).to.be.ok;
 });
 it('does not have an expand icon if there are no child tree items', async () => {
-    const treeItem = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree-item label="Item"></glide-core-tree-item>
   `);
-    expect(treeItem.shadowRoot?.querySelector('.expand-icon')).to.equal(null);
+    expect(component.shadowRoot?.querySelector('.expand-icon')).to.equal(null);
 });
 it('can expand', async () => {
-    const treeItem = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree-item label="Item">
       <glide-core-tree-item label="Child Item 1"></glide-core-tree-item>
     </glide-core-tree-item>
   `);
     expect([
-        ...treeItem.shadowRoot.querySelector('.component').classList,
+        ...component.shadowRoot.querySelector('.component').classList,
     ]).to.deep.equal(['component']);
     expect([
-        ...treeItem.shadowRoot.querySelector('.expand-icon').classList,
+        ...component.shadowRoot.querySelector('.expand-icon').classList,
     ]).to.deep.equal(['expand-icon']);
-    treeItem.toggleExpand();
-    await treeItem.updateComplete;
+    component.toggleExpand();
+    await component.updateComplete;
     expect([
-        ...treeItem.shadowRoot.querySelector('.component').classList,
+        ...component.shadowRoot.querySelector('.component').classList,
     ]).to.deep.equal(['component', 'expanded']);
     expect([
-        ...treeItem.shadowRoot.querySelector('.expand-icon').classList,
+        ...component.shadowRoot.querySelector('.expand-icon').classList,
     ]).to.deep.equal(['expand-icon', 'expand-icon-expanded']);
 });
 it('renders child and grandchild tree items', async () => {
-    const treeItem = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree-item expanded label="Item">
       <glide-core-tree-item label="Child Item 1"></glide-core-tree-item>
       <glide-core-tree-item label="Child Item 2">
@@ -96,16 +97,27 @@ it('renders child and grandchild tree items', async () => {
       </glide-core-tree-item>
     </glide-core-tree-item>
   `);
-    expect(treeItem.shadowRoot?.querySelector('.expand-icon')).to.be.ok;
-    const childItems = treeItem.slotElements;
+    expect(component.shadowRoot?.querySelector('.expand-icon')).to.be.ok;
+    const childItems = component.slotElements;
     expect(childItems?.length).to.equal(2);
     expect(childItems?.[0].level).to.equal(2, 'Children are level 2');
     const grandchildItems = childItems?.[1].slotElements;
     expect(grandchildItems?.length).to.equal(1);
     expect(grandchildItems?.[0].level).to.equal(3, 'Grandchildren are level 3');
 });
+it('sets the level for tree items programmatically added later', async () => {
+    const component = await fixture(html `
+    <glide-core-tree-item expanded label="Item"></glide-core-tree-item>
+  `);
+    const newItem = Object.assign(document.createElement('glide-core-tree-item'), {
+        label: 'Child',
+    });
+    component.append(newItem);
+    await component.updateComplete;
+    expect(newItem.level).to.equal(2);
+});
 it('can select child and grandchild items', async () => {
-    const treeItem = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree-item expanded label="Item">
       <glide-core-tree-item label="Child Item 1"></glide-core-tree-item>
       <glide-core-tree-item label="Child Item 2">
@@ -113,14 +125,14 @@ it('can select child and grandchild items', async () => {
       </glide-core-tree-item>
     </glide-core-tree-item>
   `);
-    const childItems = treeItem.slotElements;
+    const childItems = component.slotElements;
     const grandchildItems = childItems?.[1].slotElements;
-    treeItem.selectItem(childItems[0]);
-    expect(childItems[0].selected).to.equal(true);
-    expect(childItems[1].selected).to.equal(false);
-    expect(grandchildItems[0].selected).to.equal(false);
-    treeItem.selectItem(grandchildItems[0]);
-    expect(childItems[0].selected).to.equal(false);
-    expect(childItems[1].selected).to.equal(false);
-    expect(grandchildItems[0].selected).to.equal(true);
+    component.selectItem(childItems[0]);
+    expect(childItems[0].selected).to.be.true;
+    expect(childItems[1].selected).to.be.false;
+    expect(grandchildItems[0].selected).to.be.false;
+    component.selectItem(grandchildItems[0]);
+    expect(childItems[0].selected).to.be.false;
+    expect(childItems[1].selected).to.be.false;
+    expect(grandchildItems[0].selected).to.be.true;
 });

package/dist/tree.test.basics.js

@@ -12,15 +12,15 @@ it('registers', async () => {
     expect(window.customElements.get('glide-core-tree')).to.equal(GlideCoreTree);
 });
 it('renders and sets default attributes', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item"></glide-core-tree-item>
     </glide-core-tree>
   `);
-    expect(tree.selectedItem).to.equal(undefined);
+    expect(component.selectedItem).to.equal(undefined);
 });
 it('can select child and grandchild items', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1"></glide-core-tree-item>
       <glide-core-tree-item label="Child Item 2">
@@ -28,21 +28,21 @@ it('can select child and grandchild items', async () => {
       </glide-core-tree-item>
     </glide-core-tree>
   `);
-    const childItems = tree.slotElements;
+    const childItems = component.slotElements;
     const grandchildItems = childItems?.[1].slotElements;
-    tree.selectItem(childItems[0]);
-    expect(childItems[0].selected).to.equal(true);
-    expect(tree.selectedItem).to.equal(childItems[0]);
-    expect(childItems[1].selected).to.equal(false);
-    expect(grandchildItems[0].selected).to.equal(false);
-    tree.selectItem(grandchildItems[0]);
-    expect(childItems[0].selected).to.equal(false);
-    expect(childItems[1].selected).to.equal(false);
-    expect(grandchildItems[0].selected).to.equal(true);
-    expect(tree.selectedItem).to.equal(grandchildItems[0]);
+    component.selectItem(childItems[0]);
+    expect(childItems[0].selected).to.be.true;
+    expect(component.selectedItem).to.equal(childItems[0]);
+    expect(childItems[1].selected).to.be.false;
+    expect(grandchildItems[0].selected).to.be.false;
+    component.selectItem(grandchildItems[0]);
+    expect(childItems[0].selected).to.be.false;
+    expect(childItems[1].selected).to.be.false;
+    expect(grandchildItems[0].selected).to.be.true;
+    expect(component.selectedItem).to.equal(grandchildItems[0]);
 });
 it('can click child and grandchild items to expand or select them', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1"></glide-core-tree-item>
       <glide-core-tree-item label="Child Item 2">
@@ -53,26 +53,26 @@ it('can click child and grandchild items to expand or select them', async () =>
       </glide-core-tree-item>
     </glide-core-tree>
   `);
-    const childItems = tree.slotElements;
+    const childItems = component.slotElements;
     const grandchildItems = childItems?.[1].slotElements;
     // Clicking an item that doesn't have children selects it
     childItems[0].click();
-    expect(childItems[0].selected).to.equal(true);
-    expect(childItems[1].selected).to.equal(false);
-    expect(grandchildItems[0].selected).to.equal(false);
-    expect(childItems[1].expanded).to.equal(false);
+    expect(childItems[0].selected).to.be.true;
+    expect(childItems[1].selected).to.be.false;
+    expect(grandchildItems[0].selected).to.be.false;
+    expect(childItems[1].expanded).to.be.false;
     // Clicking an item that has children expands it
     childItems[1].click();
-    expect(childItems[1].expanded).to.equal(true);
+    expect(childItems[1].expanded).to.be.true;
     // Can click and select a grandchild item
     grandchildItems[0].click();
-    expect(grandchildItems[0].selected).to.equal(true);
+    expect(grandchildItems[0].selected).to.be.true;
     // Can click and select a non-collapsible parent item
     childItems[2].click();
-    expect(childItems[2].selected).to.equal(true);
+    expect(childItems[2].selected).to.be.true;
 });
 it('does not select an item if a tree-item-icon-button is clicked', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1">
         <glide-core-tree-item-icon-button slot="suffix" data-test-icon-button>
@@ -83,15 +83,15 @@ it('does not select an item if a tree-item-icon-button is clicked', async () =>
       </glide-core-tree-item>
     </glide-core-tree>
   `);
-    const childItems = tree.slotElements;
+    const childItems = component.slotElements;
     const iconButton = childItems[0].querySelector('[data-test-icon-button]');
     assert(iconButton);
     iconButton.click();
     await iconButton.updateComplete;
-    expect(childItems[0].selected).to.equal(false);
+    expect(childItems[0].selected).to.be.false;
 });
 it('does not select an item if its menu slot is clicked', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1">
         <glide-core-tree-item-menu slot="menu" data-test-menu>
@@ -100,12 +100,12 @@ it('does not select an item if its menu slot is clicked', async () => {
       </glide-core-tree-item>
     </glide-core-tree>
   `);
-    const childItems = tree.slotElements;
+    const childItems = component.slotElements;
     const menu = childItems[0].querySelector('[data-test-menu]');
     assert(menu);
     menu.click();
     await menu.updateComplete;
-    expect(childItems[0].selected).to.equal(false);
+    expect(childItems[0].selected).to.be.false;
 });
 it('throws if it does not have a default slot', async () => {
     const spy = sinon.spy();