@crowdstrike/glide-core 0.5.1 → 0.6.0

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

@@ -1,4 +1,4 @@
-"use strict";import{css as o}from"lit";export default[o`
+import{css}from"lit";export default[css`
     .component {
       display: flex;
 
@@ -6,4 +6,4 @@
       --hovered-icon-color: var(--hovered-icon-button-color);
       --size: 1rem;
     }
-  `];
+  `];

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

@@ -0,0 +1,13 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreTreeItemIconButton from './tree.item.icon-button.js';
+import expectArgumentError from './library/expect-argument-error.js';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-tree-item-icon-button')).to.equal(GlideCoreTreeItemIconButton);
+});
+it('throws if it does not have a default slot', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `
+      <glide-core-tree-item-icon-button></glide-core-tree-item-icon-button>
+    `);
+    });
+});

package/dist/tree.item.js

@@ -1 +1 @@
-"use strict";var N=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var l=(i,s,t,o)=>{for(var n=o>1?void 0:o?O(s,t):s,r=i.length-1,b;r>=0;r--)(b=i[r])&&(n=(o?b(s,t,n):b(n))||n);return o&&n&&N(s,t,n),n};var A=(i,s,t)=>{if(!s.has(i))throw TypeError("Cannot "+t)};var d=(i,s,t)=>(A(i,s,"read from private field"),t?t.call(i):s.get(i)),a=(i,s,t)=>{if(s.has(i))throw TypeError("Cannot add the same private member more than once");s instanceof WeakSet?s.add(i):s.set(i,t)};var h=(i,s,t)=>(A(i,s,"access private method"),t);var f,p,H,x,I,g,R,v,k,S,B,E,P,$,T;import"./tree.item.menu.js";import{LitElement as w,html as y}from"lit";import{classMap as M}from"lit/directives/class-map.js";import{createRef as j,ref as q}from"lit/directives/ref.js";import{customElement as D,property as c,queryAssignedElements as m,state as u}from"lit/decorators.js";import{ifDefined as L}from"lit/directives/if-defined.js";import{when as F}from"lit/directives/when.js";import U from"./tree.item.styles.js";let e=class extends w{constructor(){super(...arguments);a(this,p);a(this,x);a(this,g);a(this,v);a(this,S);a(this,E);a(this,$);this.expanded=!1;this.label="";this.level=1;this.selected=!1;this.childTreeItems=[];this.hasMenuSlot=!1;this.hasPrefixSlot=!1;this.hasSuffixSlot=!1;a(this,f,j())}firstUpdated(){h(this,$,T).call(this)}focus(){d(this,f).value?.focus()}get hasChildTreeItems(){return this.childTreeItems.length>0}render(){return y`<div class="${M({component:!0,expanded:this.expanded,selected:this.selected})}" role="treeitem" aria-label="${this.label}" aria-selected="${L(d(this,x,I))}" aria-expanded="${L(d(this,p,H))}"><div class="${M({"label-container":!0})}" tabindex="-1" ${q(d(this,f))}><div style="width:${d(this,g,R)};"></div><div class="expand-icon-container">${F(this.hasChildTreeItems,()=>y`<div><svg aria-hidden="true" class="${M({"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" @slotchange="${h(this,S,B)}"></slot><div class="label">${this.label}</div><slot name="menu" @slotchange="${h(this,v,k)}"></slot><slot name="suffix" @slotchange="${h(this,E,P)}"></slot></div><div class="child-items" role="group"><slot></slot></div></div>`}selectItem(t){let o;for(const n of this.slotElements)if(t===n)n.setAttribute("selected","true"),o=n;else{n.removeAttribute("selected");const r=n.selectItem(t);r&&(o=r)}return o}toggleExpand(){this.expanded=!this.expanded}};f=new WeakMap,p=new WeakSet,H=function(){if(this.hasChildTreeItems)return this.expanded?"true":"false"},x=new WeakSet,I=function(){if(!this.hasChildTreeItems)return this.selected?"true":"false"},g=new WeakSet,R=function(){return`${(this.level-1)*20}px`},v=new WeakSet,k=function(){this.hasMenuSlot=this.menuSlotAssignedElements.length>0},S=new WeakSet,B=function(){this.hasPrefixSlot=this.prefixSlotAssignedElements.length>0},E=new WeakSet,P=function(){this.hasSuffixSlot=this.suffixSlotAssignedElements.length>0},$=new WeakSet,T=function(){const t=[];for(const o of this.slotElements)o.level=this.level+1,t.push(o);this.childTreeItems=t},e.shadowRootOptions={...w.shadowRootOptions,delegatesFocus:!0,mode:"closed"},e.styles=U,l([c({type:Boolean})],e.prototype,"expanded",2),l([c({reflect:!0})],e.prototype,"label",2),l([c({type:Number})],e.prototype,"level",2),l([c({type:Boolean})],e.prototype,"selected",2),l([m({slot:"menu"})],e.prototype,"menuSlotAssignedElements",2),l([m({slot:"prefix"})],e.prototype,"prefixSlotAssignedElements",2),l([m()],e.prototype,"slotElements",2),l([m({slot:"suffix"})],e.prototype,"suffixSlotAssignedElements",2),l([u()],e.prototype,"childTreeItems",2),l([u()],e.prototype,"hasMenuSlot",2),l([u()],e.prototype,"hasPrefixSlot",2),l([u()],e.prototype,"hasSuffixSlot",2),e=l([D("glide-core-tree-item")],e);export{e as default};
+var __decorate=this&&this.__decorate||function(e,t,s,i){var o,r=arguments.length,l=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,s,i);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(l=(r<3?o(l):r>3?o(t,s,l):o(t,s))||l);return r>3&&l&&Object.defineProperty(t,s,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.childTreeItems=[],this.hasMenuSlot=!1,this.hasPrefixSlot=!1,this.hasSuffixSlot=!1,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}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.#i)}"><div class="${classMap({"label-container":!0})}" tabindex="-1" ${ref(this.#e)}><div style="flex-shrink: 0; width:${this.#o};"></div><div class="expand-icon-container">${when(this.hasChildTreeItems,(()=>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" @slotchange="${this.#r}"></slot><div class="label">${this.label}</div><div class="icon-container"><slot name="menu" @slotchange="${this.#l}"></slot><slot name="suffix" @slotchange="${this.#n}"></slot></div></div><div class="child-items" role="group"><slot></slot></div></div>`}selectItem(e){let t;for(const s of this.slotElements)if(e===s)s.setAttribute("selected","true"),t=s;else{s.removeAttribute("selected");const i=s.selectItem(e);i&&(t=i)}return t}setContainingBlock(e){for(const t of this.menuSlotAssignedElements)t.setContainingBlock(e)}toggleExpand(){this.expanded=!this.expanded}#e;get#i(){return this.hasChildTreeItems?this.expanded?"true":"false":void 0}get#s(){return this.hasChildTreeItems?void 0:this.selected?"true":"false"}get#o(){return 20*(this.level-1)+"px"}#l(){this.hasMenuSlot=this.menuSlotAssignedElements.length>0}#r(){this.hasPrefixSlot=this.prefixSlotAssignedElements.length>0}#n(){this.hasSuffixSlot=this.suffixSlotAssignedElements.length>0}#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([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),__decorate([state()],GlideCoreTreeItem.prototype,"hasMenuSlot",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"hasPrefixSlot",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"hasSuffixSlot",void 0),GlideCoreTreeItem=__decorate([customElement("glide-core-tree-item")],GlideCoreTreeItem);export default GlideCoreTreeItem;

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

@@ -1,5 +1,6 @@
 import './icon-button.js';
 import './menu.js';
+import './menu.options.js';
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
@@ -18,4 +19,5 @@ export default class GlideCoreTreeItemMenu extends LitElement {
     static styles: import("lit").CSSResult[];
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
+    setContainingBlock(containingBlock: Element): void;
 }

package/dist/tree.item.menu.js

@@ -1 +1 @@
-"use strict";var E=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var h=(o,t,e,a)=>{for(var i=a>1?void 0:a?R(t,e):t,m=o.length-1,d;m>=0;m--)(d=o[m])&&(i=(a?d(t,e,i):d(i))||i);return a&&i&&E(t,e,i),i};var p=(o,t,e)=>{if(!t.has(o))throw TypeError("Cannot "+e)};var s=(o,t,e)=>(p(o,t,"read from private field"),e?e.call(o):t.get(o)),c=(o,t,e)=>{if(t.has(o))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(o):t.set(o,e)};var f=(o,t,e)=>(p(o,t,"access private method"),e);var r,n,S;import"./icon-button.js";import"./menu.js";import{LitElement as u,html as y}from"lit";import{createRef as L,ref as M}from"lit/directives/ref.js";import{customElement as b}from"lit/decorators.js";import{owSlot as g,owSlotType as v}from"./library/ow.js";import C from"./menu.button.js";import w from"./menu.link.js";import k from"./tree.item.menu.styles.js";let l=class extends u{constructor(){super(...arguments);c(this,n);c(this,r,L())}firstUpdated(){g(s(this,r).value),v(s(this,r).value,[C,w])}render(){return y`<glide-core-menu class="component"><slot @slotchange="${f(this,n,S)}" ${M(s(this,r))}></slot><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>`}};r=new WeakMap,n=new WeakSet,S=function(){g(s(this,r).value),v(s(this,r).value,[C,w])},l.shadowRootOptions={...u.shadowRootOptions,mode:"closed"},l.styles=k,l=h([b("glide-core-tree-item-menu")],l);export{l as default};
+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}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 styles from"./tree.item.menu.styles.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{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" ${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){this.#t.value.setContainingBlock(e)}#e=createRef();#t=createRef();#o(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}};GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu")],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;

package/dist/tree.item.menu.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as o}from"lit";export default[o`
+import{css}from"lit";export default[css`
     :host {
       display: contents;
     }
@@ -14,4 +14,4 @@
       --hovered-icon-color: var(--hovered-icon-button-color);
       --size: 1rem;
     }
-  `];
+  `];

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

@@ -0,0 +1,33 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import GlideCoreTreeItemMenu from './tree.item.menu.js';
+import expectArgumentError from './library/expect-argument-error.js';
+import sinon from 'sinon';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-tree-item-menu')).to.equal(GlideCoreTreeItemMenu);
+});
+it('throws if it does not have a default slot', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `
+      <glide-core-tree-item-menu></glide-core-tree-item-menu>
+    `);
+    });
+});
+it('throws if the default slot is the incorrect type', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `
+      <glide-core-tree-item-menu>
+        <button>Button</button>
+      </glide-core-tree-item-menu>
+    `);
+    });
+    // Menu is rendered asynchronously outside of Tree Menu Item's lifecycle
+    // and asserts against its default slot. That assertion, which is expected
+    // to fail in this case, results in an unhandled rejection that gets logged.
+    // `console.error` is stubbed so the logs aren't muddied.
+    const stub = sinon.stub(console, 'error');
+    // Menu asserts against its default slot once on `firstUpdated` and again
+    // on "slotchange". So we wait until the stub is called twice before restoring
+    // it.
+    await waitUntil(() => stub.calledTwice);
+    stub.restore();
+});

package/dist/tree.item.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"lit";export default[e`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
     :host {
       cursor: pointer;
       display: flex;
@@ -20,6 +20,7 @@
     }
 
     .expand-icon-container {
+      flex-shrink: 0;
       min-inline-size: 1.5625rem;
     }
 
@@ -43,7 +44,7 @@
 
     .label-container {
       align-items: center;
-      border-radius: 0.625rem;
+      border-radius: 0.5rem;
       color: var(--color);
       display: flex;
       font-size: var(--glide-core-body-sm-font-size);
@@ -63,10 +64,15 @@
       }
 
       &:focus-visible {
-        outline: var(--glide-core-border-primary);
-        outline-offset: -1px;
-        outline-style: auto;
-        outline-width: 2px;
+        ${focusOutline};
+
+        /* The outline is inside the component since children have overflow hidden */
+        outline-offset: -2px;
+
+        .component.selected & {
+          outline: 1px solid var(--glide-core-icon-selected);
+          outline-offset: -3px;
+        }
       }
 
       .component.selected & {
@@ -112,7 +118,10 @@
     }
 
     .label {
-      flex-grow: 1;
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     .child-items {
@@ -127,4 +136,10 @@
         block-size: auto;
       }
     }
-  `];
+
+    .icon-container {
+      display: flex;
+      flex: 1;
+      justify-content: flex-end;
+    }
+  `];

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

@@ -0,0 +1,102 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import TreeItem from './tree.item.js';
+TreeItem.shadowRootOptions.mode = 'open';
+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 `
+    <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);
+});
+it('renders with a prefix slot', async () => {
+    await fixture(html `
+    <glide-core-tree-item label="Item">
+      <span slot="prefix" data-prefix>prefix</span>
+    </glide-core-tree-item>
+  `);
+    expect(document.querySelector('[data-prefix]')).to.be.ok;
+});
+it('renders with a menu slot', async () => {
+    await fixture(html `
+    <glide-core-tree-item label="Item">
+      <span slot="menu" data-menu>menu</span>
+    </glide-core-tree-item>
+  `);
+    expect(document.querySelector('[data-menu]')).to.be.ok;
+});
+it('renders with a suffix slot', async () => {
+    await fixture(html `
+    <glide-core-tree-item label="Item">
+      <span slot="suffix" data-suffix>suffix</span>
+    </glide-core-tree-item>
+  `);
+    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 `
+    <glide-core-tree-item label="Item"></glide-core-tree-item>
+  `);
+    expect(treeItem.shadowRoot?.querySelector('.expand-icon')).to.equal(null);
+});
+it('can expand', async () => {
+    const treeItem = 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,
+    ]).to.deep.equal(['component']);
+    expect([
+        ...treeItem.shadowRoot.querySelector('.expand-icon').classList,
+    ]).to.deep.equal(['expand-icon']);
+    treeItem.toggleExpand();
+    await treeItem.updateComplete;
+    expect([
+        ...treeItem.shadowRoot.querySelector('.component').classList,
+    ]).to.deep.equal(['component', 'expanded']);
+    expect([
+        ...treeItem.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 `
+    <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">
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+    </glide-core-tree-item>
+  `);
+    expect(treeItem.shadowRoot?.querySelector('.expand-icon')).to.be.ok;
+    const childItems = treeItem.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('can select child and grandchild items', async () => {
+    const treeItem = 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">
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+    </glide-core-tree-item>
+  `);
+    const childItems = treeItem.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);
+});

package/dist/tree.js

@@ -1 +1 @@
-"use strict";var O=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var f=(r,o,e,t)=>{for(var s=t>1?void 0:t?D(o,e):o,l=r.length-1,h;l>=0;l--)(h=r[l])&&(s=(t?h(o,e,s):h(s))||s);return t&&s&&O(o,e,s),s};var A=(r,o,e)=>{if(!o.has(r))throw TypeError("Cannot "+e)};var u=(r,o,e)=>(A(r,o,"read from private field"),e?e.call(r):o.get(r)),d=(r,o,e)=>{if(o.has(r))throw TypeError("Cannot add the same private member more than once");o instanceof WeakSet?o.add(r):o.set(r,e)};var i=(r,o,e)=>(A(r,o,"access private method"),e);var m,c,a,g,F,E,R,v,H,I,y,p,k,w,M,T,$;import{LitElement as L,html as U}from"lit";import{createRef as q,ref as K}from"lit/directives/ref.js";import{customElement as N,queryAssignedElements as j,state as b}from"lit/decorators.js";import{owSlot as S,owSlotType as C}from"./library/ow.js";import x from"./tree.item.js";import z from"./tree.styles.js";let n=class extends L{constructor(){super();d(this,c);d(this,g);d(this,E);d(this,v);d(this,I);d(this,p);d(this,w);d(this,T);this.privateTabIndex=0;d(this,m,q());this.addEventListener("focusin",i(this,I,y)),this.addEventListener("focusout",i(this,p,k))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusin",i(this,I,y)),this.removeEventListener("focusout",i(this,p,k))}firstUpdated(){S(u(this,m).value),C(u(this,m).value,[x])}render(){return U`<div class="component" role="tree" tabindex="${this.privateTabIndex}" @click="${i(this,v,H)}" @keydown="${i(this,w,M)}"><slot @slotchange="${i(this,T,$)}" ${K(u(this,m))}></slot></div>`}selectItem(e){for(const t of this.slotElements)if(e===t)t.setAttribute("selected","true"),this.selectedItem=t;else{t.removeAttribute("selected");const s=t.selectItem(e);s&&(this.selectedItem=s)}this.dispatchEvent(new CustomEvent("item-selected",{bubbles:!0,detail:e}))}};m=new WeakMap,c=new WeakSet,a=function(e){e?.focus(),this.focusedItem=e},g=new WeakSet,F=function(){return[...this.querySelectorAll("glide-core-tree-item")]},E=new WeakSet,R=function(){const e=i(this,g,F).call(this),t=new Set;return e.filter(s=>{const l=s.parentElement?.closest("glide-core-tree-item");return l&&(!l.expanded||t.has(l))&&t.add(s),!t.has(s)})},v=new WeakSet,H=function(e){const t=e.target;if(t.closest("glide-core-tree-item-icon-button")??t.closest("glide-core-tree-item-menu"))return;const s=t.closest("glide-core-tree-item");s&&(s.hasChildTreeItems?s.toggleExpand():this.selectItem(s))},I=new WeakSet,y=function(e){let t;e.target===this?t=this.selectedItem??this.slotElements[0]:e.target instanceof x&&(t=e.target,this.privateTabIndex=-1),i(this,c,a).call(this,t)},p=new WeakSet,k=function(e){const t=e.relatedTarget;(!t||!this.contains(t))&&(this.privateTabIndex=0,this.focusedItem=void 0)},w=new WeakSet,M=function(e){if(!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End","Enter"].includes(e.key))return;const t=i(this,E,R).call(this),{focusedItem:s}=this,l=t.findIndex(h=>h.matches(":focus"));if(e.key==="ArrowRight"&&s?.hasChildTreeItems&&(s.expanded?i(this,c,a).call(this,s.slotElements[0]):s.toggleExpand()),e.key==="ArrowLeft")if(s?.expanded)s.toggleExpand();else{const h=s?.parentElement?.closest("glide-core-tree-item");i(this,c,a).call(this,h)}e.key==="ArrowDown"&&l!==-1&&l<t.length-1&&i(this,c,a).call(this,t[l+1]),e.key==="ArrowUp"&&l>0&&i(this,c,a).call(this,t[l-1]),e.key==="Home"&&i(this,c,a).call(this,t[0]),e.key==="End"&&i(this,c,a).call(this,t.at(-1)),e.key==="Enter"&&s&&(s.hasChildTreeItems?s.toggleExpand():this.selectItem(s))},T=new WeakSet,$=function(){S(u(this,m).value),C(u(this,m).value,[x])},n.shadowRootOptions={...L.shadowRootOptions,mode:"closed"},n.styles=z,f([b()],n.prototype,"selectedItem",2),f([b()],n.prototype,"focusedItem",2),f([b()],n.prototype,"privateTabIndex",2),f([j()],n.prototype,"slotElements",2),n=f([N("glide-core-tree")],n);export{n as default};
+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)if(e===t)t.setAttribute("selected","true"),this.selectedItem=t;else{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.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)}#r(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.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.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.stories.d.ts

@@ -1,5 +1,6 @@
 import './icon-button.js';
 import './icons/storybook.js';
+import './menu.link.js';
 import './tree.item.icon-button.js';
 import './tree.item.js';
 import './tree.js';

package/dist/tree.styles.js

@@ -1,7 +1,7 @@
-"use strict";import{css as o}from"lit";export default[o`
+import{css}from"lit";export default[css`
     .component {
       font-family: var(--glide-core-body-sm-font-family);
       font-style: var(--glide-core-body-sm-font-style);
       font-weight: var(--glide-core-body-sm-font-weight);
     }
-  `];
+  `];

package/dist/tree.test.aria.js

@@ -0,0 +1,86 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreTree from './tree.js';
+import GlideCoreTreeItem from './tree.item.js';
+GlideCoreTree.shadowRootOptions.mode = 'open';
+GlideCoreTreeItem.shadowRootOptions.mode = 'open';
+it('is accessible', async () => {
+    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">
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    await expect(component).to.be.accessible();
+});
+it('sets roles tree and treeitem', async () => {
+    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">
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = component.slotElements;
+    expect(component.shadowRoot?.firstElementChild?.getAttribute('role')).to.equal('tree');
+    expect(childItems[0].shadowRoot?.querySelector('.component')?.getAttribute('role')).to.equal('treeitem');
+    expect(childItems[1].shadowRoot?.querySelector('.component')?.getAttribute('role')).to.equal('treeitem');
+    expect(childItems[1].slotElements[0].shadowRoot
+        ?.querySelector('.component')
+        ?.getAttribute('role')).to.equal('treeitem');
+});
+it('sets aria-expanded correctly', async () => {
+    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">
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+      <glide-core-tree-item label="Expanded child item" expanded>
+        <glide-core-tree-item label="Grandchild Item 2"></glide-core-tree-item>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = component.slotElements;
+    expect(childItems[0].getAttribute('aria-expanded')).to.equal(null, 'does not set at all if there are no child items');
+    expect(childItems[1].shadowRoot
+        ?.querySelector('.component')
+        ?.getAttribute('aria-expanded')).to.equal('false', 'sets to string "false" if not expanded');
+    childItems[1].toggleExpand();
+    await childItems[1].updateComplete;
+    expect(childItems[1].shadowRoot
+        ?.querySelector('.component')
+        ?.getAttribute('aria-expanded')).to.equal('true', 'sets to string "true" after being expanded');
+    expect(childItems[2].shadowRoot
+        ?.querySelector('.component')
+        ?.getAttribute('aria-expanded')).to.equal('true', 'sets to string "true" if starts as expanded');
+});
+it('sets aria-selected correctly', async () => {
+    const component = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1">
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+      <glide-core-tree-item label="Child Item 2"></glide-core-tree-item>
+      <glide-core-tree-item
+        label="Child Item 3"
+        selected
+      ></glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = component.slotElements;
+    expect(childItems[0].getAttribute('aria-selected')).to.equal(null, 'does not set at all if there are child items');
+    expect(childItems[1].shadowRoot
+        ?.querySelector('.component')
+        ?.getAttribute('aria-selected')).to.equal('false', 'sets to string "false" if not selected');
+    expect(childItems[2].shadowRoot
+        ?.querySelector('.component')
+        ?.getAttribute('aria-selected')).to.equal('true', 'sets to string "true" if starts as selected');
+    component.selectItem(childItems[1]);
+    await childItems[1].updateComplete;
+    expect(childItems[1].shadowRoot
+        ?.querySelector('.component')
+        ?.getAttribute('aria-selected')).to.equal('true', 'sets to string "true" after being selected');
+});

package/dist/tree.test.basics.js

@@ -0,0 +1,123 @@
+import './tree.item.icon-button.js';
+import './tree.item.js';
+import './tree.js';
+import { ArgumentError } from 'ow';
+import { assert, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreTree from './tree.js';
+import expectArgumentError from './library/expect-argument-error.js';
+import sinon from 'sinon';
+GlideCoreTree.shadowRootOptions.mode = 'open';
+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 `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item"></glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    expect(tree.selectedItem).to.equal(undefined);
+});
+it('can select child and grandchild items', async () => {
+    const tree = 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">
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.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]);
+});
+it('can click child and grandchild items to expand or select them', async () => {
+    const tree = 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">
+        <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.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);
+    // Clicking an item that has children expands it
+    childItems[1].click();
+    expect(childItems[1].expanded).to.equal(true);
+    // Can click and select a grandchild item
+    grandchildItems[0].click();
+    expect(grandchildItems[0].selected).to.equal(true);
+});
+it('does not select an item if a tree-item-icon-button is clicked', async () => {
+    const tree = 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>
+          <svg viewBox="0 0 24 24">
+            <path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+          </svg>
+        </glide-core-tree-item-icon-button>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    const iconButton = childItems[0].querySelector('[data-test-icon-button]');
+    assert(iconButton);
+    iconButton.click();
+    await iconButton.updateComplete;
+    expect(childItems[0].selected).to.equal(false);
+});
+it('does not select an item if its menu slot is clicked', async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1">
+        <glide-core-tree-item-menu slot="menu" data-test-menu>
+          <glide-core-menu-link label="Edit" url="/edit"></glide-core-menu-link>
+        </glide-core-tree-item-menu>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    const menu = childItems[0].querySelector('[data-test-menu]');
+    assert(menu);
+    menu.click();
+    await menu.updateComplete;
+    expect(childItems[0].selected).to.equal(false);
+});
+it('throws if it does not have a default slot', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `<glide-core-tree></glide-core-tree>`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});
+it('throws if the default slot is the incorrect type', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `
+      <glide-core-tree>
+        <button>Button</button>
+      </glide-core-tree>
+    `);
+    });
+});

package/dist/tree.test.events.js

@@ -0,0 +1,19 @@
+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 `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item"></glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    setTimeout(() => {
+        component.querySelector('glide-core-tree-item')?.click();
+    });
+    const event = await oneEvent(component, 'item-selected');
+    expect(event instanceof CustomEvent).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.detail instanceof GlideCoreTreeItem).to.be.true;
+});