@crowdstrike/glide-core 0.12.3 → 0.13.1

package/dist/dropdown.styles.js

@@ -1,6 +1,7 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import opacityAndScaleAnimation from"./styles/opacity-and-scale-animation.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
     ${focusOutline(".add-button:focus-visible")}
     ${opacityAndScaleAnimation(".options-and-footer:popover-open")}
+    ${visuallyHidden(".item-count")}
     ${visuallyHidden(".selected-option-labels")}
   `,css`
     .component {
@@ -16,11 +17,11 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
     glide-core-private-label {
       &::part(private-control-and-summary) {
-        /* 
-          The Label component's grid column styling combined with the fact that 
-          ".dropdown-and-options" isn't a direct descendant of that grid means that 
-          Dropdown's label won't shrink when space constrained without a minimum 
-          width on Label's ".control-and-summary". It's not clear to me why Grid 
+        /*
+          The Label component's grid column styling combined with the fact that
+          ".dropdown-and-options" isn't a direct descendant of that grid means that
+          Dropdown's label won't shrink when space constrained without a minimum
+          width on Label's ".control-and-summary". It's not clear to me why Grid
           behaves this way.
         */
         min-inline-size: var(--min-inline-size);
@@ -60,7 +61,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         column-gap: var(--glide-core-spacing-xxs);
         min-inline-size: 3.75rem;
         padding-block: 0;
-        padding-inline: 0.375rem;
+        padding-inline: var(--glide-core-spacing-sm);
       }
 
       &.disabled {
@@ -91,6 +92,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
       &:is(
           :hover,
+          :has(.primary-button:hover),
           :has(.primary-button:focus-visible, .input:focus-visible)
         ):not(&.disabled, &.error, &.quiet, &.readonly) {
         border-color: var(--glide-core-border-focus);
@@ -114,22 +116,15 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       min-inline-size: var(--min-inline-size);
       padding: 0;
       position: absolute;
-
-      &.hidden {
-        display: none;
-      }
     }
 
     .options {
-      --padding: var(--glide-core-spacing-xxxs);
-
       box-sizing: border-box;
       max-block-size: calc(
-        var(--private-option-height) * 9 + var(--padding) * 2 +
+        var(--private-option-height) * 9 + var(--glide-core-spacing-xxxs) * 2 +
           var(--border-width) * 2
       );
       overflow: auto;
-      padding: var(--padding);
       scroll-behavior: smooth;
 
       &.large {
@@ -139,20 +134,26 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       &.small {
         --private-option-height: 1.25rem;
       }
+
+      &.hidden {
+        display: none;
+      }
+    }
+
+    .options-slot {
+      display: block;
+      padding: var(--glide-core-spacing-xxxs);
     }
 
     .footer {
-      background-color: var(--glide-core-surface-page);
       border-block-start: 1px solid var(--glide-core-border-base);
-      box-shadow: 0 -8px 8px -8px
-        var(--glide-core-surface-base-gray, rgb(0 0 0 / 40%));
       display: none;
       inline-size: calc(100% - var(--glide-core-spacing-xxxs) * 2);
       inset-block-end: 0;
       padding: var(--glide-core-spacing-xxxs);
 
-      /* 
-        "sticky" is a little hack so that footer is absolutely positioned but 
+      /*
+        "sticky" is a little hack so that footer is absolutely positioned but
         its space in layout is preserved, so it doesn't overlap the last option.
       */
       position: sticky;
@@ -207,32 +208,31 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     }
 
     .select-all {
-      border-block-end: 1px solid var(--glide-core-border-base-light);
-      margin-block-end: var(--glide-core-spacing-xxxs);
-      padding-block-end: var(--glide-core-spacing-xxxs);
+      border-block-end: 1px solid var(--glide-core-border-base);
+      padding: var(--glide-core-spacing-xxxs);
 
       &:not([hidden]) {
         display: block;
       }
     }
 
+    .no-results {
+      font-family: var(--glide-core-body-sm-font-family);
+      font-size: var(--glide-core-body-sm-font-size);
+      font-weight: var(--glide-core-body-sm-font-weight);
+      line-height: var(--glide-core-body-sm-line-height);
+      padding: 0.625rem 0.875rem;
+      text-transform: capitalize;
+    }
+
     .placeholder {
-      /*
-        Using the browser's default placeholder color for now, as
-        '--glide-core-text-placeholder' has dark mode issues. Aligns
-        with Input and Textarea as suggested by design.
-      */
-      color: rgb(117 117 117);
+      color: var(--glide-core-text-placeholder);
 
       &.quiet {
         &:not(.disabled) {
           color: var(--glide-core-text-body-1);
         }
       }
-
-      &.disabled {
-        color: var(--glide-core-text-tertiary-disabled);
-      }
     }
 
     .tags {
@@ -261,6 +261,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       align-content: center;
       color: var(--glide-core-text-link);
       margin-inline-end: var(--glide-core-spacing-md);
+      white-space: nowrap;
     }
 
     .single-select-icon-slot {
@@ -326,19 +327,22 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       font-family: var(--glide-core-font-sans);
       font-size: inherit;
       min-inline-size: var(--min-inline-size);
+      padding-inline: 0;
 
-      /*
+      &:not(.quiet) {
+        /*
         2px so the value is vertically aligned. "vertical-align: middle" has no
         effect flex children.
       */
-      padding-block: 0.125rem 0;
-      padding-inline: 0;
+        padding-block: 0.125rem 0;
+      }
 
       &:focus {
         outline: none;
       }
 
       &::placeholder {
+        color: var(--glide-core-text-placeholder);
         font-family: var(--glide-core-font-sans);
       }
     }

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

@@ -21,9 +21,14 @@ it('is accessible', async () => {
       ${defaultSlot}
     </glide-core-dropdown>`);
     await expect(component).to.be.accessible({
-        // Axe doesn't search within slots when determining whether an element
-        // has an ID that matches `aria-activedescendant` exists.
-        ignoredRules: ['aria-valid-attr-value'],
+        ignoredRules: [
+            // Axe doesn't like that our item count element doesn't have a `role`. Yet
+            // it does label `<input>` and is announced correctly, at least by VoiceOver.
+            'aria-prohibited-attr',
+            // Axe doesn't search within slots when determining whether an element
+            // has an ID that matches `aria-activedescendant` exists.
+            'aria-valid-attr-value',
+        ],
     });
 });
 it('is filterable', async () => {

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import * as sinon from 'sinon';
-import { expect, fixture, html, oneEvent } 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';
@@ -19,18 +19,6 @@ const defaultSlot = html `
   <glide-core-dropdown-option label="Ten"></glide-core-dropdown-option>
   <glide-core-dropdown-option label="Eleven"></glide-core-dropdown-option>
 `;
-it('dispatches a "filter" event on "input"', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      ${defaultSlot}
-    </glide-core-dropdown>`);
-    component.focus();
-    sendKeys({ type: 'o' });
-    const event = await oneEvent(component, 'filter');
-    expect(event instanceof CustomEvent).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(event.composed).to.be.true;
-    expect(event.detail).to.equal('o');
-});
 it('does not dispatch "input" events on input', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       ${defaultSlot}

package/dist/dropdown.test.focus.js

@@ -67,7 +67,7 @@ it('focuses the Add button on ArrowDown', async () => {
     expect(options[0]?.privateActive).to.be.false;
     expect(options[1]?.privateActive).to.be.false;
     expect(options[1]?.privateIsEditActive).to.be.false;
-    expect(options[1]?.privateIsOpenTooltip).to.be.false;
+    expect(options[1]?.privateIsTooltipOpen).to.be.false;
     expect(component.shadowRoot?.activeElement).to.equal(addButton);
 });
 it('returns focus to itself on Escape when the Add button has focus', async () => {

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './dropdown.option.js';
-import { aTimeout, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
@@ -40,19 +40,3 @@ it('does not focus the primary button when `checkValidity` is called', async ()
     component.checkValidity();
     expect(component.shadowRoot?.activeElement).to.equal(null);
 });
-it('has a tooltip on focus when its internal label is overflowing', async () => {
-    // The period is arbitrary. 500 of them ensures we overflow.
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      <glide-core-dropdown-option
-        label=${'.'.repeat(500)}
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    component.focus();
-    await elementUpdated(component);
-    // Wait for the Resize Observer to do its thing.
-    await aTimeout(0);
-    const tooltip = component.shadowRoot?.querySelector('[data-test="internal-label-tooltip"]');
-    expect(tooltip?.open).to.be.true;
-    expect(tooltip?.disabled).to.be.false;
-});

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

@@ -264,6 +264,34 @@ it('hides Select All when filtering', async () => {
     const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
     expect(selectAll?.checkVisibility()).to.not.be.ok;
 });
+it('unhides every option after filtering when one is selected and Dropdown is reopened', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      filterable
+    >
+      <glide-core-dropdown-option
+        label="One"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    component.focus();
+    await sendKeys({ type: 'two' });
+    component.blur();
+    await elementUpdated(component);
+    component.open = true;
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = [
+        ...component.querySelectorAll('glide-core-dropdown-option'),
+    ].filter(({ hidden }) => !hidden);
+    expect(options.length).to.equal(2);
+});
 it('sets the first unfiltered option as active when the previously active option is filtered out', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
@@ -719,3 +747,59 @@ it('has no icon when filtering and an option is selected', async () => {
     const iconSlot = component.shadowRoot?.querySelector('[data-test="single-select-icon-slot"]');
     expect(iconSlot).to.be.null;
 });
+it('supports custom filtering', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      filterable
+    >
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.filter = async (filter) => {
+        const options = [
+            ...component.querySelectorAll('glide-core-dropdown-option'),
+        ];
+        return options.filter(({ label }) => label.includes(filter));
+    };
+    component.focus();
+    await sendKeys({ type: 'O' });
+    const options = [
+        ...component.querySelectorAll('glide-core-dropdown-option'),
+    ].filter(({ hidden }) => !hidden);
+    expect(options.length).to.equal(1);
+    expect(options[0].label).to.equal('One');
+});
+it('does nothing when filtering fails', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      filterable
+    >
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.filter = () => {
+        return Promise.reject();
+    };
+    component.focus();
+    await sendKeys({ type: 'O' });
+    const options = [
+        ...component.querySelectorAll('glide-core-dropdown-option'),
+    ].filter(({ hidden }) => !hidden);
+    expect(options.length).to.equal(2);
+});
+it('updates its item count after filtering', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      filterable
+    >
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.focus();
+    await sendKeys({ type: 'one' });
+    const itemCount = component.shadowRoot?.querySelector('[data-test="item-count"]');
+    expect(itemCount?.ariaLabel).to.equal('1 items');
+});

package/dist/dropdown.test.interactions.js

@@ -135,7 +135,7 @@ it('does not open on Space when `readonly`', async () => {
     expect(component.open).to.be.false;
     expect(options?.checkVisibility()).to.be.false;
 });
-// See the `document` click listener comment in `dropdown.ts` for an explanation.
+// See the `document` click handler comment in `dropdown.ts` for an explanation.
 it('opens when opened programmatically via the click handler of another element', async () => {
     const div = document.createElement('div');
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
@@ -297,7 +297,7 @@ it('activates the Edit button on ArrowDown', async () => {
     const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.true;
     expect(options[0]?.privateIsEditActive).true;
-    expect(options[0]?.privateIsOpenTooltip).false;
+    expect(options[0]?.privateIsTooltipOpen).false;
     expect(options[1]?.privateActive).to.be.false;
     expect(options[1]?.privateIsEditActive).to.be.false;
 });
@@ -320,7 +320,7 @@ it('activates the next option on ArrowDown when the Edit button is active', asyn
     expect(options[0]?.privateIsEditActive).false;
     expect(options[1]?.privateActive).to.be.true;
     expect(options[1]?.privateIsEditActive).to.be.false;
-    expect(options[1]?.privateIsOpenTooltip).true;
+    expect(options[1]?.privateIsTooltipOpen).true;
 });
 it('activates the previous option on ArrowUp', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -359,10 +359,10 @@ it('activates the Edit button on on ArrowUp', async () => {
     const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.true;
     expect(options[0]?.privateIsEditActive).to.be.true;
-    expect(options[0]?.privateIsOpenTooltip).false;
+    expect(options[0]?.privateIsTooltipOpen).false;
     expect(options[1]?.privateActive).to.be.false;
     expect(options[1]?.privateIsEditActive).to.be.false;
-    expect(options[1]?.privateIsOpenTooltip).to.be.false;
+    expect(options[1]?.privateIsTooltipOpen).to.be.false;
 });
 it('activates previously active option on ArrowUp', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -383,9 +383,9 @@ it('activates previously active option on ArrowUp', async () => {
     const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.false;
     expect(options[0]?.privateIsEditActive).to.be.false;
-    expect(options[0]?.privateIsOpenTooltip).to.be.false;
+    expect(options[0]?.privateIsTooltipOpen).to.be.false;
     expect(options[1]?.privateActive).to.be.true;
-    expect(options[1]?.privateIsOpenTooltip).to.be.true;
+    expect(options[1]?.privateIsTooltipOpen).to.be.true;
     expect(options[1]?.privateIsEditActive).to.be.false;
 });
 it('activates the Edit button on ArrowUp', async () => {
@@ -412,10 +412,10 @@ it('activates the Edit button on ArrowUp', async () => {
     const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.false;
     expect(options[0]?.privateIsEditActive).to.be.false;
-    expect(options[0]?.privateIsOpenTooltip).to.be.false;
+    expect(options[0]?.privateIsTooltipOpen).to.be.false;
     expect(options[1]?.privateActive).to.be.true;
     expect(options[1]?.privateIsEditActive).to.be.true;
-    expect(options[1]?.privateIsOpenTooltip).to.be.false;
+    expect(options[1]?.privateIsTooltipOpen).to.be.false;
 });
 it('activates the first option on Home', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -430,10 +430,10 @@ it('activates the first option on Home', async () => {
     const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.true;
     expect(options[0]?.privateIsEditActive).to.be.false;
-    expect(options[0]?.privateIsOpenTooltip).to.be.true;
+    expect(options[0]?.privateIsTooltipOpen).to.be.true;
     expect(options[1]?.privateActive).to.be.false;
     expect(options[1]?.privateIsEditActive).to.be.false;
-    expect(options[1]?.privateIsOpenTooltip).to.be.false;
+    expect(options[1]?.privateIsTooltipOpen).to.be.false;
 });
 it('activates the first option on PageUp', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -448,10 +448,10 @@ it('activates the first option on PageUp', async () => {
     const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.true;
     expect(options[0]?.privateIsEditActive).to.be.false;
-    expect(options[0]?.privateIsOpenTooltip).to.be.true;
+    expect(options[0]?.privateIsTooltipOpen).to.be.true;
     expect(options[1]?.privateActive).to.be.false;
     expect(options[1]?.privateIsEditActive).to.be.false;
-    expect(options[1]?.privateIsOpenTooltip).to.be.false;
+    expect(options[1]?.privateIsTooltipOpen).to.be.false;
 });
 it('activates the first option on ArrowUp + Meta', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -468,10 +468,10 @@ it('activates the first option on ArrowUp + Meta', async () => {
     const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.true;
     expect(options[0]?.privateIsEditActive).to.be.false;
-    expect(options[0]?.privateIsOpenTooltip).to.be.true;
+    expect(options[0]?.privateIsTooltipOpen).to.be.true;
     expect(options[1]?.privateActive).to.be.false;
     expect(options[1]?.privateIsEditActive).to.be.false;
-    expect(options[1]?.privateIsOpenTooltip).to.be.false;
+    expect(options[1]?.privateIsTooltipOpen).to.be.false;
 });
 it('activates the last option on End', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -485,10 +485,10 @@ it('activates the last option on End', async () => {
     const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.false;
     expect(options[0]?.privateIsEditActive).to.be.false;
-    expect(options[0]?.privateIsOpenTooltip).to.be.false;
+    expect(options[0]?.privateIsTooltipOpen).to.be.false;
     expect(options[1]?.privateActive).to.be.true;
     expect(options[1]?.privateIsEditActive).to.be.false;
-    expect(options[1]?.privateIsOpenTooltip).to.be.true;
+    expect(options[1]?.privateIsTooltipOpen).to.be.true;
 });
 it('activates the last option on PageDown', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -502,10 +502,10 @@ it('activates the last option on PageDown', async () => {
     const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.false;
     expect(options[0]?.privateIsEditActive).to.be.false;
-    expect(options[0]?.privateIsOpenTooltip).to.be.false;
+    expect(options[0]?.privateIsTooltipOpen).to.be.false;
     expect(options[1]?.privateActive).to.be.true;
     expect(options[1]?.privateIsEditActive).to.be.false;
-    expect(options[1]?.privateIsOpenTooltip).to.be.true;
+    expect(options[1]?.privateIsTooltipOpen).to.be.true;
 });
 it('activates the last option on Meta + ArrowDown', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -521,10 +521,10 @@ it('activates the last option on Meta + ArrowDown', async () => {
     const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.false;
     expect(options[0]?.privateIsEditActive).to.be.false;
-    expect(options[0]?.privateIsOpenTooltip).to.be.false;
+    expect(options[0]?.privateIsTooltipOpen).to.be.false;
     expect(options[1]?.privateActive).to.be.true;
     expect(options[1]?.privateIsEditActive).to.be.false;
-    expect(options[1]?.privateIsOpenTooltip).to.be.true;
+    expect(options[1]?.privateIsTooltipOpen).to.be.true;
 });
 it('activates the previously active option when tabbing back from the Add button', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -548,13 +548,13 @@ it('activates the previously active option when tabbing back from the Add button
     const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.false;
     expect(options[0]?.privateIsEditActive).to.be.false;
-    expect(options[0]?.privateIsOpenTooltip).to.be.false;
+    expect(options[0]?.privateIsTooltipOpen).to.be.false;
     expect(options[1]?.privateActive).to.be.true;
     expect(options[1]?.privateIsEditActive).to.be.false;
-    expect(options[1]?.privateIsOpenTooltip).to.be.true;
+    expect(options[1]?.privateIsTooltipOpen).to.be.true;
     expect(options[2]?.privateActive).to.be.false;
     expect(options[2]?.privateIsEditActive).to.be.false;
-    expect(options[2]?.privateIsOpenTooltip).to.be.false;
+    expect(options[2]?.privateIsTooltipOpen).to.be.false;
 });
 it('deactivates the active option when the Add button is tabbed to', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -574,7 +574,7 @@ it('deactivates the active option when the Add button is tabbed to', async () =>
     const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.false;
     expect(options[0]?.privateIsEditActive).to.be.false;
-    expect(options[0]?.privateIsOpenTooltip).to.be.false;
+    expect(options[0]?.privateIsTooltipOpen).to.be.false;
     expect(options[1]?.privateActive).to.be.false;
 });
 it('does not wrap on ArrowUp', async () => {

package/dist/input.d.ts

@@ -6,7 +6,7 @@ declare global {
         'glide-core-input': GlideCoreInput;
     }
 }
-export declare const SUPPORTED_TYPES: readonly ["email", "number", "password", "search", "tel", "text", "url"];
+export declare const SUPPORTED_TYPES: readonly ["date", "email", "number", "password", "search", "tel", "text", "url"];
 type SupportedTypes = (typeof SUPPORTED_TYPES)[number];
 /**
  * @event change - `(event: Event) => void`

package/dist/input.js

@@ -1,4 +1,4 @@
-var __decorate=this&&this.__decorate||function(t,e,i,s){var a,r=arguments.length,o=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,s);else for(var l=t.length-1;l>=0;l--)(a=t[l])&&(o=(r<3?a(o):r>3?a(e,i,o):a(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o};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{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow from"./library/ow.js";import styles from"./input.styles.js";export const SUPPORTED_TYPES=["email","number","password","search","tel","text","url"];let GlideCoreInput=class GlideCoreInput extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed",delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#t.form}get validity(){return this.pattern?(this.#t.setValidity({customError:Boolean(this.validityMessage),patternMismatch:!new RegExp(this.pattern).test(this.value),valueMissing:Boolean(this.required&&!this.value)}," ",this.#e.value),this.#t.validity):!this.pattern&&this.#t.validity.patternMismatch?(this.#t.setValidity({}),this.#t.validity):!this.required||this.value||this.disabled?this.required&&this.#t.validity.valueMissing&&this.value?(this.#t.setValidity({}),this.#t.validity):(this.required||!this.#t.validity.valueMissing||this.value||this.#t.setValidity({}),this.#t.validity):(this.#t.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#e.value),this.#t.validity)}get willValidate(){return this.#t.willValidate}blur(){this.#e.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const t=this.#t.checkValidity();return this.isCheckingValidity=!1,t}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}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`
+var __decorate=this&&this.__decorate||function(t,e,i,s){var a,r=arguments.length,o=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,s);else for(var l=t.length-1;l>=0;l--)(a=t[l])&&(o=(r<3?a(o):r>3?a(e,i,o):a(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o};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{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow from"./library/ow.js";import styles from"./input.styles.js";export const SUPPORTED_TYPES=["date","email","number","password","search","tel","text","url"];let GlideCoreInput=class GlideCoreInput extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed",delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#t.form}get validity(){return this.pattern?(this.#t.setValidity({customError:Boolean(this.validityMessage),patternMismatch:!new RegExp(this.pattern).test(this.value),valueMissing:Boolean(this.required&&!this.value)}," ",this.#e.value),this.#t.validity):!this.pattern&&this.#t.validity.patternMismatch?(this.#t.setValidity({}),this.#t.validity):!this.required||this.value||this.disabled?this.required&&this.#t.validity.valueMissing&&this.value?(this.#t.setValidity({}),this.#t.validity):(this.required||!this.#t.validity.valueMissing||this.value||this.#t.setValidity({}),this.#t.validity):(this.#t.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#e.value),this.#t.validity)}get willValidate(){return this.#t.willValidate}blur(){this.#e.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const t=this.#t.checkValidity();return this.isCheckingValidity=!1,t}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}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}
@@ -20,6 +20,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,r=arguments.length
           <input
             aria-describedby="meta"
             aria-invalid=${this.#s||this.#a}
+            class="input"
             id="input"
             type=${"password"===this.type&&this.passwordVisible?"text":this.type}
             .value=${this.value}