@crowdstrike/glide-core 0.12.1 → 0.12.3

package/dist/dropdown.test.basics.js

@@ -27,10 +27,7 @@ it('has defaults', async () => {
     // idea is that this test shouldn't fail to typecheck if these templates are
     // eventually typechecked, which means supplying all required attributes and slots.
     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>`);
     expect(component.disabled).to.be.false;
     expect(component.filterable).to.be.false;
@@ -44,7 +41,6 @@ it('can be open', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
       <glide-core-dropdown-option
         label="Label"
-        value="value"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -62,10 +58,7 @@ it('cannot be open when disabled', async () => {
       open
       disabled
     >
-      <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>`);
     const options = component?.shadowRoot?.querySelector('[data-test="options"]');
     expect(options?.checkVisibility()).to.be.false;
@@ -81,143 +74,10 @@ it('can be filterable', async () => {
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.checkVisibility()).to.be.true;
 });
-it('can have a label', async () => {
-    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>`);
-    expect(component.getAttribute('label')).to.equal('Label');
-    expect(component.label).to.equal('Label');
-});
-it('can have a placeholder', async () => {
-    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>`);
-    expect(component.getAttribute('placeholder')).to.equal('Placeholder');
-    expect(component.placeholder).to.equal('Placeholder');
-});
-it('can have a description', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      <div slot="description">Description</div>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    const assignedElements = component.shadowRoot
-        ?.querySelector('slot[name="description"]')
-        ?.assignedElements();
-    expect(assignedElements?.at(0)?.textContent).to.equal('Description');
-});
-it('can have a tooltip', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
-      <div slot="tooltip">Tooltip</div>
-    </glide-core-dropdown>`);
-    const assignedElements = component.shadowRoot
-        ?.querySelector('slot[name="tooltip"]')
-        ?.assignedElements();
-    expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
-});
-it('can have a `name`', async () => {
-    const component = await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      name="name"
-    >
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    expect(component.getAttribute('name')).to.equal('name');
-    expect(component.name).to.equal('name');
-});
-it('can have a `size`', async () => {
-    const component = await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      size="small"
-    >
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    expect(component.getAttribute('size')).to.equal('small');
-    expect(component.size).to.equal('small');
-    const option = component.querySelector('glide-core-dropdown-option');
-    expect(option?.privateSize).to.equal('small');
-});
-it('can be `disabled`', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    expect(component.hasAttribute('disabled')).to.be.true;
-    expect(component.disabled).to.be.true;
-});
-it('can be `required`', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" required>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    expect(component.hasAttribute('required')).to.be.true;
-    expect(component.required).to.be.true;
-});
-it('can be `multiple`', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
-      <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>`);
-    expect(component.hasAttribute('multiple')).to.be.true;
-    expect(component.multiple).to.be.true;
-});
-it('can be `select-all`', async () => {
-    const component = await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      multiple
-      select-all
-    >
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    expect(component.hasAttribute('select-all')).to.be.true;
-    expect(component.selectAll).to.be.true;
-});
 it('activates the first option when no options are initially selected', async () => {
     const component = await fixture(html `<glide-core-dropdown open>
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     expect(options[0]?.privateActive).to.be.true;
@@ -225,20 +85,15 @@ it('activates the first option when no options are initially selected', async ()
 });
 it('activates the last selected option when options are initially selected', async () => {
     const component = await fixture(html `<glide-core-dropdown open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Three"
-        value="three"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -249,55 +104,16 @@ it('activates the last selected option when options are initially selected', asy
 });
 it('is scrollable', async () => {
     const component = await fixture(html `<glide-core-dropdown open>
-      <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="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>`);
     // Wait for it to open.
     await aTimeout(0);
@@ -307,50 +123,15 @@ it('is scrollable', async () => {
 });
 it('is not scrollable', async () => {
     const component = await fixture(html `<glide-core-dropdown open>
-      <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="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>`);
     // Wait for it to open.
     await aTimeout(0);
@@ -371,7 +152,6 @@ it('does not throw if the default slot only contains whitespace', async () => {
         await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
         ${repeat([], () => html `<glide-core-dropdown-option
               label="Option"
-              value="option"
             ></glide-core-dropdown-option>`)}
       </glide-core-dropdown>`);
     }

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

@@ -6,14 +6,10 @@ import GlideCoreTag from './tag.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 it('is accessible', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -44,13 +40,11 @@ it('has selected option labels when options are initially selected', async () =>
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       <glide-core-dropdown-option
         label="One"
-        value="one"
         selected
       ></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -63,14 +57,10 @@ it('has a tag when an option is initially selected', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       <glide-core-dropdown-option
         label="One"
-        value="one"
         selected
       ></glide-core-dropdown-option>
 
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const tag = component.shadowRoot?.querySelector('[data-test="tag"]');
     expect(tag?.checkVisibility()).to.be.true;
@@ -86,14 +76,10 @@ it('shows Select All', async () => {
     >
       <glide-core-dropdown-option
         label="One"
-        value="one"
         selected
       ></glide-core-dropdown-option>
 
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     // Wait for it to open.
     await aTimeout(0);
@@ -109,13 +95,11 @@ it('sets Select All as selected when all options are initially selected', async
     >
       <glide-core-dropdown-option
         label="One"
-        value="one"
         selected
       ></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -129,15 +113,8 @@ it('sets Select All as deselected when no options are initially selected', async
       multiple
       select-all
     >
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
     expect(selectAll?.selected).to.be.false;
@@ -151,14 +128,10 @@ it('sets Select All as indeterminate when not all options are initially selected
     >
       <glide-core-dropdown-option
         label="One"
-        value="one"
         selected
       ></glide-core-dropdown-option>
 
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
     expect(selectAll?.privateIndeterminate).to.be.true;
@@ -170,15 +143,8 @@ it('does not set Select All as indeterminate when no options are initially selec
       multiple
       select-all
     >
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
     expect(selectAll?.privateIndeterminate).to.be.false;
@@ -192,13 +158,11 @@ it('does not set Select All as indeterminate when all options are initially sele
     >
       <glide-core-dropdown-option
         label="One"
-        value="one"
         selected
       ></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -207,15 +171,8 @@ it('does not set Select All as indeterminate when all options are initially sele
 });
 it('sets its internal label to `placeholder` when no option is initially selected', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
     expect(label?.textContent?.trim()).to.equal('Placeholder');
@@ -229,17 +186,13 @@ it('has no internal label when an option is initially selected', async () => {
     >
       <glide-core-dropdown-option
         label="One"
-        value="one"
         selected
       ></glide-core-dropdown-option>
 
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
-    expect(label).to.not.exist;
+    expect(label?.checkVisibility()).to.not.be.ok;
 });
 it('has a "multiselect" icon for each selected option with a value', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
@@ -267,7 +220,7 @@ it('has a "multiselect" icon for each selected option with a value', async () =>
     const icons = component.shadowRoot?.querySelectorAll('[data-test="multiselect-icon-slot"]');
     expect(icons?.length).to.equal(2);
 });
-it('has no "multiselect" icons', async () => {
+it('has no "multiselect" icons when no options are selected', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       <div slot="icon:one">✓</div>
       <div slot="icon:two">✓</div>

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

@@ -4,10 +4,7 @@ import GlideCoreDropdown from './dropdown.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 it('is accessible ', async () => {
     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>`);
     await expect(component).to.be.accessible();
 });
@@ -15,7 +12,6 @@ it('has a selected option label when an option is initially selected', async ()
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <glide-core-dropdown-option
         label="One"
-        value="one"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -23,17 +19,15 @@ it('has a selected option label when an option is initially selected', async ()
     expect(labels?.length).to.equal(1);
     expect(labels?.[0]?.textContent?.trim()).to.equal('One,');
 });
-it('sets its internal label to the last initially selected option', async () => {
+it('sets its internal `label` to the last initially selected option', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <glide-core-dropdown-option
         label="One"
-        value="one"
         selected
       ></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);

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

@@ -7,60 +7,17 @@ import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 GlideCoreDropdownOption.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('dispatches a "filter" event on "input"', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
@@ -71,6 +28,7 @@ it('dispatches a "filter" event on "input"', async () => {
     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 () => {