@crowdstrike/glide-core 0.8.0 → 0.9.1

package/dist/tooltip.test.interactions.js

@@ -1,20 +1,68 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './tooltip.js';
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, assert, expect, fixture, html } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreTooltip from './tooltip.js';
-import sinon from 'sinon';
 GlideCoreTooltip.shadowRootOptions.mode = 'open';
+it('is open when opened programmatically', async () => {
+    const component = await fixture(html `<glide-core-tooltip aria-label="Label">
+      Tooltip
+      <span slot="target" tabindex="0">Target</span>
+    </glide-core-tooltip>`);
+    component.open = true;
+    // Wait for Floating UI.
+    await aTimeout(0);
+    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
+    expect(tooltip?.checkVisibility()).to.be.true;
+});
+it('is open when `open` and enabled programmatically', async () => {
+    const component = await fixture(html `<glide-core-tooltip aria-label="Label" open disabled>
+      Tooltip
+      <span slot="target" tabindex="0">Target</span>
+    </glide-core-tooltip>`);
+    component.disabled = false;
+    // Wait for Floating UI.
+    await aTimeout(0);
+    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
+    expect(tooltip?.checkVisibility()).to.be.true;
+});
+it('is not open when `open` and disabled programmatically', async () => {
+    const component = await fixture(html `<glide-core-tooltip aria-label="Label" open>
+      Tooltip
+      <span slot="target" tabindex="0">Target</span>
+    </glide-core-tooltip>`);
+    // Wait for Floating UI.
+    await aTimeout(0);
+    component.disabled = true;
+    // Wait for Floating UI.
+    await aTimeout(0);
+    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
+    expect(tooltip?.checkVisibility()).to.be.false;
+});
+it('is not open when opened programmatically and disabled', async () => {
+    const component = await fixture(html `<glide-core-tooltip aria-label="Label" disabled>
+      Tooltip
+      <span slot="target" tabindex="0">Target</span>
+    </glide-core-tooltip>`);
+    component.open = true;
+    // Wait for Floating UI.
+    await aTimeout(0);
+    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
+    expect(tooltip?.checkVisibility()).to.be.false;
+});
 it('is visible on "focusin"', async () => {
     const component = await fixture(html `<glide-core-tooltip>
       Tooltip
       <span slot="target" tabindex="0">Target</span>
     </glide-core-tooltip>`);
     component.shadowRoot
-        ?.querySelector('[aria-labelledby="tooltip"]')
+        ?.querySelector('[data-test="target"]')
         ?.dispatchEvent(new FocusEvent('focusin'));
-    await elementUpdated(component);
-    expect(component.shadowRoot?.querySelector('[role="tooltip"]')?.checkVisibility()).to.be.true;
+    // Wait for Floating UI.
+    await aTimeout(0);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="tooltip"]')
+        ?.checkVisibility()).to.be.true;
 });
 it('is hidden on "focusin" when disabled', async () => {
     const component = await fixture(html `<glide-core-tooltip disabled>
@@ -22,25 +70,27 @@ it('is hidden on "focusin" when disabled', async () => {
       <span slot="target" tabindex="0">Target</span>
     </glide-core-tooltip>`);
     component.shadowRoot
-        ?.querySelector('[aria-labelledby="tooltip"]')
+        ?.querySelector('[data-test="target"]')
         ?.dispatchEvent(new FocusEvent('focusin'));
-    await elementUpdated(component);
-    expect(component.shadowRoot?.querySelector('[role="tooltip"]')?.checkVisibility()).to.not.be.ok;
+    // Wait for Floating UI.
+    await aTimeout(0);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="tooltip"]')
+        ?.checkVisibility()).to.be.false;
 });
 it('is hidden on "blur"', async () => {
     const component = await fixture(html `<glide-core-tooltip>
       Tooltip
       <span slot="target" tabindex="0">Target</span>
     </glide-core-tooltip>`);
-    component.shadowRoot
-        ?.querySelector('[aria-labelledby="tooltip"]')
-        ?.dispatchEvent(new FocusEvent('focusin'));
-    await elementUpdated(component);
-    component.shadowRoot
-        ?.querySelector('[aria-labelledby="tooltip"]')
-        ?.dispatchEvent(new FocusEvent('focusout'));
-    await elementUpdated(component);
-    expect(component.shadowRoot?.querySelector('[role="tooltip"]')?.checkVisibility()).to.be.false;
+    const target = component.shadowRoot?.querySelector('[data-test="target"]');
+    target?.dispatchEvent(new FocusEvent('focusin'));
+    // Wait for Floating UI.
+    await aTimeout(0);
+    target?.dispatchEvent(new FocusEvent('focusout'));
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="tooltip"]')
+        ?.checkVisibility()).to.be.false;
 });
 it('is hidden on Escape', async () => {
     const component = await fixture(html `<glide-core-tooltip>
@@ -48,54 +98,106 @@ it('is hidden on Escape', async () => {
       <span slot="target" tabindex="0">Target</span>
     </glide-core-tooltip>`);
     component.shadowRoot
-        ?.querySelector('[aria-labelledby="tooltip"]')
+        ?.querySelector('[data-test="target"]')
         ?.dispatchEvent(new FocusEvent('focusin'));
-    await elementUpdated(component);
-    // So the key is sent to the component instead of `<body>`. It's not
-    // clear why `component.focus()` doesn't focus the span when using
-    // Playwright.
+    // Wait for Floating UI.
+    await aTimeout(0);
     component.querySelector('span')?.focus();
     await sendKeys({ press: 'Escape' });
-    await elementUpdated(component);
-    expect(component.shadowRoot?.querySelector('[role="tooltip"]')?.checkVisibility()).to.be.false;
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="tooltip"]')
+        ?.checkVisibility()).to.be.false;
 });
 it('is visible on "mouseover"', async () => {
     const component = await fixture(html `<glide-core-tooltip>
       Tooltip
       <span slot="target" tabindex="0">Target</span>
     </glide-core-tooltip>`);
+    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
+    assert(tooltip);
+    tooltip.dataset.openDelay = '0';
     component.shadowRoot
         ?.querySelector('.component')
         ?.dispatchEvent(new MouseEvent('mouseover'));
-    await elementUpdated(component);
-    expect(component.shadowRoot?.querySelector('[role="tooltip"]')?.checkVisibility()).to.be.true;
+    // Wait for Floating UI and the open delay.
+    await aTimeout(0);
+    expect(tooltip.checkVisibility()).to.be.true;
 });
 it('is hidden on "mouseover" when disabled', async () => {
     const component = await fixture(html `<glide-core-tooltip disabled>
       Tooltip
       <span slot="target" tabindex="0">Target</span>
     </glide-core-tooltip>`);
+    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
+    assert(tooltip);
+    tooltip.dataset.openDelay = '0';
     component.shadowRoot
         ?.querySelector('.component')
         ?.dispatchEvent(new MouseEvent('mouseover'));
-    await elementUpdated(component);
-    expect(component.shadowRoot?.querySelector('[role="tooltip"]')?.checkVisibility()).to.not.be.ok;
+    // Wait for Floating UI.
+    await aTimeout(0);
+    expect(tooltip.checkVisibility()).to.be.false;
 });
 it('is hidden on "mouseout"', async () => {
-    const clock = sinon.useFakeTimers();
     const component = await fixture(html `<glide-core-tooltip>
       Tooltip
       <span slot="target" tabindex="0">Target</span>
     </glide-core-tooltip>`);
+    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
+    assert(tooltip);
+    tooltip.dataset.openDelay = '0';
+    component.shadowRoot
+        ?.querySelector('.component')
+        ?.dispatchEvent(new MouseEvent('mouseover'));
+    // Wait for Floating UI and the open delay.
+    await aTimeout(0);
+    tooltip.dataset.closeDelay = '0';
+    component.shadowRoot
+        ?.querySelector('.component')
+        ?.dispatchEvent(new MouseEvent('mouseout'));
+    // Wait for the close delay.
+    await aTimeout(0);
+    expect(tooltip.checkVisibility()).to.be.false;
+});
+it('remains hidden if "mouseout" fires before the "mouseover" delay', async () => {
+    const component = await fixture(html `<glide-core-tooltip>
+      Tooltip
+      <span slot="target" tabindex="0">Target</span>
+    </glide-core-tooltip>`);
+    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
+    assert(tooltip);
+    tooltip.dataset.openDelay = '1';
+    tooltip.dataset.closeDelay = '0';
     component.shadowRoot
         ?.querySelector('.component')
         ?.dispatchEvent(new MouseEvent('mouseover'));
-    await elementUpdated(component);
+    expect(tooltip?.checkVisibility()).to.be.false;
     component.shadowRoot
         ?.querySelector('.component')
         ?.dispatchEvent(new MouseEvent('mouseout'));
-    clock.tick(300);
-    await elementUpdated(component);
-    expect(component.shadowRoot?.querySelector('[role="tooltip"]')?.checkVisibility()).to.be.false;
-    clock.restore();
+    await aTimeout(1);
+    expect(tooltip.checkVisibility()).to.be.false;
+});
+// This would be better served by a visual regression test. It exists only
+// to meet our coverage threshold, so the `middlewareData.arrow.y` branch
+// is hit.
+it('positions the tooltip when `placement="right"`', async () => {
+    const component = await fixture(html `<glide-core-tooltip
+      placement="right"
+      style="align-items: center; display: flex; height: 100vh; justify-content:center; width: 100vw;"
+    >
+      Tooltip
+      <span slot="target" tabindex="0">Target</span>
+    </glide-core-tooltip>`);
+    component.shadowRoot
+        ?.querySelector('[data-test="target"]')
+        ?.dispatchEvent(new FocusEvent('focusin'));
+    // Wait for Floating UI.
+    await aTimeout(0);
+    const tooltipContainer = component.shadowRoot?.querySelector('[data-test="tooltip"]');
+    const arrow = component.shadowRoot?.querySelector('[data-test="arrow"]');
+    expect(tooltipContainer?.style.left).to.not.be.empty.string;
+    expect(tooltipContainer?.style.top).to.not.be.empty.string;
+    expect(arrow?.style.left).to.be.empty.string;
+    expect(arrow?.style.top).to.not.be.empty.string;
 });

package/dist/translations/en.js

@@ -1 +1 @@
-const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",open:"Open",selectAll:"Select all",clearEntry:"Clear entry",moreInformation:"More information",nextTab:"Next tab",notifications:"Notifications",previousTab:"Previous tab",removeTag:e=>`Remove tag: ${e}`};export default translation;
+const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",open:"Open",selectAll:"Select all",moreInformation:"More information",nextTab:"Next tab",notifications:"Notifications",previousTab:"Previous tab",announcedCharacterCount:(e,o)=>`Character count ${e} of ${o}`,displayedCharacterCount:(e,o)=>`${e}/${o}`,clearEntry:e=>`Clear ${e} entry`,removeTag:e=>`Remove tag: ${e}`,actionsFor:e=>`Actions for ${e}`};export default translation;

package/dist/translations/fr.js

@@ -1 +1 @@
-const translation={$code:"fr",$name:"French",$dir:"ltr",close:"Fermer",dismiss:"Congédier",open:"Ouvrir",selectAll:"Tout sélectionner",clearEntry:"Effacer l’entrée",moreInformation:"Plus d’informations",notifications:"Notifications",nextTab:"",previousTab:"",removeTag:e=>`Supprimer la balise : ${e}`};export default translation;
+const translation={$code:"fr",$name:"French",$dir:"ltr",close:"Fermer",dismiss:"Congédier",open:"Ouvrir",selectAll:"Tout sélectionner",moreInformation:"Plus d’informations",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",announcedCharacterCount:(r,e)=>`Character count ${r} of ${e}`,displayedCharacterCount:(r,e)=>`${r}/${e}`,clearEntry:r=>`Clear ${r} entry`,removeTag:r=>`Supprimer la balise : ${r}`,actionsFor:r=>`Actions for ${r}`};export default translation;

package/dist/translations/ja.js

@@ -1 +1 @@
-const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"無視",open:"オープン",selectAll:"すべて選択",clearEntry:"入力のクリア",moreInformation:"詳細情報",notifications:"通知",nextTab:"",previousTab:"",removeTag:e=>`タグを削除: ${e}`};export default translation;
+const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"無視",open:"オープン",selectAll:"すべて選択",moreInformation:"詳細情報",notifications:"通知",nextTab:"Next tab",previousTab:"Previous tab",announcedCharacterCount:(a,t)=>`Character count ${a} of ${t}`,displayedCharacterCount:(a,t)=>`${a}/${t}`,clearEntry:a=>`Clear ${a} entry`,removeTag:a=>`タグを削除: ${a}`,actionsFor:a=>`Actions for ${a}`};export default translation;

package/dist/tree.d.ts

@@ -6,7 +6,7 @@ declare global {
     }
 }
 /**
- * @description A tree element, containing a hierarchy of tree items
+ * @description A tree containing a hierarchy of Tree Items.
  *
  * @slot - One or more of <glide-core-tree-item>
  */
@@ -22,6 +22,5 @@ export default class GlideCoreTree extends LitElement {
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
     selectItem(item: GlideCoreTreeItem): void;
-    setContainingBlock(containingBlock: Element): void;
     constructor();
 }

package/dist/tree.item.d.ts

@@ -1,6 +1,5 @@
 import './tree.item.menu.js';
 import { LitElement } from 'lit';
-import type GlideCoreMenu from './menu.js';
 declare global {
     interface HTMLElementTagNameMap {
         'glide-core-tree-item': GlideCoreTreeItem;
@@ -24,12 +23,10 @@ export default class GlideCoreTreeItem extends LitElement {
     selected: boolean;
     removeIndentation: boolean;
     nonCollapsible: boolean;
-    menuSlotAssignedElements: GlideCoreMenu[];
-    prefixSlotAssignedElements: HTMLElement[];
     slotElements: GlideCoreTreeItem[];
     suffixSlotAssignedElements: HTMLElement[];
     firstUpdated(): void;
-    focus(): void;
+    focus(options?: FocusOptions): void;
     get hasChildTreeItems(): boolean;
     get hasExpandIcon(): boolean;
     render(): import("lit").TemplateResult<1>;
@@ -39,7 +36,6 @@ export default class GlideCoreTreeItem extends LitElement {
      * Returns the selected item
      */
     selectItem(item: GlideCoreTreeItem): GlideCoreTreeItem | undefined;
-    setContainingBlock(containingBlock: Element): void;
     toggleExpand(): void;
     private childTreeItems;
 }

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

@@ -15,6 +15,7 @@ export default class GlideCoreTreeItemIconButton extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    label: string;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/tree.item.icon-button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var l,n=arguments.length,i=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,r);else for(var s=e.length-1;s>=0;s--)(l=e[s])&&(i=(n<3?l(i):n>3?l(t,o,i):l(t,o))||i);return n>3&&i&&Object.defineProperty(t,o,i),i};import"./icon-button.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement}from"lit/decorators.js";import{owSlot}from"./library/ow.js";import styles from"./tree.item.icon-button.styles.js";let GlideCoreTreeItemIconButton=class GlideCoreTreeItemIconButton extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value)}render(){return html`<glide-core-icon-button class="component" variant="tertiary"><slot @slotchange="${this.#t}" ${ref(this.#e)}></slot></glide-core-icon-button>`}#e=createRef();#t(){owSlot(this.#e.value)}};GlideCoreTreeItemIconButton=__decorate([customElement("glide-core-tree-item-icon-button")],GlideCoreTreeItemIconButton);export default GlideCoreTreeItemIconButton;
+var __decorate=this&&this.__decorate||function(e,t,o,r){var l,n=arguments.length,i=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,r);else for(var s=e.length-1;s>=0;s--)(l=e[s])&&(i=(n<3?l(i):n>3?l(t,o,i):l(t,o))||i);return n>3&&i&&Object.defineProperty(t,o,i),i};import"./icon-button.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot}from"./library/ow.js";import styles from"./tree.item.icon-button.styles.js";let GlideCoreTreeItemIconButton=class GlideCoreTreeItemIconButton extends LitElement{constructor(){super(...arguments),this.label="",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value)}render(){return html`<glide-core-icon-button class="component" variant="tertiary" tabindex="-1" label="${this.label}"><slot @slotchange="${this.#t}" ${ref(this.#e)}></slot></glide-core-icon-button>`}#e;#t(){owSlot(this.#e.value)}};__decorate([property()],GlideCoreTreeItemIconButton.prototype,"label",void 0),GlideCoreTreeItemIconButton=__decorate([customElement("glide-core-tree-item-icon-button")],GlideCoreTreeItemIconButton);export default GlideCoreTreeItemIconButton;

package/dist/tree.item.icon-button.test.basics.js

@@ -1,6 +1,7 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreTreeItemIconButton from './tree.item.icon-button.js';
 import expectArgumentError from './library/expect-argument-error.js';
+GlideCoreTreeItemIconButton.shadowRootOptions.mode = 'open';
 it('registers', async () => {
     expect(window.customElements.get('glide-core-tree-item-icon-button')).to.equal(GlideCoreTreeItemIconButton);
 });
@@ -11,3 +12,11 @@ it('throws if it does not have a default slot', async () => {
     `);
     });
 });
+it('passes its label to the icon button', async () => {
+    const component = await fixture(html `
+    <glide-core-tree-item-icon-button label="My label"
+      >Hello</glide-core-tree-item-icon-button
+    >
+  `);
+    expect(component.shadowRoot?.querySelector('glide-core-icon-button')?.label).to.equal('My label');
+});

package/dist/tree.item.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length,l=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(s=e[n])&&(l=(r<3?s(l):r>3?s(t,i,l):s(t,i))||l);return r>3&&l&&Object.defineProperty(t,i,l),l};import"./tree.item.menu.js";import{LitElement,html}from"lit";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 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()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.#t()}focus(){this.#e.value?.focus()}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.#i)}" aria-expanded="${ifDefined(this.#o)}"><div class="${classMap({"label-container":!0})}" tabindex="-1" ${ref(this.#e)}><div style="flex-shrink: 0; width:${this.#s};"></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"></slot><slot name="suffix"></slot></div></div><div class="child-items" role="group"><slot></slot></div></div>`}selectItem(e){let t;for(const i of this.slotElements)if(e===i)i.setAttribute("selected","true"),t=i;else{i.removeAttribute("selected");const o=i.selectItem(e);o&&(t=o)}return t}setContainingBlock(e){for(const t of this.menuSlotAssignedElements)t.setContainingBlock(e)}toggleExpand(){this.expanded=!this.expanded}#e;get#o(){return this.hasChildTreeItems?this.expanded?"true":"false":void 0}get#i(){return this.hasChildTreeItems?void 0:this.selected?"true":"false"}get#s(){return 20*(this.level-1)+"px"}#t(){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({slot:"menu"})],GlideCoreTreeItem.prototype,"menuSlotAssignedElements",void 0),__decorate([queryAssignedElements({slot:"prefix"})],GlideCoreTreeItem.prototype,"prefixSlotAssignedElements",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=__decorate([customElement("glide-core-tree-item")],GlideCoreTreeItem);export default GlideCoreTreeItem;
+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;

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

@@ -19,7 +19,8 @@ export default class GlideCoreTreeItemMenu extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     placement: Placement;
+    label: string;
+    click(): void;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
-    setContainingBlock(containingBlock: Element): void;
 }

package/dist/tree.item.menu.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var r,n=arguments.length,i=n<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,l);else for(var m=e.length-1;m>=0;m--)(r=e[m])&&(i=(n<3?r(i):n>3?r(t,o,i):r(t,o))||i);return n>3&&i&&Object.defineProperty(t,o,i),i};import"./icon-button.js";import"./menu.js";import"./menu.options.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import ow from"./library/ow.js";import styles from"./tree.item.menu.styles.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.#e=createRef(),this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}render(){return html`<glide-core-menu class="component" placement="${this.placement}" ${ref(this.#t)}><glide-core-menu-options><slot @slotchange="${this.#o}" ${ref(this.#e)}></slot></glide-core-menu-options><glide-core-icon-button slot="target" variant="tertiary"><svg width="4" height="14" viewBox="0 0 4 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15Z"/><path d="M2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9C1 8.44772 1.44772 8 2 8Z"/><path d="M2 1C2.55228 1 3 1.44772 3 2C3 2.55228 2.55228 3 2 3C1.44772 3 1 2.55228 1 2C1 1.44772 1.44772 1 2 1Z"/></svg></glide-core-icon-button></glide-core-menu>`}setContainingBlock(e){ow(this.#t.value,ow.object.instanceOf(Element)),this.#t.value.setContainingBlock(e)}#e;#t;#o(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}};__decorate([property({reflect:!0})],GlideCoreTreeItemMenu.prototype,"placement",void 0),GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu")],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var n,r=arguments.length,i=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(r<3?n(i):r>3?n(t,o,i):n(t,o))||i);return r>3&&i&&Object.defineProperty(t,o,i),i};import"./icon-button.js";import"./menu.js";import"./menu.options.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import GlideCoreIconButton from"./icon-button.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./tree.item.menu.styles.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){ow(this.#t.value,ow.object.instanceOf(GlideCoreIconButton)),this.#t.value.click()}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}render(){return html`<glide-core-menu class="component" placement="${this.placement}" ${ref(this.#o)}><glide-core-menu-options><slot @slotchange="${this.#l}" ${ref(this.#e)}></slot></glide-core-menu-options><glide-core-icon-button slot="target" variant="tertiary" label="${this.label}" ${ref(this.#t)}><svg aria-hidden="true" width="4" height="14" viewBox="0 0 4 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15Z"/><path d="M2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9C1 8.44772 1.44772 8 2 8Z"/><path d="M2 1C2.55228 1 3 1.44772 3 2C3 2.55228 2.55228 3 2 3C1.44772 3 1 2.55228 1 2C1 1.44772 1.44772 1 2 1Z"/></svg></glide-core-icon-button></glide-core-menu>`}#e;#t;#o;#l(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}};__decorate([property({reflect:!0})],GlideCoreTreeItemMenu.prototype,"placement",void 0),__decorate([property()],GlideCoreTreeItemMenu.prototype,"label",void 0),GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu")],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;

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

@@ -48,3 +48,18 @@ it('can set placement of the menu', async () => {
   `);
     expect(treeItemMenu.shadowRoot?.querySelector('glide-core-menu')?.placement).to.equal('bottom-end');
 });
+it('can be opened programmatically', async () => {
+    const treeItemMenu = 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')
+        ?.getAttribute('open')).to.equal(null);
+    treeItemMenu.click();
+    await treeItemMenu.updateComplete;
+    expect(treeItemMenu.shadowRoot
+        ?.querySelector('glide-core-menu')
+        ?.getAttribute('open')).to.equal('');
+});

package/dist/tree.item.styles.js

@@ -129,11 +129,13 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       display: flex;
       flex-direction: column;
       overflow: hidden;
+      visibility: hidden;
     }
 
     .expanded {
       .child-items {
         block-size: auto;
+        visibility: visible;
       }
     }
 

package/dist/tree.item.test.basics.d.ts

@@ -1 +1,2 @@
-export {};
+import './menu.link.js';
+import './tree.item.menu.js';

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

@@ -1,7 +1,13 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
+import './menu.link.js';
+import './tree.item.menu.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import Menu from './menu.js';
 import TreeItem from './tree.item.js';
+import TreeItemMenu from './tree.item.menu.js';
 TreeItem.shadowRootOptions.mode = 'open';
+TreeItemMenu.shadowRootOptions.mode = 'open';
+Menu.shadowRootOptions.mode = 'open';
 it('registers', () => {
     expect(window.customElements.get('glide-core-tree-item')).to.equal(TreeItem);
 });
@@ -32,13 +38,49 @@ it('renders with a prefix slot', async () => {
   `);
     expect(document.querySelector('[data-prefix]')).to.be.ok;
 });
-it('renders with a menu slot', async () => {
-    await fixture(html `
+it('adds label to menu target', async () => {
+    const treeItem = 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
+        .querySelector('glide-core-tree-item-menu')
+        ?.shadowRoot?.querySelector('glide-core-menu')
+        ?.querySelector('glide-core-icon-button');
+    expect(menuTarget?.label).to.equal('Actions for Item');
+});
+it('adds Japanese label to menu', async () => {
+    document.documentElement.setAttribute('lang', 'ja');
+    const treeItem = 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
+        .querySelector('glide-core-tree-item-menu')
+        ?.shadowRoot?.querySelector('glide-core-menu')
+        ?.querySelector('glide-core-icon-button');
+    expect(menuTarget?.label).to.equal('Actions for Item');
+});
+it('adds French label to menu', async () => {
+    document.documentElement.setAttribute('lang', 'fr');
+    const treeItem = await fixture(html `
     <glide-core-tree-item label="Item">
-      <span slot="menu" data-menu>menu</span>
+      <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>
   `);
-    expect(document.querySelector('[data-menu]')).to.be.ok;
+    const menuTarget = treeItem
+        .querySelector('glide-core-tree-item-menu')
+        ?.shadowRoot?.querySelector('glide-core-menu')
+        ?.querySelector('glide-core-icon-button');
+    expect(menuTarget?.label).to.equal('Actions for Item');
 });
 it('renders with a suffix slot', async () => {
     await fixture(html `

package/dist/tree.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,s){var l,r=arguments.length,i=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,s);else for(var n=e.length-1;n>=0;n--)(l=e[n])&&(i=(r<3?l(i):r>3?l(t,o,i):l(t,o))||i);return r>3&&i&&Object.defineProperty(t,o,i),i};import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,queryAssignedElements,state}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreTreeItem from"./tree.item.js";import styles from"./tree.styles.js";let GlideCoreTree=class GlideCoreTree extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusin",this.#e),this.removeEventListener("focusout",this.#t)}firstUpdated(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}render(){return html`<div class="component" role="tree" tabindex="${this.privateTabIndex}" @click="${this.#s}" @keydown="${this.#l}"><slot @slotchange="${this.#r}" ${ref(this.#o)}></slot></div>`}selectItem(e){for(const t of this.slotElements){e===t?(t.setAttribute("selected","true"),this.selectedItem=t):t.removeAttribute("selected");const o=t.selectItem(e);o&&(this.selectedItem=o)}this.dispatchEvent(new CustomEvent("item-selected",{bubbles:!0,detail:e}))}setContainingBlock(e){for(const t of this.#i())t.setContainingBlock(e)}constructor(){super(),this.privateTabIndex=0,this.#o=createRef(),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t)}#o;#n(e){e?.focus(),this.focusedItem=e}#i(){return[...this.querySelectorAll("glide-core-tree-item")]}#d(){const e=this.#i(),t=new Set;return e.filter((e=>{const o=e.parentElement?.closest("glide-core-tree-item");return!o||o.expanded&&!t.has(o)||t.add(e),!t.has(e)}))}#s(e){const t=e.target;if(t.closest("glide-core-tree-item-icon-button")??t.closest("glide-core-tree-item-menu"))return;const o=t.closest("glide-core-tree-item");o&&(o.hasChildTreeItems&&!o.nonCollapsible?o.toggleExpand():this.selectItem(o))}#e(e){let t;e.target===this?t=this.selectedItem??this.slotElements[0]:e.target instanceof GlideCoreTreeItem&&(t=e.target,this.privateTabIndex=-1),this.#n(t)}#t(e){const t=e.relatedTarget;t&&this.contains(t)||(this.privateTabIndex=0,this.focusedItem=void 0)}#l(e){if(!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End","Enter"].includes(e.key))return;const t=this.#d(),{focusedItem:o}=this,s=t.findIndex((e=>e.matches(":focus")));if("ArrowRight"===e.key&&o?.hasChildTreeItems&&(o.expanded?this.#n(o.slotElements[0]):o.toggleExpand()),"ArrowLeft"===e.key)if(o?.expanded&&!o.nonCollapsible)o.toggleExpand();else{const e=o?.parentElement?.closest("glide-core-tree-item");this.#n(e)}"ArrowDown"===e.key&&-1!==s&&s<t.length-1&&this.#n(t[s+1]),"ArrowUp"===e.key&&s>0&&this.#n(t[s-1]),"Home"===e.key&&this.#n(t[0]),"End"===e.key&&this.#n(t.at(-1)),"Enter"===e.key&&o&&(o.hasChildTreeItems&&!o.nonCollapsible?o.toggleExpand():this.selectItem(o))}#r(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}};__decorate([state()],GlideCoreTree.prototype,"selectedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"focusedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"privateTabIndex",void 0),__decorate([queryAssignedElements()],GlideCoreTree.prototype,"slotElements",void 0),GlideCoreTree=__decorate([customElement("glide-core-tree")],GlideCoreTree);export default GlideCoreTree;
+var __decorate=this&&this.__decorate||function(e,t,o,s){var r,l=arguments.length,i=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,s);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(i=(l<3?r(i):l>3?r(t,o,i):r(t,o))||i);return l>3&&i&&Object.defineProperty(t,o,i),i};import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,queryAssignedElements,state}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreTreeItem from"./tree.item.js";import styles from"./tree.styles.js";let GlideCoreTree=class GlideCoreTree extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusin",this.#e),this.removeEventListener("focusout",this.#t)}firstUpdated(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}render(){return html`<div class="component" role="tree" tabindex="${this.privateTabIndex}" @click="${this.#s}" @keydown="${this.#r}"><slot @slotchange="${this.#l}" ${ref(this.#o)}></slot></div>`}selectItem(e){for(const t of this.slotElements){e===t?(t.setAttribute("selected","true"),this.selectedItem=t):t.removeAttribute("selected");const o=t.selectItem(e);o&&(this.selectedItem=o)}this.dispatchEvent(new CustomEvent("item-selected",{bubbles:!0,detail:e}))}constructor(){super(),this.privateTabIndex=0,this.#o=createRef(),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t)}#o;#i(e){e?.focus(),this.focusedItem=e}#n(){return[...this.querySelectorAll("glide-core-tree-item")]}#d(){const e=this.#n(),t=new Set;return e.filter((e=>{const o=e.parentElement?.closest("glide-core-tree-item");return!o||o.expanded&&!t.has(o)||t.add(e),!t.has(e)}))}#s(e){const t=e.target;if(t.closest("glide-core-tree-item-icon-button")??t.closest("glide-core-tree-item-menu"))return;const o=t.closest("glide-core-tree-item");o&&(o.hasChildTreeItems&&!o.nonCollapsible?o.toggleExpand():this.selectItem(o))}#e(e){let t;e.target===this?t=this.selectedItem?.checkVisibility({visibilityProperty:!0})?this.selectedItem:this.slotElements[0]:e.target instanceof GlideCoreTreeItem&&(t=e.target,this.privateTabIndex=-1),this.#i(t)}#t(e){e.relatedTarget&&e.relatedTarget instanceof HTMLElement&&this.contains(e.relatedTarget)||(this.privateTabIndex=0,this.focusedItem=void 0)}#r(e){if(!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End","Enter"].includes(e.key))return;if(e.target&&e.target instanceof HTMLElement&&(e.target.closest("glide-core-tree-item-icon-button")??e.target.closest("glide-core-tree-item-menu")))return;const t=this.#d(),{focusedItem:o}=this,s=t.findIndex((e=>e.matches(":focus")));if("ArrowRight"===e.key&&o?.hasChildTreeItems&&(o.expanded?this.#i(o.slotElements[0]):o.toggleExpand()),"ArrowLeft"===e.key)if(o?.expanded&&!o.nonCollapsible)o.toggleExpand();else{const e=o?.parentElement?.closest("glide-core-tree-item");this.#i(e)}"ArrowDown"===e.key&&-1!==s&&s<t.length-1&&this.#i(t[s+1]),"ArrowUp"===e.key&&s>0&&this.#i(t[s-1]),"Home"===e.key&&this.#i(t[0]),"End"===e.key&&this.#i(t.at(-1)),"Enter"===e.key&&o&&(o.hasChildTreeItems&&!o.nonCollapsible?o.toggleExpand():this.selectItem(o))}#l(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}};__decorate([state()],GlideCoreTree.prototype,"selectedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"focusedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"privateTabIndex",void 0),__decorate([queryAssignedElements()],GlideCoreTree.prototype,"slotElements",void 0),GlideCoreTree=__decorate([customElement("glide-core-tree")],GlideCoreTree);export default GlideCoreTree;

package/dist/tree.test.basics.js

@@ -117,7 +117,7 @@ it('throws if it does not have a default slot', async () => {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });
 it('throws if the default slot is the incorrect type', async () => {
     await expectArgumentError(() => {