@crowdstrike/glide-core 0.9.6 → 0.11.0

package/dist/dropdown.test.interactions.js

@@ -534,3 +534,27 @@ it('remains open when something other than the button is clicked', async () => {
     });
     expect(component.open).to.be.true;
 });
+it('hides the tooltip of the active option when opened via click', async () => {
+    // The period is arbitrary. 500 of them ensures we exceed the maximum
+    // width even if it's increased.
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label=${'.'.repeat(500)}
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Calling `click()` would be sweet. The problem is it sets `event.detail` to `0`,
+    // which puts us in a guard in the event handler. `Event` has no `detail` property
+    // and would work. `CustomEvent` is used for completeness and to get us as close as
+    // possible to a real click. See the comment in the handler for more information.
+    component.shadowRoot
+        ?.querySelector('[data-test="button"]')
+        ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    // Wait for it to open.
+    await aTimeout(0);
+    const tooltip = component
+        .querySelector('glide-core-dropdown-option')
+        ?.shadowRoot?.querySelector('[data-test="tooltip"]');
+    expect(tooltip?.checkVisibility()).to.be.false;
+});

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

@@ -1,11 +1,45 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from 'lit';
 import { aTimeout, assert, elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
+import { customElement } from 'lit/decorators.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { sendMouse } from '@web/test-runner-commands';
 import GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
+let GlideCoreDropdownInAnotherComponent = class GlideCoreDropdownInAnotherComponent extends LitElement {
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: 'closed',
+    }; }
+    render() {
+        return html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      open
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Three"></glide-core-dropdown-option>
+    </glide-core-dropdown>`;
+    }
+};
+GlideCoreDropdownInAnotherComponent = __decorate([
+    customElement('glide-core-dropdown-in-another-component')
+], GlideCoreDropdownInAnotherComponent);
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
+GlideCoreDropdownInAnotherComponent.shadowRootOptions.mode = 'open';
 it('opens on click', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       <glide-core-dropdown-option
@@ -221,25 +255,20 @@ it('deactivates all other options on "mouseover"', async () => {
     expect(options[2]?.privateActive).to.be.false;
 });
 it('remains open when an option is selected via click', async () => {
-    const component = await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      open
-      multiple
-    >
-      <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.querySelector('glide-core-dropdown-option')?.click();
-    expect(component.open).to.be.true;
+    const component = await fixture(html `<glide-core-dropdown-in-another-component></glide-core-dropdown-in-another-component>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    const option = component.shadowRoot?.querySelector('glide-core-dropdown-option');
+    assert(option);
+    const { x, y } = option.getBoundingClientRect();
+    // Calling `click()` won't do because Dropdown relies on a "mouseup" event to
+    // decide if it should close.
+    await sendMouse({
+        type: 'click',
+        position: [Math.ceil(x), Math.ceil(y)],
+    });
+    const dropdown = component.shadowRoot?.querySelector('glide-core-dropdown');
+    expect(dropdown?.open).to.be.true;
 });
 it('remains open when an option is selected via Enter', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -330,6 +359,22 @@ it('does not activate the next option on ArrowDown when a tag is focused', async
     await sendKeys({ press: 'ArrowDown' });
     expect(options[0]?.privateActive).to.be.true;
 });
+it('updates its tag when the `label` of a selected option is changed programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      <glide-core-dropdown-option
+        label="One"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    option.label = 'Three';
+    await elementUpdated(component);
+    const tag = component.shadowRoot?.querySelector('[data-test="tag"]');
+    expect(tag?.label).to.equal('Three');
+});
 it('selects and deselects options when `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       <glide-core-dropdown-option
@@ -454,7 +499,7 @@ it('updates `value` when an option is selected or deselected via Space', async (
     await sendKeys({ press: ' ' });
     expect(component.value).to.deep.equal(['one']);
 });
-it('updates `value` when `multiple` is changed to `true` programmatically', async () => {
+it('updates `value` when multiselect is changed to `true` programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown open>
       <glide-core-dropdown-option
         label="One"
@@ -493,9 +538,9 @@ it('updates `value` when the `value` of a selected option is changed programmati
     const option = component.querySelector('glide-core-dropdown-option');
     assert(option);
     option.value = 'three';
-    expect(component.value).to.deep.equal(['two', 'three']);
+    expect(component.value).to.deep.equal(['three', 'two']);
 });
-it('updates `value` when the `value` of a selected option is removed programmatically', async () => {
+it('updates `value` when the `value` of a selected option is emptied programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown open multiple>
       <glide-core-dropdown-option
         label="One"
@@ -538,8 +583,13 @@ it('has no internal label when an option is newly selected', async () => {
     const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
     expect(label).to.not.exist;
 });
-it('only has so many tags when many options are selected', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+it('hides tags to prevent overflow', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      style="display: block; max-width: 20rem;"
+    >
       <glide-core-dropdown-option
         label="One"
         value="one"
@@ -565,14 +615,20 @@ it('only has so many tags when many options are selected', async () => {
     options[1].selected = true;
     options[2].selected = true;
     options[3].selected = true;
-    await elementUpdated(component);
+    // Wait for the Resize Observer to do its thing.
+    await aTimeout(0);
     const tagContainers = [
         ...(component.shadowRoot?.querySelectorAll('[data-test="tag-container"]') ?? []),
     ].filter((element) => element.checkVisibility());
-    expect(tagContainers?.length).to.equal(3);
+    expect(tagContainers?.length).to.equal(2);
 });
-it('has overflow text when many options are selected', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+it('has overflow text when its tags are overflowing', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      style="display: block; max-width: 20rem;"
+    >
       <glide-core-dropdown-option
         label="One"
         value="one"
@@ -598,9 +654,10 @@ it('has overflow text when many options are selected', async () => {
     options[1].selected = true;
     options[2].selected = true;
     options[3].selected = true;
-    await elementUpdated(component);
+    // Wait for the Resize Observer to do its thing.
+    await aTimeout(0);
     const tagOverflow = component.shadowRoot?.querySelector('[data-test="tag-overflow-count"]');
-    expect(tagOverflow?.textContent?.trim()).to.equal('1');
+    expect(tagOverflow?.textContent?.trim()).to.equal('2');
 });
 it('deselects the option when its tag is removed', async () => {
     const component = await fixture(html `<glide-core-dropdown

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

@@ -119,10 +119,8 @@ it('selects an option when its icon is clicked', async () => {
     // Wait for it to open.
     await aTimeout(0);
     const option = component.querySelector('glide-core-dropdown-option');
-    option?.shadowRoot
-        ?.querySelector('[data-test="icon-slot"]')
-        ?.assignedElements()
-        ?.at(0)
+    option
+        ?.querySelector('[slot="icon"]')
         ?.dispatchEvent(new Event('click', { bubbles: true }));
     expect(option?.selected).to.be.true;
 });
@@ -257,6 +255,20 @@ it('deselects all other options when one is newly selected', async () => {
     expect(options[1].selected).to.be.true;
     expect(options[2].selected).to.be.false;
 });
+it('updates its internal label when the `label` of a selected option is changed programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="One"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    option.label = 'Two';
+    await elementUpdated(component);
+    const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
+    expect(label?.textContent?.trim()).to.equal(option?.label);
+});
 it('selects and deselects options when `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <glide-core-dropdown-option
@@ -549,3 +561,27 @@ it('clicks the button when `click()` is called', async () => {
     const event = await oneEvent(button, 'click');
     expect(event instanceof PointerEvent).to.be.true;
 });
+it('unhides its options when made unfilterable', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      filterable
+    >
+      <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.focus();
+    await sendKeys({ type: 'one' });
+    component.filterable = false;
+    const options = [
+        ...component.querySelectorAll('glide-core-dropdown-option'),
+    ].filter(({ hidden }) => !hidden);
+    expect(options.length).to.equal(2);
+});

package/dist/form-controls-layout.d.ts

@@ -8,8 +8,6 @@ declare global {
     }
 }
 /**
- * @description Aligns form control labels and the controls themselves in two columns. Only horizontally oriented controls are supported.
- *
  * @slot - GlideCoreCheckbox | GlideCoreCheckboxGroup | GlideCoreDropdown | GlideCoreInput | GlideCoreTextArea.
  */
 export default class GlideCoreFormControlsLayout extends LitElement {

package/dist/icon-button.d.ts

@@ -5,9 +5,7 @@ declare global {
     }
 }
 /**
- * @description A button with only an icon.
- *
- * @slot - Reserved for the icon to display inside of the button.
+ * @slot - An icon.
  */
 export default class GlideCoreIconButton extends LitElement {
     #private;
@@ -17,9 +15,9 @@ export default class GlideCoreIconButton extends LitElement {
     ariaExpanded: 'true' | 'false' | null;
     ariaHasPopup: 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
     disabled: boolean;
-    /** For screenreaders. Required. */
     label: string;
     variant: 'primary' | 'secondary' | 'tertiary';
+    click(): void;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/icon-button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,l=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,r);else for(var n=t.length-1;n>=0;n--)(i=t[n])&&(l=(a<3?i(l):a>3?i(e,o,l):i(e,o))||l);return a>3&&l&&Object.defineProperty(e,o,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{owSlot}from"./library/ow.js";import styles from"./icon-button.styles.js";let GlideCoreIconButton=class GlideCoreIconButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.label="",this.variant="primary",this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value)}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" aria-label="${this.label}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant})}" type="button" ?disabled="${this.disabled}"><slot @slotchange="${this.#e}" ${ref(this.#t)}></slot></button>`}#t;#e(){owSlot(this.#t.value)}};__decorate([property({attribute:"aria-controls",reflect:!0})],GlideCoreIconButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0})],GlideCoreIconButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0})],GlideCoreIconButton.prototype,"ariaHasPopup",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreIconButton.prototype,"disabled",void 0),__decorate([property()],GlideCoreIconButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"variant",void 0),GlideCoreIconButton=__decorate([customElement("glide-core-icon-button")],GlideCoreIconButton);export default GlideCoreIconButton;
+var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,l=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,r);else for(var n=t.length-1;n>=0;n--)(i=t[n])&&(l=(a<3?i(l):a>3?i(e,o,l):i(e,o))||l);return a>3&&l&&Object.defineProperty(e,o,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{owSlot}from"./library/ow.js";import styles from"./icon-button.styles.js";let GlideCoreIconButton=class GlideCoreIconButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.label="",this.variant="primary",this.#t=createRef(),this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}click(){this.#t.value?.click()}firstUpdated(){owSlot(this.#e.value)}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" aria-label="${this.label}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant})}" data-test="button" type="button" ?disabled="${this.disabled}" ${ref(this.#t)}><slot @slotchange="${this.#o}" ${ref(this.#e)}></slot></button>`}#t;#e;#o(){owSlot(this.#e.value)}};__decorate([property({attribute:"aria-controls",reflect:!0})],GlideCoreIconButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0})],GlideCoreIconButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0})],GlideCoreIconButton.prototype,"ariaHasPopup",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreIconButton.prototype,"disabled",void 0),__decorate([property()],GlideCoreIconButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"variant",void 0),GlideCoreIconButton=__decorate([customElement("glide-core-icon-button")],GlideCoreIconButton);export default GlideCoreIconButton;

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

@@ -1,106 +1,38 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './icon-button.js';
 import { ArgumentError } from 'ow';
-import { assert, expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreIconButton from './icon-button.js';
 import sinon from 'sinon';
 GlideCoreIconButton.shadowRootOptions.mode = 'open';
-const icon = html `<svg
-  width="16"
-  height="16"
-  stroke="currentColor"
-  fill="none"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  stroke-width="2"
-  viewBox="0 0 24 24"
-  aria-hidden="true"
->
-  <path d="M16.51 9.873l-4.459 4.31-4.458-4.31"></path>
-</svg>`;
 it('registers', async () => {
     expect(window.customElements.get('glide-core-icon-button')).to.equal(GlideCoreIconButton);
 });
 it('is accessible', async () => {
-    const component = await fixture(html `<glide-core-icon-button label="test-icon-button"
-      >${icon}</glide-core-icon-button
-    >`);
+    const component = await fixture(html `<glide-core-icon-button label="Label">
+      <div>Icon</div>
+    </glide-core-icon-button>`);
     await expect(component).to.be.accessible();
 });
 it('has defaults', async () => {
-    const component = await fixture(html `<glide-core-icon-button label="test-icon-button"
-      >${icon}</glide-core-icon-button
-    >`);
-    const button = component.shadowRoot?.querySelector('button');
-    assert(button);
+    const component = await fixture(html `<glide-core-icon-button label="Label">
+      <div>Icon</div>
+    </glide-core-icon-button>`);
+    const button = component.shadowRoot?.querySelector('[data-test="button"]');
     expect(component.ariaControls).to.equal(null);
     expect(component.ariaExpanded).to.equal(null);
     expect(component.ariaHasPopup).to.equal(null);
-    expect(component.disabled).to.equal(false);
+    expect(component.disabled).to.be.false;
     expect(component.variant).to.equal('primary');
-    expect(button.getAttribute('aria-controls')).to.equal(null);
-    expect(button.ariaExpanded).to.equal(null);
-    expect(button.ariaHasPopup).to.equal(null);
-    expect(button.disabled).to.equal(false);
-    expect([...button.classList]).to.deep.equal(['component', 'primary']);
-});
-it('delegates focus', async () => {
-    const component = await fixture(html `<glide-core-icon-button label="test-icon-button"
-      >${icon}</glide-core-icon-button
-    >`);
-    component.focus();
-    expect(component.shadowRoot?.activeElement).to.equal(component.shadowRoot?.querySelector('button'));
-});
-it('uses the provided "label" for the aria-label', async () => {
-    const component = await fixture(html `<glide-core-icon-button label="test-icon-button"
-      >${icon}</glide-core-icon-button
-    >`);
-    expect(component.shadowRoot?.querySelector('button')?.getAttribute('aria-label')).to.equal('test-icon-button');
-});
-it('renders a default slot', async () => {
-    const component = await fixture(html `<glide-core-icon-button label="test-icon-button"
-      ><span data-content>Inner content</span></glide-core-icon-button
-    >`);
-    expect(component.querySelector('[data-content]')).to.be.ok;
-    expect(component.querySelector('[data-content]')).to.be.visible;
-});
-it('renders a primary variant', async () => {
-    const component = await fixture(html `<glide-core-icon-button label="test-icon-button" variant="primary"
-      >${icon}</glide-core-icon-button
-    >`);
-    expect([
-        ...component.shadowRoot.querySelector('button').classList,
-    ]).to.deep.equal(['component', 'primary']);
-});
-it('renders a secondary variant', async () => {
-    const component = await fixture(html `<glide-core-icon-button label="test-icon-button" variant="secondary"
-      >${icon}</glide-core-icon-button
-    >`);
-    expect([
-        ...component.shadowRoot.querySelector('button').classList,
-    ]).to.deep.equal(['component', 'secondary']);
-});
-it('renders a tertiary variant', async () => {
-    const component = await fixture(html `<glide-core-icon-button label="test-icon-button" variant="tertiary"
-      >${icon}</glide-core-icon-button
-    >`);
-    expect([
-        ...component.shadowRoot.querySelector('button').classList,
-    ]).to.deep.equal(['component', 'tertiary']);
-});
-it('sets the disabled attribute', async () => {
-    const component = await fixture(html `<glide-core-icon-button label="test-icon-button" disabled
-      >${icon}</glide-core-icon-button
-    >`);
-    expect(component.disabled).to.equal(true);
-    expect(component.shadowRoot?.querySelector('button')?.disabled).to.equal(true);
+    expect(button?.getAttribute('aria-controls')).to.equal(null);
+    expect(button?.ariaExpanded).to.equal(null);
+    expect(button?.ariaHasPopup).to.equal(null);
+    expect(button?.disabled).to.be.false;
 });
 it('throws if it does not have a default slot', async () => {
     const spy = sinon.spy();
     try {
-        await fixture(html `<glide-core-icon-button
-        label="test-icon-button"
-      ></glide-core-icon-button>`);
+        await fixture(html `<glide-core-icon-button label="Label"></glide-core-icon-button>`);
     }
     catch (error) {
         if (error instanceof ArgumentError) {

package/dist/icon-button.test.focus.d.ts

@@ -0,0 +1 @@
+import './icon-button.js';

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

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import './icon-button.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreIconButton from './icon-button.js';
+GlideCoreIconButton.shadowRootOptions.mode = 'open';
+it('focuses its button when `focus()` is called', async () => {
+    const component = await fixture(html `<glide-core-icon-button label="Label">
+      <div>Icon</div>
+    </glide-core-icon-button>`);
+    component.focus();
+    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    expect(component.shadowRoot?.activeElement).to.equal(button);
+});

package/dist/input.d.ts

@@ -9,16 +9,14 @@ declare global {
 export declare const SUPPORTED_TYPES: readonly ["email", "number", "password", "search", "tel", "text", "url"];
 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 - `(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.
- * @slot suffix - An optional icon slot to display after the input.
+ * @slot prefix-icon - An optional icon before the input field.
+ * @slot suffix-icon - An optional icon after the input field.
  */
 export default class GlideCoreInput extends LitElement {
     #private;
@@ -26,7 +24,7 @@ export default class GlideCoreInput extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     type: SupportedTypes;
-    name?: string;
+    name: string;
     value: string;
     label?: string;
     hideLabel: boolean;
@@ -35,6 +33,7 @@ export default class GlideCoreInput extends LitElement {
     clearable: boolean;
     spellcheck: boolean;
     autocapitalize: 'on' | 'off' | 'none' | 'sentences' | 'words' | 'characters';
+    autocomplete: 'on' | 'off';
     /** For 'password' type, whether to show a button to toggle the password's visibility */
     passwordToggle: boolean;
     required: boolean;

package/dist/input.js

@@ -1 +1 @@
-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}" @keydown="${this.#d}" ${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.#h.term("clearEntry",this.label)}" @click="${this.#p}"><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.#c}">${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.#h.term("displayedCharacterCount",this.#u,this.maxlength)} </span><span class="hidden" data-test="character-count-announcement">${this.#h.term("announcedCharacterCount",this.#u,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.#h=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;#h;get#u(){return this.value.length}#o;get#t(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#u>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))}#p(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}#d(e){"Enter"===e.key&&this.form?.requestSubmit()}#c(){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;
+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-icon"></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="${this.autocapitalize}" autocomplete="${this.autocomplete}" spellcheck="${this.spellcheck}" ?required="${this.required}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" @focus="${this.#s}" @blur="${this.#a}" @change="${this.#l}" @input="${this.#n}" @keydown="${this.#d}" ${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.#h.term("clearEntry",this.label)}" @click="${this.#p}"><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.#c}">${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-icon">${"search"===this.type?magnifyingGlassIcon:html`<slot name="suffix-icon"></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.#h.term("displayedCharacterCount",this.#u,this.maxlength)} </span><span class="hidden" data-test="character-count-announcement">${this.#h.term("announcedCharacterCount",this.#u,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.name="",this.value="",this.hideLabel=!1,this.orientation="horizontal",this.clearable=!1,this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="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.#h=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;#h;get#u(){return this.value.length}#o;get#t(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#u>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))}#p(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}#d(e){"Enter"===e.key&&this.form?.requestSubmit()}#c(){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({reflect:!0})],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({reflect:!0})],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({reflect:!0})],GlideCoreInput.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocomplete",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({reflect:!0,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),reflect:!0})],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;

package/dist/input.styles.js

@@ -83,7 +83,7 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
         }
       }
 
-      .suffix {
+      .suffix-icon {
         align-items: center;
         display: flex;
       }
@@ -91,7 +91,7 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
 
     .clear-icon-button,
     .password-toggle,
-    ::slotted([slot='suffix']) {
+    ::slotted([slot='suffix-icon']) {
       align-items: center;
       background: none;
       border: none;
@@ -104,8 +104,8 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
     .clear-icon-button,
     .password-toggle,
     .search-icon,
-    ::slotted([slot='prefix']),
-    ::slotted([slot='suffix']) {
+    ::slotted([slot='prefix-icon']),
+    ::slotted([slot='suffix-icon']) {
       display: flex;
     }
 

package/dist/input.test.basics.js

@@ -136,55 +136,3 @@ it('does not render a character count when attribute `maxlength` is set less tha
     const container = component.shadowRoot?.querySelector('[data-test="character-count-container"]');
     expect(container).to.be.null;
 });
-it('supports a "tooltip" slot', async () => {
-    const component = await fixture(html `<glide-core-input label="test">
-      <div slot="tooltip">Tooltip</div>
-    </glide-core-input>`);
-    const assignedElements = component.shadowRoot
-        ?.querySelector('slot[name="tooltip"]')
-        ?.assignedElements();
-    expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
-});
-it('supports a "description" slot', async () => {
-    const component = await fixture(html `
-    <glide-core-input label="Test">
-      <div slot="description">Description</div>
-    </glide-core-input>
-  `);
-    const assignedElements = component.shadowRoot
-        ?.querySelector('slot[name="description"]')
-        ?.assignedElements();
-    expect(assignedElements?.at(0)?.textContent).to.equal('Description');
-});
-it('supports a "prefix" icon slot', async () => {
-    const component = await fixture(html `
-    <glide-core-input label="Test">
-      <div slot="prefix">
-        <span data-svg></span>
-      </div>
-    </glide-core-input>
-  `);
-    const assignedElements = component.shadowRoot
-        ?.querySelector('slot[name="prefix"]')
-        ?.assignedElements();
-    const slottedSvg = assignedElements
-        ?.at(0)
-        ?.querySelector('[data-svg]');
-    expect(slottedSvg).to.exist;
-});
-it('supports a "suffix" icon slot', async () => {
-    const component = await fixture(html `
-    <glide-core-input label="Test">
-      <div slot="suffix">
-        <span data-svg></span>
-      </div>
-    </glide-core-input>
-  `);
-    const assignedElements = component.shadowRoot
-        ?.querySelector('slot[name="suffix"]')
-        ?.assignedElements();
-    const slottedSvg = assignedElements
-        ?.at(0)
-        ?.querySelector('[data-svg]');
-    expect(slottedSvg).to.exist;
-});