@crowdstrike/glide-core 0.9.6 → 0.10.0

package/dist/textarea.test.validity.js

@@ -4,177 +4,209 @@ import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreTextarea from './textarea.js';
 GlideCoreTextarea.shadowRootOptions.mode = 'open';
 it('is valid by default', async () => {
-    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');
+    const component = await fixture(html `<glide-core-textarea></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 after being filled in and required', async () => {
-    const textarea = await fixture(html `<glide-core-textarea required></glide-core-textarea>`);
-    textarea.focus();
+    const component = await fixture(html `<glide-core-textarea required></glide-core-textarea>`);
+    component.focus();
     await sendKeys({ type: 'value' });
-    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');
+    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 if no value and required', async () => {
-    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');
+    const component = await fixture(html `<glide-core-textarea required></glide-core-textarea>`);
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.validity?.tooLong).to.be.false;
+    expect(component.willValidate).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 when empty and does not exceed `maxlength`', async () => {
-    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');
+    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 textarea = await fixture(html `<glide-core-textarea maxlength="3"></glide-core-textarea>`);
-    textarea.focus();
+    const component = await fixture(html `<glide-core-textarea maxlength="3"></glide-core-textarea>`);
+    component.focus();
     await sendKeys({ type: 'abc' });
-    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');
+    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 textarea = await fixture(html `<glide-core-textarea maxlength="3"></glide-core-textarea>`);
-    textarea.focus();
+    const component = await fixture(html `<glide-core-textarea maxlength="3"></glide-core-textarea>`);
+    component.focus();
     await sendKeys({ type: 'value' });
-    expect(textarea.validity?.valid).to.be.false;
-    expect(textarea.validity?.valueMissing).to.be.false;
-    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');
+    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 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');
+    const component = await fixture(html `<glide-core-textarea required disabled></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('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');
+    const component = await fixture(html `<glide-core-textarea label="Label" required></glide-core-textarea>`);
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.valueMissing).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');
+    component.value = 'text';
+    await elementUpdated(component);
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).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');
     // 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');
+    component.value = '';
+    await elementUpdated(component);
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    expect(component.shadowRoot
+        ?.querySelector('textarea')
+        ?.getAttribute('aria-invalid')).to.equal('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');
+    const component = await fixture(html `<glide-core-textarea label="Label"></glide-core-textarea>`);
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).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');
+    component.required = true;
+    await elementUpdated(component);
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    expect(component.shadowRoot
+        ?.querySelector('textarea')
+        ?.getAttribute('aria-invalid')).to.equal('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');
+    const component = await fixture(html `<glide-core-textarea label="Label" required></glide-core-textarea>`);
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.valueMissing).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');
+    component.required = false;
+    await elementUpdated(component);
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    expect(component.shadowRoot
+        ?.querySelector('textarea')
+        ?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('is valid when filled in, disabled, and value exceeds `maxlength`', async () => {
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = 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');
+    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 textarea = await fixture(html `<glide-core-textarea
+    const component = 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');
+    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 textarea = await fixture(html `<glide-core-textarea required></glide-core-textarea>`);
-    textarea.focus();
-    const textareaElement = textarea.shadowRoot?.querySelector('textarea');
-    expect(textarea.shadowRoot?.activeElement === textareaElement).to.be.true;
-    textarea.blur();
-    await textarea.updateComplete;
-    expect(textarea.shadowRoot?.activeElement === null).to.be.true;
-    expect(textarea.validity.valid).to.equal(false);
-    expect(textarea.shadowRoot?.querySelector('glide-core-private-label')?.error)
+    const component = await fixture(html `<glide-core-textarea required></glide-core-textarea>`);
+    component.focus();
+    const textareaElement = component.shadowRoot?.querySelector('textarea');
+    expect(component.shadowRoot?.activeElement === textareaElement).to.be.true;
+    component.blur();
+    await component.updateComplete;
+    expect(component.shadowRoot?.activeElement === null).to.be.true;
+    expect(component.validity.valid).to.be.false;
+    expect(component.shadowRoot?.querySelector('glide-core-private-label')?.error)
         .to.be.true;
 });

package/dist/toasts.d.ts

@@ -11,10 +11,6 @@ export interface Toast {
     variant: 'informational' | 'success';
     duration?: number;
 }
-/**
- * @description A container and controller for toast messages.
-
- */
 export default class GlideCoreToasts extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
@@ -25,7 +21,7 @@ export default class GlideCoreToasts extends LitElement {
      *  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";
+        variant: "informational" | "success";
         label: string;
         description: string;
         duration: number | undefined;

package/dist/toasts.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { assert, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreToasts from './toasts.js';
 GlideCoreToasts.shadowRootOptions.mode = 'open';
@@ -96,7 +97,7 @@ 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(shadowComponent.hasAttribute('popover')).to.be.false;
     expect(getComputedStyle(shadowComponent).display).to.equal('none');
     component.add({
         label: 'Test toast',

package/dist/toasts.toast.d.ts

@@ -1,5 +1,4 @@
 import './icon-button.js';
-import './status-indicator.js';
 import './tooltip.js';
 import { LitElement } from 'lit';
 import type { Toast } from './toasts.js';
@@ -10,9 +9,7 @@ declare global {
 }
 /**
  * @private
- *
- * @description A message that animates onto the screen
- */
+ * */
 export default class GlideCoreToast extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;

package/dist/toasts.toast.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var s,r=arguments.length,l=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(l=(r<3?s(l):r>3?s(t,o,l):s(t,o))||l);return r>3&&l&&Object.defineProperty(t,o,l),l};import"./icon-button.js";import"./status-indicator.js";import"./tooltip.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import styles from"./toasts.toast.styles.js";let GlideCoreToast=class GlideCoreToast extends LitElement{constructor(){super(...arguments),this.duration=5e3,this.#e=createRef(),this.#t=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}close(){const e=this.#e?.value;e?.addEventListener("transitionend",(()=>{e?.classList?.remove("open"),e?.classList?.remove("closing"),e?.classList?.add("closed"),this.dispatchEvent(new Event("close",{bubbles:!0}))}),{once:!0}),e?.classList?.add("closing")}firstUpdated(){requestAnimationFrame((()=>{this.open()}))}open(){const e=Math.max(this.duration??0,5e3);e<Number.POSITIVE_INFINITY&&setTimeout((()=>{this.close()}),e),this.#e?.value?.classList?.add("open")}render(){return html`<div class="${classMap({component:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label description" ${ref(this.#e)}><glide-core-status-indicator style="--size: 1.25rem;" class="icon" variant="${this.#o}"></glide-core-status-indicator><div class="label" id="label">${this.label}</div><glide-core-icon-button label="${this.#t.term("close")}" variant="tertiary" class="close-button" @click="${this.#i}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-icon-button><div class="description" id="description">${this.description}</div></div>`}#e;#t;#i(){this.close()}get#o(){return{informational:"warning-informational",success:"success"}[this.variant]}};__decorate([property({reflect:!0})],GlideCoreToast.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToast.prototype,"description",void 0),__decorate([property()],GlideCoreToast.prototype,"variant",void 0),__decorate([property({type:Number})],GlideCoreToast.prototype,"duration",void 0),GlideCoreToast=__decorate([customElement("glide-core-toast")],GlideCoreToast);export default GlideCoreToast;
+var __decorate=this&&this.__decorate||function(e,t,o,i){var s,r=arguments.length,l=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var n=e.length-1;n>=0;n--)(s=e[n])&&(l=(r<3?s(l):r>3?s(t,o,l):s(t,o))||l);return r>3&&l&&Object.defineProperty(t,o,l),l};import"./icon-button.js";import"./tooltip.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{when}from"lit/directives/when.js";import styles from"./toasts.toast.styles.js";let GlideCoreToast=class GlideCoreToast extends LitElement{constructor(){super(...arguments),this.duration=5e3,this.#e=createRef(),this.#t=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}close(){const e=this.#e?.value;e?.addEventListener("transitionend",(()=>{e?.classList?.remove("open"),e?.classList?.remove("closing"),e?.classList?.add("closed"),this.dispatchEvent(new Event("close",{bubbles:!0}))}),{once:!0}),e?.classList?.add("closing")}firstUpdated(){requestAnimationFrame((()=>{this.open()}))}open(){const e=Math.max(this.duration??0,5e3);e<Number.POSITIVE_INFINITY&&setTimeout((()=>{this.close()}),e),this.#e?.value?.classList?.add("open")}render(){return html`<div class="${classMap({component:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label description" ${ref(this.#e)}>${when("success"===this.#o,(()=>html`<svg aria-hidden="true" class="${classMap({icon:!0,success:!0})}" fill="none" height="16" width="16" viewBox="0 0 24 24"><path clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM16.7071 9.70711C17.0976 9.31658 17.0976 8.68342 16.7071 8.29289C16.3166 7.90237 15.6834 7.90237 15.2929 8.29289L10 13.5858L7.70711 11.2929C7.31658 10.9024 6.68342 10.9024 6.29289 11.2929C5.90237 11.6834 5.90237 12.3166 6.29289 12.7071L9.29289 15.7071C9.68342 16.0976 10.3166 16.0976 10.7071 15.7071L16.7071 9.70711Z" fill="currentColor" fill-rule="evenodd"/></svg>`),(()=>html`<svg aria-hidden="true" class="${classMap({icon:!0,"warning-informational":!0})}" fill="none" height="16" width="16" viewBox="0 0 24 24"><path clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8V12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12V8ZM12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z" fill="currentColor" fill-rule="evenodd"/></svg>`))}<div class="label" id="label">${this.label}</div><glide-core-icon-button label="${this.#t.term("close")}" variant="tertiary" class="close-button" @click="${this.#i}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-icon-button><div class="description" id="description">${this.description}</div></div>`}#e;#t;#i(){this.close()}get#o(){return{informational:"warning-informational",success:"success"}[this.variant]}};__decorate([property({reflect:!0})],GlideCoreToast.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToast.prototype,"description",void 0),__decorate([property()],GlideCoreToast.prototype,"variant",void 0),__decorate([property({type:Number})],GlideCoreToast.prototype,"duration",void 0),GlideCoreToast=__decorate([customElement("glide-core-toast")],GlideCoreToast);export default GlideCoreToast;

package/dist/toasts.toast.styles.js

@@ -42,10 +42,13 @@ import{css}from"lit";export default[css`
     }
 
     .icon {
+      block-size: 1.25rem;
       grid-column: 1;
+      inline-size: 1.25rem;
     }
 
     .label {
+      color: var(--glide-core-text-body-2);
       font-size: var(--glide-core-heading-xs-font-size);
       font-weight: var(--glide-core-heading-xs-font-weight);
       grid-column: 2;
@@ -58,6 +61,15 @@ import{css}from"lit";export default[css`
     }
 
     .description {
+      color: var(--glide-core-text-body-2);
       grid-column: 2;
     }
+
+    .success {
+      color: var(--glide-core-status-success);
+    }
+
+    .warning-informational {
+      color: var(--glide-core-status-warning-informational);
+    }
   `];

package/dist/toggle.d.ts

@@ -6,8 +6,6 @@ declare global {
     }
 }
 /**
- * @description A toggle with a label and optional tooltip, summary, and description.
- *
  * @event change - `(event: Event) => void`
  * @event input - `(event: Event) => void`
  *

package/dist/toggle.styles.js

@@ -31,10 +31,6 @@ Use the ":checked" pseudo class on the host and throughout when browsers support
       justify-content: center;
       position: relative;
 
-      &:has(input:focus-visible) {
-        outline-offset: 4px;
-      }
-
       &:has(input:checked:not(:disabled)) {
         background-color: var(--glide-core-surface-primary);
         border-color: transparent;
@@ -45,7 +41,7 @@ Use the ":checked" pseudo class on the host and throughout when browsers support
       }
 
       &:has(input:disabled) {
-        background-color: var(--glide-core-surface-disabled);
+        background-color: var(--glide-core-surface-unselected-disabled);
 
         &::before {
           box-shadow: none;

package/dist/toggle.test.basics.js

@@ -58,12 +58,12 @@ it('can have a tooltip', async () => {
 it('can be checked', async () => {
     const component = await fixture(html `<glide-core-toggle checked></glide-core-toggle> `);
     expect(component.hasAttribute('checked')).to.be.true;
-    expect(component.checked).to.equal(true);
+    expect(component.checked).to.be.true;
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.getAttribute('aria-checked')).to.equal('true');
 });
 it('can be disabled', async () => {
     const component = await fixture(html `<glide-core-toggle disabled></glide-core-toggle> `);
     expect(component.hasAttribute('disabled')).to.be.true;
-    expect(component.disabled).to.equal(true);
+    expect(component.disabled).to.be.true;
 });

package/dist/toggle.test.interactions.js

@@ -6,7 +6,7 @@ it('is checked after being clicked', async () => {
     const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
     component.click();
     await elementUpdated(component);
-    expect(component.checked).to.equal(true);
+    expect(component.checked).to.be.true;
     expect(component.hasAttribute('checked')).to.be.false;
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.getAttribute('aria-checked')).to.equal('true');
@@ -15,7 +15,7 @@ it('is unchecked after being clicked', async () => {
     const component = await fixture(html `<glide-core-toggle label="Label" checked></glide-core-toggle>`);
     component.click();
     await elementUpdated(component);
-    expect(component.checked).to.equal(false);
+    expect(component.checked).to.be.false;
     expect(component.hasAttribute('checked')).to.be.true;
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.getAttribute('aria-checked')).to.equal('false');
@@ -28,7 +28,7 @@ it('is still checked after being clicked when checked but disabled', async () =>
     ></glide-core-toggle>`);
     component.click();
     await elementUpdated(component);
-    expect(component.checked).to.equal(true);
+    expect(component.checked).to.be.true;
     expect(component.hasAttribute('checked')).to.be.true;
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.getAttribute('aria-checked')).to.equal('true');
@@ -38,7 +38,7 @@ it('is still unchecked after being clicked when unchecked and disabled', async (
     component.click();
     await elementUpdated(component);
     expect(component.hasAttribute('checked')).to.be.false;
-    expect(component.checked).to.equal(false);
+    expect(component.checked).to.be.false;
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.getAttribute('aria-checked')).to.equal('false');
 });
@@ -51,7 +51,7 @@ it('is unchecked after being clicked then forcibly unchecked via a "change" list
     component.click();
     await elementUpdated(component);
     expect(component.hasAttribute('checked')).to.be.false;
-    expect(component.checked).to.equal(false);
+    expect(component.checked).to.be.false;
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.getAttribute('aria-checked')).to.equal('false');
 });
@@ -64,7 +64,7 @@ it('is unchecked after being clicked then forcibly unchecked via an "input" list
     component.click();
     await elementUpdated(component);
     expect(component.hasAttribute('checked')).to.be.false;
-    expect(component.checked).to.equal(false);
+    expect(component.checked).to.be.false;
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.getAttribute('aria-checked')).to.equal('false');
 });
@@ -75,7 +75,7 @@ it('remains unchecked when its "click" event is canceled', async () => {
     });
     component.click();
     expect(component.hasAttribute('checked')).to.be.false;
-    expect(component.checked).to.equal(false);
+    expect(component.checked).to.be.false;
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.getAttribute('aria-checked')).to.equal('false');
 });

package/dist/tooltip.d.ts

@@ -5,7 +5,7 @@ declare global {
     }
 }
 /**
- * @slot - The content of the tooltip.
+ * @slot - The primary content of the tooltip.
  * @slot target - The element to which the tooltip should anchor.
  */
 export default class GlideCoreTooltip extends LitElement {
@@ -18,6 +18,7 @@ export default class GlideCoreTooltip extends LitElement {
     get open(): boolean;
     set open(isOpen: boolean);
     placement?: 'bottom' | 'left' | 'right' | 'top';
+    shortcut: string[];
     disconnectedCallback(): void;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;

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" 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;
+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,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.#i=!1,this.#l=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.#i}set open(e){this.#i=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.#p}" @mouseout="${this.#c}"><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.#l)}><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><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;#i;#h;#l;#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)}#c(){this.#w(),clearTimeout(this.#h)}#p(){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.#l.value&&this.#a.value&&(this.#R=autoUpdate(this.#l.value,this.#a.value,(()=>{(async()=>{if(this.#l.value&&this.#a.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:i}=await computePosition(this.#l.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:i.arrow?.x?`${i.arrow.x}px`:null,top:i.arrow?.y?`${i.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;