@crowdstrike/glide-core 0.7.0 → 0.9.0

package/dist/tooltip.styles.js

@@ -1,7 +1,26 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    @keyframes tooltip {
+      from {
+        opacity: 0;
+        transform: scale(0.95);
+      }
+
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    :host {
+      display: inline-block;
+    }
+
     .component {
       /* https://github.com/CrowdStrike/glide-core/pull/119#issuecomment-2113314591 */
       display: flex;
+
+      /* https://css-tricks.com/flexbox-truncated-text/#aa-the-solution-is-min-width-0-on-the-flex-child */
+      min-inline-size: 0;
       position: relative;
     }
 
@@ -9,10 +28,13 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       background-color: transparent;
       border-width: 0;
 
-      /* Additional whitespace from line height and the tooltip won't be vertically centered. */
+      /* 
+        Additional whitespace from line height and the tooltip won't be vertically 
+        centered against its target. 
+      */
       display: flex;
 
-      /* Allows the consumer to style the target using "text-overflow: ellipsis". */
+      /* Allows the consumer to style the target with an ellipsis when its text is truncated. */
       inline-size: 100%;
       padding: 0;
       position: relative;
@@ -31,22 +53,11 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     }
 
     .tooltip {
-      background-color: var(--glide-core-surface-base-dark);
-      border-radius: var(--glide-core-spacing-xs);
-      color: var(--glide-core-text-selected);
-      display: none;
-      font-family: var(--glide-core-body-md-font-family);
-      font-style: var(--glide-core-body-md-font-style);
-      font-weight: var(--glide-core-body-md-font-weight);
-      inline-size: max-content;
-      inset-block-start: 50%;
-      inset-block-start: 0;
-      inset-inline-start: 0;
-      max-inline-size: 11.25rem;
-      overflow-wrap: break-word;
-      padding: var(--glide-core-spacing-xs) var(--glide-core-spacing-sm);
-      position: fixed;
-      z-index: 1;
+      background-color: transparent;
+      border: none;
+      inset: unset;
+      padding: 0;
+      position: absolute;
 
       ::slotted(kbd) {
         color: var(--glide-core-text-header-2);
@@ -56,16 +67,70 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         white-space: nowrap;
       }
 
-      &.visible {
-        display: unset;
+      &:popover-open {
+        animation: tooltip 250ms cubic-bezier(0.25, 0, 0.3, 1);
+        display: flex;
+
+        /* 
+          Elements with a "popover" attribute don't allow overflow. So the arrow can't
+          be positioned with "position: absolute". Relative positioning is used instead. 
+          Flex is used to get the arrow on the correct side of the tooltip. Floating UI 
+          handles the rest. 
+          
+          A simple "transform" could replace Floating UI for the arrow if not for a Chrome 
+          bug with "popover" when "scale()" is animated on the popover or a container within 
+          it. With "transform" on the arrow, the arrow is initially offset by a couple pixels 
+          before landing in the correct position when the animation finishes. It only happens 
+          when the tooltip is left or right of its target.
+        */
+
+        &.top {
+          flex-direction: column-reverse;
+        }
+
+        &.right {
+          flex-direction: row-reverse;
+        }
+
+        &.bottom {
+          flex-direction: column;
+        }
       }
     }
 
     .arrow {
-      background: var(--glide-core-surface-base-dark);
-      block-size: 0.375rem;
-      inline-size: 0.375rem;
-      position: absolute;
-      transform: rotate(45deg);
+      --arrow-height: 0.375rem;
+      --arrow-width: 0.625rem;
+
+      display: flex;
+      position: relative;
+
+      &.top,
+      &.bottom {
+        block-size: var(--arrow-height);
+        inline-size: var(--arrow-width);
+      }
+
+      &.right,
+      &.left {
+        block-size: var(--arrow-width);
+        inline-size: var(--arrow-height);
+        order: 2;
+      }
+    }
+
+    .default-slot {
+      background-color: var(--glide-core-surface-base-dark);
+      border-radius: var(--glide-core-spacing-xs);
+      color: var(--glide-core-text-selected);
+      display: block;
+      font-family: var(--glide-core-body-md-font-family);
+      font-style: var(--glide-core-body-md-font-style);
+      font-weight: var(--glide-core-body-md-font-weight);
+      inline-size: max-content;
+      inset-block-start: 50%;
+      max-inline-size: 11.25rem;
+      overflow-wrap: break-word;
+      padding: var(--glide-core-spacing-xs) var(--glide-core-spacing-sm);
     }
   `];

package/dist/tooltip.test.basics.js

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './tooltip.js';
 import { ArgumentError } from 'ow';
-import { expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreTooltip from './tooltip.js';
 import sinon from 'sinon';
 GlideCoreTooltip.shadowRootOptions.mode = 'open';
@@ -17,6 +18,31 @@ it('is accessible', async () => {
         ignoredRules: ['aria-tooltip-name'],
     });
 });
+it('has defaults', 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"]');
+    // Wait for Floating UI.
+    await aTimeout(0);
+    expect(component.offset).to.equal(4);
+    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(tooltip?.checkVisibility()).to.be.false;
+});
+it('can be open', async () => {
+    const component = await fixture(html `<glide-core-tooltip aria-label="Label" open>
+      Tooltip
+      <span slot="target" tabindex="0">Target</span>
+    </glide-core-tooltip>`);
+    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
+    // Wait for Floating UI.
+    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">
       Tooltip
@@ -38,6 +64,16 @@ it('can have a target', async () => {
         ?.assignedElements();
     expect(assignedElements?.at(0)?.textContent).to.equal('Target');
 });
+it('does not open when disabled', 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>`);
+    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
+    // Wait for Floating UI.
+    await aTimeout(0);
+    expect(tooltip?.checkVisibility()).to.be.false;
+});
 it('throws if it does not have a default slot', async () => {
     const spy = sinon.spy();
     try {
@@ -48,7 +84,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 it does not have a "target" slot', async () => {
     const spy = sinon.spy();
@@ -60,5 +96,5 @@ it('throws if it does not have a "target" slot', async () => {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });

package/dist/tooltip.test.interactions.js

@@ -1,19 +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>
@@ -21,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>
@@ -47,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",notifications:"Notifications",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,t)=>`Character count ${e} of ${t}`,displayedCharacterCount:(e,t)=>`${e}/${t}`,clearEntry:e=>`Clear ${e} entry`,removeTag:e=>`Remove tag: ${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",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:(e,r)=>`Character count ${e} of ${r}`,displayedCharacterCount:(e,r)=>`${e}/${r}`,clearEntry:e=>`Clear ${e} entry`,removeTag:e=>`Supprimer la balise : ${e}`};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:"通知",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,e)=>`Character count ${a} of ${e}`,displayedCharacterCount:(a,e)=>`${a}/${e}`,clearEntry:a=>`Clear ${a} entry`,removeTag:a=>`タグを削除: ${a}`};export default translation;

package/dist/tree.d.ts

@@ -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,6 @@
 import './tree.item.menu.js';
 import { LitElement } from 'lit';
-import GlideCoreMenu from './menu.js';
+import type GlideCoreMenu from './menu.js';
 declare global {
     interface HTMLElementTagNameMap {
         'glide-core-tree-item': GlideCoreTreeItem;
@@ -29,7 +29,7 @@ export default class GlideCoreTreeItem extends LitElement {
     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 +39,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.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 GlideCoreMenu from"./menu.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 __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length,l=s<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 d=e.length-1;d>=0;d--)(r=e[d])&&(l=(s<3?r(l):s>3?r(t,i,l):r(t,i))||l);return s>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(e){this.#e.value?.focus(e)}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.#r};"></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}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#r(){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;

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

@@ -21,5 +21,4 @@ export default class GlideCoreTreeItemMenu extends LitElement {
     placement: Placement;
     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 GlideCoreMenu from"./menu.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,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"./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 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>`}#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;

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import TreeItem from './tree.item.js';
 TreeItem.shadowRootOptions.mode = 'open';

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 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}))}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??this.slotElements[0]:e.target instanceof GlideCoreTreeItem&&(t=e.target,this.privateTabIndex=-1),this.#i(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.#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))}#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;

package/dist/tree.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './tree.item.icon-button.js';
 import './tree.item.js';
 import './tree.js';
@@ -116,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(() => {

package/dist/tree.test.events.js

@@ -1,7 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './tree.item.menu.js';
 import './tree.js';
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
-import GlideCoreTree from './tree.js';
 import GlideCoreTreeItem from './tree.item.js';
 it('dispatches an "item-selected" event when an item is clicked', async () => {
     const component = await fixture(html `