@crowdstrike/glide-core 0.9.0 → 0.9.2

package/dist/textarea.stories.d.ts

@@ -3,10 +3,6 @@ declare const meta: Meta;
 export default meta;
 export declare const Default: StoryObj;
 export declare const WithError: StoryObj;
-export declare const Description: StoryObj;
-export declare const Readonly: StoryObj;
-export declare const Disabled: StoryObj;
-export declare const Placeholder: StoryObj;
 export declare const MaxLength: StoryObj;
 export declare const MaxLengthAndDescription: StoryObj;
 export declare const Tooltip: StoryObj;

package/dist/textarea.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
 export default _default;

package/dist/textarea.styles.js

@@ -1,81 +1,77 @@
-import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidden.js";const fieldSizingContent=unsafeCSS("\n  field-sizing: content;\n");export default css`
-  glide-core-private-label::part(tooltips-and-label) {
-    align-items: flex-start;
-    margin-block-start: var(--glide-core-spacing-sm);
-  }
-
-  .textarea-container {
-    display: flex;
-  }
+import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidden.js";const fieldSizingContent=unsafeCSS("\n  field-sizing: content;\n");export default[css`
+    ${visuallyHidden(".character-count .hidden")}
+  `,css`
+    glide-core-private-label::part(tooltips-and-label) {
+      align-items: flex-start;
+      margin-block-start: var(--glide-core-spacing-sm);
+    }
 
-  .description {
-    display: block;
-  }
+    .textarea-container {
+      display: flex;
+    }
 
-  textarea {
-    appearance: none;
-    background-color: var(--glide-core-surface-base-lighter);
-    border: 1px solid var(--glide-core-border-base-light);
-    border-radius: 0.5rem;
-    color: var(--glide-core-text-body-1);
-    cursor: inherit;
-    display: block;
-    flex-grow: 1;
-    font-family: var(--glide-core-body-xs-font-family);
-    font-size: var(--glide-core-body-sm-font-size);
-    font-weight: var(--glide-core-body-xs-font-weight);
-    max-block-size: 5lh;
-    min-block-size: 3lh;
-    padding: var(--glide-core-spacing-xs) var(--glide-core-spacing-sm);
-    resize: vertical;
-    transition: border-color 200ms ease-in-out;
+    .description {
+      display: block;
+    }
 
-    ${fieldSizingContent};
+    textarea {
+      appearance: none;
+      background-color: var(--glide-core-surface-base-lighter);
+      border: 1px solid var(--glide-core-border-base);
+      border-radius: 0.5rem;
+      color: var(--glide-core-text-body-1);
+      cursor: inherit;
+      display: block;
+      flex-grow: 1;
+      font-family: var(--glide-core-body-xs-font-family);
+      font-size: var(--glide-core-body-sm-font-size);
+      font-weight: var(--glide-core-body-xs-font-weight);
+      max-block-size: 5lh;
+      min-block-size: 3lh;
+      padding: var(--glide-core-spacing-xs) var(--glide-core-spacing-sm);
+      resize: vertical;
+      transition: border-color 200ms ease-in-out;
 
-    &:hover {
-      border-color: var(--glide-core-border-base);
-    }
+      ${fieldSizingContent};
 
-    &:focus {
-      outline: none;
-    }
+      &:focus {
+        outline: none;
+      }
 
-    &:focus-visible,
-    &:focus-visible[readonly] {
-      border-color: var(--glide-core-border-focus);
-    }
+      &:focus-visible,
+      &:focus-visible[readonly],
+      &:hover {
+        border-color: var(--glide-core-border-focus);
+      }
 
-    &.error {
-      border-color: var(--glide-core-status-error);
-    }
+      &.error {
+        border-color: var(--glide-core-status-error);
+      }
 
-    &[readonly] {
-      border-color: transparent;
-      outline: none;
-      transition: none;
-    }
+      &[readonly] {
+        border-color: transparent;
+        outline: none;
+        resize: none;
+        transition: none;
+      }
 
-    &[disabled] {
-      background-color: var(--glide-core-surface-disabled);
-      border: 0.0625rem solid var(--glide-core-border-base-light);
-      color: var(--glide-core-text-tertiary-disabled);
+      &[disabled] {
+        background-color: var(--glide-core-surface-disabled);
+        border: 0.0625rem solid var(--glide-core-border-base-light);
+        color: var(--glide-core-text-tertiary-disabled);
+      }
     }
-  }
-
-  .meta {
-    column-gap: var(--glide-core-spacing-xs);
-    display: flex;
-    font-size: var(--glide-core-body-xs-font-size);
-    justify-content: space-between;
-  }
 
-  .character-count {
-    &.error {
-      font-weight: var(--glide-core-font-weight-bold);
+    .meta {
+      column-gap: var(--glide-core-spacing-xs);
+      display: flex;
+      font-size: var(--glide-core-body-xs-font-size);
+      justify-content: space-between;
     }
 
-    .hidden {
-      ${visuallyHidden};
+    .character-count {
+      &.error {
+        font-weight: var(--glide-core-font-weight-bold);
+      }
     }
-  }
-`;
+  `];

package/dist/textarea.test.basics.js

@@ -7,171 +7,171 @@ it('registers', async () => {
     expect(window.customElements.get('glide-core-textarea')).to.equal(GlideCoreTextarea);
 });
 it('is accessible', async () => {
-    const element = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       value="value"
       label="label"
     ></glide-core-textarea>`);
-    await expect(element).to.be.accessible();
+    await expect(component).to.be.accessible();
 });
 it('renders a textarea with two rows and value when attribute `value` is set ', async () => {
-    const element = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       value="value"
       label="label"
     ></glide-core-textarea>`);
-    const textarea = element.shadowRoot.querySelector('textarea');
-    expect(element);
-    expect(element).to.have.attribute('rows', '2');
+    const textarea = component.shadowRoot.querySelector('textarea');
+    expect(component);
+    expect(component).to.have.attribute('rows', '2');
     expect(textarea).to.exist;
     expect(textarea).to.have.attribute('rows', '2');
 });
 it('renders the `rows` attribute on the textarea when set', async () => {
-    const element = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       value="value"
       label="label"
       rows="5"
     ></glide-core-textarea>`);
-    const textarea = element.shadowRoot.querySelector('textarea');
+    const textarea = component.shadowRoot.querySelector('textarea');
     expect(textarea).to.have.attribute('rows', '5');
 });
 it('renders a label when attribute `label` is set', async () => {
-    const element = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       value="value"
       label="label"
     ></glide-core-textarea>`);
-    const label = element.shadowRoot.querySelector('label');
+    const label = component.shadowRoot.querySelector('label');
     expect(label).to.exist;
     expect(label?.textContent?.trim()).to.be.equal('label');
 });
 it('renders the textarea as readonly when attribute `readonly` is set', async () => {
-    const element = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       value="value"
       label="label"
       readonly
     ></glide-core-textarea>`);
-    const textarea = element.shadowRoot.querySelector('textarea');
+    const textarea = component.shadowRoot.querySelector('textarea');
     expect(textarea).to.have.attribute('readonly');
 });
 it('renders the textarea as disabled when attribute `disabled` is set', async () => {
-    const element = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       value="value"
       label="label"
       disabled
     ></glide-core-textarea>`);
-    const textarea = element.shadowRoot.querySelector('textarea');
+    const textarea = component.shadowRoot.querySelector('textarea');
     expect(textarea).to.have.attribute('disabled');
 });
 it('renders the textarea with a placeholder when attribute `placeholder` is set', async () => {
-    const element = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       value=""
       label="label"
       placeholder="placeholder"
     ></glide-core-textarea>`);
-    const textarea = element.shadowRoot.querySelector('textarea');
+    const textarea = component.shadowRoot.querySelector('textarea');
     expect(textarea).to.have.attribute('placeholder', 'placeholder');
 });
 it('renders `required` on textarea when set', async () => {
-    const element = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       value="value"
       label="label"
       required
     ></glide-core-textarea>`);
-    const textarea = element.shadowRoot.querySelector('textarea');
+    const textarea = component.shadowRoot.querySelector('textarea');
     expect(textarea).to.have.attribute('required');
 });
 it('renders a `name` attribute on the textarea when set', async () => {
-    const element = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       value="value"
       label="label"
       name="test-name"
     ></glide-core-textarea>`);
-    const textarea = element.shadowRoot.querySelector('textarea');
+    const textarea = component.shadowRoot.querySelector('textarea');
     expect(textarea).to.have.attribute('name', 'test-name');
 });
 it('supports a "tooltip" slot', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-textarea value="value" label="label" required>
       <div slot="tooltip">Tooltip</div>
     </glide-core-textarea>
   `);
-    const assignedElements = element.shadowRoot
+    const assignedElements = component.shadowRoot
         ?.querySelector('slot[name="tooltip"]')
         ?.assignedElements();
     expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
 });
 it('renders a slot with description', async () => {
-    const element = await fixture(html `<glide-core-textarea value="value" label="label"
+    const component = await fixture(html `<glide-core-textarea value="value" label="label"
       ><span slot="description" data-test-content
         >Description</span
       ></glide-core-textarea
     >`);
-    expect(element).to.exist;
-    const contentRendered = element.querySelector('[data-test-content]');
+    expect(component).to.exist;
+    const contentRendered = component.querySelector('[data-test-content]');
     expect(contentRendered).to.exist;
     expect(contentRendered?.textContent).to.be.equal('Description');
 });
 it('displays visually hidden character count text for screenreaders', async () => {
-    const element = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       maxlength="10"
     ></glide-core-textarea>`);
-    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
+    const maxCharacterCountAnnouncement = component.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
     expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 0 of 10');
 });
 it('renders a character count when attribute `maxlength` is set greater than zero', async () => {
-    const element = await fixture(html `<glide-core-textarea value="value" label="label" maxlength="10"
+    const component = await fixture(html `<glide-core-textarea value="value" label="label" maxlength="10"
       ><span slot="description">Description</span></glide-core-textarea
     >`);
-    const container = element.shadowRoot.querySelector('[data-test="character-count-text"]');
+    const container = component.shadowRoot.querySelector('[data-test="character-count-text"]');
     expect(container?.textContent?.trim()).to.be.equal('5/10');
 });
 it('does not render a character count when attribute `maxlength` is set less than than zero', async () => {
-    const element = await fixture(html `<glide-core-textarea value="value" label="label" maxlength="0"
+    const component = await fixture(html `<glide-core-textarea value="value" label="label" maxlength="0"
       ><span slot="description">Description</span></glide-core-textarea
     >`);
-    const container = element.shadowRoot?.querySelector('[data-test="character-count-container"]');
+    const container = component.shadowRoot?.querySelector('[data-test="character-count-container"]');
     expect(container).to.be.null;
 });
 it('focuses the textarea when the label is clicked', async () => {
-    const element = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       value="value"
       label="label"
     ></glide-core-textarea>`);
-    const label = element.shadowRoot.querySelector('label');
+    const label = component.shadowRoot.querySelector('label');
     label?.click();
-    expect(element).to.have.focus;
-    await expect(element.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
+    expect(component).to.have.focus;
+    await expect(component.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
 });
 it('has tabbable textarea', async () => {
-    const element = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       value="value"
       label="label"
     ></glide-core-textarea>`);
     await sendKeys({ press: 'Tab' });
-    expect(element).to.have.focus;
-    await expect(element.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
+    expect(component).to.have.focus;
+    await expect(component.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
 });
 it('renders text when typed into text area', async () => {
-    const element = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
-    const textarea = element.shadowRoot.querySelector('textarea');
-    element.focus();
+    const component = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
+    const textarea = component.shadowRoot.querySelector('textarea');
+    component.focus();
     await sendKeys({ type: 'test text' });
     expect(textarea?.value).to.equal('test text');
 });
 it('returns the content of the textarea when getting the `value` property', async () => {
-    const element = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
-    element.focus();
+    const component = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
+    component.focus();
     await sendKeys({ type: 'test text' });
-    expect(element.value).to.equal('test text');
+    expect(component.value).to.equal('test text');
 });
 it('focuses the textarea when `focus()` is called', async () => {
-    const element = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
-    element.focus();
-    await expect(element.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
+    const component = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
+    component.focus();
+    await expect(component.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
 });
 it('blurs the textarea when `blur` is called', async () => {
-    const element = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
-    element.focus();
-    await expect(element.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
-    element.blur();
-    await expect(element.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.not.equal('textarea');
+    const component = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
+    component.focus();
+    await expect(component.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
+    component.blur();
+    await expect(component.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.not.equal('textarea');
 });

package/dist/toasts.d.ts

@@ -19,6 +19,11 @@ export default class GlideCoreToasts extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    /**
+     * @param {number} [toast.duration=5000]
+     *  Optional: Number of milliseconds before the Toast auto-hides.
+     *  Minimum: `5000`. Default: `5000`. For a Toast that never auto-hides, set to `Infinity`
+     *  */
     add(toast: Toast): import("./toasts.toast.js").default & {
         variant: "success" | "informational";
         label: string;

package/dist/toasts.styles.js

@@ -3,7 +3,7 @@ import{css}from"lit";export default[css`
       background-color: transparent;
       border: none;
       display: none;
-      flex-direction: column;
+      flex-direction: column-reverse;
       gap: var(--glide-core-spacing-md);
       inline-size: 24.25rem;
       inset-block-start: 0;

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 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}" ${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),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.styles.js

@@ -1,4 +1,6 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    ${focusOutline(".toggle-and-input:has(input:focus-visible)")}
+  `,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 +32,6 @@ Use the ":checked" pseudo class on the host and throughout when browsers support
       position: relative;
 
       &:has(input:focus-visible) {
-        ${focusOutline};
         outline-offset: 4px;
       }
 

package/dist/toggle.test.interactions.js

@@ -42,3 +42,40 @@ 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');
+});
+it('remains unchecked when its "click" event is canceled', async () => {
+    const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
+    component.addEventListener('click', async (event) => {
+        event.preventDefault();
+    });
+    component.click();
+    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,8 +5,8 @@ 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;

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 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;
+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" data-test="component" @mouseover="${this.#d}" @mouseout="${this.#h}"><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)}#h(){this.#w(),clearTimeout(this.#p)}#d(){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,5 +1,7 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    @keyframes tooltip {
+    ${focusOutline(".target:focus-visible")}
+  `,css`
+    @keyframes opacity-and-scale {
       from {
         opacity: 0;
         transform: scale(0.95);
@@ -11,6 +13,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
     }
 
+    @media (prefers-reduced-motion: reduce) {
+      .tooltip:popover-open {
+        animation: none !important;
+      }
+    }
+
     :host {
       display: inline-block;
     }
@@ -28,9 +36,9 @@ 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 against its target. 
+      /*
+        Additional whitespace from line height and the tooltip won't be vertically
+        centered against its target.
       */
       display: flex;
 
@@ -43,10 +51,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         outline: none;
       }
 
-      &:focus-visible {
-        ${focusOutline};
-      }
-
       ::slotted svg {
         display: block;
       }
@@ -68,19 +72,19 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
 
       &:popover-open {
-        animation: tooltip 250ms cubic-bezier(0.25, 0, 0.3, 1);
+        animation: opacity-and-scale 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 
+          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.
         */