@crowdstrike/glide-core 0.5.1 → 0.6.0

package/dist/toasts.toast.styles.js

@@ -1,8 +1,9 @@
-"use strict";import{css as o}from"lit";export default[o`
+import{css}from"lit";export default[css`
     .component {
       align-items: center;
       border-radius: var(--glide-core-spacing-sm);
       box-shadow: var(--glide-core-shadow-lg);
+      color: var(--glide-core-text-body-2);
       column-gap: var(--glide-core-spacing-xs);
       display: grid;
       font-family: var(--glide-core-body-xs-font-family);
@@ -51,10 +52,12 @@
     }
 
     .close-button {
+      --icon-color: var(--glide-core-icon-default2);
+
       grid-column: 3;
     }
 
     .description {
       grid-column: 2;
     }
-  `];
+  `];

package/dist/toasts.toast.test.basics.js

@@ -0,0 +1,139 @@
+import { assert, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreToast from './toasts.toast.js';
+import sinon from 'sinon';
+GlideCoreToast.shadowRootOptions.mode = 'open';
+// NOTE: Due to https://github.com/modernweb-dev/web/issues/2520, we sometimes need
+// to manually dispatch the `transitionend` event in tests.
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-toast')).to.equal(GlideCoreToast);
+});
+it('is accessible', async () => {
+    const component = await fixture(html `<glide-core-toast
+      variant="informational"
+      label="Label"
+      description="Toast description"
+    ></glide-core-toast>`);
+    await expect(component).to.be.accessible();
+});
+it('sets correct role', async () => {
+    const component = await fixture(html `<glide-core-toast
+      variant="informational"
+      label="Label"
+      description="Toast description"
+    ></glide-core-toast>`);
+    expect(component.shadowRoot?.firstElementChild?.getAttribute('role')).to.equal('alert');
+});
+it('sets correct aria labelling', async () => {
+    const component = await fixture(html `<glide-core-toast
+      variant="informational"
+      label="Label"
+      description="Toast description"
+    ></glide-core-toast>`);
+    expect(component.shadowRoot?.firstElementChild?.getAttribute('aria-labelledby')).to.equal('label description');
+    expect(component.shadowRoot?.firstElementChild?.querySelector('#label')
+        ?.textContent).to.equal('Label');
+    expect(component.shadowRoot?.firstElementChild?.querySelector('#description')
+        ?.textContent).to.equal('Toast description');
+});
+it('sets variant, label, and description', async () => {
+    const component = await fixture(html `<glide-core-toast
+      variant="informational"
+      label="Label"
+      description="Toast description"
+    ></glide-core-toast>`);
+    await expect(component.variant).to.equal('informational');
+    await expect(component.label).to.equal('Label');
+    await expect(component.description).to.equal('Toast description');
+});
+it('opens and closes by default', async () => {
+    const clock = sinon.useFakeTimers();
+    const component = await fixture(html `<glide-core-toast
+      variant="informational"
+      label="Label"
+      description="Toast description"
+    ></glide-core-toast>`);
+    clock.tick(3000);
+    const shadowElement = component.shadowRoot.firstElementChild;
+    await expect([...shadowElement.classList]).to.deep.equal([
+        'component',
+        'informational',
+        'open',
+    ]);
+    clock.tick(3000);
+    shadowElement?.dispatchEvent(new TransitionEvent('transitionend'));
+    await expect([
+        ...component.shadowRoot.firstElementChild.classList,
+    ]).to.deep.equal(['component', 'informational', 'closed']);
+    clock.restore();
+});
+it('responds to duration', async () => {
+    const clock = sinon.useFakeTimers();
+    const component = await fixture(html `<glide-core-toast
+      variant="informational"
+      label="Label"
+      description="Toast description"
+      duration="10000"
+    ></glide-core-toast>`);
+    clock.tick(9500);
+    const shadowElement = component.shadowRoot.firstElementChild;
+    await expect([...shadowElement.classList]).to.deep.equal([
+        'component',
+        'informational',
+        'open',
+    ]);
+    clock.tick(1000);
+    shadowElement?.dispatchEvent(new TransitionEvent('transitionend'));
+    await expect([
+        ...component.shadowRoot.firstElementChild.classList,
+    ]).to.deep.equal(['component', 'informational', 'closed']);
+    clock.restore();
+});
+it('responds to duration of Infinity', async () => {
+    const clock = sinon.useFakeTimers();
+    const component = await fixture(html `<glide-core-toast
+      variant="informational"
+      label="Label"
+      description="Toast description"
+      duration="Infinity"
+    ></glide-core-toast>`);
+    clock.tick(9500);
+    const shadowElement = component.shadowRoot.firstElementChild;
+    await expect([...shadowElement.classList]).to.deep.equal([
+        'component',
+        'informational',
+        'open',
+    ]);
+    clock.restore();
+});
+it('does not allow less than 5000 duration', async () => {
+    const clock = sinon.useFakeTimers();
+    const component = await fixture(html `<glide-core-toast
+      variant="informational"
+      label="Label"
+      description="Toast description"
+      duration="3000"
+    ></glide-core-toast>`);
+    clock.tick(4000);
+    const shadowElement = component.shadowRoot.firstElementChild;
+    await expect([...shadowElement.classList]).to.deep.equal([
+        'component',
+        'informational',
+        'open',
+    ]);
+    clock.restore();
+});
+it('can be closed by clicking on the x icon', async () => {
+    const component = await fixture(html `<glide-core-toast
+      variant="informational"
+      label="Label"
+      description="Toast description"
+    ></glide-core-toast>`);
+    const shadowElement = component.shadowRoot.firstElementChild;
+    const closeButton = shadowElement?.querySelector('glide-core-icon-button[label="Close"]');
+    assert(closeButton);
+    closeButton.click();
+    shadowElement?.dispatchEvent(new TransitionEvent('transitionend'));
+    await expect([
+        ...component.shadowRoot.firstElementChild.classList,
+    ]).to.deep.equal(['component', 'informational', 'closed']);
+});

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-checked="${this.checked}" aria-describedby="summary description" data-test="input" id="input" role="switch" 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,68 @@
+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;
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.getAttribute('aria-checked')).to.equal('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);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.getAttribute('aria-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,43 @@
+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;
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.getAttribute('aria-checked')).to.equal('true');
+});
+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;
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.getAttribute('aria-checked')).to.equal('false');
+});
+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;
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.getAttribute('aria-checked')).to.equal('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);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.getAttribute('aria-checked')).to.equal('false');
+});

package/dist/tooltip.d.ts

@@ -13,9 +13,11 @@ export default class GlideCoreTooltip extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     placement?: 'bottom' | 'left' | 'right' | 'top';
+    containingBlock?: Element;
     firstUpdated(): void;
     private get isVisible();
     private set isVisible(value);
     render(): import("lit").TemplateResult<1>;
+    setContainingBlock(containingBlock: Element): void;
     private effectivePlacement?;
 }

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(t,e,o,i){var l,s=arguments.length,a=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var r=t.length-1;r>=0;r--)(l=t[r])&&(a=(s<3?l(a):s>3?l(e,o,a):l(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};import{LitElement,html}from"lit";import{arrow,autoUpdate,computePosition,flip,offset,platform,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{offsetParent}from"composed-offset-position";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.#t.value),owSlot(this.#e.value),this.#o()}get isVisible(){return this.#i}set isVisible(t){this.#i=t,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.#e)} 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.#t)}></slot><div class="arrow" ${ref(this.#d)}></div></div></div>`}setContainingBlock(t){this.containingBlock=t}#d=createRef();#l;#u;#t=createRef();#i=!1;#c=createRef();#e=createRef();#m=createRef();#g(){clearTimeout(this.#u)}#h(){owSlot(this.#t.value)}#r(){this.isVisible=!0}#n(){this.isVisible=!1}#f(t){"Escape"===t.key&&(this.isVisible=!1)}#a(){this.#v()}#s(){this.#g(),this.isVisible=!0}#p(){owSlot(this.#e.value)}#v(){this.#u=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 t=this.#d.value,{placement:e,x:o,y:i,middlewareData:l}=await computePosition(this.#c.value,this.#m.value,{platform:{...platform,getOffsetParent:t=>this.containingBlock&&t!==this.#d.value?this.containingBlock:platform.getOffsetParent(t,offsetParent)},placement:this.placement,strategy:"fixed",middleware:[offset(6),flip({fallbackStrategy:"initialPlacement"}),shift(),arrow({element:t})]});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"}[e.split("-")[0]];Object.assign(t.style,{left:null===s?"":`${s}px`,top:null===a?"":`${a}px`,right:"",bottom:"",[r]:"-3px"}),this.effectivePlacement=e}})()})))}};__decorate([property()],GlideCoreTooltip.prototype,"placement",void 0),__decorate([state()],GlideCoreTooltip.prototype,"containingBlock",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 {
@@ -39,6 +39,8 @@
       inset-block-start: 50%;
       inset-block-start: 0;
       inset-inline-start: 0;
+      max-inline-size: 11.25rem;
+      overflow-wrap: break-word;
       padding: var(--glide-core-spacing-xs) var(--glide-core-spacing-sm);
       position: fixed;
       z-index: 1;
@@ -63,4 +65,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/translations/en.d.ts

@@ -0,0 +1,3 @@
+import type { Translation } from '../library/localize.js';
+declare const translation: Translation;
+export default translation;

package/dist/translations/en.js

@@ -0,0 +1 @@
+const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",open:"Open",selectAll:"Select all",clearEntry:"Clear entry",moreInformation:"More information",notifications:"Notifications",removeTag:e=>`Remove tag: ${e}`};export default translation;

package/dist/translations/fr.d.ts

@@ -0,0 +1,3 @@
+import type { Translation } from '../library/localize.js';
+declare const translation: Translation;
+export default translation;

package/dist/translations/fr.js

@@ -0,0 +1 @@
+const translation={$code:"fr",$name:"French",$dir:"ltr",close:"Fermer",dismiss:"Congédier",open:"Ouvrir",selectAll:"Tout sélectionner",clearEntry:"Effacer l’entrée",moreInformation:"Plus d’informations",notifications:"Notifications",removeTag:e=>`Supprimer la balise : ${e}`};export default translation;

package/dist/translations/ja.d.ts

@@ -0,0 +1,3 @@
+import type { Translation } from '../library/localize.js';
+declare const translation: Translation;
+export default translation;

package/dist/translations/ja.js

@@ -0,0 +1 @@
+const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"無視",open:"オープン",selectAll:"すべて選択",clearEntry:"入力のクリア",moreInformation:"詳細情報",notifications:"通知",removeTag:e=>`タグを削除: ${e}`};export default translation;

package/dist/tree.d.ts

@@ -22,5 +22,6 @@ export default class GlideCoreTree extends LitElement {
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
     selectItem(item: GlideCoreTreeItem): void;
+    setContainingBlock(containingBlock: Element): void;
     constructor();
 }

package/dist/tree.item.d.ts

@@ -1,5 +1,6 @@
 import './tree.item.menu.js';
 import { LitElement } from 'lit';
+import GlideCoreMenu from './menu.js';
 declare global {
     interface HTMLElementTagNameMap {
         'glide-core-tree-item': GlideCoreTreeItem;
@@ -21,7 +22,7 @@ export default class GlideCoreTreeItem extends LitElement {
     label: string;
     level: number;
     selected: boolean;
-    menuSlotAssignedElements: HTMLElement[];
+    menuSlotAssignedElements: GlideCoreMenu[];
     prefixSlotAssignedElements: HTMLElement[];
     slotElements: GlideCoreTreeItem[];
     suffixSlotAssignedElements: HTMLElement[];
@@ -35,6 +36,7 @@ export default class GlideCoreTreeItem extends LitElement {
      * Returns the selected item
      */
     selectItem(item: GlideCoreTreeItem): GlideCoreTreeItem | undefined;
+    setContainingBlock(containingBlock: Element): void;
     toggleExpand(): void;
     private childTreeItems;
     private hasMenuSlot;

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;