@crowdstrike/glide-core 0.8.0 → 0.9.1

package/dist/textarea.test.validity.js

@@ -1,20 +1,20 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { expect, fixture, html } from '@open-wc/testing';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreTextarea from './textarea.js';
 GlideCoreTextarea.shadowRootOptions.mode = 'open';
 it('is valid by default', async () => {
-    const template = '<glide-core-textarea></glide-core-textarea>';
-    const textarea = await fixture(template);
+    const textarea = await fixture(html `<glide-core-textarea></glide-core-textarea>`);
     expect(textarea.validity?.valid).to.be.true;
     expect(textarea.validity?.valueMissing).to.be.false;
     expect(textarea.validity?.tooLong).to.be.false;
     expect(textarea.checkValidity()).to.be.true;
     expect(textarea.reportValidity()).to.be.true;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
 });
 it('is valid after being filled in and required', async () => {
-    const template = '<glide-core-textarea required></glide-core-textarea>';
-    const textarea = await fixture(template);
+    const textarea = await fixture(html `<glide-core-textarea required></glide-core-textarea>`);
     textarea.focus();
     await sendKeys({ type: 'value' });
     expect(textarea.validity?.valid).to.be.true;
@@ -22,29 +22,32 @@ it('is valid after being filled in and required', async () => {
     expect(textarea.validity?.tooLong).to.be.false;
     expect(textarea.checkValidity()).to.be.true;
     expect(textarea.reportValidity()).to.be.true;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
 });
 it('is invalid if no value and required', async () => {
-    const template = '<glide-core-textarea required></glide-core-textarea>';
-    const textarea = await fixture(template);
+    const textarea = await fixture(html `<glide-core-textarea required></glide-core-textarea>`);
     expect(textarea.validity?.valid).to.be.false;
     expect(textarea.validity?.valueMissing).to.be.true;
     expect(textarea.validity?.tooLong).to.be.false;
     expect(textarea.willValidate).to.be.true;
     expect(textarea.checkValidity()).to.be.false;
     expect(textarea.reportValidity()).to.be.false;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'true');
 });
 it('is valid when empty and does not exceed `maxlength`', async () => {
-    const template = '<glide-core-textarea maxlength="3"></glide-core-textarea>';
-    const textarea = await fixture(template);
+    const textarea = await fixture(html `<glide-core-textarea maxlength="3"></glide-core-textarea>`);
     expect(textarea.validity?.valid).to.be.true;
     expect(textarea.validity?.valueMissing).to.be.false;
     expect(textarea.validity?.tooLong).to.be.false;
     expect(textarea.checkValidity()).to.be.true;
     expect(textarea.reportValidity()).to.be.true;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
 });
 it('is valid when filled in and does not exceed `maxlength`', async () => {
-    const template = '<glide-core-textarea maxlength="3"></glide-core-textarea>';
-    const textarea = await fixture(template);
+    const textarea = await fixture(html `<glide-core-textarea maxlength="3"></glide-core-textarea>`);
     textarea.focus();
     await sendKeys({ type: 'abc' });
     expect(textarea.validity?.valid).to.be.true;
@@ -52,10 +55,11 @@ it('is valid when filled in and does not exceed `maxlength`', async () => {
     expect(textarea.validity?.tooLong).to.be.false;
     expect(textarea.checkValidity()).to.be.true;
     expect(textarea.reportValidity()).to.be.true;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
 });
 it('is invalid when filled in and exceeds `maxlength`', async () => {
-    const template = '<glide-core-textarea maxlength="3"></glide-core-textarea>';
-    const textarea = await fixture(template);
+    const textarea = await fixture(html `<glide-core-textarea maxlength="3"></glide-core-textarea>`);
     textarea.focus();
     await sendKeys({ type: 'value' });
     expect(textarea.validity?.valid).to.be.false;
@@ -63,24 +67,104 @@ it('is invalid when filled in and exceeds `maxlength`', async () => {
     expect(textarea.validity?.tooLong).to.be.true;
     expect(textarea.checkValidity()).to.be.false;
     expect(textarea.reportValidity()).to.be.false;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'true');
 });
 it('is valid if no value but required and disabled', async () => {
-    const template = '<glide-core-textarea required disabled></glide-core-textarea>';
-    const textarea = await fixture(template);
+    const textarea = await fixture(html `<glide-core-textarea required disabled></glide-core-textarea>`);
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.validity?.tooLong).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
+});
+it('updates validity when `required` and `value` is changed programmatically', async () => {
+    const textarea = await fixture(html `<glide-core-textarea label="Label" required></glide-core-textarea>`);
+    expect(textarea.validity?.valid).to.be.false;
+    expect(textarea.validity?.valueMissing).to.be.true;
+    expect(textarea.checkValidity()).to.be.false;
+    expect(textarea.reportValidity()).to.be.false;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'true');
+    textarea.value = 'text';
+    await elementUpdated(textarea);
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
+    // Resetting the value to empty to ensure it goes
+    // back to an invalid state
+    textarea.value = '';
+    await elementUpdated(textarea);
+    expect(textarea.validity?.valid).to.be.false;
+    expect(textarea.validity?.valueMissing).to.be.true;
+    expect(textarea.checkValidity()).to.be.false;
+    expect(textarea.reportValidity()).to.be.false;
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'true');
+});
+it('is invalid when `value` is empty and `required` is set to `true` programmatically', async () => {
+    const textarea = await fixture(html `<glide-core-textarea label="Label"></glide-core-textarea>`);
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
+    textarea.required = true;
+    await elementUpdated(textarea);
+    expect(textarea.validity?.valid).to.be.false;
+    expect(textarea.validity?.valueMissing).to.be.true;
+    expect(textarea.checkValidity()).to.be.false;
+    expect(textarea.reportValidity()).to.be.false;
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'true');
+});
+it('is valid when `value` is empty and `required` is set to `false` programmatically', async () => {
+    const textarea = await fixture(html `<glide-core-textarea label="Label" required></glide-core-textarea>`);
+    expect(textarea.validity?.valid).to.be.false;
+    expect(textarea.validity?.valueMissing).to.be.true;
+    expect(textarea.checkValidity()).to.be.false;
+    expect(textarea.reportValidity()).to.be.false;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'true');
+    textarea.required = false;
+    await elementUpdated(textarea);
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
+});
+it('is valid when filled in, disabled, and value exceeds `maxlength`', async () => {
+    const textarea = await fixture(html `<glide-core-textarea
+      value="value"
+      disabled
+      maxlength="3"
+    ></glide-core-textarea>`);
     expect(textarea.validity?.valid).to.be.true;
     expect(textarea.validity?.valueMissing).to.be.false;
     expect(textarea.validity?.tooLong).to.be.false;
     expect(textarea.checkValidity()).to.be.true;
     expect(textarea.reportValidity()).to.be.true;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
 });
-it('is valid when filled in, disabled, and exceeds `maxlength`', async () => {
-    const template = '<glide-core-textarea value="value" disabled maxlength="3"></glide-core-textarea>';
-    const textarea = await fixture(template);
+it('is valid when filled in, readonly, and value exceeds `maxlength`', async () => {
+    const textarea = await fixture(html `<glide-core-textarea
+      value="value"
+      readonly
+      maxlength="3"
+    ></glide-core-textarea>`);
     expect(textarea.validity?.valid).to.be.true;
     expect(textarea.validity?.valueMissing).to.be.false;
     expect(textarea.validity?.tooLong).to.be.false;
     expect(textarea.checkValidity()).to.be.true;
     expect(textarea.reportValidity()).to.be.true;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
 });
 it('blurs the textarea and reports validity if `blur` is called', async () => {
     const textarea = await fixture(html `<glide-core-textarea required></glide-core-textarea>`);
@@ -91,6 +175,6 @@ it('blurs the textarea and reports validity if `blur` is called', async () => {
     await textarea.updateComplete;
     expect(textarea.shadowRoot?.activeElement === null).to.be.true;
     expect(textarea.validity.valid).to.equal(false);
-    expect(textarea.shadowRoot?.querySelector('glide-core-label')?.error).to.be
-        .true;
+    expect(textarea.shadowRoot?.querySelector('glide-core-private-label')?.error)
+        .to.be.true;
 });

package/dist/toasts.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var s,i=arguments.length,l=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(s=e[n])&&(l=(i<3?s(l):i>3?s(t,o,l):s(t,o))||l);return i>3&&l&&Object.defineProperty(t,o,l),l};import"./toasts.toast.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement}from"lit/decorators.js";import ow from"./library/ow.js";import styles from"./toasts.styles.js";let GlideCoreToasts=class GlideCoreToasts extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}add(e){const{variant:t,label:o,description:r,duration:s}=e,i=Object.assign(document.createElement("glide-core-toast"),{variant:t,label:o,description:r,duration:s});return ow(this.#e.value,ow.object.instanceOf(Element)),this.#e.value.append(i),i.addEventListener("close",(()=>{i.remove()}),{once:!0}),i}render(){return html`<div class="component" role="region" tabindex="-1" aria-label="${this.#t.term("notifications")}" ${ref(this.#e)}></div>`}#e=createRef();#t=new LocalizeController(this)};GlideCoreToasts=__decorate([customElement("glide-core-toasts")],GlideCoreToasts);export default GlideCoreToasts;
+var __decorate=this&&this.__decorate||function(e,t,o,r){var l,s=arguments.length,n=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var i=e.length-1;i>=0;i--)(l=e[i])&&(n=(s<3?l(n):s>3?l(t,o,n):l(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import"./toasts.toast.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement}from"lit/decorators.js";import ow from"./library/ow.js";import styles from"./toasts.styles.js";let GlideCoreToasts=class GlideCoreToasts extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}add(e){ow(this.#e.value,ow.object.instanceOf(Element)),this.#e.value.popover="manual",this.#e.value.showPopover();const{variant:t,label:o,description:r,duration:l}=e,s=Object.assign(document.createElement("glide-core-toast"),{variant:t,label:o,description:r,duration:l});return this.#e.value.append(s),s.addEventListener("close",(()=>{s.remove(),0===this.#e.value?.querySelectorAll("glide-core-toast").length&&this.#e.value?.hidePopover()}),{once:!0}),s}render(){return html`<div class="component" role="region" tabindex="-1" aria-label="${this.#t.term("notifications")}" ${ref(this.#e)}></div>`}#e=createRef();#t=new LocalizeController(this)};GlideCoreToasts=__decorate([customElement("glide-core-toasts")],GlideCoreToasts);export default GlideCoreToasts;

package/dist/toasts.styles.js

@@ -1,15 +1,22 @@
 import{css}from"lit";export default[css`
     .component {
-      display: flex;
+      background-color: transparent;
+      border: none;
+      display: none;
       flex-direction: column;
       gap: var(--glide-core-spacing-md);
       inline-size: 24.25rem;
       inset-block-start: 0;
       inset-inline-end: 0;
+      margin: 0 0 auto auto;
       max-block-size: 100%;
       max-inline-size: 100%;
       overflow: hidden;
       padding: var(--glide-core-spacing-sm);
       position: fixed;
+
+      &:popover-open {
+        display: flex;
+      }
     }
   `];

package/dist/toasts.test.basics.js

@@ -92,3 +92,23 @@ it('removes a closed toast from the DOM', async () => {
     toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
     expect(toasts?.length).to.equal(0);
 });
+it('is hidden unless there are toasts displayed', async () => {
+    const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
+    const shadowComponent = component.shadowRoot?.querySelector('.component');
+    assert(shadowComponent);
+    expect(shadowComponent.hasAttribute('popover')).to.equal(false);
+    expect(getComputedStyle(shadowComponent).display).to.equal('none');
+    component.add({
+        label: 'Test toast',
+        description: 'Test toast description',
+        variant: 'informational',
+    });
+    expect(shadowComponent.getAttribute('popover')).to.equal('manual');
+    expect(getComputedStyle(shadowComponent).display).to.equal('flex');
+    const toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
+    assert(toasts);
+    const toast = toasts[0];
+    toast.close();
+    toast.dispatchEvent(new Event('close', { bubbles: true }));
+    expect(getComputedStyle(shadowComponent).display).to.equal('none');
+});

package/dist/toggle.d.ts

@@ -8,9 +8,9 @@ declare global {
 /**
  * @description A toggle with a label and optional tooltip, summary, and description.
  *
- * @event change - Dispatched when checked or unchecked.
- * @event input - Dispatched when checked or unchecked.
-
+ * @event change - `(event: Event) => void`
+ * @event input - `(event: Event) => void`
+ *
  * @slot description - Additional information or context.
  * @slot tooltip - Content for the tooltip.
  */

package/dist/toggle.js

@@ -1 +1 @@
-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{ifDefined}from"lit/directives/if-defined.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}" split="${ifDefined(this.privateSplit??void 0)}" ?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()],GlideCoreToggle.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"summary",void 0),GlideCoreToggle=__decorate([customElement("glide-core-toggle")],GlideCoreToggle);export default GlideCoreToggle;
+var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<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--)(r=e[d])&&(s=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>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{ifDefined}from"lit/directives/if-defined.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-private-label orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?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}" @input="${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-private-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),"change"===e.type&&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()],GlideCoreToggle.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"summary",void 0),GlideCoreToggle=__decorate([customElement("glide-core-toggle")],GlideCoreToggle);export default GlideCoreToggle;

package/dist/toggle.stories.d.ts

@@ -4,4 +4,4 @@ export default meta;
 export declare const Horizontal: StoryObj;
 export declare const HorizontalWithTooltip: StoryObj;
 export declare const Vertical: StoryObj;
-export declare const VerticalWithToolip: StoryObj;
+export declare const VerticalWithTooltip: StoryObj;

package/dist/toggle.test.focus.js

@@ -1,7 +1,7 @@
 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 () => {
+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"]');

package/dist/toggle.test.interactions.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/{toggle.test.states.js → toggle.test.interactions.js}

@@ -42,3 +42,29 @@ it('is still unchecked after being clicked when unchecked and disabled', async (
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.getAttribute('aria-checked')).to.equal('false');
 });
+it('is unchecked after being clicked then forcibly unchecked via a "change" listener', async () => {
+    const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
+    component.addEventListener('change', async () => {
+        await component.updateComplete;
+        component.checked = false;
+    });
+    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');
+});
+it('is unchecked after being clicked then forcibly unchecked via an "input" listener', async () => {
+    const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
+    component.addEventListener('input', async () => {
+        await component.updateComplete;
+        component.checked = false;
+    });
+    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

@@ -5,19 +5,21 @@ declare global {
     }
 }
 /**
- * @slot - The contents of the tooltip.
- * @slot target - The element to which the tooltip should attach.
+ * @slot - The content of the tooltip.
+ * @slot target - The element to which the tooltip should anchor.
  */
 export default class GlideCoreTooltip extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    disabled: boolean;
+    get disabled(): boolean;
+    set disabled(isDisabled: boolean);
+    offset: number;
+    get open(): boolean;
+    set open(isOpen: boolean);
     placement?: 'bottom' | 'left' | 'right' | 'top';
-    containingBlock?: Element;
+    disconnectedCallback(): void;
     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 @@
-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,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{ifDefined}from"lit/directives/if-defined.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{constructor(){super(...arguments),this.disabled=!1,this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#i=createRef(),this.#l=createRef(),this.#s=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#l.value),this.#a()}get isVisible(){return this.#o}set isVisible(e){this.#o=e,this.isVisible?this.#a():this.#r?.()}render(){return html`<div class="component" @mouseover="${this.#n}" @mouseout="${this.#f}"><div aria-labelledby="${ifDefined(this.disabled?void 0:"tooltip")}" class="target" slot="target" @focusin="${this.#p}" @focusout="${this.#c}" @keydown="${this.#d}" ${ref(this.#i)}><slot @slotchange="${this.#m}" ${ref(this.#l)} name="target"></slot></div><div class="${classMap({tooltip:!0,visible:this.isVisible&&!this.disabled})}" id="tooltip" role="${ifDefined(this.disabled?void 0:"tooltip")}" ${ref(this.#s)}><span aria-label="${ifDefined(this.disabled?void 0:"Tooltip: ")}"></span><slot @slotchange="${this.#h}" ${ref(this.#t)}></slot><div class="arrow" ${ref(this.#e)}></div></div></div>`}setContainingBlock(e){this.containingBlock=e}#e;#r;#u;#t;#o;#i;#l;#s;#g(){clearTimeout(this.#u)}#h(){owSlot(this.#t.value)}#p(){this.isVisible=!0}#c(){this.isVisible=!1}#d(e){"Escape"===e.key&&(this.isVisible=!1)}#f(){this.#R()}#n(){this.#g(),this.isVisible=!0}#m(){owSlot(this.#l.value)}#R(){this.#u=setTimeout((()=>{this.isVisible=!1}),200)}#a(){this.#i.value&&this.#s.value&&(this.#r=autoUpdate(this.#i.value,this.#s.value,(()=>{(async()=>{if(this.#i.value&&this.#s.value){const e=this.#e.value,{placement:t,x:o,y:i,middlewareData:l}=await computePosition(this.#i.value,this.#s.value,{platform:{...platform,getOffsetParent:e=>this.containingBlock&&e!==this.#e.value?this.containingBlock:platform.getOffsetParent(e,offsetParent)},placement:this.placement,strategy:"fixed",middleware:[offset(6),flip({fallbackStrategy:"initialPlacement"}),shift(),arrow({element:e})]});Object.assign(this.#s.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"})}})()})))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"disabled",void 0),__decorate([property()],GlideCoreTooltip.prototype,"placement",void 0),__decorate([state()],GlideCoreTooltip.prototype,"containingBlock",void 0),__decorate([state()],GlideCoreTooltip.prototype,"isVisible",null),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 n=e.length-1;n>=0;n--)(i=e[n])&&(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 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.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.#n():this.#r()}get open(){return this.#l}set open(e){this.#l=e,e&&!this.disabled?this.#n():this.#r()}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#f),clearTimeout(this.#p)}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.#n()}render(){return html`<div class="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.#c}" @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="#212121"/></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="#212121"/></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="#212121"/></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="#212121"/></svg>`]])}</div><span aria-label="${ifDefined(this.disabled?void 0:"Tooltip: ")}"></span><slot class="default-slot" @slotchange="${this.#R}" ${ref(this.#t)}></slot></div></div>`}#e;#g;#f;#t;#o;#l;#p;#i;#s;#a;#E(){clearTimeout(this.#f)}#r(){this.#a.value?.hidePopover(),this.#g&&this.#g()}#R(){owSlot(this.#t.value)}#c(){this.open=!0}#m(){this.open=!1}#u(e){"Escape"===e.key&&(this.open=!1)}#d(){this.#w(),clearTimeout(this.#p)}#h(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#E(),this.#p=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))}#n(){this.disabled||(this.#g?.(),this.#i.value&&this.#a.value&&(this.#g=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([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip")],GlideCoreTooltip);export default GlideCoreTooltip;

package/dist/tooltip.styles.js

@@ -1,7 +1,26 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    @keyframes tooltip {
+      from {
+        opacity: 0;
+        transform: scale(0.95);
+      }
+
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    :host {
+      display: inline-block;
+    }
+
     .component {
       /* https://github.com/CrowdStrike/glide-core/pull/119#issuecomment-2113314591 */
       display: flex;
+
+      /* https://css-tricks.com/flexbox-truncated-text/#aa-the-solution-is-min-width-0-on-the-flex-child */
+      min-inline-size: 0;
       position: relative;
     }
 
@@ -9,10 +28,13 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       background-color: transparent;
       border-width: 0;
 
-      /* Additional whitespace from line height and the tooltip won't be vertically centered. */
+      /* 
+        Additional whitespace from line height and the tooltip won't be vertically 
+        centered against its target. 
+      */
       display: flex;
 
-      /* Allows the consumer to style the target using "text-overflow: ellipsis". */
+      /* Allows the consumer to style the target with an ellipsis when its text is truncated. */
       inline-size: 100%;
       padding: 0;
       position: relative;
@@ -31,22 +53,11 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     }
 
     .tooltip {
-      background-color: var(--glide-core-surface-base-dark);
-      border-radius: var(--glide-core-spacing-xs);
-      color: var(--glide-core-text-selected);
-      display: none;
-      font-family: var(--glide-core-body-md-font-family);
-      font-style: var(--glide-core-body-md-font-style);
-      font-weight: var(--glide-core-body-md-font-weight);
-      inline-size: max-content;
-      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;
+      background-color: transparent;
+      border: none;
+      inset: unset;
+      padding: 0;
+      position: absolute;
 
       ::slotted(kbd) {
         color: var(--glide-core-text-header-2);
@@ -56,16 +67,70 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         white-space: nowrap;
       }
 
-      &.visible {
-        display: unset;
+      &:popover-open {
+        animation: tooltip 250ms cubic-bezier(0.25, 0, 0.3, 1);
+        display: flex;
+
+        /* 
+          Elements with a "popover" attribute don't allow overflow. So the arrow can't
+          be positioned with "position: absolute". Relative positioning is used instead. 
+          Flex is used to get the arrow on the correct side of the tooltip. Floating UI 
+          handles the rest. 
+          
+          A simple "transform" could replace Floating UI for the arrow if not for a Chrome 
+          bug with "popover" when "scale()" is animated on the popover or a container within 
+          it. With "transform" on the arrow, the arrow is initially offset by a couple pixels 
+          before landing in the correct position when the animation finishes. It only happens 
+          when the tooltip is left or right of its target.
+        */
+
+        &.top {
+          flex-direction: column-reverse;
+        }
+
+        &.right {
+          flex-direction: row-reverse;
+        }
+
+        &.bottom {
+          flex-direction: column;
+        }
       }
     }
 
     .arrow {
-      background: var(--glide-core-surface-base-dark);
-      block-size: 0.375rem;
-      inline-size: 0.375rem;
-      position: absolute;
-      transform: rotate(45deg);
+      --arrow-height: 0.375rem;
+      --arrow-width: 0.625rem;
+
+      display: flex;
+      position: relative;
+
+      &.top,
+      &.bottom {
+        block-size: var(--arrow-height);
+        inline-size: var(--arrow-width);
+      }
+
+      &.right,
+      &.left {
+        block-size: var(--arrow-width);
+        inline-size: var(--arrow-height);
+        order: 2;
+      }
+    }
+
+    .default-slot {
+      background-color: var(--glide-core-surface-base-dark);
+      border-radius: var(--glide-core-spacing-xs);
+      color: var(--glide-core-text-selected);
+      display: block;
+      font-family: var(--glide-core-body-md-font-family);
+      font-style: var(--glide-core-body-md-font-style);
+      font-weight: var(--glide-core-body-md-font-weight);
+      inline-size: max-content;
+      inset-block-start: 50%;
+      max-inline-size: 11.25rem;
+      overflow-wrap: break-word;
+      padding: var(--glide-core-spacing-xs) var(--glide-core-spacing-sm);
     }
   `];

package/dist/tooltip.test.basics.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './tooltip.js';
 import { ArgumentError } from 'ow';
-import { expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreTooltip from './tooltip.js';
 import sinon from 'sinon';
 GlideCoreTooltip.shadowRootOptions.mode = 'open';
@@ -18,6 +18,31 @@ it('is accessible', async () => {
         ignoredRules: ['aria-tooltip-name'],
     });
 });
+it('has defaults', async () => {
+    const component = await fixture(html `<glide-core-tooltip>
+      Tooltip
+      <span slot="target" tabindex="0">Target</span>
+    </glide-core-tooltip>`);
+    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
+    // Wait for Floating UI.
+    await aTimeout(0);
+    expect(component.offset).to.equal(4);
+    expect(component.open).to.be.false;
+    expect(component.placement).to.be.be.undefined;
+    expect(component.disabled).to.be.false;
+    expect(component.hasAttribute('disabled')).to.be.false;
+    expect(tooltip?.checkVisibility()).to.be.false;
+});
+it('can be open', async () => {
+    const component = await fixture(html `<glide-core-tooltip aria-label="Label" open>
+      Tooltip
+      <span slot="target" tabindex="0">Target</span>
+    </glide-core-tooltip>`);
+    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
+    // Wait for Floating UI.
+    await aTimeout(0);
+    expect(tooltip?.checkVisibility()).to.be.true;
+});
 it('can have a tooltip', async () => {
     const component = await fixture(html `<glide-core-tooltip aria-label="Label">
       Tooltip
@@ -39,6 +64,16 @@ it('can have a target', async () => {
         ?.assignedElements();
     expect(assignedElements?.at(0)?.textContent).to.equal('Target');
 });
+it('does not open when disabled', async () => {
+    const component = await fixture(html `<glide-core-tooltip aria-label="Label" open disabled>
+      Tooltip
+      <span slot="target" tabindex="0">Target</span>
+    </glide-core-tooltip>`);
+    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
+    // Wait for Floating UI.
+    await aTimeout(0);
+    expect(tooltip?.checkVisibility()).to.be.false;
+});
 it('throws if it does not have a default slot', async () => {
     const spy = sinon.spy();
     try {
@@ -49,7 +84,7 @@ it('throws if it does not have a default slot', async () => {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });
 it('throws if it does not have a "target" slot', async () => {
     const spy = sinon.spy();
@@ -61,5 +96,5 @@ it('throws if it does not have a "target" slot', async () => {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });