@crowdstrike/glide-core 0.9.6 → 0.11.0

package/dist/input.test.events.js

@@ -9,90 +9,90 @@ import { sendKeys } from '@web/test-runner-commands';
 // configured. But waiting a turn of the event loop, after which the event
 // will have been dispatched, gets the job done as well.
 it('dispatches a "change" event when typed in', async () => {
-    const input = await fixture(html `<glide-core-input></glide-core-input>`);
+    const component = await fixture(html `<glide-core-input></glide-core-input>`);
     setTimeout(async () => {
-        input.focus();
+        component.focus();
         await sendKeys({ type: 'testing' });
-        input.blur();
+        component.blur();
     });
-    const event = await oneEvent(input, 'change');
+    const event = await oneEvent(component, 'change');
     expect(event instanceof Event).to.be.true;
     expect(event.bubbles).to.be.true;
 });
 it('dispatches an "input" event when typed in', async () => {
-    const input = await fixture(html `<glide-core-input></glide-core-input>`);
+    const component = await fixture(html `<glide-core-input></glide-core-input>`);
     setTimeout(() => {
-        input.focus();
+        component.focus();
         sendKeys({ type: 'testing' });
     });
-    const event = await oneEvent(input, 'input');
+    const event = await oneEvent(component, 'input');
     expect(event instanceof Event).to.be.true;
     expect(event.bubbles).to.be.true;
 });
 it('dispatches an "invalid" event on submit when required and no value', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
         parentNode: form,
     });
     setTimeout(() => form.requestSubmit());
-    const event = await oneEvent(input, 'invalid');
+    const event = await oneEvent(component, 'invalid');
     expect(event instanceof Event).to.be.true;
 });
 it('dispatches an "invalid" event after `checkValidity` is called when required and no value', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
         parentNode: form,
     });
-    setTimeout(() => input.checkValidity());
-    const event = await oneEvent(input, 'invalid');
+    setTimeout(() => component.checkValidity());
+    const event = await oneEvent(component, 'invalid');
     expect(event instanceof Event).to.be.true;
 });
 it('dispatches an "invalid" event after `reportValidity` is called when required and no value', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
         parentNode: form,
     });
-    setTimeout(() => input.reportValidity());
-    const event = await oneEvent(input, 'invalid');
+    setTimeout(() => component.reportValidity());
+    const event = await oneEvent(component, 'invalid');
     expect(event instanceof Event).to.be.true;
 });
 it('does not dispatch an "invalid" event after `checkValidity` is called when not required', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input></glide-core-input>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
-    input.addEventListener('invalid', spy);
-    input.checkValidity();
+    component.addEventListener('invalid', spy);
+    component.checkValidity();
     await aTimeout(0);
     expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an "invalid" event after `checkValidity` is called when required and no value but disabled', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input disabled required></glide-core-input>`, { parentNode: form });
+    const component = await fixture(html `<glide-core-input disabled required></glide-core-input>`, { parentNode: form });
     const spy = sinon.spy();
-    input.addEventListener('invalid', spy);
-    input.checkValidity();
+    component.addEventListener('invalid', spy);
+    component.checkValidity();
     await aTimeout(0);
     expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an "invalid" event when `reportValidity` is called when not required,', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input></glide-core-input>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
-    input.addEventListener('invalid', spy);
-    input.reportValidity();
+    component.addEventListener('invalid', spy);
+    component.reportValidity();
     await aTimeout(0);
     expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an "invalid" event when `reportValidity` is called when required and no value but disabled', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input disabled required></glide-core-input>`, { parentNode: form });
+    const component = await fixture(html `<glide-core-input disabled required></glide-core-input>`, { parentNode: form });
     const spy = sinon.spy();
-    input.addEventListener('invalid', spy);
-    input.reportValidity();
+    component.addEventListener('invalid', spy);
+    component.reportValidity();
     await aTimeout(0);
     expect(spy.callCount).to.equal(0);
 });

package/dist/input.test.focus.js

@@ -4,54 +4,55 @@ import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreInput from './input.js';
 GlideCoreInput.shadowRootOptions.mode = 'open';
 it('focuses the input when `focus()` is called', async () => {
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`);
-    input.focus();
-    const inputElement = input.shadowRoot?.querySelector('input');
-    expect(input.shadowRoot?.activeElement).to.equal(inputElement);
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`);
+    component.focus();
+    const inputElement = component.shadowRoot?.querySelector('input');
+    expect(component.shadowRoot?.activeElement).to.equal(inputElement);
 });
 it('focuses the input after submit when required and no value', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
         parentNode: form,
     });
     form.requestSubmit();
-    const inputElement = input.shadowRoot?.querySelector('input');
-    expect(input.shadowRoot?.activeElement).to.be.equal(inputElement);
+    const inputElement = component.shadowRoot?.querySelector('input');
+    expect(component.shadowRoot?.activeElement).to.be.equal(inputElement);
 });
 it('blurs the input and reports validity if `blur` is called', async () => {
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`);
-    input.focus();
-    const inputElement = input.shadowRoot?.querySelector('input');
-    expect(input.shadowRoot?.activeElement).to.equal(inputElement);
-    input.blur();
-    await input.updateComplete;
-    expect(input.shadowRoot?.activeElement).to.equal(null);
-    expect(input.validity.valid).to.equal(false);
-    expect(input.shadowRoot?.querySelector('glide-core-private-label')?.error).to.equal(true);
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`);
+    component.focus();
+    const inputElement = component.shadowRoot?.querySelector('input');
+    expect(component.shadowRoot?.activeElement).to.equal(inputElement);
+    component.blur();
+    await component.updateComplete;
+    expect(component.shadowRoot?.activeElement).to.equal(null);
+    expect(component.validity.valid).to.be.false;
+    expect(component.shadowRoot?.querySelector('glide-core-private-label')?.error)
+        .to.be.true;
 });
 it('focuses the input after `reportValidity` is called when required and no value', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
         parentNode: form,
     });
-    input.reportValidity();
-    const inputElement = input.shadowRoot?.querySelector('input');
-    expect(input.shadowRoot?.activeElement).to.equal(inputElement);
+    component.reportValidity();
+    const inputElement = component.shadowRoot?.querySelector('input');
+    expect(component.shadowRoot?.activeElement).to.equal(inputElement);
 });
 it('focuses the input after `requestSubmit` is called when required and no value', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
         parentNode: form,
     });
     form.requestSubmit();
-    const inputElement = input.shadowRoot?.querySelector('input');
-    expect(input.shadowRoot?.activeElement === inputElement).to.be.true;
+    const inputElement = component.shadowRoot?.querySelector('input');
+    expect(component.shadowRoot?.activeElement === inputElement).to.be.true;
 });
 it('does not focus the input after `checkValidity` is called', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
         parentNode: form,
     });
-    input.checkValidity();
-    expect(input.shadowRoot?.activeElement === null).to.be.true;
+    component.checkValidity();
+    expect(component.shadowRoot?.activeElement === null).to.be.true;
 });

package/dist/input.test.form.js

@@ -6,21 +6,21 @@ import GlideCoreInput from './input.js';
 import sinon from 'sinon';
 it('can be reset to initial value', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input value="value"></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input value="value"></glide-core-input>`, {
         parentNode: form,
     });
-    input.value = '';
+    component.value = '';
     form.reset();
-    expect(input.value).to.equal('value');
+    expect(component.value).to.equal('value');
 });
 it('can be reset if there was no initial value', async () => {
     const form = document.createElement('form');
-    const input = await fixture(html `<glide-core-input></glide-core-input>`, {
+    const component = await fixture(html `<glide-core-input></glide-core-input>`, {
         parentNode: form,
     });
-    input.value = 'value';
+    component.value = 'value';
     form.reset();
-    expect(input.value).to.equal('');
+    expect(component.value).to.equal('');
 });
 it('has `formData` value when it has a value', async () => {
     const form = document.createElement('form');

package/dist/input.test.validity.js

@@ -5,176 +5,176 @@ import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreInput from './input.js';
 GlideCoreInput.shadowRootOptions.mode = 'open';
 it('is valid if empty but not required', async () => {
-    const input = await fixture(html `<glide-core-input></glide-core-input>`);
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    const component = await fixture(html `<glide-core-input></glide-core-input>`);
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('is valid after being filled in when empty and required', async () => {
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`);
-    input.focus();
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`);
+    component.focus();
     await sendKeys({ type: 'value' });
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('is invalid if no value and required', async () => {
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`);
-    expect(input.validity?.valid).to.be.false;
-    expect(input.validity?.valueMissing).to.be.true;
-    expect(input.willValidate).to.be.true;
-    expect(input.checkValidity()).to.be.false;
-    expect(input.reportValidity()).to.be.false;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`);
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.willValidate).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
 });
 it('is invalid after value is cleared when required', async () => {
-    const input = await fixture(html `<glide-core-input
+    const component = await fixture(html `<glide-core-input
       clearable
       value="value"
       required
     ></glide-core-input>`);
-    const clearButton = input.shadowRoot?.querySelector('[data-test="clear-button"]');
+    const clearButton = component.shadowRoot?.querySelector('[data-test="clear-button"]');
     clearButton?.click();
-    await input.updateComplete;
-    expect(input.validity?.valid).to.be.false;
-    expect(input.validity?.valueMissing).to.be.true;
-    expect(input.checkValidity()).to.be.false;
-    expect(input.reportValidity()).to.be.false;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
+    await component.updateComplete;
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
 });
 it('is valid when empty and does not exceed `maxlength`', async () => {
-    const input = await fixture(html `<glide-core-input maxlength="3"></glide-core-input>`);
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.validity?.tooLong).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    const component = await fixture(html `<glide-core-input maxlength="3"></glide-core-input>`);
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.validity?.tooLong).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('is valid when filled in and does not exceed `maxlength`', async () => {
-    const input = await fixture(html `<glide-core-input maxlength="3"></glide-core-input>`);
-    input.focus();
+    const component = await fixture(html `<glide-core-input maxlength="3"></glide-core-input>`);
+    component.focus();
     await sendKeys({ type: 'val' });
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.validity?.tooLong).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.validity?.tooLong).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('is valid when filled in, disabled, and value exceeds `maxlength`', async () => {
-    const input = await fixture(html `<glide-core-input
+    const component = await fixture(html `<glide-core-input
       value="value"
       maxlength="3"
       disabled
     ></glide-core-input>`);
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.validity?.tooLong).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.validity?.tooLong).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('is valid when filled in, readonly, and value exceeds `maxlength`', async () => {
-    const input = await fixture(html `<glide-core-input
+    const component = await fixture(html `<glide-core-input
       value="value"
       maxlength="3"
       readonly
     ></glide-core-input>`);
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.validity?.tooLong).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.validity?.tooLong).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('is invalid when filled in and exceeds `maxlength`', async () => {
-    const input = await fixture(html `<glide-core-input maxlength="3"></glide-core-input>`);
-    input.focus();
+    const component = await fixture(html `<glide-core-input maxlength="3"></glide-core-input>`);
+    component.focus();
     await sendKeys({ type: 'value' });
-    expect(input.validity?.valid).to.be.false;
-    expect(input.validity?.tooLong).to.be.true;
-    expect(input.checkValidity()).to.be.false;
-    expect(input.reportValidity()).to.be.false;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.tooLong).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
 });
 it('is valid if no value and required but disabled', async () => {
-    const input = await fixture(html `<glide-core-input disabled required></glide-core-input>`);
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    const component = await fixture(html `<glide-core-input disabled required></glide-core-input>`);
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('updates validity when `required` and `value` is changed programmatically', async () => {
-    const input = await fixture(html `<glide-core-input label="Label" required></glide-core-input>`);
-    expect(input.validity?.valid).to.be.false;
-    expect(input.validity?.valueMissing).to.be.true;
-    expect(input.checkValidity()).to.be.false;
-    expect(input.reportValidity()).to.be.false;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
-    input.value = 'text';
-    await elementUpdated(input);
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    const component = await fixture(html `<glide-core-input label="Label" required></glide-core-input>`);
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
+    component.value = 'text';
+    await elementUpdated(component);
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
     // Resetting the value to empty to ensure it goes
     // back to an invalid state
-    input.value = '';
-    await elementUpdated(input);
-    expect(input.validity?.valid).to.be.false;
-    expect(input.validity?.valueMissing).to.be.true;
-    expect(input.checkValidity()).to.be.false;
-    expect(input.reportValidity()).to.be.false;
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
+    component.value = '';
+    await elementUpdated(component);
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
 });
 it('is invalid when `value` is empty and `required` is set to `true` programmatically', async () => {
-    const input = await fixture(html `<glide-core-input label="Label"></glide-core-input>`);
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
-    input.required = true;
-    await elementUpdated(input);
-    expect(input.validity?.valid).to.be.false;
-    expect(input.validity?.valueMissing).to.be.true;
-    expect(input.checkValidity()).to.be.false;
-    expect(input.reportValidity()).to.be.false;
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
+    const component = await fixture(html `<glide-core-input label="Label"></glide-core-input>`);
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
+    component.required = true;
+    await elementUpdated(component);
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
 });
 it('is valid when `value` is empty and `required` is set to `false` programmatically', async () => {
-    const input = await fixture(html `<glide-core-input label="Label" required></glide-core-input>`);
-    expect(input.validity?.valid).to.be.false;
-    expect(input.validity?.valueMissing).to.be.true;
-    expect(input.checkValidity()).to.be.false;
-    expect(input.reportValidity()).to.be.false;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
-    input.required = false;
-    await elementUpdated(input);
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    const component = await fixture(html `<glide-core-input label="Label" required></glide-core-input>`);
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
+    component.required = false;
+    await elementUpdated(component);
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
 });

package/dist/label.d.ts

@@ -8,8 +8,6 @@ declare global {
 /**
  * @private
  *
- * @description A label with a required control and optional description and tooltip.
- *
  * @slot - The label.
  * @slot control - The control with which the label is associated.
  * @slot summary - Additional information or context.
@@ -28,7 +26,7 @@ export default class GlideCoreLabel extends LitElement {
     split?: 'left' | 'middle';
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
-    private hasDescriptionSlot;
+    private hasDescription;
     private hasSummarySlot;
     private hasTooltipSlot;
     private isLabelTooltip;

package/dist/label.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,r=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import"./tooltip.js";import{LitElement,html,svg}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 ow,{owSlot}from"./library/ow.js";import styles from"./label.styles.js";const infoCircleIcon=svg`<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="1" fill="currentColor">`;let GlideCoreLabel=class GlideCoreLabel extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescriptionSlot=!1,this.hasSummarySlot=!1,this.hasTooltipSlot=!1,this.isLabelTooltip=!1,this.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#i=new LocalizeController(this),this.#s=createRef(),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#e.value)}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,"hidden-label":this.hide})}"><div class="${classMap({"tooltips-and-label":!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split})}" part="tooltips-and-label"><glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:this.hasTooltipSlot})}" placement="${"vertical"===this.orientation?"right":"bottom"}"><span class="optional-tooltip-target" slot="target" tabindex="0"><svg aria-label="${this.#i.term("moreInformation")}" width="16" height="16" viewBox="0 0 24 24" fill="none">${infoCircleIcon}</svg></span><slot name="tooltip" @slotchange="${this.#a}" ${ref(this.#r)}></slot></glide-core-tooltip><glide-core-tooltip class="label-tooltip" placement="right" ?disabled="${!this.isLabelTooltip}"><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#l)}><slot @slotchange="${this.#n}" ${ref(this.#t)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div><div aria-hidden="true">${this.label}</div></glide-core-tooltip></div><div class="control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" @slotchange="${this.#d}" ${ref(this.#e)}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#c}" ${ref(this.#s)}></slot></div><slot class="${classMap({description:!0,visible:this.hasDescriptionSlot,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" @slotchange="${this.#h}" ${ref(this.#o)}></slot></div>`}#e;#t;#o;#l;#i;#s;#r;#d(){owSlot(this.#e.value)}#n(){owSlot(this.#t.value);const e=this.#t.value?.assignedElements().at(0),t=this.#l.value;ow(e,ow.object.instanceOf(Element)),ow(t,ow.object.instanceOf(HTMLElement)),e.textContent&&(this.label=e.textContent);new ResizeObserver((()=>{this.isLabelTooltip=e.getBoundingClientRect().width>t.getBoundingClientRect().width})).observe(t)}#h(){const e=this.#o.value?.assignedNodes({flatten:!0});this.hasDescriptionSlot=Boolean(e&&e.length>0)}#c(){const e=this.#s.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}#a(){const e=this.#r.value?.assignedNodes({flatten:!0});this.hasTooltipSlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescriptionSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasTooltipSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"label",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label")],GlideCoreLabel);export default GlideCoreLabel;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,r=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import"./tooltip.js";import{LitElement,html,svg}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 ow,{owSlot}from"./library/ow.js";import styles from"./label.styles.js";const infoCircleIcon=svg`<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="1" fill="currentColor">`;let GlideCoreLabel=class GlideCoreLabel extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescription=!1,this.hasSummarySlot=!1,this.hasTooltipSlot=!1,this.isLabelTooltip=!1,this.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#i=new LocalizeController(this),this.#s=createRef(),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#e.value);const e=new ResizeObserver((()=>{this.hasDescription=Boolean(this.#o.value&&this.#o.value.offsetHeight>0)}));this.#o.value&&e.observe(this.#o.value)}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,"hidden-label":this.hide})}"><div class="${classMap({"tooltips-and-label":!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split})}" part="tooltips-and-label"><glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:this.hasTooltipSlot})}" placement="${"vertical"===this.orientation?"right":"bottom"}"><span class="optional-tooltip-target" slot="target" tabindex="0"><svg aria-label="${this.#i.term("moreInformation")}" width="16" height="16" viewBox="0 0 24 24" fill="none">${infoCircleIcon}</svg></span><slot name="tooltip" @slotchange="${this.#a}" ${ref(this.#r)}></slot></glide-core-tooltip><glide-core-tooltip class="label-tooltip" placement="right" ?disabled="${!this.isLabelTooltip}"><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#l)}><slot @slotchange="${this.#n}" ${ref(this.#t)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div><div aria-hidden="true">${this.label}</div></glide-core-tooltip></div><div class="control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" @slotchange="${this.#d}" ${ref(this.#e)}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#c}" ${ref(this.#s)}></slot></div><slot class="${classMap({description:!0,content:this.hasDescription,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" ${ref(this.#o)}></slot></div>`}#e;#t;#o;#l;#i;#s;#r;#d(){owSlot(this.#e.value)}#n(){owSlot(this.#t.value);const e=this.#t.value?.assignedElements().at(0),t=this.#l.value;ow(e,ow.object.instanceOf(Element)),ow(t,ow.object.instanceOf(HTMLElement)),e.textContent&&(this.label=e.textContent);new ResizeObserver((()=>{this.isLabelTooltip=e.getBoundingClientRect().width>t.getBoundingClientRect().width})).observe(t)}#c(){const e=this.#s.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}#a(){const e=this.#r.value?.assignedNodes({flatten:!0});this.hasTooltipSlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescription",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasTooltipSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"label",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label")],GlideCoreLabel);export default GlideCoreLabel;

package/dist/label.styles.js

@@ -160,21 +160,20 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
     .description {
       color: var(--glide-core-text-body-1);
-      display: none;
+      display: block;
       font-family: var(--glide-core-body-xs-font-family);
       font-size: var(--glide-core-body-xs-font-size);
       font-style: var(--glide-core-body-xs-font-style);
       font-weight: var(--glide-core-body-xs-font-weight);
       grid-column: 2;
       line-height: var(--glide-core-body-xs-line-height);
-      margin-block-start: var(--glide-core-spacing-xxs);
 
-      &.error {
-        color: var(--glide-core-status-error);
+      &.content {
+        margin-block-start: var(--glide-core-spacing-xxs);
       }
 
-      &.visible {
-        display: block;
+      &.error {
+        color: var(--glide-core-status-error);
       }
     }
   `];