@crowdstrike/glide-core 0.9.1 → 0.9.2

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.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

@@ -68,3 +68,14 @@ it('is unchecked after being clicked then forcibly unchecked via an "input" list
     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.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.
         */
 

package/dist/tooltip.test.interactions.js

@@ -117,7 +117,7 @@ it('is visible on "mouseover"', async () => {
     assert(tooltip);
     tooltip.dataset.openDelay = '0';
     component.shadowRoot
-        ?.querySelector('.component')
+        ?.querySelector('[data-test="component"')
         ?.dispatchEvent(new MouseEvent('mouseover'));
     // Wait for Floating UI and the open delay.
     await aTimeout(0);
@@ -132,7 +132,7 @@ it('is hidden on "mouseover" when disabled', async () => {
     assert(tooltip);
     tooltip.dataset.openDelay = '0';
     component.shadowRoot
-        ?.querySelector('.component')
+        ?.querySelector('[data-test="component"')
         ?.dispatchEvent(new MouseEvent('mouseover'));
     // Wait for Floating UI.
     await aTimeout(0);
@@ -147,13 +147,13 @@ it('is hidden on "mouseout"', async () => {
     assert(tooltip);
     tooltip.dataset.openDelay = '0';
     component.shadowRoot
-        ?.querySelector('.component')
+        ?.querySelector('[data-test="component"')
         ?.dispatchEvent(new MouseEvent('mouseover'));
     // Wait for Floating UI and the open delay.
     await aTimeout(0);
     tooltip.dataset.closeDelay = '0';
     component.shadowRoot
-        ?.querySelector('.component')
+        ?.querySelector('[data-test="component"')
         ?.dispatchEvent(new MouseEvent('mouseout'));
     // Wait for the close delay.
     await aTimeout(0);
@@ -169,11 +169,11 @@ it('remains hidden if "mouseout" fires before the "mouseover" delay', async () =
     tooltip.dataset.openDelay = '1';
     tooltip.dataset.closeDelay = '0';
     component.shadowRoot
-        ?.querySelector('.component')
+        ?.querySelector('[data-test="component"')
         ?.dispatchEvent(new MouseEvent('mouseover'));
     expect(tooltip?.checkVisibility()).to.be.false;
     component.shadowRoot
-        ?.querySelector('.component')
+        ?.querySelector('[data-test="component"')
         ?.dispatchEvent(new MouseEvent('mouseout'));
     await aTimeout(1);
     expect(tooltip.checkVisibility()).to.be.false;

package/dist/translations/en.js

@@ -1 +1 @@
-const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",open:"Open",selectAll:"Select all",moreInformation:"More information",nextTab:"Next tab",notifications:"Notifications",previousTab:"Previous tab",announcedCharacterCount:(e,o)=>`Character count ${e} of ${o}`,displayedCharacterCount:(e,o)=>`${e}/${o}`,clearEntry:e=>`Clear ${e} entry`,removeTag:e=>`Remove tag: ${e}`,actionsFor:e=>`Actions for ${e}`};export default translation;
+const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",open:"Open",selectAll:"Select all",moreInformation:"More information",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",announcedCharacterCount:(e,o)=>`Character count ${e} of ${o}`,displayedCharacterCount:(e,o)=>`${e}/${o}`,clearEntry:e=>`Clear ${e} entry`,removeTag:e=>`Remove tag: ${e}`,actionsFor:e=>`Actions for ${e}`};export default translation;

package/dist/translations/fr.d.ts

@@ -1,3 +1,5 @@
 import type { Translation } from '../library/localize.js';
-declare const translation: Translation;
+export declare const PENDING_STRINGS: readonly [];
+type PendingTranslation = (typeof PENDING_STRINGS)[number];
+declare const translation: Omit<Translation, PendingTranslation>;
 export default translation;

package/dist/translations/fr.js

@@ -1 +1 @@
-const translation={$code:"fr",$name:"French",$dir:"ltr",close:"Fermer",dismiss:"Congédier",open:"Ouvrir",selectAll:"Tout sélectionner",moreInformation:"Plus d’informations",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",announcedCharacterCount:(r,e)=>`Character count ${r} of ${e}`,displayedCharacterCount:(r,e)=>`${r}/${e}`,clearEntry:r=>`Clear ${r} entry`,removeTag:r=>`Supprimer la balise : ${r}`,actionsFor:r=>`Actions for ${r}`};export default translation;
+export const PENDING_STRINGS=[];const translation={$code:"fr",$name:"French",$dir:"ltr",close:"Fermer",dismiss:"Congédier",open:"Ouvrir",selectAll:"Tout sélectionner",moreInformation:"Plus d’informations",notifications:"Notifications",nextTab:"Onglet suivant",previousTab:"Onglet précédent",announcedCharacterCount:(e,r)=>`Nombre de caractères ${e} de ${r}`,displayedCharacterCount:(e,r)=>`${e}/${r}`,clearEntry:e=>`Effacer l'entrée ${e}`,removeTag:e=>`Supprimer la balise : ${e}`,actionsFor:e=>`Actions pour ${e}`};export default translation;

package/dist/translations/ja.d.ts

@@ -1,3 +1,5 @@
 import type { Translation } from '../library/localize.js';
-declare const translation: Translation;
+export declare const PENDING_STRINGS: readonly [];
+type PendingTranslation = (typeof PENDING_STRINGS)[number];
+declare const translation: Omit<Translation, PendingTranslation>;
 export default translation;

package/dist/translations/ja.js

@@ -1 +1 @@
-const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"無視",open:"オープン",selectAll:"すべて選択",moreInformation:"詳細情報",notifications:"通知",nextTab:"Next tab",previousTab:"Previous tab",announcedCharacterCount:(a,t)=>`Character count ${a} of ${t}`,displayedCharacterCount:(a,t)=>`${a}/${t}`,clearEntry:a=>`Clear ${a} entry`,removeTag:a=>`タグを削除: ${a}`,actionsFor:a=>`Actions for ${a}`};export default translation;
+export const PENDING_STRINGS=[];const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"無視",open:"オープン",selectAll:"すべて選択",moreInformation:"詳細情報",notifications:"通知",nextTab:"Onglet suivant",previousTab:"Onglet précédent",announcedCharacterCount:(n,t)=>`${t} 文字数の${n}`,displayedCharacterCount:(n,t)=>`${n}/${t}`,clearEntry:n=>`${n}エントリのクリア`,removeTag:n=>`タグを削除: ${n}`,actionsFor:n=>`${n}のアクション`};export default translation;