@crowdstrike/glide-core 0.11.0 → 0.12.0

package/dist/textarea.test.events.js

@@ -104,117 +104,3 @@ it('does not dispatch an `invalid` event when `reportValidity` is called when re
     await aTimeout(0);
     expect(spy.callCount).to.equal(0);
 });
-it('dispatches an `invalid` event after `requestSubmit` is called when `maxlength` exceeded', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-textarea
-      label="label"
-      maxlength="3"
-    ></glide-core-textarea>`, {
-        parentNode: form,
-    });
-    setTimeout(async () => {
-        component.focus();
-        await sendKeys({ type: 'testing' });
-        form.requestSubmit();
-    });
-    const event = await oneEvent(component, 'invalid');
-    expect(event instanceof Event).to.be.true;
-});
-it('dispatches an `invalid` event after `checkValidity` is called when `maxlength` exceeded', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-textarea
-      label="label"
-      maxlength="3"
-    ></glide-core-textarea>`, {
-        parentNode: form,
-    });
-    setTimeout(async () => {
-        component.focus();
-        await sendKeys({ type: 'testing' });
-        component.checkValidity();
-    });
-    const event = await oneEvent(component, 'invalid');
-    expect(event instanceof Event).to.be.true;
-});
-it('dispatches an `invalid` event after `reportValidity` is called when `maxlength` exceeded', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-textarea
-      label="label"
-      maxlength="3"
-    ></glide-core-textarea>`, {
-        parentNode: form,
-    });
-    setTimeout(async () => {
-        component.focus();
-        await sendKeys({ type: 'testing' });
-        component.reportValidity();
-    });
-    const event = await oneEvent(component, 'invalid');
-    expect(event instanceof Event).to.be.true;
-});
-it('does not dispatch an `invalid` event after `checkValidity` is called when `maxlength` not exceeded', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-textarea
-      label="label"
-      maxlength="3"
-    ></glide-core-textarea>`, {
-        parentNode: form,
-    });
-    const spy = sinon.spy();
-    component.addEventListener('invalid', spy);
-    component.focus();
-    await sendKeys({ type: 'ab' });
-    component.checkValidity();
-    await aTimeout(0);
-    expect(spy.callCount).to.equal(0);
-});
-it('does not dispatch an `invalid` event after `checkValidity` is called when `maxlength` exceeded and disabled', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-textarea
-      label="label"
-      maxlength="3"
-      disabled
-    ></glide-core-textarea>`, {
-        parentNode: form,
-    });
-    const spy = sinon.spy();
-    component.addEventListener('invalid', spy);
-    component.focus();
-    await sendKeys({ type: 'test' });
-    component.checkValidity();
-    await aTimeout(0);
-    expect(spy.callCount).to.equal(0);
-});
-it('does not dispatch an `invalid` event when `reportValidity` is called and `maxlength` is not exceeded,', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-textarea
-      label="label"
-      maxlength="3"
-    ></glide-core-textarea>`, {
-        parentNode: form,
-    });
-    const spy = sinon.spy();
-    component.addEventListener('invalid', spy);
-    component.focus();
-    await sendKeys({ type: 'ab' });
-    component.reportValidity();
-    await aTimeout(0);
-    expect(spy.callCount).to.equal(0);
-});
-it('does not dispatch an `invalid` event when `reportValidity` is called `maxlength` exceeded and disabled,', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-textarea
-      label="label"
-      maxlength="3"
-      disabled
-    ></glide-core-textarea>`, {
-        parentNode: form,
-    });
-    const spy = sinon.spy();
-    component.addEventListener('invalid', spy);
-    component.focus();
-    await sendKeys({ type: 'test' });
-    component.reportValidity();
-    await aTimeout(0);
-    expect(spy.callCount).to.equal(0);
-});

package/dist/textarea.test.validity.js

@@ -42,46 +42,6 @@ it('is invalid if no value and required', async () => {
         ?.querySelector('textarea')
         ?.getAttribute('aria-invalid')).to.equal('true');
 });
-it('is valid when empty and does not exceed `maxlength`', async () => {
-    const component = await fixture(html `<glide-core-textarea maxlength="3"></glide-core-textarea>`);
-    expect(component.validity?.valid).to.be.true;
-    expect(component.validity?.valueMissing).to.be.false;
-    expect(component.validity?.tooLong).to.be.false;
-    expect(component.checkValidity()).to.be.true;
-    expect(component.reportValidity()).to.be.true;
-    await elementUpdated(component);
-    expect(component.shadowRoot
-        ?.querySelector('textarea')
-        ?.getAttribute('aria-invalid')).to.equal('false');
-});
-it('is valid when filled in and does not exceed `maxlength`', async () => {
-    const component = await fixture(html `<glide-core-textarea maxlength="3"></glide-core-textarea>`);
-    component.focus();
-    await sendKeys({ type: 'abc' });
-    expect(component.validity?.valid).to.be.true;
-    expect(component.validity?.valueMissing).to.be.false;
-    expect(component.validity?.tooLong).to.be.false;
-    expect(component.checkValidity()).to.be.true;
-    expect(component.reportValidity()).to.be.true;
-    await elementUpdated(component);
-    expect(component.shadowRoot
-        ?.querySelector('textarea')
-        ?.getAttribute('aria-invalid')).to.equal('false');
-});
-it('is invalid when filled in and exceeds `maxlength`', async () => {
-    const component = await fixture(html `<glide-core-textarea maxlength="3"></glide-core-textarea>`);
-    component.focus();
-    await sendKeys({ type: 'value' });
-    expect(component.validity?.valid).to.be.false;
-    expect(component.validity?.valueMissing).to.be.false;
-    expect(component.validity?.tooLong).to.be.true;
-    expect(component.checkValidity()).to.be.false;
-    expect(component.reportValidity()).to.be.false;
-    await elementUpdated(component);
-    expect(component.shadowRoot
-        ?.querySelector('textarea')
-        ?.getAttribute('aria-invalid')).to.equal('true');
-});
 it('is valid if no value but required and disabled', async () => {
     const component = await fixture(html `<glide-core-textarea required disabled></glide-core-textarea>`);
     expect(component.validity?.valid).to.be.true;
@@ -166,38 +126,6 @@ it('is valid when `value` is empty and `required` is set to `false` programmatic
         ?.querySelector('textarea')
         ?.getAttribute('aria-invalid')).to.equal('false');
 });
-it('is valid when filled in, disabled, and value exceeds `maxlength`', async () => {
-    const component = await fixture(html `<glide-core-textarea
-      value="value"
-      disabled
-      maxlength="3"
-    ></glide-core-textarea>`);
-    expect(component.validity?.valid).to.be.true;
-    expect(component.validity?.valueMissing).to.be.false;
-    expect(component.validity?.tooLong).to.be.false;
-    expect(component.checkValidity()).to.be.true;
-    expect(component.reportValidity()).to.be.true;
-    await elementUpdated(component);
-    expect(component.shadowRoot
-        ?.querySelector('textarea')
-        ?.getAttribute('aria-invalid')).to.equal('false');
-});
-it('is valid when filled in, readonly, and value exceeds `maxlength`', async () => {
-    const component = await fixture(html `<glide-core-textarea
-      value="value"
-      readonly
-      maxlength="3"
-    ></glide-core-textarea>`);
-    expect(component.validity?.valid).to.be.true;
-    expect(component.validity?.valueMissing).to.be.false;
-    expect(component.validity?.tooLong).to.be.false;
-    expect(component.checkValidity()).to.be.true;
-    expect(component.reportValidity()).to.be.true;
-    await elementUpdated(component);
-    expect(component.shadowRoot
-        ?.querySelector('textarea')
-        ?.getAttribute('aria-invalid')).to.equal('false');
-});
 it('blurs the textarea and reports validity if `blur` is called', async () => {
     const component = await fixture(html `<glide-core-textarea required></glide-core-textarea>`);
     component.focus();
@@ -210,3 +138,67 @@ it('blurs the textarea and reports validity if `blur` is called', async () => {
     expect(component.shadowRoot?.querySelector('glide-core-private-label')?.error)
         .to.be.true;
 });
+it('sets the validity message with `setCustomValidity()`', async () => {
+    const component = await fixture(html `<glide-core-textarea label="Label"></glide-core-textarea>`);
+    component.setCustomValidity('validity message');
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.customError).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    await elementUpdated(component);
+    // Like native, the validity message shouldn't display until `reportValidity()` is called.
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot
+        ?.querySelector('textarea')
+        ?.getAttribute('aria-invalid')).to.equal('true');
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.equal('validity message');
+});
+it('removes a validity message with an empty argument to `setCustomValidity()`', async () => {
+    const component = await fixture(html `<glide-core-textarea label="Label"></glide-core-textarea>`);
+    component.setCustomValidity('validity message');
+    component.reportValidity();
+    await elementUpdated(component);
+    component.setCustomValidity('');
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+});
+it('is invalid when `setValidity()` is called', async () => {
+    const component = await fixture(html `<glide-core-textarea label="Label"></glide-core-textarea>`);
+    component.setValidity({ customError: true }, 'validity message');
+    expect(component.validity.valid).to.be.false;
+    await elementUpdated(component);
+    // Like native, the validity message shouldn't display until `reportValidity()` is called.
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+    expect(component.validity?.customError).to.be.true;
+    component.reportValidity();
+    await elementUpdated(component);
+    expect(component.shadowRoot
+        ?.querySelector('textarea')
+        ?.getAttribute('aria-invalid')).to.equal('true');
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.equal('validity message');
+});
+it('is valid when `setValidity()` is called', async () => {
+    const component = await fixture(html `<glide-core-textarea label="Label"></glide-core-textarea>`);
+    component.setValidity({ customError: true }, 'validity message');
+    component.setValidity({});
+    await elementUpdated(component);
+    expect(component.validity.valid).to.be.true;
+    expect(component.validity.customError).to.be.false;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+});
+it('retains existing validity state when `setCustomValidity()` is called', async () => {
+    const component = await fixture(html `<glide-core-textarea label="Label" required></glide-core-textarea>`);
+    component.setCustomValidity('validity message');
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.customError).to.be.true;
+    expect(component.validity?.valueMissing).to.be.true;
+});

package/dist/tooltip.d.ts

@@ -14,7 +14,8 @@ export default class GlideCoreTooltip extends LitElement {
     static styles: import("lit").CSSResult[];
     get disabled(): boolean;
     set disabled(isDisabled: boolean);
-    offset: number;
+    get offset(): number;
+    set offset(offset: number);
     get open(): boolean;
     set open(isOpen: boolean);
     placement?: 'bottom' | 'left' | 'right' | 'top';

package/dist/tooltip.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,a=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,l);else for(var r=e.length-1;r>=0;r--)(i=e[r])&&(a=(s<3?i(a):s>3?i(t,o,a):i(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";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{ifDefined}from"lit/directives/if-defined.js";import{map}from"lit/directives/map.js";import ow,{owSlot}from"./library/ow.js";import styles from"./tooltip.styles.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{constructor(){super(...arguments),this.offset=4,this.shortcut=[],this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#l=!1,this.#i=createRef(),this.#s=createRef(),this.#a=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.#o=e,this.open&&!e?this.#r():this.#n()}get open(){return this.#l}set open(e){this.#l=e,e&&!this.disabled?this.#r():this.#n()}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#f),clearTimeout(this.#h)}firstUpdated(){owSlot(this.#t.value),owSlot(this.#s.value),ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#a.value.popover="manual",this.open&&!this.disabled&&this.#r()}render(){return html`<div class="component" data-test="component" @mouseover="${this.#c}" @mouseout="${this.#p}"><div aria-labelledby="${ifDefined(this.disabled?void 0:"tooltip")}" class="target" data-test="target" slot="target" @focusin="${this.#d}" @focusout="${this.#m}" @keydown="${this.#u}" ${ref(this.#i)}><slot @slotchange="${this.#v}" ${ref(this.#s)} name="target"></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" role="${ifDefined(this.disabled?void 0:"tooltip")}" ${ref(this.#a)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>html`<svg viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="currentColor"/></svg>`],["right",()=>html`<svg viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="currentColor"/></svg>`],["bottom",()=>html`<svg viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="currentColor"/></svg>`],["left",()=>html`<svg viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="currentColor"/></svg>`]])}</div><span aria-label="${ifDefined(this.disabled?void 0:"Tooltip: ")}"></span><div class="${classMap({content:!0,reversed:"left"===this.effectivePlacement})}"><slot class="default-slot" @slotchange="${this.#g}" ${ref(this.#t)}></slot><kbd class="${classMap({shortcut:!0,reversed:"left"===this.effectivePlacement,visible:this.shortcut.length>0})}" data-test="shortcut">${1===this.shortcut.length?this.shortcut.at(0):map(this.shortcut,((e,t)=>html`<kbd>${e}</kbd> ${t===this.shortcut.length-1?"":" + "}`))}</kbd></div></div></div>`}#e;#R;#f;#t;#o;#l;#h;#i;#s;#a;#E(){clearTimeout(this.#f)}#n(){this.#a.value?.hidePopover(),this.#R&&this.#R()}#g(){owSlot(this.#t.value)}#d(){this.open=!0}#m(){this.open=!1}#u(e){"Escape"===e.key&&(this.open=!1)}#p(){this.#w(),clearTimeout(this.#h)}#c(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#E(),this.#h=setTimeout((()=>{this.open=!0}),Number(this.#a.value.dataset.openDelay))}#v(){owSlot(this.#s.value)}#w(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#f=setTimeout((()=>{this.open=!1}),Number(this.#a.value.dataset.closeDelay))}#r(){this.disabled||(this.#R?.(),this.#i.value&&this.#a.value&&(this.#R=autoUpdate(this.#i.value,this.#a.value,(()=>{(async()=>{if(this.#i.value&&this.#a.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:l}=await computePosition(this.#i.value,this.#a.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#a.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:l.arrow?.x?`${l.arrow.x}px`:null,top:l.arrow?.y?`${l.arrow.y}px`:null}),this.effectivePlacement=o,this.#a.value.showPopover()}})()}))))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],GlideCoreTooltip.prototype,"offset",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"open",null),__decorate([property()],GlideCoreTooltip.prototype,"placement",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreTooltip.prototype,"shortcut",void 0),__decorate([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip")],GlideCoreTooltip);export default GlideCoreTooltip;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,a=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,l);else for(var r=e.length-1;r>=0;r--)(i=e[r])&&(a=(s<3?i(a):s>3?i(t,o,a):i(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";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{ifDefined}from"lit/directives/if-defined.js";import{map}from"lit/directives/map.js";import ow,{owSlot}from"./library/ow.js";import styles from"./tooltip.styles.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{constructor(){super(...arguments),this.shortcut=[],this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#l=!1,this.#i=createRef(),this.#s=createRef(),this.#a=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.#o=e,this.open&&!e?this.#r():this.#n()}get offset(){return this.#f??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#f=e}get open(){return this.#l}set open(e){this.#l=e,e&&!this.disabled?this.#r():this.#n()}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#p),clearTimeout(this.#c)}firstUpdated(){owSlot(this.#t.value),owSlot(this.#s.value),ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#a.value.popover="manual",this.open&&!this.disabled&&this.#r()}render(){return html`<div class="component" data-test="component" @mouseover="${this.#h}" @mouseout="${this.#d}"><div aria-labelledby="${ifDefined(this.disabled?void 0:"tooltip")}" class="target" data-test="target" slot="target" @focusin="${this.#m}" @focusout="${this.#u}" @keydown="${this.#v}" ${ref(this.#i)}><slot @slotchange="${this.#g}" ${ref(this.#s)} name="target"></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" role="${ifDefined(this.disabled?void 0:"tooltip")}" ${ref(this.#a)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>html`<svg viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="currentColor"/></svg>`],["right",()=>html`<svg viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="currentColor"/></svg>`],["bottom",()=>html`<svg viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="currentColor"/></svg>`],["left",()=>html`<svg viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="currentColor"/></svg>`]])}</div><span aria-label="${ifDefined(this.disabled?void 0:"Tooltip: ")}"></span><div class="${classMap({content:!0,reversed:"left"===this.effectivePlacement})}"><slot class="default-slot" @slotchange="${this.#R}" ${ref(this.#t)}></slot><kbd class="${classMap({shortcut:!0,reversed:"left"===this.effectivePlacement,visible:this.shortcut.length>0})}" data-test="shortcut">${1===this.shortcut.length?this.shortcut.at(0):map(this.shortcut,((e,t)=>html`<kbd>${e}</kbd> ${t===this.shortcut.length-1?"":" + "}`))}</kbd></div></div></div>`}#e;#w;#p;#t;#o;#l;#f;#c;#i;#s;#a;#E(){clearTimeout(this.#p)}#n(){this.#a.value?.hidePopover(),this.#w&&this.#w()}#R(){owSlot(this.#t.value)}#m(){this.open=!0}#u(){this.open=!1}#v(e){"Escape"===e.key&&(this.open=!1)}#d(){this.#y(),clearTimeout(this.#c)}#h(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#E(),this.#c=setTimeout((()=>{this.open=!0}),Number(this.#a.value.dataset.openDelay))}#g(){owSlot(this.#s.value)}#y(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#p=setTimeout((()=>{this.open=!1}),Number(this.#a.value.dataset.closeDelay))}#r(){this.disabled||(this.#w?.(),this.#i.value&&this.#a.value&&(this.#w=autoUpdate(this.#i.value,this.#a.value,(()=>{(async()=>{if(this.#i.value&&this.#a.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:l}=await computePosition(this.#i.value,this.#a.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#a.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:l.arrow?.x?`${l.arrow.x}px`:null,top:l.arrow?.y?`${l.arrow.y}px`:null}),this.effectivePlacement=o,this.#a.value.showPopover()}})()}))))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],GlideCoreTooltip.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"open",null),__decorate([property()],GlideCoreTooltip.prototype,"placement",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreTooltip.prototype,"shortcut",void 0),__decorate([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip")],GlideCoreTooltip);export default GlideCoreTooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "CrowdStrike's Glide Design System components package for providing web components",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",