@crowdstrike/glide-core 0.5.0 → 0.5.2

package/dist/toggle.js

@@ -1 +1 @@
-"use strict";var y=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var a=(i,e,t,l)=>{for(var o=l>1?void 0:l?E(e,t):e,p=i.length-1,m;p>=0;p--)(m=i[p])&&(o=(l?m(e,t,o):m(o))||o);return l&&o&&y(e,t,o),o};var u=(i,e,t)=>{if(!e.has(i))throw TypeError("Cannot "+t)};var c=(i,e,t)=>(u(i,e,"read from private field"),t?t.call(i):e.get(i)),h=(i,e,t)=>{if(e.has(i))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(i):e.set(i,t)};var f=(i,e,t)=>(u(i,e,"access private method"),t);var n,d,v;import"./label.js";import{LitElement as b,html as $}from"lit";import{createRef as k,ref as L}from"lit/directives/ref.js";import{customElement as R,property as r}from"lit/decorators.js";import w from"./toggle.styles.js";let s=class extends b{constructor(){super(...arguments);h(this,d);this.checked=!1;this.disabled=!1;this.hideLabel=!1;this.orientation="horizontal";h(this,n,k())}click(){c(this,n).value?.click()}focus(t){c(this,n).value?.focus(t)}render(){return $`<div data-test="component"><glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="toggle-and-input" slot="control"><input aria-describedby="summary description" data-test="input" id="input" type="checkbox" ?checked="${this.checked}" ?disabled="${this.disabled}" @change="${f(this,d,v)}" ${L(c(this,n))}></div><div slot="summary" id="summary">${this.summary}</div><slot class="description" id="description" name="description" slot="description"></slot></glide-core-label></div>`}};n=new WeakMap,d=new WeakSet,v=function(t){t.target instanceof HTMLInputElement&&(this.checked=t.target.checked),this.dispatchEvent(new Event(t.type,t))},s.shadowRootOptions={...b.shadowRootOptions,mode:"closed"},s.styles=w,a([r({type:Boolean})],s.prototype,"checked",2),a([r({reflect:!0,type:Boolean})],s.prototype,"disabled",2),a([r({attribute:"hide-label",type:Boolean})],s.prototype,"hideLabel",2),a([r({reflect:!0})],s.prototype,"label",2),a([r({reflect:!0})],s.prototype,"orientation",2),a([r({reflect:!0})],s.prototype,"name",2),a([r({reflect:!0})],s.prototype,"summary",2),s=a([R("glide-core-toggle")],s);export{s as default};
+var __decorate=this&&this.__decorate||function(e,t,o,i){var l,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var d=e.length-1;d>=0;d--)(l=e[d])&&(s=(r<3?l(s):r>3?l(t,o,s):l(t,o))||s);return r>3&&s&&Object.defineProperty(t,o,s),s};import"./label.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import styles from"./toggle.styles.js";let GlideCoreToggle=class GlideCoreToggle extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.hideLabel=!1,this.orientation="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}render(){return html`<div data-test="component"><glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="toggle-and-input" slot="control"><input aria-describedby="summary description" data-test="input" id="input" type="checkbox" ?checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.#t}" ${ref(this.#e)}></div><div slot="summary" id="summary">${this.summary}</div><slot class="description" id="description" name="description" slot="description"></slot></glide-core-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.dispatchEvent(new Event(e.type,e))}};__decorate([property({type:Boolean})],GlideCoreToggle.prototype,"checked",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreToggle.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreToggle.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"name",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"summary",void 0),GlideCoreToggle=__decorate([customElement("glide-core-toggle")],GlideCoreToggle);export default GlideCoreToggle;

package/dist/toggle.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"lit";import s from"./styles/focus-outline.js";export default[e`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
     /*
 Most states are handled on the host. But ":checked" is handled on the input
 because browsers don't support that class on the host. And using attribute
@@ -30,7 +30,7 @@ Use the ":checked" pseudo class on the host and throughout when browsers support
       position: relative;
 
       &:has(input:focus-visible) {
-        ${s};
+        ${focusOutline};
         outline-offset: 4px;
       }
 
@@ -78,4 +78,4 @@ Use the ":checked" pseudo class on the host and throughout when browsers support
       opacity: 0;
       position: absolute;
     }
-  `];
+  `];

package/dist/toggle.test.basics.js

@@ -0,0 +1,64 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreToggle from './toggle.js';
+GlideCoreToggle.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-toggle')).to.equal(GlideCoreToggle);
+});
+it('has defaults', async () => {
+    const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
+    expect(component.hasAttribute('checked')).to.be.false;
+    expect(component.checked).to.be.false;
+    expect(component.hasAttribute('disabled')).to.be.false;
+    expect(component.disabled).to.be.false;
+    expect(component.hasAttribute('hide-label')).to.be.false;
+    expect(component.hideLabel).to.be.false;
+    expect(component.getAttribute('orientation')).to.equal('horizontal');
+    expect(component.orientation).to.equal('horizontal');
+    expect(component.getAttribute('summary')).to.be.null;
+    expect(component.summary).to.equal(undefined);
+});
+it('is accessible', async () => {
+    const component = await fixture(html `<glide-core-toggle label="Label">
+      <div slot="tooltip">Tooltip</div>
+      <div slot="description">Description</div>
+    </glide-core-toggle>`);
+    await expect(component).to.be.accessible();
+});
+it('can have a label', async () => {
+    const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle> `);
+    expect(component.getAttribute('label')).to.equal('Label');
+    expect(component.label).to.equal('Label');
+});
+it('can have a description', async () => {
+    const component = await fixture(html `<glide-core-toggle label="Label">
+      <div slot="description">Description</div>
+    </glide-core-toggle>`);
+    const assignedElements = component.shadowRoot
+        ?.querySelector('slot[name="description"]')
+        ?.assignedElements();
+    expect(assignedElements?.at(0)?.textContent).to.equal('Description');
+});
+it('can have a summary', async () => {
+    const component = await fixture(html `<glide-core-toggle summary="Summary"></glide-core-toggle> `);
+    expect(component.getAttribute('summary')).to.equal('Summary');
+    expect(component.summary).to.equal('Summary');
+});
+it('can have a tooltip', async () => {
+    const component = await fixture(html `<glide-core-toggle label="Label">
+      <div slot="tooltip">Tooltip</div>
+    </glide-core-toggle>`);
+    const assignedElements = component.shadowRoot
+        ?.querySelector('slot[name="tooltip"]')
+        ?.assignedElements();
+    expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
+});
+it('can be checked', async () => {
+    const component = await fixture(html `<glide-core-toggle checked></glide-core-toggle> `);
+    expect(component.hasAttribute('checked')).to.be.true;
+    expect(component.checked).to.equal(true);
+});
+it('can be disabled', async () => {
+    const component = await fixture(html `<glide-core-toggle disabled></glide-core-toggle> `);
+    expect(component.hasAttribute('disabled')).to.be.true;
+    expect(component.disabled).to.equal(true);
+});

package/dist/toggle.test.events.js

@@ -0,0 +1,29 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import GlideCoreToggle from './toggle.js';
+GlideCoreToggle.shadowRootOptions.mode = 'open';
+// `await aTimeout(0)` is used throughout. Using `oneEvent` instead and
+// expecting it to throw would work. But it wouldn't throw until its
+// timeout, which would make for a slow test. Its timeout can likely be
+// configured. But waiting a turn of the event loop, after which the event
+// will have been dispatched, gets the job done as well.
+it('dispatches a "click" event when clicked', async () => {
+    const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
+    setTimeout(() => component.click());
+    const event = await oneEvent(component, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
+    expect(event.bubbles).to.be.true;
+});
+it('dispatches a "change" event when clicked', async () => {
+    const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
+    setTimeout(() => component.click());
+    const event = await oneEvent(component, 'change');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+});
+it('dispatches an "input" event when clicked', async () => {
+    const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
+    setTimeout(() => component.click());
+    const event = await oneEvent(component, 'input');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+});

package/dist/toggle.test.focus.js

@@ -0,0 +1,9 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreToggle from './toggle.js';
+GlideCoreToggle.shadowRootOptions.mode = 'open';
+it('focuses the input when `focus` is called', async () => {
+    const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
+    component.focus();
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(component.shadowRoot?.activeElement).to.equal(input);
+});

package/dist/toggle.test.states.js

@@ -0,0 +1,35 @@
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreToggle from './toggle.js';
+GlideCoreToggle.shadowRootOptions.mode = 'open';
+it('is checked after being clicked', async () => {
+    const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
+    component.click();
+    await elementUpdated(component);
+    expect(component.checked).to.equal(true);
+    expect(component.hasAttribute('checked')).to.be.false;
+});
+it('is unchecked after being clicked', async () => {
+    const component = await fixture(html `<glide-core-toggle label="Label" checked></glide-core-toggle>`);
+    component.click();
+    await elementUpdated(component);
+    expect(component.checked).to.equal(false);
+    expect(component.hasAttribute('checked')).to.be.true;
+});
+it('is still checked after being clicked when checked but disabled', async () => {
+    const component = await fixture(html `<glide-core-toggle
+      label="Label"
+      checked
+      disabled
+    ></glide-core-toggle>`);
+    component.click();
+    await elementUpdated(component);
+    expect(component.checked).to.equal(true);
+    expect(component.hasAttribute('checked')).to.be.true;
+});
+it('is still unchecked after being clicked when unchecked and disabled', async () => {
+    const component = await fixture(html `<glide-core-toggle label="Label" disabled></glide-core-toggle>`);
+    component.click();
+    await elementUpdated(component);
+    expect(component.hasAttribute('checked')).to.be.false;
+    expect(component.checked).to.equal(false);
+});

package/dist/tooltip.js

@@ -1 +1 @@
-"use strict";var Z=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var v=(i,s,t,l)=>{for(var n=l>1?void 0:l?_(s,t):s,f=i.length-1,u;f>=0;f--)(u=i[f])&&(n=(l?u(s,t,n):u(n))||n);return l&&n&&Z(s,t,n),n};var P=(i,s,t)=>{if(!s.has(i))throw TypeError("Cannot "+t)};var e=(i,s,t)=>(P(i,s,"read from private field"),t?t.call(i):s.get(i)),o=(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)},S=(i,s,t,l)=>(P(i,s,"write to private field"),l?l.call(i,t):s.set(i,t),t);var a=(i,s,t)=>(P(i,s,"access private method"),t);var b,y,w,c,$,m,p,h,x,N,M,X,V,Y,T,q,L,z,U,A,H,B,F,J,O,Q,E,k;import{LitElement as I,html as C}from"lit";import{arrow as G,autoUpdate as tt,computePosition as et,flip as st,offset as it,shift as ot}from"@floating-ui/dom";import{classMap as lt}from"lit/directives/class-map.js";import{createRef as d,ref as g}from"lit/directives/ref.js";import{customElement as at,property as rt,state as K}from"lit/decorators.js";import{owSlot as R}from"./library/ow.js";import nt from"./tooltip.styles.js";let r=class extends I{constructor(){super(...arguments);o(this,x);o(this,M);o(this,V);o(this,T);o(this,L);o(this,U);o(this,H);o(this,F);o(this,O);o(this,E);o(this,b,d());o(this,y,void 0);o(this,w,void 0);o(this,c,d());o(this,$,!1);o(this,m,d());o(this,p,d());o(this,h,d())}firstUpdated(){R(e(this,c).value),R(e(this,p).value),a(this,E,k).call(this)}get isVisible(){return e(this,$)}set isVisible(t){var l;S(this,$,t),this.isVisible?a(this,E,k).call(this):(l=e(this,y))==null||l.call(this)}render(){return C`<div class="component" @mouseover="${a(this,H,B)}" @mouseout="${a(this,U,A)}"><div aria-labelledby="tooltip" class="target" slot="target" @focusin="${a(this,V,Y)}" @focusout="${a(this,T,q)}" @keydown="${a(this,L,z)}" ${g(e(this,m))}><slot @slotchange="${a(this,F,J)}" ${g(e(this,p))} name="target"></slot></div><div class="${lt({tooltip:!0,visible:this.isVisible})}" id="tooltip" role="tooltip" ${g(e(this,h))}><span aria-label="Tooltip: "></span><slot @slotchange="${a(this,M,X)}" ${g(e(this,c))}></slot><div class="arrow" ${g(e(this,b))}></div></div></div>`}};b=new WeakMap,y=new WeakMap,w=new WeakMap,c=new WeakMap,$=new WeakMap,m=new WeakMap,p=new WeakMap,h=new WeakMap,x=new WeakSet,N=function(){clearTimeout(e(this,w))},M=new WeakSet,X=function(){R(e(this,c).value)},V=new WeakSet,Y=function(){this.isVisible=!0},T=new WeakSet,q=function(){this.isVisible=!1},L=new WeakSet,z=function(t){t.key==="Escape"&&(this.isVisible=!1)},U=new WeakSet,A=function(){a(this,O,Q).call(this)},H=new WeakSet,B=function(){a(this,x,N).call(this),this.isVisible=!0},F=new WeakSet,J=function(){R(e(this,p).value)},O=new WeakSet,Q=function(){S(this,w,setTimeout(()=>{this.isVisible=!1},200))},E=new WeakSet,k=function(){e(this,m).value&&e(this,h).value&&S(this,y,tt(e(this,m).value,e(this,h).value,()=>{(async()=>{if(e(this,m).value&&e(this,h).value){const t=e(this,b).value,{placement:l,x:n,y:f,middlewareData:u}=await et(e(this,m).value,e(this,h).value,{placement:this.placement,strategy:"fixed",middleware:[it(10),st({fallbackStrategy:"initialPlacement"}),ot(),G({element:t})]});Object.assign(e(this,h).value.style,{left:`${n}px`,top:`${f}px`});const D=u.arrow?.x??null,j=u.arrow?.y??null,W={top:"bottom",right:"left",bottom:"top",left:"right"}[l.split("-")[0]];Object.assign(t.style,{left:D===null?"":`${D}px`,top:j===null?"":`${j}px`,right:"",bottom:"",[W]:"-3px"}),this.effectivePlacement=l}})()}))},r.shadowRootOptions={...I.shadowRootOptions,delegatesFocus:!0,mode:"closed"},r.styles=nt,v([rt()],r.prototype,"placement",2),v([K()],r.prototype,"isVisible",1),v([K()],r.prototype,"effectivePlacement",2),r=v([at("glide-core-tooltip")],r);export{r as default};
+var __decorate=this&&this.__decorate||function(e,t,o,i){var l,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,i);else for(var r=e.length-1;r>=0;r--)(l=e[r])&&(a=(s<3?l(a):s>3?l(t,o,a):l(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{arrow,autoUpdate,computePosition,flip,offset,shift}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{owSlot}from"./library/ow.js";import styles from"./tooltip.styles.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value),owSlot(this.#t.value),this.#o()}get isVisible(){return this.#i}set isVisible(e){this.#i=e,this.isVisible?this.#o():this.#l?.()}render(){return html`<div class="component" @mouseover="${this.#s}" @mouseout="${this.#a}"><div aria-labelledby="tooltip" class="target" slot="target" @focusin="${this.#r}" @focusout="${this.#n}" @keydown="${this.#f}" ${ref(this.#c)}><slot @slotchange="${this.#p}" ${ref(this.#t)} name="target"></slot></div><div class="${classMap({tooltip:!0,visible:this.isVisible})}" id="tooltip" role="tooltip" ${ref(this.#m)}><span aria-label="Tooltip: "></span><slot @slotchange="${this.#h}" ${ref(this.#e)}></slot><div class="arrow" ${ref(this.#u)}></div></div></div>`}#u=createRef();#l;#d;#e=createRef();#i=!1;#c=createRef();#t=createRef();#m=createRef();#g(){clearTimeout(this.#d)}#h(){owSlot(this.#e.value)}#r(){this.isVisible=!0}#n(){this.isVisible=!1}#f(e){"Escape"===e.key&&(this.isVisible=!1)}#a(){this.#v()}#s(){this.#g(),this.isVisible=!0}#p(){owSlot(this.#t.value)}#v(){this.#d=setTimeout((()=>{this.isVisible=!1}),200)}#o(){this.#c.value&&this.#m.value&&(this.#l=autoUpdate(this.#c.value,this.#m.value,(()=>{(async()=>{if(this.#c.value&&this.#m.value){const e=this.#u.value,{placement:t,x:o,y:i,middlewareData:l}=await computePosition(this.#c.value,this.#m.value,{placement:this.placement,strategy:"fixed",middleware:[offset(10),flip({fallbackStrategy:"initialPlacement"}),shift(),arrow({element:e})]});Object.assign(this.#m.value.style,{left:`${o}px`,top:`${i}px`});const s=l.arrow?.x??null,a=l.arrow?.y??null,r={top:"bottom",right:"left",bottom:"top",left:"right"}[t.split("-")[0]];Object.assign(e.style,{left:null===s?"":`${s}px`,top:null===a?"":`${a}px`,right:"",bottom:"",[r]:"-3px"}),this.effectivePlacement=t}})()})))}};__decorate([property()],GlideCoreTooltip.prototype,"placement",void 0),__decorate([state()],GlideCoreTooltip.prototype,"isVisible",null),__decorate([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip")],GlideCoreTooltip);export default GlideCoreTooltip;

package/dist/tooltip.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"lit";import i from"./styles/focus-outline.js";export default[e`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
     .component {
       /* https://github.com/CrowdStrike/glide-core/pull/119#issuecomment-2113314591 */
       display: flex;
@@ -19,7 +19,7 @@
       }
 
       &:focus-visible {
-        ${i};
+        ${focusOutline};
       }
 
       ::slotted svg {
@@ -63,4 +63,4 @@
       position: absolute;
       transform: rotate(45deg);
     }
-  `];
+  `];

package/dist/tooltip.test.basics.js

@@ -0,0 +1,64 @@
+import './tooltip.js';
+import { ArgumentError } from 'ow';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreTooltip from './tooltip.js';
+import sinon from 'sinon';
+GlideCoreTooltip.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-tooltip')).to.equal(GlideCoreTooltip);
+});
+it('is accessible', async () => {
+    const component = await fixture(html `<glide-core-tooltip>
+      Tooltip
+      <span slot="target" tabindex="0">Target</span>
+    </glide-core-tooltip>`);
+    // See the comment in the component's `render` method for an explanation.
+    await expect(component).to.be.accessible({
+        ignoredRules: ['aria-tooltip-name'],
+    });
+});
+it('can have a tooltip', async () => {
+    const component = await fixture(html `<glide-core-tooltip aria-label="Label">
+      Tooltip
+      <span slot="target" tabindex="0">Target</span>
+    </glide-core-tooltip>`);
+    const tooltip = component?.shadowRoot
+        ?.querySelector('slot:not([name])')
+        ?.assignedNodes()
+        .at(0);
+    expect(tooltip?.textContent?.trim()).to.equal('Tooltip');
+});
+it('can have a target', async () => {
+    const component = await fixture(html `<glide-core-tooltip>
+      Tooltip
+      <span slot="target" tabindex="0">Target</span>
+    </glide-core-tooltip>`);
+    const assignedElements = component.shadowRoot
+        ?.querySelector('slot[name="target"]')
+        ?.assignedElements();
+    expect(assignedElements?.at(0)?.textContent).to.equal('Target');
+});
+it('throws if it does not have a default slot', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `<glide-core-tooltip></glide-core-tooltip>`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});
+it('throws if it does not have a "target" slot', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `<glide-core-tooltip> Tooltip </glide-core-tooltip>`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});

package/dist/tooltip.test.interactions.js

@@ -0,0 +1,78 @@
+import './tooltip.js';
+import { elementUpdated, 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 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"]')
+        ?.dispatchEvent(new FocusEvent('focusin'));
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[role="tooltip"]')?.checkVisibility()).to.be.true;
+});
+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;
+});
+it('is hidden on Escape', 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);
+    // 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.
+    component.querySelector('span')?.focus();
+    await sendKeys({ press: 'Escape' });
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[role="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>`);
+    component.shadowRoot
+        ?.querySelector('.component')
+        ?.dispatchEvent(new MouseEvent('mouseover'));
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[role="tooltip"]')?.checkVisibility()).to.be.true;
+});
+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>`);
+    component.shadowRoot
+        ?.querySelector('.component')
+        ?.dispatchEvent(new MouseEvent('mouseover'));
+    await elementUpdated(component);
+    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();
+});

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

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

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 d=e.length-1;d>=0;d--)(o=e[d])&&(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{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="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><slot name="menu" @slotchange="${this.#l}"></slot><slot name="suffix" @slotchange="${this.#d}"></slot></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}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}#d(){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.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 r,i=arguments.length,n=i<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(n=(i<3?r(n):i>3?r(t,o,n):r(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};import"./icon-button.js";import"./menu.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 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"><slot @slotchange="${this.#t}" ${ref(this.#e)}></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>`}#e=createRef();#t(){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,34 @@
+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, results in an unhandled rejection that gets logged.
+    const stub = sinon.stub(console, 'error');
+    // Menu asserts against its default slot once on `firstUpdated` and
+    // again on "slotchange". It also renders asynchronously. So we have
+    // to wait until the stub has been called before restoring it.
+    await waitUntil(() => stub.called);
+    stub.restore();
+    // eslint-disable-next-line unicorn/prefer-add-event-listener
+    window.onerror = onerror;
+});

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";export default[css`
     :host {
       cursor: pointer;
       display: flex;
@@ -127,4 +127,4 @@
         block-size: auto;
       }
     }
-  `];
+  `];

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);
+});