@crowdstrike/glide-core 0.5.1 → 0.5.2

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}))}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.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)}#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.#i(o.slotElements[0]):o.toggleExpand()),"ArrowLeft"===e.key)if(o?.expanded)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.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.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;
+});

package/dist/tree.test.focus.js

@@ -0,0 +1,261 @@
+import './tree.js';
+import { assert, expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreTree from './tree.js';
+import GlideCoreTreeItem from './tree.item.js';
+import GlideCoreTreeItemIconButton from './tree.item.icon-button.js';
+import GlideCoreTreeItemMenu from './tree.item.menu.js';
+GlideCoreTree.shadowRootOptions.mode = 'open';
+it('focuses the first tree item when tree is focused, if there are no selected items', async () => {
+    const tree = 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>
+  `);
+    tree.dispatchEvent(new Event('focusin'));
+    const childItems = tree.slotElements;
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[0].label);
+});
+it('focuses the selected tree item on `focus()`, if there is one', 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>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    tree.selectItem(childItems[1]);
+    tree.dispatchEvent(new Event('focusin'));
+    await tree.updateComplete;
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[1].label);
+});
+it('expands a tree item if right arrow is pressed', async () => {
+    const tree = 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>
+  `);
+    const childItems = tree.slotElements;
+    tree.dispatchEvent(new Event('focusin'));
+    await sendKeys({ press: 'ArrowRight' });
+    expect(childItems[0].expanded).to.equal(true);
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[0].label, 'focus does not move');
+});
+it(`focuses on an expanded tree item's child if right arrow is pressed`, async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1" expanded>
+        <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>
+  `);
+    const childItems = tree.slotElements;
+    tree.dispatchEvent(new Event('focusin'));
+    await sendKeys({ press: 'ArrowRight' });
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[0].slotElements[0].label);
+});
+it('collapses an expanded tree item if left arrow is pressed', async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1" expanded>
+        <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>
+  `);
+    const childItems = tree.slotElements;
+    tree.dispatchEvent(new Event('focusin'));
+    await sendKeys({ press: 'ArrowLeft' });
+    expect(childItems[0].expanded).to.equal(false);
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[0].label, 'focus does not move');
+});
+it(`focuses on a collapsed tree item's parent if left arrow is pressed`, async () => {
+    const tree = 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>
+  `);
+    const childItems = tree.slotElements;
+    const grandchildItems = childItems[0].slotElements;
+    grandchildItems[0].focus();
+    await sendKeys({ press: 'ArrowLeft' });
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[0].label);
+});
+it('moves down the non-expanded tree items with down arrow', async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1" expanded>
+        <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 label="Grandchild Item 2"></glide-core-tree-item>
+      </glide-core-tree-item>
+      <glide-core-tree-item label="Child Item 3"></glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    tree.dispatchEvent(new Event('focusin'));
+    await sendKeys({ press: 'ArrowDown' });
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[0].slotElements[0].label, 'moves to child item if expanded');
+    await sendKeys({ press: 'ArrowDown' });
+    expect(document.activeElement?.label).to.equal(childItems[1].label, 'moves from last child for next parent');
+    await sendKeys({ press: 'ArrowDown' });
+    expect(document.activeElement?.label).to.equal(childItems[2].label, 'Does not navigate to collapsed tree items');
+    await sendKeys({ press: 'ArrowDown' });
+    expect(document.activeElement?.label).to.equal(childItems[2].label, 'Does not move if at the last item');
+});
+it('moves up the non-expanded tree items with up arrow', async () => {
+    const tree = 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" expanded>
+        <glide-core-tree-item label="Grandchild Item 2"></glide-core-tree-item>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    // Start at the last item
+    childItems[1].slotElements[0].focus();
+    await sendKeys({ press: 'ArrowUp' });
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[1].label);
+    await sendKeys({ press: 'ArrowUp' });
+    expect(document.activeElement?.label).to.equal(childItems[0].label, 'Does not navigate to collapsed tree items');
+    await sendKeys({ press: 'ArrowUp' });
+    expect(document.activeElement?.label).to.equal(childItems[0].label, 'Does not move if at the first item');
+});
+it('moves to the first item when Home is pressed', async () => {
+    const tree = 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" expanded>
+        <glide-core-tree-item label="Grandchild Item 2"></glide-core-tree-item>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    // Start at the last item
+    childItems[1].slotElements[0].focus();
+    await sendKeys({ press: 'Home' });
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[0].label);
+});
+it('moves to the last item when End is pressed', async () => {
+    const tree = 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" expanded>
+        <glide-core-tree-item label="Grandchild Item 2"></glide-core-tree-item>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    // Start at the first item
+    childItems[0].focus();
+    await sendKeys({ press: 'End' });
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[1].slotElements[0].label);
+});
+it('selects or expands/collapses node when Enter is pressed', 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;
+    // For an item that doesn't have children, selects it
+    childItems[0].focus();
+    await sendKeys({ press: 'Enter' });
+    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);
+    // For an item that has children, expands it
+    childItems[1].focus();
+    await sendKeys({ press: 'Enter' });
+    expect(childItems[1].expanded).to.equal(true);
+    // Can select a grandchild item
+    grandchildItems[0].focus();
+    await sendKeys({ press: 'Enter' });
+    expect(grandchildItems[0].selected).to.equal(true);
+});
+it('does nothing if some other key is pressed', async () => {
+    const tree = 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" expanded>
+        <glide-core-tree-item label="Grandchild Item 2"></glide-core-tree-item>
+      </glide-core-tree-item>
+    </glide-core-tree>
+  `);
+    const childItems = tree.slotElements;
+    // Start at the first item
+    childItems[0].focus();
+    await sendKeys({ press: 'a' });
+    assert(document.activeElement instanceof GlideCoreTreeItem);
+    expect(document.activeElement?.label).to.equal(childItems[0].label);
+});
+it('can use the keyboard to navigate to a tree item icon button', 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">
+          <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>
+  `);
+    tree.dispatchEvent(new Event('focusin'));
+    const childItems = tree.slotElements;
+    childItems[0].focus();
+    await sendKeys({ press: 'Tab' });
+    assert(document.activeElement instanceof GlideCoreTreeItemIconButton);
+});
+it('can use the keyboard to navigate to a tree item menu', async () => {
+    const tree = await fixture(html `
+    <glide-core-tree>
+      <glide-core-tree-item label="Child Item 1">
+        <glide-core-tree-item-menu slot="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>
+  `);
+    tree.dispatchEvent(new Event('focusin'));
+    const childItems = tree.slotElements;
+    childItems[0].focus();
+    await sendKeys({ press: 'Tab' });
+    assert(document.activeElement instanceof GlideCoreTreeItemMenu);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "CrowdStrike's Glide Design System components package for providing web components",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",
@@ -45,15 +45,15 @@
     "@eslint/js": "^8.56.0",
     "@open-wc/testing": "^3.2.2",
     "@rollup/plugin-commonjs": "^25.0.7",
-    "@storybook/addon-essentials": "^8.0.9",
-    "@storybook/addon-links": "^8.0.9",
-    "@storybook/blocks": "^8.0.9",
-    "@storybook/core-events": "^8.0.9",
-    "@storybook/manager-api": "^8.1.1",
-    "@storybook/preview-api": "^8.0.9",
-    "@storybook/theming": "^8.1.1",
-    "@storybook/web-components": "^8.0.9",
-    "@storybook/web-components-vite": "^8.0.9",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/core-events": "^8.1.11",
+    "@storybook/manager-api": "^8.1.11",
+    "@storybook/preview-api": "^8.1.11",
+    "@storybook/theming": "^8.1.11",
+    "@storybook/web-components": "^8.1.11",
+    "@storybook/web-components-vite": "^8.1.11",
     "@stylistic/eslint-plugin": "^1.7.0",
     "@types/mocha": "^10.0.6",
     "@types/sinon": "^17.0.3",
@@ -83,14 +83,16 @@
     "postcss": "^8.4.38",
     "postcss-lit": "^1.1.1",
     "prettier": "3.1.0",
+    "rimraf": "^5.0.7",
     "sinon": "^17.0.1",
-    "storybook": "^8.0.9",
+    "storybook": "^8.1.11",
     "stylelint": "^16.3.1",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-order": "^6.0.4",
     "stylelint-prettier": "^5.0.0",
     "stylelint-use-logical": "^2.1.2",
     "stylelint-use-nesting": "^5.1.1",
+    "terser": "^5.31.1",
     "ts-lit-plugin": "^2.0.2",
     "typescript": "^5.3.3",
     "typescript-eslint": "^7.8.0",
@@ -102,12 +104,11 @@
   "scripts": {
     "start": "per-env",
     "start:development": "storybook dev --config-dir .storybook --disable-telemetry --port 6006",
-    "start:production": "npm-run-all --parallel start:production:components start:production:storybook start:production:stylesheets --aggregate-output --print-label",
-    "start:production:components": "node ./esbuild.ts.js && tsc --emitDeclarationOnly --declaration --outDir ./dist",
-    "start:production:components:comment": "https://github.com/evanw/esbuild/issues/95#issuecomment-626069971",
+    "start:production": "rimraf ./dist && npm-run-all --parallel start:production:components start:production:storybook start:production:stylesheets --aggregate-output --print-label",
+    "start:production:components": "tsc --outDir ./dist && node ./terser.js",
     "start:production:figma": "pnpm dt export-variables && pnpm dt build-tokens && pnpm dt build-styles",
     "start:production:storybook": "storybook build --config-dir .storybook --disable-telemetry --output-dir ./dist/storybook",
-    "start:production:stylesheets": "node ./esbuild.css.js",
+    "start:production:stylesheets": "node ./esbuild.js",
     "format": "per-env",
     "format:development": "prettier . --write && stylelint '**/*.styles.ts' --custom-syntax postcss-lit --fix",
     "format:production": "prettier . --check && stylelint '**/*.styles.ts' --custom-syntax postcss-lit --no-color",
@@ -124,6 +125,7 @@
     "test:development:serve": "npx http-server dist/coverage/lcov-report --silent",
     "test:development:web-test-runner": "web-test-runner --watch",
     "test:production": "npm-run-all --parallel test:production:* start:production:stylesheets --aggregate-output --print-label",
-    "test:production:web-test-runner": "web-test-runner"
+    "test:production:web-test-runner": "web-test-runner",
+    "postinstall": "pnpm dlx playwright install --with-deps"
   }
 }