@crowdstrike/glide-core 0.8.0 → 0.9.1

package/dist/dropdown.test.interactions.multiple.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import { aTimeout, assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { sendMouse } from '@web/test-runner-commands';
 import GlideCoreDropdown from './dropdown.js';
@@ -25,7 +25,11 @@ it('opens on click', async () => {
     component.shadowRoot
         ?.querySelector('[data-test="button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.true;
+    expect(options?.checkVisibility()).to.be.true;
 });
 it('toggles open and closed when the button is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -51,7 +55,10 @@ it('toggles open and closed when the button is clicked', async () => {
     component.shadowRoot
         ?.querySelector('[data-test="button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    await elementUpdated(component);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.false;
+    expect(options?.checkVisibility()).to.be.false;
 });
 it('does not toggle open and closed when the button overflow text is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -77,7 +84,11 @@ it('does not toggle open and closed when the button overflow text is clicked', a
     component.shadowRoot
         ?.querySelector('[data-test="tag-overflow-text"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.true;
+    expect(options?.checkVisibility()).to.be.true;
 });
 it('selects options on click', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -123,6 +134,8 @@ it('selects options on Space', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0]?.focus();
     await sendKeys({ press: ' ' });
@@ -153,6 +166,8 @@ it('selects options on Enter', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0]?.focus();
     await sendKeys({ press: 'Enter' });
@@ -398,6 +413,8 @@ it('updates `value` when a option is selected or deselected via Enter', async ()
 
       <glide-core-dropdown-option label="Three"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1].focus();
     await sendKeys({ press: 'Enter' });
@@ -424,6 +441,8 @@ it('updates `value` when an option is selected or deselected via Space', async (
 
       <glide-core-dropdown-option label="Three"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1].focus();
     await sendKeys({ press: ' ' });
@@ -626,7 +645,7 @@ it('deselects all but the last selected option when `multiple` is changed to `fa
     expect(options[0].selected).be.false;
     expect(options[1].selected).be.true;
 });
-it('selects all options when none are selected and Select All is clicked', async () => {
+it('selects all options when none are selected and Select All is selected via click', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
       placeholder="Placeholder"
@@ -650,7 +669,7 @@ it('selects all options when none are selected and Select All is clicked', async
     expect(options[0].selected).to.be.true;
     expect(options[1].selected).to.be.true;
 });
-it('selects all options when some are selected and Select All is clicked', async () => {
+it('selects all options when some are selected and Select All is selected via click', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
       placeholder="Placeholder"
@@ -675,7 +694,7 @@ it('selects all options when some are selected and Select All is clicked', async
     expect(options[0].selected).to.be.true;
     expect(options[1].selected).to.be.true;
 });
-it('deelects all options when all are selected and Select All is clicked', async () => {
+it('deselects all options when all are selected and Select All is selected via click', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
       placeholder="Placeholder"
@@ -701,8 +720,181 @@ it('deelects all options when all are selected and Select All is clicked', async
     expect(options[0].selected).to.be.false;
     expect(options[1].selected).to.be.false;
 });
+it('selects all options when none are selected and Select All is selected via Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      open
+      select-all
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component?.shadowRoot
+        ?.querySelector('[data-test="select-all"]')
+        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    component.focus();
+    await sendKeys({ press: ' ' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    expect(options[0].selected).to.be.true;
+    expect(options[1].selected).to.be.true;
+});
+it('selects all options when some are selected and Select All is selected via Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      open
+      select-all
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component?.shadowRoot
+        ?.querySelector('[data-test="select-all"]')
+        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    component.focus();
+    await sendKeys({ press: ' ' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    expect(options[0].selected).to.be.true;
+    expect(options[1].selected).to.be.true;
+});
+it('deselects all options when all are selected and Select All is selected via Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      open
+      select-all
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component?.shadowRoot
+        ?.querySelector('[data-test="select-all"]')
+        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    component.focus();
+    await sendKeys({ press: ' ' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    expect(options[0].selected).to.be.false;
+    expect(options[1].selected).to.be.false;
+});
+it('selects all options when none are selected and Select All is selected via Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      open
+      select-all
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component?.shadowRoot
+        ?.querySelector('[data-test="select-all"]')
+        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    expect(options[0].selected).to.be.true;
+    expect(options[1].selected).to.be.true;
+});
+it('selects all options when some are selected and Select All is selected via Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      open
+      select-all
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component?.shadowRoot
+        ?.querySelector('[data-test="select-all"]')
+        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    expect(options[0].selected).to.be.true;
+    expect(options[1].selected).to.be.true;
+});
+it('deselects all options when all are selected and Select All is selected via Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      open
+      select-all
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component?.shadowRoot
+        ?.querySelector('[data-test="select-all"]')
+        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    expect(options[0].selected).to.be.false;
+    expect(options[1].selected).to.be.false;
+});
 it('shows Select All', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+    >
       <glide-core-dropdown-option
         label="One"
         value="one"
@@ -714,6 +906,8 @@ it('shows Select All', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     component.selectAll = true;
     await elementUpdated(component);
     const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
@@ -786,6 +980,7 @@ it('sets Select All as indeterminate when not all options are selected', async (
     </glide-core-dropdown>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0].click();
+    await elementUpdated(component);
     const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
     expect(selectAll?.privateIndeterminate).to.be.true;
 });
@@ -878,6 +1073,8 @@ it('does not select an option on Enter when the option is not focused', async ()
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const option = component.querySelector('glide-core-dropdown-option');
     option?.focus();
     await sendKeys({ down: 'Tab' });

package/dist/dropdown.test.interactions.single.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import { ArgumentError } from 'ow';
-import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import { aTimeout, assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
@@ -21,7 +21,11 @@ it('opens on click', async () => {
     component.shadowRoot
         ?.querySelector('[data-test="button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.true;
+    expect(options?.checkVisibility()).to.be.true;
 });
 it('toggles open and closed when the button is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -37,7 +41,10 @@ it('toggles open and closed when the button is clicked', async () => {
     component.shadowRoot
         ?.querySelector('[data-test="button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    await elementUpdated(component);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.false;
+    expect(options?.checkVisibility()).to.be.false;
 });
 it('does not toggle open and closed when the button overflow text is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -53,7 +60,11 @@ it('does not toggle open and closed when the button overflow text is clicked', a
     component.shadowRoot
         ?.querySelector('[data-test="tag-overflow-text"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.true;
+    expect(options?.checkVisibility()).to.be.true;
 });
 it('selects an option on click', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -62,6 +73,8 @@ it('selects an option on click', async () => {
         value="one"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const option = component.querySelector('glide-core-dropdown-option');
     option?.click();
     await elementUpdated(component);
@@ -77,11 +90,26 @@ it('selects an option on Space', async () => {
         value="one"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const option = component.querySelector('glide-core-dropdown-option');
     option?.focus();
     await sendKeys({ press: ' ' });
     expect(option?.selected).to.be.true;
 });
+it('does not deselect options on Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component?.focus();
+    await sendKeys({ press: ' ' });
+    const option = component.querySelector('glide-core-dropdown-option');
+    expect(option?.selected).to.be.true;
+});
 it('selects an option on Enter', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
       <glide-core-dropdown-option
@@ -89,6 +117,8 @@ it('selects an option on Enter', async () => {
         value="one"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const option = component.querySelector('glide-core-dropdown-option');
     option?.focus();
     await sendKeys({ press: 'Enter' });
@@ -122,6 +152,17 @@ it('closes when an option is selected via click', async () => {
     component.querySelector('glide-core-dropdown-option')?.click();
     expect(component.open).to.be.false;
 });
+it('closes when an option is selected via Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.focus();
+    await sendKeys({ press: ' ' });
+    expect(component.open).to.be.false;
+});
 it('closes when an option is selected via Enter', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
       <glide-core-dropdown-option
@@ -129,6 +170,19 @@ it('closes when an option is selected via Enter', async () => {
         value="value"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(component.open).to.be.false;
+});
+it('closes when an option is selected via Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     component.querySelector('glide-core-dropdown-option')?.focus();
     await sendKeys({ press: 'Enter' });
     expect(component.open).to.be.false;
@@ -140,6 +194,8 @@ it('closes when an option is selected via Space', async () => {
         value="value"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const option = component.querySelector('glide-core-dropdown-option');
     option?.focus();
     await sendKeys({ press: ' ' });
@@ -211,7 +267,7 @@ it('throws when `value` is changed programmatically to include more than one val
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });
 it('updates `value` when an option `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
@@ -274,6 +330,8 @@ it('updates `value` when an option is selected via Enter', async () => {
 
       <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0].focus();
     await sendKeys({ press: 'Enter' });
@@ -283,7 +341,7 @@ it('updates `value` when an option is selected via Enter', async () => {
         ?.querySelector('[data-test="button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     // Wait for it to open.
-    await elementUpdated(component);
+    await aTimeout(0);
     options[1].focus();
     await sendKeys({ press: 'Enter' });
     expect(component.value).to.deep.equal(['two']);
@@ -292,7 +350,7 @@ it('updates `value` when an option is selected via Enter', async () => {
         ?.querySelector('[data-test="button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     // Wait for it to open.
-    await elementUpdated(component);
+    await aTimeout(0);
     options[2].focus();
     await sendKeys({ press: 'Enter' });
     expect(component.value).to.deep.equal([]);
@@ -311,6 +369,8 @@ it('updates `value` when an option is selected via Space', async () => {
 
       <glide-core-dropdown-option label="Three"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0].focus();
     await sendKeys({ press: ' ' });
@@ -320,7 +380,7 @@ it('updates `value` when an option is selected via Space', async () => {
         ?.querySelector('[data-test="button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     // Wait for it to open.
-    await elementUpdated(component);
+    await aTimeout(0);
     options[1].focus();
     await sendKeys({ press: ' ' });
     expect(component.value).to.deep.equal(['two']);
@@ -329,7 +389,7 @@ it('updates `value` when an option is selected via Space', async () => {
         ?.querySelector('[data-test="button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     // Wait for it to open.
-    await elementUpdated(component);
+    await aTimeout(0);
     options[2].focus();
     await sendKeys({ press: ' ' });
     expect(component.value).to.deep.equal([]);
@@ -442,6 +502,8 @@ it('does not select an option on Enter when the option is not focused', async ()
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const option = component.querySelector('glide-core-dropdown-option');
     option?.focus();
     await sendKeys({ down: 'Tab' });

package/dist/form-controls-layout.test.basics.js

@@ -49,7 +49,7 @@ it('throws if it does not have a default slot', async () => {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });
 it('throws if its default slot is the incorrect type', async () => {
     await expectArgumentError(() => {

package/dist/icon-button.d.ts

@@ -5,6 +5,8 @@ declare global {
     }
 }
 /**
+ * @description A button with only an icon.
+ *
  * @slot - Reserved for the icon to display inside of the button.
  */
 export default class GlideCoreIconButton extends LitElement {

package/dist/icon-button.test.basics.js

@@ -107,5 +107,5 @@ it('throws if it does not have a default slot', async () => {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });

package/dist/icons/checked.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").TemplateResult;
+declare const _default: import("lit").TemplateResult<1>;
 export default _default;

package/dist/icons/checked.js

@@ -1 +1 @@
-import{svg}from"lit/static-html.js";export default svg`<svg fill="none" viewBox="0 0 24 24" style="height: var(--size, 0.875rem); width: var(--size, 0.875rem);"><path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+import{html}from"lit";export default html`<svg fill="none" viewBox="0 0 24 24" style="height: var(--size, 0.875rem); width: var(--size, 0.875rem);"><path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;

package/dist/icons/magnifying-glass.js

@@ -1 +1 @@
-import{svg}from"lit/static-html.js";export default svg`<svg class="search-icon" fill="none" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>`;
+import{svg}from"lit/static-html.js";export default svg`<svg class="search-icon" data-test="search-icon" fill="none" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>`;

package/dist/input.d.ts

@@ -11,9 +11,10 @@ type SupportedTypes = (typeof SUPPORTED_TYPES)[number];
 /**
  * @description An input with a label and optional description and tooltip. Participates in forms and validation via `FormData` and various methods.
  *
- * @event change - (same as native input's `change` event)
- * @event input - (same as native input's `input` event)
-
+ * @event change - `(event: Event) => void`
+ * @event input - `(event: Event) => void`
+ * @event invalid - `(event: Event) => void`
+ *
  * @slot tooltip - Content for the tooltip.
  * @slot description - Additional information or context.
  * @slot prefix - An optional icon slot to display before the input.
@@ -41,24 +42,18 @@ export default class GlideCoreInput extends LitElement {
     disabled: boolean;
     privateSplit?: 'left' | 'middle';
     maxlength?: number;
-    descriptionNodes: NodeListOf<HTMLElement>;
-    prefixIconNodes: NodeListOf<HTMLElement>;
-    suffixIconNodes: NodeListOf<HTMLElement>;
     get form(): HTMLFormElement | null;
     get validity(): ValidityState;
     get willValidate(): boolean;
     blur(): void;
     checkValidity(): boolean;
     disconnectedCallback(): void;
-    firstUpdated(): void;
     formAssociatedCallback(): void;
     formResetCallback(): void;
-    get isTypeSearch(): boolean;
     get hasClearIcon(): boolean;
     get isClearIconVisible(): boolean;
     render(): import("lit").TemplateResult<1>;
     reportValidity(): boolean;
-    get valueCharacterCount(): number;
     constructor();
     private hasFocus;
     private isBlurring;

package/dist/input.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,i,o){var r,s=arguments.length,a=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(a=(s<3?r(a):s>3?r(e,i,a):r(e,i))||a);return s>3&&a&&Object.defineProperty(e,i,a),a};import"./icon-button.js";import"./label.js";import{LitElement,html,nothing}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,queryAssignedNodes,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow from"./library/ow.js";import styles from"./input.styles.js";export const SUPPORTED_TYPES=["email","number","password","search","tel","text","url"];let GlideCoreInput=class GlideCoreInput extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed",delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#t.form}get validity(){return this.#t.validity}get willValidate(){return this.#t.willValidate}blur(){this.#e?.blur()}checkValidity(){this.isCheckingValidity=!0;const t=this.#t.checkValidity();return this.isCheckingValidity=!1,t}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}firstUpdated(){this.#o()}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}get isTypeSearch(){return"search"===this.type}get hasClearIcon(){return this.clearable&&!this.disabled&&!this.readonly}get isClearIconVisible(){return this.hasClearIcon&&this.value.length>0}render(){return html`<glide-core-label class="${classMap({left:"left"===this.privateSplit,middle:"middle"===this.privateSplit})}" orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?error="${this.#r||this.#s}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="${classMap({"input-box":!0,focused:this.hasFocus,empty:""===this.value,disabled:this.disabled,readonly:this.readonly&&!this.disabled,error:this.#r||this.#s})}" slot="control"><slot name="prefix"></slot><input aria-describedby="meta" id="input" type="${"password"===this.type&&this.passwordVisible?"text":this.type}" .value="${this.value}" placeholder="${ifDefined(this.placeholder)}" autocapitalize="${ifDefined(this.autocapitalize)}" spellcheck="${this.spellcheck}" ?required="${this.required}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" @focus="${this.#a}" @blur="${this.#l}" @change="${this.#n}" @input="${this.#d}" ${ref(this.#p)}> ${this.hasClearIcon?html`<glide-core-icon-button variant="tertiary" class="${classMap({"clear-icon-button":!0,"clear-icon-button--visible":this.isClearIconVisible})}" aria-label="${this.#h.term("clearEntry")}" @click="${this.#c}" tabindex="-1"><slot name="clear-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 6L18 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></slot></glide-core-icon-button>`:""} ${"password"===this.type&&this.passwordToggle&&!this.disabled?html`<glide-core-icon-button variant="tertiary" class="password-toggle" aria-label="${this.passwordVisible?"Hide password":"Show password"}" aria-controls="input" aria-expanded="${this.passwordVisible?"true":"false"}" @click="${this.#u}" tabindex="-1">${this.passwordVisible?html`<svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"/></svg>`:html`<svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>`}</glide-core-icon-button>`:""}<div class="suffix">${this.isTypeSearch?magnifyingGlassIcon:html`<slot name="suffix"></slot>`}</div></div><div class="meta" id="meta" slot="description"><slot class="description" name="description"></slot>${this.maxlength?html`<div class="${classMap({"character-count":!0,error:this.#s})}">${this.valueCharacterCount}/${this.maxlength}</div>`:nothing}</div></glide-core-label>`}reportValidity(){this.isReportValidityOrSubmit=!0;const t=this.#t.reportValidity();return this.requestUpdate(),t}get valueCharacterCount(){return this.value.length}constructor(){super(),this.type="text",this.value="",this.hideLabel=!1,this.orientation="horizontal",this.clearable=!1,this.spellcheck=!1,this.autocapitalize="on",this.passwordToggle=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.hasFocus=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.passwordVisible=!1,this.#p=createRef(),this.#h=new LocalizeController(this),this.#i=({formData:t})=>{this.name&&this.value&&!this.disabled&&t.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(t=>{if(t?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#p;#t;#h;#i;get#s(){return Boolean(this.maxlength&&this.valueCharacterCount>this.maxlength)}get#r(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}get#e(){return this.#p.value}#l(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1,this.hasFocus=!1}#n(t){ow(this.#e,ow.object.instanceOf(HTMLInputElement)),this.value=this.#e.value,this.#o(),this.dispatchEvent(new Event(t.type,t))}#c(t){this.value="",this.dispatchEvent(new Event("clear",{bubbles:!0})),this.#e?.focus(),this.#o(),t.stopPropagation()}#a(){this.hasFocus=!0}#d(){ow(this.#e,ow.object.instanceOf(HTMLInputElement)),this.value=this.#e.value,this.#o()}#u(){this.passwordVisible=!this.passwordVisible}async#o(){await this.updateComplete,this.#t.setValidity(this.#e?.validity,this.#e?.validationMessage,this.#e),this.isReportValidityOrSubmit&&this.reportValidity()}};__decorate([property()],GlideCoreInput.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"name",void 0),__decorate([property()],GlideCoreInput.prototype,"value",void 0),__decorate([property()],GlideCoreInput.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreInput.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"orientation",void 0),__decorate([property()],GlideCoreInput.prototype,"placeholder",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"clearable",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"spellcheck",void 0),__decorate([property()],GlideCoreInput.prototype,"autocapitalize",void 0),__decorate([property({attribute:"password-toggle",type:Boolean})],GlideCoreInput.prototype,"passwordToggle",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"required",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"readonly",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"disabled",void 0),__decorate([property()],GlideCoreInput.prototype,"privateSplit",void 0),__decorate([property({type:Number,converter:t=>t&&Number.parseInt(t,10)})],GlideCoreInput.prototype,"maxlength",void 0),__decorate([queryAssignedNodes({slot:"description"})],GlideCoreInput.prototype,"descriptionNodes",void 0),__decorate([queryAssignedNodes({slot:"prefix"})],GlideCoreInput.prototype,"prefixIconNodes",void 0),__decorate([queryAssignedNodes({slot:"suffix"})],GlideCoreInput.prototype,"suffixIconNodes",void 0),__decorate([state()],GlideCoreInput.prototype,"hasFocus",void 0),__decorate([state()],GlideCoreInput.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreInput.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreInput.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreInput.prototype,"passwordVisible",void 0),GlideCoreInput=__decorate([customElement("glide-core-input")],GlideCoreInput);export default GlideCoreInput;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length,a=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(s<3?r(a):s>3?r(t,i,a):r(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};import"./icon-button.js";import"./label.js";import{LitElement,html,nothing}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,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow from"./library/ow.js";import styles from"./input.styles.js";export const SUPPORTED_TYPES=["email","number","password","search","tel","text","url"];let GlideCoreInput=class GlideCoreInput extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed",delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#e.form}get validity(){return!this.required||this.value||this.disabled?this.#t?this.#e.setValidity({tooLong:!0}," ",this.#i.value):this.#e.setValidity({}):this.#e.setValidity({valueMissing:!0}," ",this.#i.value),this.#e.validity}get willValidate(){return this.#e.willValidate}blur(){this.#i.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#e.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#o)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#o)}formResetCallback(){this.value=this.getAttribute("value")??""}get hasClearIcon(){return this.clearable&&!this.disabled&&!this.readonly}get isClearIconVisible(){return this.hasClearIcon&&this.value.length>0}render(){return html`<glide-core-private-label class="${classMap({left:"left"===this.privateSplit,middle:"middle"===this.privateSplit})}" orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?error="${this.#r||this.#t}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="${classMap({"input-container":!0,focused:this.hasFocus,empty:""===this.value,disabled:this.disabled,readonly:this.readonly&&!this.disabled,error:this.#r||this.#t})}" slot="control"><slot name="prefix"></slot><input aria-describedby="meta" aria-invalid="${this.#r||this.#t}" id="input" type="${"password"===this.type&&this.passwordVisible?"text":this.type}" .value="${this.value}" placeholder="${ifDefined(this.placeholder)}" autocapitalize="${ifDefined(this.autocapitalize)}" spellcheck="${this.spellcheck}" ?required="${this.required}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" @focus="${this.#s}" @blur="${this.#a}" @change="${this.#l}" @input="${this.#n}" ${ref(this.#i)}> ${this.hasClearIcon?html`<glide-core-icon-button variant="tertiary" class="${classMap({"clear-icon-button":!0,"clear-icon-button--visible":this.isClearIconVisible})}" data-test="clear-button" label="${this.#d.term("clearEntry",this.label)}" @click="${this.#h}"><svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 6L18 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-icon-button>`:nothing} ${"password"===this.type&&this.passwordToggle&&!this.disabled?html`<glide-core-icon-button variant="tertiary" class="password-toggle" data-test="password-toggle" label="${this.passwordVisible?"Hide password":"Show password"}" aria-controls="input" aria-expanded="${this.passwordVisible?"true":"false"}" @click="${this.#p}">${this.passwordVisible?html`<svg aria-hidden="true" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"/></svg>`:html`<svg aria-hidden="true" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>`}</glide-core-icon-button>`:nothing}<div class="suffix">${"search"===this.type?magnifyingGlassIcon:html`<slot name="suffix"></slot>`}</div></div><div class="meta" id="meta" slot="description"><slot class="description" name="description"></slot>${this.maxlength?html`<div class="${classMap({"character-count":!0,error:this.#t})}" data-test="character-count-container"><span aria-hidden="true" data-test="character-count-text">${this.#d.term("displayedCharacterCount",this.#c,this.maxlength)} </span><span class="hidden" data-test="character-count-announcement">${this.#d.term("announcedCharacterCount",this.#c,this.maxlength)}</span></div>`:nothing}</div></glide-core-private-label>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#e.reportValidity();return this.requestUpdate(),e}constructor(){super(),this.type="text",this.value="",this.hideLabel=!1,this.orientation="horizontal",this.clearable=!1,this.spellcheck=!1,this.autocapitalize="on",this.passwordToggle=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.hasFocus=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.passwordVisible=!1,this.#i=createRef(),this.#d=new LocalizeController(this),this.#o=({formData:e})=>{this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#i;#e;#d;get#c(){return this.value.length}#o;get#t(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#c>this.maxlength)}get#r(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}#a(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1,this.hasFocus=!1}#l(e){ow(this.#i.value,ow.object.instanceOf(HTMLInputElement)),this.value=this.#i.value?.value,this.dispatchEvent(new Event(e.type,e))}#h(e){this.value="",this.dispatchEvent(new Event("clear",{bubbles:!0})),this.#i.value?.focus(),e.stopPropagation()}#s(){this.hasFocus=!0}#n(){ow(this.#i.value,ow.object.instanceOf(HTMLInputElement)),this.value=this.#i.value.value}#p(){this.passwordVisible=!this.passwordVisible}};__decorate([property()],GlideCoreInput.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"name",void 0),__decorate([property()],GlideCoreInput.prototype,"value",void 0),__decorate([property()],GlideCoreInput.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreInput.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"orientation",void 0),__decorate([property()],GlideCoreInput.prototype,"placeholder",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"clearable",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"spellcheck",void 0),__decorate([property()],GlideCoreInput.prototype,"autocapitalize",void 0),__decorate([property({attribute:"password-toggle",type:Boolean})],GlideCoreInput.prototype,"passwordToggle",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"required",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"readonly",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"disabled",void 0),__decorate([property()],GlideCoreInput.prototype,"privateSplit",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10)})],GlideCoreInput.prototype,"maxlength",void 0),__decorate([state()],GlideCoreInput.prototype,"hasFocus",void 0),__decorate([state()],GlideCoreInput.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreInput.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreInput.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreInput.prototype,"passwordVisible",void 0),GlideCoreInput=__decorate([customElement("glide-core-input")],GlideCoreInput);export default GlideCoreInput;