@crowdstrike/glide-core 0.12.2 → 0.13.0

package/dist/dropdown.option.styles.js

@@ -27,7 +27,7 @@ import{css}from"lit";export default[css`
         font-style: var(--glide-core-body-sm-font-style);
         font-weight: var(--glide-core-body-sm-font-weight);
         line-height: var(--glide-core-body-sm-line-height);
-        padding-inline-start: var(--glide-core-spacing-sm);
+        padding-inline-start: 0.625rem;
 
         &:not(.editable) {
           padding-inline-end: var(--glide-core-spacing-sm);
@@ -40,7 +40,7 @@ import{css}from"lit";export default[css`
         font-style: var(--glide-core-body-xs-font-style);
         font-weight: var(--glide-core-body-xs-font-weight);
         line-height: var(--glide-core-body-xs-line-height);
-        padding-inline-start: var(--glide-core-spacing-xs);
+        padding-inline-start: var(--glide-core-spacing-sm);
 
         &:not(.editable) {
           padding-inline-end: var(--glide-core-spacing-xs);
@@ -86,15 +86,47 @@ import{css}from"lit";export default[css`
     }
 
     .icon-slot {
-      display: block;
-      padding-inline-end: var(--glide-core-spacing-xs);
+      &.large {
+        &::slotted(*) {
+          block-size: 1rem;
+          inline-size: 1rem;
+        }
+      }
+
+      &.small {
+        &::slotted(*) {
+          block-size: 0.75rem;
+          inline-size: 0.75rem;
+        }
+      }
+
+      &::slotted(*) {
+        align-items: center;
+        display: flex;
+        padding-inline-end: var(--glide-core-spacing-xs);
+      }
     }
 
     .checkbox-icon-slot {
+      &.large {
+        &::slotted(*) {
+          block-size: 1rem;
+          inline-size: 1rem;
+        }
+      }
+
+      &.small {
+        &::slotted(*) {
+          block-size: 0.75rem;
+          inline-size: 0.75rem;
+        }
+      }
+
       &::slotted(*) {
-        block-size: 1rem;
-        display: block;
-        inline-size: 1rem;
+        align-items: center;
+        block-size: 0.75rem;
+        display: flex;
+        inline-size: 0.75rem;
       }
     }
 

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

@@ -35,8 +35,8 @@ it('sets `privateIsEditActive`', async () => {
       private-multiple
     ></glide-core-dropdown-option>`);
     const button = component.shadowRoot?.querySelector('[data-test="edit-button"]');
-    button?.dispatchEvent(new Event('mouseover'));
+    button?.dispatchEvent(new MouseEvent('mouseover'));
     expect(component.privateIsEditActive).to.be.true;
-    button?.dispatchEvent(new Event('mouseout'));
+    button?.dispatchEvent(new MouseEvent('mouseout'));
     expect(component.privateIsEditActive).to.be.false;
 });

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

@@ -69,8 +69,8 @@ it('sets `privateIsEditActive`', async () => {
       editable
     ></glide-core-dropdown-option>`);
     const button = component.shadowRoot?.querySelector('[data-test="edit-button"]');
-    button?.dispatchEvent(new Event('mouseover'));
+    button?.dispatchEvent(new MouseEvent('mouseover'));
     expect(component.privateIsEditActive).to.be.true;
-    button?.dispatchEvent(new Event('mouseout'));
+    button?.dispatchEvent(new MouseEvent('mouseout'));
     expect(component.privateIsEditActive).to.be.false;
 });

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(".edit-button:focus-visible")}
-    ${opacityAndScaleAnimation(".options:popover-open")}
+    ${focusOutline(".add-button:focus-visible")}
+    ${opacityAndScaleAnimation(".options-and-footer:popover-open")}
+    ${visuallyHidden(".item-count")}
     ${visuallyHidden(".selected-option-labels")}
   `,css`
     .component {
@@ -14,6 +15,19 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       position: relative;
     }
 
+    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
+          behaves this way.
+        */
+        min-inline-size: var(--min-inline-size);
+      }
+    }
+
     .dropdown {
       --button-and-input-height: 1.25rem;
 
@@ -38,7 +52,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         background-color 200ms ease-in-out,
         border-color 200ms ease-in-out;
       user-select: none;
-      white-space: nowrap;
 
       &.quiet:not(.multiple) {
         background-color: transparent;
@@ -79,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);
@@ -91,49 +105,126 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
     }
 
-    .options {
+    .options-and-footer {
       --border-width: 1px;
-      --padding: var(--glide-core-spacing-xxxs);
 
       background-color: var(--glide-core-surface-modal);
-      border: var(--border-width) solid var(--glide-core-surface-modal);
+      border: var(--border-width) solid var(--glide-core-border-base-lighter);
       border-radius: var(--glide-core-spacing-xs);
       box-shadow: var(--glide-core-shadow-lg);
-      box-sizing: border-box;
       inset: unset;
+      min-inline-size: var(--min-inline-size);
+      padding: 0;
+      position: absolute;
+    }
+
+    .options {
+      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
       );
-      min-inline-size: var(--min-inline-size);
       overflow: auto;
-      padding: var(--padding);
-      position: absolute;
       scroll-behavior: smooth;
 
+      &.large {
+        --private-option-height: 1.75rem;
+      }
+
+      &.small {
+        --private-option-height: 1.25rem;
+      }
+
       &.hidden {
         display: none;
       }
+    }
+
+    .options-slot {
+      display: block;
+      padding: var(--glide-core-spacing-xxxs);
+    }
+
+    .footer {
+      border-block-start: 1px solid var(--glide-core-border-base);
+      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
+        its space in layout is preserved, so it doesn't overlap the last option.
+      */
+      position: sticky;
+
+      &.visible {
+        display: block;
+      }
+    }
+
+    .add-button {
+      align-items: center;
+      background-color: transparent;
+      border: none;
+      border-radius: 0.75rem;
+      display: flex;
+      font-family: var(--glide-core-body-sm-font-family);
+      font-weight: var(--glide-core-body-sm-font-weight);
+      inline-size: 100%;
+      line-height: 100%;
+      text-align: start;
 
       &.large {
-        --private-option-height: 1.75rem;
+        --size: 1rem;
+
+        column-gap: 0.625rem;
+        font-size: var(--glide-core-body-sm-font-size);
+        padding-block: 0.375rem;
+        padding-inline: var(--glide-core-spacing-sm);
       }
 
       &.small {
-        --private-option-height: 1.25rem;
+        --size: 0.875rem;
+
+        column-gap: var(--glide-core-spacing-xs);
+        font-size: var(--glide-core-body-xs-font-size);
+        padding-block: var(--glide-core-spacing-xxxs);
+        padding-inline: var(--glide-core-spacing-xs);
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        outline-offset: -2px;
+      }
+
+      &:focus,
+      &:hover {
+        background-color: var(--glide-core-surface-hover);
       }
     }
 
     .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
@@ -179,6 +270,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 {
@@ -195,12 +287,25 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
     }
 
+    .internal-label-tooltip {
+      display: none;
+      overflow: hidden;
+
+      &.visible {
+        display: block;
+      }
+    }
+
     .internal-label {
+      overflow: hidden;
+
       /*
         2px so the label is vertically aligned. "vertical-align: middle" has no
         effect on flex children.
       */
       padding-block-start: 0.125rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     .primary-button {

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

@@ -4,69 +4,31 @@ import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDropdown from './dropdown.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 const defaultSlot = html `
-  <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="Three"
-    value="three"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Four"
-    value="four"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Five"
-    value="five"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Six"
-    value="six"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Seven"
-    value="seven"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Eight"
-    value="eight"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Nine"
-    value="nine"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Ten"
-    value="ten"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Eleven"
-    value="eleven"
-  ></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Three"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Four"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Five"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Six"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Seven"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Eight"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Nine"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Ten"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Eleven"></glide-core-dropdown-option>
 `;
 it('is accessible', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       ${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 () => {