@crowdstrike/glide-core 0.9.1 → 0.9.3

package/dist/dropdown.test.form.js

@@ -1,17 +1,16 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './dropdown.option.js';
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { 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';
+import sinon from 'sinon';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
 it('exposes standard form control properties and methods', async () => {
     const form = document.createElement('form');
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`, { parentNode: form });
     expect(component.form).to.equal(form);
     expect(component.validity instanceof ValidityState).to.be.true;
@@ -19,123 +18,35 @@ it('exposes standard form control properties and methods', async () => {
     expect(component.checkValidity).to.be.a('function');
     expect(component.reportValidity).to.be.a('function');
 });
-it('can be reset', async () => {
+it('submits its form on Enter when closed', async () => {
     const form = document.createElement('form');
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      <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-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`, {
         parentNode: form,
     });
-    component
-        .querySelector('glide-core-dropdown-option')
-        ?.shadowRoot?.querySelector('[data-test="component"]')
-        ?.dispatchEvent(new Event('click'));
-    form.reset();
-    await elementUpdated(component);
-    const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
-    expect(label?.textContent?.trim()).to.equal('Placeholder');
-    expect(component.value).to.deep.equal([]);
-});
-it('can be reset to the initially selected option', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`, {
-        parentNode: form,
-    });
-    component
-        .querySelector('glide-core-dropdown-option')
-        ?.shadowRoot?.querySelector('[data-test="component"]')
-        ?.dispatchEvent(new Event('click'));
-    form.reset();
-    expect(component.value).to.deep.equal(['two']);
-});
-it('has `formData` value when an option is selected', async () => {
-    const form = document.createElement('form');
-    await fixture(html `<glide-core-dropdown
-        label="Label"
-        placeholder="Placeholder"
-        name="name"
-      >
-        <glide-core-dropdown-option
-          label="Label"
-          value="value"
-          selected
-        ></glide-core-dropdown-option>
-      </glide-core-dropdown>
-      >`, {
-        parentNode: form,
+    const spy = sinon.spy();
+    form.addEventListener('submit', (event) => {
+        event.preventDefault();
+        spy();
     });
-    const formData = new FormData(form);
-    expect(formData.get('name')).to.be.equal('["value"]');
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(spy.callCount).to.equal(1);
 });
-it('has no `formData` value when no option is selected', async () => {
+it('does not submit its form on Enter when open', async () => {
     const form = document.createElement('form');
-    await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      name="name"
-    >
-      <glide-core-dropdown-option
-        label=""
-        value="value"
-      ></glide-core-dropdown-option>
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`, {
         parentNode: form,
     });
-    const formData = new FormData(form);
-    expect(formData.get('name')).to.be.null;
-});
-it('has no `formData` value when disabled and an option is selected', async () => {
-    const form = document.createElement('form');
-    await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      name="name"
-      disabled
-    >
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`, {
-        parentNode: form,
-    });
-    const formData = new FormData(form);
-    expect(formData.get('name')).to.be.null;
-});
-it('has no `formData` value when an option is selected that has no `value`', async () => {
-    const form = document.createElement('form');
-    await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      name="name"
-    >
-      <glide-core-dropdown-option
-        label="Label"
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`, {
-        parentNode: form,
+    const spy = sinon.spy();
+    form.addEventListener('submit', (event) => {
+        event.preventDefault();
+        spy();
     });
-    const formData = new FormData(form);
-    expect(formData.get('name')).to.be.null;
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(spy.callCount).to.equal(0);
 });

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { aTimeout, assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import { aTimeout, assert, elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
@@ -97,15 +97,12 @@ it('unfilters when an option is selected via click', async () => {
     await aTimeout(0);
     component.focus();
     await sendKeys({ type: ' one ' });
-    const option = [
-        ...component.querySelectorAll('glide-core-dropdown-option'),
-    ].find(({ hidden }) => !hidden);
-    option?.click();
-    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    [...component.querySelectorAll('glide-core-dropdown-option')]
+        .find(({ hidden }) => !hidden)
+        ?.click();
     const options = [
         ...component.querySelectorAll('glide-core-dropdown-option'),
     ].filter(({ hidden }) => !hidden);
-    expect(input?.value).to.equal('');
     expect(options.length).to.equal(11);
 });
 it('unfilters when an option is selected via Enter', async () => {
@@ -115,11 +112,9 @@ it('unfilters when an option is selected via Enter', async () => {
     component.focus();
     await sendKeys({ type: ' one ' });
     await sendKeys({ press: 'Enter' });
-    const input = component.shadowRoot?.querySelector('[data-test="input"]');
     const options = [
         ...component.querySelectorAll('glide-core-dropdown-option'),
     ].filter(({ hidden }) => !hidden);
-    expect(input?.value).to.equal('');
     expect(options.length).to.equal(11);
 });
 it('shows the magnifying glass icon when there is a filter term', async () => {
@@ -154,6 +149,22 @@ it('hides the magnifying glass icon when an option is selected', async () => {
     await elementUpdated(component);
     expect(icon?.checkVisibility()).to.be.not.ok;
 });
+it('hides the magnifying glass icon when closed programmatically and an option is selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    const option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    option.selected = true;
+    component.focus();
+    await sendKeys({ type: 'two' });
+    const icon = component?.shadowRoot?.querySelector('[data-test="magnifying-glass-icon"]');
+    component.open = false;
+    await elementUpdated(component);
+    expect(icon?.checkVisibility()).to.be.not.ok;
+});
 it('does not filter on only whitespace', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       ${defaultSlot}
@@ -234,31 +245,53 @@ it('does not select options on Space', async () => {
     await sendKeys({ press: ' ' });
     expect(options[0]?.selected).to.be.false;
 });
-it('deselects options on Backspace', async () => {
+it('deselects the last selected option on Backspace', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       ${defaultSlot}
     </glide-core-dropdown>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0].selected = true;
     options[1].selected = true;
+    await elementUpdated(component);
     component.focus();
+    component.shadowRoot
+        ?.querySelector('[data-test="input"]')
+        ?.setSelectionRange(0, 0);
+    await aTimeout(0);
     await sendKeys({ press: 'Backspace' });
     expect(options[1].selected).to.be.false;
     expect(options[0].selected).to.be.true;
     await sendKeys({ press: 'Backspace' });
     expect(options[0].selected).to.be.false;
 });
-it('uses the label of the selected option as a placeholder when not `multiple`', async () => {
+it('deselects all options on Meta + Backspace', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    options[0].selected = true;
+    options[1].selected = true;
+    await elementUpdated(component);
+    component.focus();
+    component.shadowRoot
+        ?.querySelector('[data-test="input"]')
+        ?.setSelectionRange(0, 0);
+    await sendKeys({ down: 'Meta' });
+    await sendKeys({ press: 'Backspace' });
+    await sendKeys({ up: 'Meta' });
+    expect(options[1].selected).to.be.false;
+    expect(options[0].selected).to.be.false;
+});
+it('set the `value` of the `<input>` to the label of the selected option when not `multiple`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       ${defaultSlot}
     </glide-core-dropdown>`);
     const option = component?.querySelector('glide-core-dropdown-option');
     option?.click();
-    await elementUpdated(component);
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
-    expect(input?.placeholder).to.equal(option?.label);
+    expect(input?.value).to.equal(option?.label);
 });
-it('uses `placeholder` as a placeholder when `multiple` and an option is selected', async () => {
+it('uses `placeholder` as a placeholder when `multiple` and no option is selected', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       ${defaultSlot}
     </glide-core-dropdown>`);
@@ -286,10 +319,10 @@ it('sets `aria-activedescendant` on ArrowDown', async () => {
     </glide-core-dropdown>`);
     // Wait for it to open.
     await aTimeout(0);
-    const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[0]?.focus();
+    component.focus();
     await sendKeys({ press: 'ArrowDown' });
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(input?.getAttribute('aria-activedescendant')).to.equal(options[1].id);
 });
 it('sets `aria-activedescendant` on ArrowUp', async () => {
@@ -502,6 +535,77 @@ it('cannot be tabbed to when `disabled`', async () => {
     >
       ${defaultSlot}
     </glide-core-dropdown>`);
-    await sendKeys({ down: 'Tab' });
+    await sendKeys({ press: 'Tab' });
     expect(document.activeElement).to.equal(document.body);
 });
+it('sets the `value` of the `<input>` back to the label of selected option when something else is clicked', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    const option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    option.selected = true;
+    // Now type something other than "One" so we can check that it's reverted
+    // back to "One" when something else is clicked.
+    component.focus();
+    await sendKeys({ type: 'o' });
+    document.body.click();
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.value).to.equal('One');
+});
+it('selects the filter text when `click()` is called', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    component.focus();
+    await sendKeys({ type: 'one' });
+    component.click();
+    expect(window.getSelection()?.toString()).to.equal('one');
+});
+it('selects the filter text when the `<input>` is clicked', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    component.focus();
+    await sendKeys({ type: 'one' });
+    // 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="input"]')
+        ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    expect(window.getSelection()?.toString()).to.equal('one');
+});
+it('selects the filter text when closed and the button is clicked', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    component.focus();
+    await sendKeys({ type: 'one' });
+    component.open = false;
+    await elementUpdated(component);
+    // 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 }));
+    await elementUpdated(component);
+    expect(window.getSelection()?.toString()).to.equal('one');
+});
+it('clicks the `<input>` when `click()` is called', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    const button = component.shadowRoot?.querySelector('[data-test="input"]');
+    assert(button);
+    setTimeout(() => {
+        component.click();
+    });
+    const event = await oneEvent(button, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
+});

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { aTimeout, assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import { aTimeout, assert, elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { sendMouse } from '@web/test-runner-commands';
 import GlideCoreDropdown from './dropdown.js';
@@ -1056,11 +1056,11 @@ it('remains open when a tag is clicked', async () => {
     await elementUpdated(component);
     expect(component.open).to.be.true;
 });
-it('does not select an option on Enter when the option is not focused', async () => {
-    const component = await fixture(html `<glide-core-dropdown
+it('cannot be tabbed to when `disabled`', async () => {
+    await fixture(html `<glide-core-dropdown
       label="Label"
       placeholder="Placeholder"
-      open
+      disabled
       multiple
     >
       <glide-core-dropdown-option
@@ -1073,23 +1073,11 @@ 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' });
-    await sendKeys({ down: 'Shift' });
-    await sendKeys({ up: 'Tab' });
-    await sendKeys({ press: 'Enter' });
-    expect(option?.selected).to.be.false;
+    await sendKeys({ press: 'Tab' });
+    expect(document.activeElement).to.equal(document.body);
 });
-it('cannot be tabbed to when `disabled`', async () => {
-    await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      disabled
-      multiple
-    >
+it('clicks the button when `click()` is called', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       <glide-core-dropdown-option
         label="One"
         value="one"
@@ -1100,6 +1088,11 @@ it('cannot be tabbed to when `disabled`', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
-    await sendKeys({ down: 'Tab' });
-    expect(document.activeElement).to.equal(document.body);
+    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    assert(button);
+    setTimeout(() => {
+        component.click();
+    });
+    const event = await oneEvent(button, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
 });

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import { ArgumentError } from 'ow';
-import { aTimeout, assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import { aTimeout, assert, elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
@@ -97,6 +97,35 @@ it('selects an option on Space', async () => {
     await sendKeys({ press: ' ' });
     expect(option?.selected).to.be.true;
 });
+it('selects an option when its icon is clicked', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option label="One" value="one">
+        <svg
+          slot="icon"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          style="height: 1rem; width: 1rem;"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
+          />
+        </svg>
+      </glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // 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)
+        ?.dispatchEvent(new Event('click', { bubbles: true }));
+    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
@@ -490,8 +519,8 @@ it('hides Select All', async () => {
     const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
     expect(selectAll?.checkVisibility()).to.not.be.ok;
 });
-it('does not select an option on Enter when the option is not focused', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+it('cannot be tabbed to when `disabled`', async () => {
+    await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
       <glide-core-dropdown-option
         label="One"
         value="one"
@@ -502,28 +531,21 @@ 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' });
-    await sendKeys({ down: 'Shift' });
-    await sendKeys({ up: 'Tab' });
-    await sendKeys({ press: 'Enter' });
-    expect(option?.selected).to.be.false;
+    expect(document.activeElement).to.equal(document.body);
 });
-it('cannot be tabbed to when `disabled`', async () => {
-    await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
-
+it('clicks the button when `click()` is called', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <glide-core-dropdown-option
-        label="Two"
-        value="two"
+        label="Label"
+        value="value"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
-    await sendKeys({ down: 'Tab' });
-    expect(document.activeElement).to.equal(document.body);
+    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    assert(button);
+    setTimeout(() => {
+        component.click();
+    });
+    const event = await oneEvent(button, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
 });

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

@@ -7,4 +7,4 @@ import './radio.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const SingleSelectionHorizontal: StoryObj;
+export declare const FormControlsLayout: StoryObj;

package/dist/icon-button.d.ts

@@ -17,7 +17,7 @@ export default class GlideCoreIconButton extends LitElement {
     ariaExpanded: 'true' | 'false' | null;
     ariaHasPopup: 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
     disabled: boolean;
-    /** Text read aloud for screenreaders. For accessibility, this should always be provided. */
+    /** For screenreaders. Required. */
     label: string;
     variant: 'primary' | 'secondary' | 'tertiary';
     firstUpdated(): void;

package/dist/icon-button.stories.d.ts

@@ -3,6 +3,4 @@ import './icons/storybook.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const Primary: StoryObj;
-export declare const Secondary: StoryObj;
-export declare const Tertiary: StoryObj;
+export declare const IconButton: StoryObj;

package/dist/icon-button.styles.js

@@ -1,4 +1,6 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    ${focusOutline(".component:focus-visible")}
+  `,css`
     :host {
       /* Contains elements with "padding" and "width". Inline by default. */
       display: inline-flex;
@@ -24,10 +26,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         outline: none;
       }
 
-      &:focus-visible {
-        ${focusOutline};
-      }
-
       &:disabled {
         cursor: not-allowed;
         opacity: 1;

package/dist/icons/checked.d.ts

@@ -1,2 +1,7 @@
+/**
+ * The class="check" on the path below is used as a CSS selector
+ * in checkbox.styles.ts.  Please be cautious when making changes
+ * here as to not break the Checkbox selectors.
+ */
 declare const _default: import("lit").TemplateResult<1>;
 export default _default;

package/dist/icons/checked.js

@@ -1 +1 @@
-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>`;
+import{html}from"lit";export default html`<svg aria-hidden="true" fill="none" viewBox="0 0 24 24" style="height: var(--size, 0.875rem); width: var(--size, 0.875rem);"><path class="check" d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;

package/dist/input.d.ts

@@ -24,7 +24,7 @@ export default class GlideCoreInput extends LitElement {
     #private;
     static formAssociated: boolean;
     static shadowRootOptions: ShadowRootInit;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     type: SupportedTypes;
     name?: string;
     value: string;