@crowdstrike/glide-core 0.12.2 → 0.13.0

package/dist/dropdown.test.events.js

@@ -22,7 +22,7 @@ it('dispatches an "edit" event on click', async () => {
         const button = component
             .querySelector('glide-core-dropdown-option')
             ?.shadowRoot?.querySelector('[data-test="edit-button"]');
-        button?.dispatchEvent(new Event('mouseover'));
+        button?.dispatchEvent(new MouseEvent('mouseover'));
         button?.click();
     });
     const option = component.querySelector('glide-core-dropdown-option');
@@ -43,7 +43,7 @@ it('dispatches an "edit" event on Enter', async () => {
     component
         .querySelector('glide-core-dropdown-option')
         ?.shadowRoot?.querySelector('[data-test="edit-button"]')
-        ?.dispatchEvent(new Event('mouseover'));
+        ?.dispatchEvent(new MouseEvent('mouseover'));
     component.focus();
     await sendKeys({ press: 'ArrowDown' });
     sendKeys({ press: 'Enter' });
@@ -65,7 +65,7 @@ it('dispatches an "edit" event on Space', async () => {
     component
         .querySelector('glide-core-dropdown-option')
         ?.shadowRoot?.querySelector('[data-test="edit-button"]')
-        ?.dispatchEvent(new Event('mouseover'));
+        ?.dispatchEvent(new MouseEvent('mouseover'));
     component.focus();
     await sendKeys({ press: 'ArrowDown' });
     sendKeys({ press: ' ' });
@@ -77,13 +77,71 @@ it('dispatches an "edit" event on Space', async () => {
     expect(event.composed).to.be.true;
     expect(event.target).to.equal(option);
 });
+it('dispatches an "add" event on click', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      add-button-label="Add"
+      label="Label"
+      placeholder="Placeholder"
+      open
+    >
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    setTimeout(async () => {
+        const button = component.shadowRoot?.querySelector('[data-test="add-button"]');
+        button?.dispatchEvent(new MouseEvent('mouseover'));
+        button?.click();
+    });
+    const event = await oneEvent(component, 'add');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.composed).to.be.true;
+});
+it('dispatches an "add" event on Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      add-button-label="Add"
+      label="Label"
+      placeholder="Placeholder"
+      open
+    >
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    component.shadowRoot
+        ?.querySelector('[data-test="add-button"]')
+        ?.focus();
+    sendKeys({ press: 'Enter' });
+    const event = await oneEvent(component, 'add');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.composed).to.be.true;
+});
+it('dispatches an "add" event on Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      add-button-label="Add"
+      label="Label"
+      placeholder="Placeholder"
+      open
+    >
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    component.shadowRoot
+        ?.querySelector('[data-test="add-button"]')
+        ?.focus();
+    sendKeys({ press: ' ' });
+    const event = await oneEvent(component, 'add');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.composed).to.be.true;
+});
 it('dispatches an "invalid" event on submit when required and no option is selected', async () => {
     const form = document.createElement('form');
     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-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`, { parentNode: form });
     setTimeout(() => form.requestSubmit());
     const event = await oneEvent(component, 'invalid');
@@ -92,10 +150,7 @@ it('dispatches an "invalid" event on submit when required and no option is selec
 it('dispatches an "invalid" event when `checkValidity` is called when required and no option is selected', async () => {
     const form = document.createElement('form');
     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-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`, { parentNode: form });
     setTimeout(() => component.checkValidity());
     const event = await oneEvent(component, 'invalid');
@@ -104,10 +159,7 @@ it('dispatches an "invalid" event when `checkValidity` is called when required a
 it('dispatches an "invalid" event when `reportValidity` is called when required and no option is selected', async () => {
     const form = document.createElement('form');
     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-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`, { parentNode: form });
     setTimeout(() => component.reportValidity());
     const event = await oneEvent(component, 'invalid');
@@ -116,10 +168,7 @@ it('dispatches an "invalid" event when `reportValidity` is called when required
 it('does not dispatch an "invalid" event when `checkValidity` is called when not required', 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 });
     const spy = sinon.spy();
     component.addEventListener('invalid', spy);
@@ -135,10 +184,7 @@ it('does not dispatch an "invalid" event when `checkValidity` is called when req
       disabled
       required
     >
-      <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 });
     const spy = sinon.spy();
     component.addEventListener('invalid', spy);
@@ -149,10 +195,7 @@ it('does not dispatch an "invalid" event when `checkValidity` is called when req
 it('does not dispatch an "invalid" event when `reportValidity` is called when not required,', 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 });
     const spy = sinon.spy();
     component.addEventListener('invalid', spy);
@@ -168,10 +211,7 @@ it('does not dispatch an "invalid" event when `reportValidity` is called when re
       disabled
       required
     >
-      <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 });
     const spy = sinon.spy();
     component.addEventListener('invalid', spy);
@@ -181,15 +221,8 @@ it('does not dispatch an "invalid" event when `reportValidity` is called when re
 });
 it('does not dispatch a "change" event when an option is selected programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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 spy = sinon.spy();
     component.addEventListener('change', spy);
@@ -203,15 +236,8 @@ it('does not dispatch a "change" event when an option is selected programmatical
 });
 it('does not dispatch a "input" event when an option is selected programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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 spy = sinon.spy();
     component.addEventListener('input', spy);

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

@@ -13,14 +13,10 @@ it('dispatches one "change" event when an option is selected via click', async (
       open
       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>`);
@@ -49,14 +45,10 @@ it('dispatches one "change" event when an option is selected via Enter', async (
       open
       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>`);
@@ -81,14 +73,10 @@ it('dispatches one "change" event when an option is selected via Space', async (
       open
       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>`);
@@ -113,14 +101,10 @@ it('dispatches one "input" event when an option is selected via click', async ()
       open
       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>`);
@@ -149,14 +133,10 @@ it('dispatches one "input" event when an option is selected via Enter', async ()
       open
       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>`);
@@ -181,14 +161,10 @@ it('dispatches one "input" event when an option is selected via Space', async ()
       open
       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>`);
@@ -214,14 +190,10 @@ it('dispatches one "change" event when Select All is clicked', async () => {
       multiple
       select-all
     >
-      <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>`);
@@ -243,14 +215,10 @@ it('dispatches one "input" event when Select All is clicked', async () => {
       multiple
       select-all
     >
-      <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>`);
@@ -271,19 +239,11 @@ it('does not dispatch a "change" event when `value` is changed programmatically'
       open
       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-option
         label="Three"
-        value="three"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -302,20 +262,15 @@ it('continues to dispatch "change" events upon selection after `value` is change
       open
       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-option
         label="Three"
-        value="three"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -335,19 +290,11 @@ it('does not dispatch an "input" event when `value` is changed programmatically'
       open
       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-option
         label="Three"
-        value="three"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -373,7 +320,6 @@ it('continues to dispatch "input" events upon selection after `value` is changed
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
 
@@ -400,14 +346,10 @@ it('dispatches one "change" event when an option is selected after Select All is
       multiple
       select-all
     >
-      <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>`);
@@ -433,14 +375,10 @@ it('dispatches one "input" event when an option is selected after Select All is
       multiple
       select-all
     >
-      <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>`);
@@ -467,14 +405,10 @@ it('dispatches one "change" event when a tag is removed', 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>`);
     setTimeout(() => {
         component.shadowRoot
@@ -495,14 +429,10 @@ it('dispatches one "input" event when a tag is removed', 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>`);
     setTimeout(() => {
         component.shadowRoot

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

@@ -7,14 +7,10 @@ import GlideCoreDropdown from './dropdown.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 it('dispatches one "change" event when an option is selected via click', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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>`);
@@ -30,14 +26,10 @@ it('dispatches one "change" event when an option is selected via click', async (
 });
 it('dispatches one "change" event when an option is selected via Enter', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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>`);
@@ -57,14 +49,10 @@ it('dispatches one "change" event when an option is selected via Enter', async (
 });
 it('dispatches one "change" event when an option is selected via Space', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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>`);
@@ -171,14 +159,10 @@ it('does not dispatch an "edit" event when `readonly`', async () => {
 });
 it('dispatches one "input" event when an option is selected via click', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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>`);
@@ -194,14 +178,10 @@ it('dispatches one "input" event when an option is selected via click', async ()
 });
 it('dispatches one "input" event when an option is selected via Enter', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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>`);
@@ -221,14 +201,10 @@ it('dispatches one "input" event when an option is selected via Enter', async ()
 });
 it('dispatches one "input" event when an option is selected via Space', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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>`);
@@ -267,14 +243,10 @@ it('does not dispatch a "change" event when an already selected option is clicke
 });
 it('does not dispatch a "change" event when `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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>`);
@@ -288,14 +260,10 @@ it('does not dispatch a "change" event when `value` is changed programmatically'
 });
 it('continues to dispatch "change" events upon selection after `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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>`);
@@ -308,14 +276,10 @@ it('continues to dispatch "change" events upon selection after `value` is change
 });
 it('does not dispatch an "input" event when `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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>`);
@@ -331,14 +295,10 @@ it('does not dispatch a "change" event when an already selected option is select
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
       <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 spy = sinon.spy();
     component.addEventListener('change', spy);
@@ -352,14 +312,10 @@ it('does not dispatch an "input" event when an already selected option is select
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
       <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 spy = sinon.spy();
     component.addEventListener('input', spy);
@@ -371,14 +327,10 @@ it('does not dispatch an "input" event when an already selected option is select
 });
 it('continues to dispatch "input" events upon selection after `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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>`);