@crowdstrike/glide-core 0.12.0 → 0.12.2

package/dist/dropdown.test.interactions.js

@@ -211,6 +211,22 @@ it('closes on Escape', async () => {
     await sendKeys({ press: 'Escape' });
     expect(component.open).to.be.false;
 });
+it('closes on edit via click', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="One"
+        editable
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component
+        .querySelector('glide-core-dropdown-option')
+        ?.shadowRoot?.querySelector('[data-test="edit-button"]')
+        ?.click();
+    expect(component.open).to.be.false;
+});
 it('opens when open and enabled programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
@@ -268,6 +284,7 @@ it('activates an option on "mouseover"', async () => {
     </glide-core-dropdown>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    expect(options[0]?.privateActive).to.be.false;
     expect(options[1]?.privateActive).to.be.true;
 });
 it('activates the next option on ArrowDown', async () => {
@@ -290,6 +307,47 @@ it('activates the next option on ArrowDown', async () => {
     expect(options[0]?.privateActive).to.be.false;
     expect(options[1]?.privateActive).to.be.true;
 });
+it('activates the Edit button on ArrowDown', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="Label"
+        editable
+      ></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);
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    options[0]?.focus();
+    await sendKeys({ press: 'ArrowDown' });
+    expect(options[0]?.privateActive).to.be.true;
+    expect(options[0]?.privateIsEditActive).true;
+    expect(options[0]?.privateIsOpenTooltip).false;
+    expect(options[1]?.privateActive).to.be.false;
+    expect(options[1]?.privateIsEditActive).to.be.false;
+});
+it('activates the next option on ArrowDown when the Edit button is active', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="Label"
+        editable
+      ></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);
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    options[0]?.focus();
+    await sendKeys({ press: 'ArrowDown' });
+    await sendKeys({ press: 'ArrowDown' });
+    expect(options[0]?.privateActive).to.be.false;
+    expect(options[0]?.privateIsEditActive).false;
+    expect(options[1]?.privateActive).to.be.true;
+    expect(options[1]?.privateIsEditActive).to.be.false;
+    expect(options[1]?.privateIsOpenTooltip).true;
+});
 it('activates the previous option on ArrowUp', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
       <glide-core-dropdown-option
@@ -312,6 +370,56 @@ it('activates the previous option on ArrowUp', async () => {
     expect(options[0]?.privateActive).to.be.true;
     expect(options[1]?.privateActive).to.be.false;
 });
+it('activates the Edit button on on ArrowUp', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="Label"
+        editable
+      ></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);
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    options[1]?.focus();
+    expect(options[1]?.privateActive).to.be.true;
+    await sendKeys({ press: 'ArrowUp' });
+    expect(options[0]?.privateActive).to.be.true;
+    expect(options[0]?.privateIsEditActive).to.be.true;
+    expect(options[0]?.privateIsOpenTooltip).false;
+    expect(options[1]?.privateActive).to.be.false;
+    expect(options[1]?.privateIsEditActive).to.be.false;
+    expect(options[1]?.privateIsOpenTooltip).to.be.false;
+});
+it('activates the previous option on ArrowUp when the Edit button is active', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="One"
+        editable
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        editable
+      ></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);
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    options[1]?.focus();
+    await sendKeys({ press: 'ArrowUp' });
+    await sendKeys({ press: 'ArrowUp' });
+    expect(options[0]?.privateActive).to.be.true;
+    expect(options[0]?.privateIsEditActive).to.be.false;
+    expect(options[0]?.privateIsOpenTooltip).to.be.true;
+    expect(options[1]?.privateActive).to.be.false;
+    expect(options[1]?.privateIsEditActive).to.be.false;
+    expect(options[1]?.privateIsOpenTooltip).to.be.false;
+});
 it('activates the first option on Home', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
       <glide-core-dropdown-option
@@ -332,7 +440,11 @@ it('activates the first option on Home', async () => {
     options[1].focus();
     await sendKeys({ press: 'Home' });
     expect(options[0]?.privateActive).to.be.true;
+    expect(options[0]?.privateIsEditActive).to.be.false;
+    expect(options[0]?.privateIsOpenTooltip).to.be.true;
     expect(options[1]?.privateActive).to.be.false;
+    expect(options[1]?.privateIsEditActive).to.be.false;
+    expect(options[1]?.privateIsOpenTooltip).to.be.false;
 });
 it('activates the first option on PageUp', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -354,7 +466,11 @@ it('activates the first option on PageUp', async () => {
     expect(options[1]?.privateActive).to.be.true;
     await sendKeys({ press: 'PageUp' });
     expect(options[0]?.privateActive).to.be.true;
+    expect(options[0]?.privateIsEditActive).to.be.false;
+    expect(options[0]?.privateIsOpenTooltip).to.be.true;
     expect(options[1]?.privateActive).to.be.false;
+    expect(options[1]?.privateIsEditActive).to.be.false;
+    expect(options[1]?.privateIsOpenTooltip).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>
@@ -372,13 +488,16 @@ it('activates the first option on ArrowUp + Meta', async () => {
     await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-    expect(options[1]?.privateActive).to.be.true;
     options[1].focus();
     await sendKeys({ down: 'Meta' });
     await sendKeys({ press: 'ArrowUp' });
     await sendKeys({ up: 'Meta' });
     expect(options[0]?.privateActive).to.be.true;
+    expect(options[0]?.privateIsEditActive).to.be.false;
+    expect(options[0]?.privateIsOpenTooltip).to.be.true;
     expect(options[1]?.privateActive).to.be.false;
+    expect(options[1]?.privateIsEditActive).to.be.false;
+    expect(options[1]?.privateIsOpenTooltip).to.be.false;
 });
 it('activates the last option on End', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -398,7 +517,11 @@ it('activates the last option on End', async () => {
     options[0]?.focus();
     await sendKeys({ press: 'End' });
     expect(options[0]?.privateActive).to.be.false;
+    expect(options[0]?.privateIsEditActive).to.be.false;
+    expect(options[0]?.privateIsOpenTooltip).to.be.false;
     expect(options[1]?.privateActive).to.be.true;
+    expect(options[1]?.privateIsEditActive).to.be.false;
+    expect(options[1]?.privateIsOpenTooltip).to.be.true;
 });
 it('activates the last option on PageDown', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -418,7 +541,11 @@ it('activates the last option on PageDown', async () => {
     options[0]?.focus();
     await sendKeys({ press: 'PageDown' });
     expect(options[0]?.privateActive).to.be.false;
+    expect(options[0]?.privateIsEditActive).to.be.false;
+    expect(options[0]?.privateIsOpenTooltip).to.be.false;
     expect(options[1]?.privateActive).to.be.true;
+    expect(options[1]?.privateIsEditActive).to.be.false;
+    expect(options[1]?.privateIsOpenTooltip).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>
@@ -440,7 +567,11 @@ it('activates the last option on Meta + ArrowDown', async () => {
     await sendKeys({ press: 'ArrowDown' });
     await sendKeys({ up: 'Meta' });
     expect(options[0]?.privateActive).to.be.false;
+    expect(options[0]?.privateIsEditActive).to.be.false;
+    expect(options[0]?.privateIsOpenTooltip).to.be.false;
     expect(options[1]?.privateActive).to.be.true;
+    expect(options[1]?.privateIsEditActive).to.be.false;
+    expect(options[1]?.privateIsOpenTooltip).to.be.true;
 });
 it('does not wrap on ArrowUp', async () => {
     const component = await fixture(html `<glide-core-dropdown open>
@@ -498,7 +629,7 @@ it('updates `privateSize` on every option when `size` is changed programmaticall
     expect(options[0].privateSize).to.equal('small');
     expect(options[1].privateSize).to.equal('small');
 });
-it('opens when something other than the button is clicked', async () => {
+it('opens when something other than the primary button is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <glide-core-dropdown-option
         label="Label"
@@ -516,6 +647,47 @@ it('opens when something other than the button is clicked', async () => {
     });
     expect(component.open).to.be.true;
 });
+it('does not open on edit via click', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="Label"
+        editable
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.shadowRoot
+        ?.querySelector('[data-test="edit-button"]')
+        ?.click();
+    expect(component.open).to.be.false;
+});
+it('does not open on edit via Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="Label"
+        editable
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.shadowRoot
+        ?.querySelector('[data-test="edit-button"]')
+        ?.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(component.open).to.be.false;
+});
+it('does not open on edit via Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="Label"
+        editable
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.shadowRoot
+        ?.querySelector('[data-test="edit-button"]')
+        ?.focus();
+    await sendKeys({ press: ' ' });
+    expect(component.open).to.be.false;
+});
 it('hides the tooltip of the active option when opened via click', async () => {
     // The period is arbitrary. 500 of them ensures we exceed the maximum
     // width even if it's increased.
@@ -531,7 +703,7 @@ it('hides the tooltip of the active option when opened via click', async () => {
     // and would work. `CustomEvent` is used for completeness and to get us as close as
     // possible to a real click. See the comment in the handler for more information.
     component.shadowRoot
-        ?.querySelector('[data-test="button"]')
+        ?.querySelector('[data-test="primary-button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     // Wait for it to open.
     await aTimeout(0);

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

@@ -12,6 +12,7 @@ import { sendKeys } from '@web/test-runner-commands';
 import { sendMouse } from '@web/test-runner-commands';
 import GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
+import GlideCoreTag from './tag.js';
 let GlideCoreDropdownInAnotherComponent = class GlideCoreDropdownInAnotherComponent extends LitElement {
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
@@ -40,6 +41,7 @@ GlideCoreDropdownInAnotherComponent = __decorate([
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
 GlideCoreDropdownInAnotherComponent.shadowRootOptions.mode = 'open';
+GlideCoreTag.shadowRootOptions.mode = 'open';
 it('opens on click', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       <glide-core-dropdown-option
@@ -57,7 +59,7 @@ it('opens on click', async () => {
     // and would work. `CustomEvent` is used for completeness and to get us as close as
     // possible to a real click. See the comment in the handler for more information.
     component.shadowRoot
-        ?.querySelector('[data-test="button"]')
+        ?.querySelector('[data-test="primary-button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     // Wait for it to open.
     await aTimeout(0);
@@ -87,7 +89,7 @@ it('toggles open and closed when the button is clicked', async () => {
     // and would work. `CustomEvent` is used for completeness and to get us as close as
     // possible to a real click. See the comment in the handler for more information.
     component.shadowRoot
-        ?.querySelector('[data-test="button"]')
+        ?.querySelector('[data-test="primary-button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     await elementUpdated(component);
     const options = component.shadowRoot?.querySelector('[data-test="options"]');
@@ -359,7 +361,7 @@ it('does not activate the next option on ArrowDown when a tag is focused', async
     await sendKeys({ press: 'ArrowDown' });
     expect(options[0]?.privateActive).to.be.true;
 });
-it('updates its tag when the `label` of a selected option is changed programmatically', async () => {
+it('updates its tag when `label` of a selected option is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       <glide-core-dropdown-option
         label="One"
@@ -375,6 +377,22 @@ it('updates its tag when the `label` of a selected option is changed programmati
     const tag = component.shadowRoot?.querySelector('[data-test="tag"]');
     expect(tag?.label).to.equal('Three');
 });
+it('makes its tag editable when `editable` of a selected option is changed programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      <glide-core-dropdown-option
+        label="One"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    option.editable = true;
+    await elementUpdated(component);
+    const tag = component.shadowRoot?.querySelector('[data-test="tag"]');
+    expect(tag?.privateEditable).to.be.true;
+});
 it('selects and deselects options when `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       <glide-core-dropdown-option
@@ -1111,6 +1129,57 @@ it('closes when a tag is clicked', async () => {
     await elementUpdated(component);
     expect(component.open).to.be.false;
 });
+it('closes on edit via click', async () => {
+    const component = await fixture(html `<glide-core-dropdown open multiple>
+      <glide-core-dropdown-option
+        label="One"
+        editable
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.shadowRoot
+        ?.querySelector('glide-core-tag')
+        ?.shadowRoot?.querySelector('[data-test="edit-button"]')
+        ?.click();
+    await elementUpdated(component);
+    expect(component.open).to.be.false;
+});
+it('closes on edit via Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown open multiple>
+      <glide-core-dropdown-option
+        label="One"
+        editable
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.shadowRoot
+        ?.querySelector('glide-core-tag')
+        ?.shadowRoot?.querySelector('[data-test="edit-button"]')
+        ?.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(component.open).to.be.false;
+});
+it('closes on edit via Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown open multiple>
+      <glide-core-dropdown-option
+        label="One"
+        editable
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.shadowRoot
+        ?.querySelector('glide-core-tag')
+        ?.shadowRoot?.querySelector('[data-test="edit-button"]')
+        ?.focus();
+    await sendKeys({ press: ' ' });
+    expect(component.open).to.be.false;
+});
 it('cannot be tabbed to when `disabled`', async () => {
     await fixture(html `<glide-core-dropdown
       label="Label"
@@ -1131,7 +1200,7 @@ it('cannot be tabbed to when `disabled`', async () => {
     await sendKeys({ press: 'Tab' });
     expect(document.activeElement).to.equal(document.body);
 });
-it('clicks the button when `click()` is called', async () => {
+it('clicks the primary button when `click()` is called', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       <glide-core-dropdown-option
         label="One"
@@ -1143,7 +1212,7 @@ it('clicks the button when `click()` is called', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
-    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
     assert(button);
     setTimeout(() => {
         component.click();

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

@@ -19,7 +19,7 @@ it('opens on click', async () => {
     // and would work. `CustomEvent` is used for completeness and to get us as close as
     // possible to a real click. See the comment in the handler for more information.
     component.shadowRoot
-        ?.querySelector('[data-test="button"]')
+        ?.querySelector('[data-test="primary-button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     // Wait for it to open.
     await aTimeout(0);
@@ -27,7 +27,7 @@ it('opens on click', async () => {
     expect(component.open).to.be.true;
     expect(options?.checkVisibility()).to.be.true;
 });
-it('toggles open and closed when the button is clicked', async () => {
+it('toggles open and closed when the primary button is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
       <glide-core-dropdown-option
         label="Label"
@@ -39,7 +39,7 @@ it('toggles open and closed when the button is clicked', async () => {
     // and would work. `CustomEvent` is used for completeness and to get us as close as
     // possible to a real click. See the comment in the handler for more information.
     component.shadowRoot
-        ?.querySelector('[data-test="button"]')
+        ?.querySelector('[data-test="primary-button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     await elementUpdated(component);
     const options = component.shadowRoot?.querySelector('[data-test="options"]');
@@ -246,6 +246,21 @@ it('closes when an already selected option is clicked', async () => {
     component.querySelector('glide-core-dropdown-option')?.click();
     expect(component.open).to.be.false;
 });
+it('closes on edit via click', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="Label"
+        editable
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    component.shadowRoot
+        ?.querySelector('[data-test="edit-button"]')
+        ?.click();
+    expect(component.open).to.be.false;
+});
 it('deselects all other options when one is newly selected', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <glide-core-dropdown-option
@@ -265,7 +280,7 @@ it('deselects all other options when one is newly selected', async () => {
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.shadowRoot
-        ?.querySelector('[data-test="button"]')
+        ?.querySelector('[data-test="primary-button"]')
         ?.dispatchEvent(new Event('click'));
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1].click();
@@ -273,7 +288,7 @@ it('deselects all other options when one is newly selected', async () => {
     expect(options[1].selected).to.be.true;
     expect(options[2].selected).to.be.false;
 });
-it('updates its internal label when the `label` of a selected option is changed programmatically', async () => {
+it('updates its internal label when `label` of the selected option is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <glide-core-dropdown-option
         label="One"
@@ -287,6 +302,20 @@ it('updates its internal label when the `label` of a selected option is changed
     const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
     expect(label?.textContent?.trim()).to.equal(option?.label);
 });
+it('shows an Edit button when `editable` of the selected option is changed programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="One"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    option.editable = true;
+    await elementUpdated(component);
+    const editButton = component.shadowRoot?.querySelector('[data-test="edit-button"]');
+    expect(editButton?.checkVisibility()).to.be.true;
+});
 it('selects and deselects options when `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <glide-core-dropdown-option
@@ -360,7 +389,7 @@ it('updates `value` when an option is selected via click', async () => {
     expect(component.value).to.deep.equal(['two']);
     // Reopen it.
     component.shadowRoot
-        ?.querySelector('[data-test="button"]')
+        ?.querySelector('[data-test="primary-button"]')
         ?.dispatchEvent(new CustomEvent('click', { detail: 1 }));
     // Wait for it to open.
     await elementUpdated(component);
@@ -368,7 +397,7 @@ it('updates `value` when an option is selected via click', async () => {
     expect(component.value).to.deep.equal(['two']);
     // Reopen it.
     component.shadowRoot
-        ?.querySelector('[data-test="button"]')
+        ?.querySelector('[data-test="primary-button"]')
         ?.dispatchEvent(new CustomEvent('click', { detail: 1 }));
     // Wait for it to open.
     await elementUpdated(component);
@@ -397,7 +426,7 @@ it('updates `value` when an option is selected via Enter', async () => {
     expect(component.value).to.deep.equal(['one']);
     // Reopen it.
     component.shadowRoot
-        ?.querySelector('[data-test="button"]')
+        ?.querySelector('[data-test="primary-button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     // Wait for it to open.
     await aTimeout(0);
@@ -406,7 +435,7 @@ it('updates `value` when an option is selected via Enter', async () => {
     expect(component.value).to.deep.equal(['two']);
     // Reopen it.
     component.shadowRoot
-        ?.querySelector('[data-test="button"]')
+        ?.querySelector('[data-test="primary-button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     // Wait for it to open.
     await aTimeout(0);
@@ -436,7 +465,7 @@ it('updates `value` when an option is selected via Space', async () => {
     expect(component.value).to.deep.equal(['one']);
     // Reopen it.
     component.shadowRoot
-        ?.querySelector('[data-test="button"]')
+        ?.querySelector('[data-test="primary-button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     // Wait for it to open.
     await aTimeout(0);
@@ -445,7 +474,7 @@ it('updates `value` when an option is selected via Space', async () => {
     expect(component.value).to.deep.equal(['two']);
     // Reopen it.
     component.shadowRoot
-        ?.querySelector('[data-test="button"]')
+        ?.querySelector('[data-test="primary-button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     // Wait for it to open.
     await aTimeout(0);
@@ -564,14 +593,14 @@ it('cannot be tabbed to when `disabled`', async () => {
     await sendKeys({ down: 'Tab' });
     expect(document.activeElement).to.equal(document.body);
 });
-it('clicks the button when `click()` is called', async () => {
+it('clicks the primary button when `click()` is called', 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>`);
-    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
     assert(button);
     setTimeout(() => {
         component.click();

package/dist/icons/pencil.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").TemplateResult<1>;
+export default _default;

package/dist/icons/pencil.js

@@ -0,0 +1 @@
+import{html}from"lit";export default html`<svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" style="height: var(--size, 0.875rem); width: var(--size, 0.875rem);"><path d="M10.0244 5.95031L8.0395 3.96536M2.06587 11.924L3.74532 11.7374C3.95051 11.7146 4.0531 11.7032 4.149 11.6721C4.23407 11.6446 4.31504 11.6057 4.38969 11.5564C4.47384 11.501 4.54683 11.428 4.69281 11.282L11.5132 4.4616C12.0613 3.91347 12.0613 3.02478 11.5132 2.47665C10.965 1.92852 10.0763 1.92852 9.52821 2.47665L2.70786 9.29703C2.56188 9.44302 2.48889 9.51601 2.4334 9.60015C2.38417 9.67481 2.34526 9.75577 2.31772 9.84085C2.28667 9.93674 2.27527 10.0393 2.25247 10.2445L2.06587 11.924Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;

package/dist/library/localize.d.ts

@@ -17,6 +17,8 @@ export interface Translation extends DefaultTranslation {
     announcedCharacterCount: (current: number, maximum: number) => string;
     displayedCharacterCount: (current: number, maximum: number) => string;
     clearEntry: (label: string) => string;
+    editOption: (name: string) => string;
+    editTag: (name: string) => string;
     removeTag: (name: string) => string;
     actionsFor: (label: string) => string;
 }

package/dist/menu.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var n,s=arguments.length,l=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(l=(s<3?n(l):s>3?n(t,i,l):n(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import{LitElement,html}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./menu.styles.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#n=!1,this.#s="large",this.#l=createRef(),this.#a=()=>{this.#n?this.#n=!1:(this.open=!1,this.#r&&(this.#r.ariaActivedescendant=""))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get offset(){return this.#c??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#c=e}get open(){return this.#o}set open(e){this.#o=e,e&&!this.isTargetDisabled?this.#h():this.#p()}get size(){return this.#s}set size(e){this.#s=e,this.#r&&(this.#r.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#a,{capture:!0})}createRenderRoot(){return this.#d=super.createRenderRoot(),this.#d}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#a,{capture:!0})}firstUpdated(){ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlot(this.#l.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]),this.#t.value.popover="manual";const e=this.#m?.at(0);this.open&&e&&!this.isTargetDisabled&&(e.privateActive=!0,this.#h()),this.#l.value.addEventListener("mouseup",(()=>{this.#n=!0}))}get isTargetDisabled(){const e=this.#u&&"disabled"in this.#u&&this.#u.disabled,t=this.#u&&"true"===this.#u.ariaDisabled;return Boolean(e)||Boolean(t)}render(){return html`<div class="component" @focusout="${this.#f}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#E}" @keydown="${this.#v}" @slotchange="${this.#g}" ${ref(this.#l)}></slot><slot class="default-slot" @click="${this.#S}" @focusin="${this.#w}" @keydown="${this.#v}" @mouseover="${this.#C}" @slotchange="${this.#y}" ${ref(this.#t)}></slot></div>`}#R;#e;#t;#i;#o;#n;#c;#d;#s;#l;get#k(){return this.#m?.find((({privateActive:e})=>e))}#a;#O(e){this.#u&&"focus"in this.#u&&this.#u?.focus(e)}#p(){this.#R?.(),this.#r&&(this.#r.ariaActivedescendant=""),this.#u&&(this.#u.ariaExpanded="false"),this.#t.value?.hidePopover()}get#r(){const e=this.#t.value?.assignedElements().at(0);return e instanceof GlideCoreMenuOptions?e:null}#y(){ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]);const e=this.#m?.at(0);e&&(e.privateActive=!0),this.#r.privateSize=this.size}#S(){this.open=!1}#w(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#k&&this.#r&&(this.#k.privateActive=!1,e.target.privateActive=!0,this.#r.ariaActivedescendant=e.target.id)}#C(e){if(e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton){if(this.#m)for(const t of this.#m)t.privateActive=t===e.target;this.#r&&(this.#r.ariaActivedescendant=e.target.id)}}#f(e){const t=e.relatedTarget instanceof HTMLElement&&this.#d?.contains(e.relatedTarget),i=e.relatedTarget instanceof GlideCoreMenuOptions,o=e.relatedTarget instanceof GlideCoreMenuButton||e.relatedTarget instanceof GlideCoreMenuLink;t||i||o||(this.open=!1)}#v(e){ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions));const t=this.#u instanceof HTMLSpanElement||this.#u instanceof HTMLDivElement;if([" ","Enter"].includes(e.key)&&this.open)return" "===e.key&&t&&e.preventDefault(),this.open=!1,this.#O(),this.#k?.click(),void(this.#i=!0);if([" ","Enter"].includes(e.key)&&t)return e.preventDefault(),void(this.open=!0);if(["Escape"].includes(e.key)&&this.open)return this.open=!1,void this.#O();if(["ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#k)return e.preventDefault(),this.open=!0,void(this.#r.ariaActivedescendant=this.#k.id);if(this.open){ow(this.#m,ow.array),ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions)),ow(this.#k,ow.object.is((e=>e instanceof GlideCoreMenuButton||e instanceof GlideCoreMenuLink)));const t=this.#m.indexOf(this.#k);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#m.at(t-1);return void(i&&0!==t&&(this.#k.privateActive=!1,this.#r.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#m.at(t+1);return void(i&&(this.#k.privateActive=!1,this.#r.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=this.#m.at(0);return void(t&&(this.#k.privateActive=!1,this.#r.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=this.#m.at(-1);return void(t&&(this.#k.privateActive=!1,this.#r.ariaActivedescendant=t.id,t.privateActive=!0))}}}#g(){owSlot(this.#l.value),ow(this.#u,ow.object.instanceOf(Element)),ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions));new MutationObserver((()=>{this.open&&!this.isTargetDisabled?this.#h():this.#p()})).observe(this.#u,{attributes:!0,attributeFilter:["aria-disabled","disabled"]}),this.#u.ariaHasPopup="true",this.#u.id=nanoid(),this.#u.setAttribute("aria-controls",this.#r.id),this.#r.ariaLabelledby=this.#u.id;(this.#u instanceof HTMLSpanElement||this.#u instanceof HTMLDivElement)&&this.#u instanceof HTMLElement&&(this.#u.tabIndex=0),this.open&&!this.isTargetDisabled?this.#h():this.#p()}#E(){this.isTargetDisabled?this.#p():this.#i?this.#i=!1:this.#m&&this.#m.length>0&&(this.open=!this.open)}get#m(){let e=this.#t.value?.assignedElements()?.at(0)?.children;const t=e?.[0];if(t instanceof HTMLSlotElement&&(e=t.assignedElements()),e)return[...e].filter((e=>e instanceof GlideCoreMenuLink||e instanceof GlideCoreMenuButton))}#h(){this.#R?.(),this.#u&&this.#t.value&&(this.#R=autoUpdate(this.#u,this.#t.value,(()=>{(async()=>{if(this.#u&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#u,this.#t.value,{placement:this.placement,middleware:[offset(this.offset),flip()]});this.#t.value.dataset.placement=i,Object.assign(this.#t.value.style,{left:`${e}px`,top:`${t}px`})}this.#t.value?.showPopover(),this.#r&&this.#k?.id&&(this.#r.ariaActivedescendant=this.#k.id),this.#u&&(this.#u.ariaExpanded="true")})()})))}get#u(){return this.#l.value?.assignedElements().at(0)}};__decorate([property({reflect:!0,type:Number})],GlideCoreMenu.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenu.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"placement",void 0),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"size",null),GlideCoreMenu=__decorate([customElement("glide-core-menu")],GlideCoreMenu);export default GlideCoreMenu;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var n,s=arguments.length,l=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(l=(s<3?n(l):s>3?n(t,i,l):n(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import{LitElement,html}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./menu.styles.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#n=!1,this.#s="large",this.#l=createRef(),this.#a=()=>{this.#n?this.#n=!1:(this.open=!1,this.#r&&(this.#r.ariaActivedescendant=""))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get offset(){return this.#c??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#c=e}get open(){return this.#o}set open(e){this.#o=e,e&&!this.isTargetDisabled?this.#h():this.#p()}get size(){return this.#s}set size(e){this.#s=e,this.#r&&(this.#r.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#a,{capture:!0})}createRenderRoot(){return this.#d=super.createRenderRoot(),this.#d}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#a,{capture:!0})}firstUpdated(){ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlot(this.#l.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]),this.#t.value.popover="manual";const e=this.#m?.at(0);this.open&&e&&!this.isTargetDisabled&&(e.privateActive=!0,this.#h()),this.#l.value.addEventListener("mouseup",(()=>{this.#n=!0}))}get isTargetDisabled(){const e=this.#u&&"disabled"in this.#u&&this.#u.disabled,t=this.#u&&"true"===this.#u.ariaDisabled;return Boolean(e)||Boolean(t)}render(){return html`<div class="component" @focusout="${this.#f}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#E}" @keydown="${this.#v}" @slotchange="${this.#g}" ${ref(this.#l)}></slot><slot class="default-slot" @click="${this.#S}" @focusin="${this.#w}" @keydown="${this.#v}" @mouseover="${this.#C}" @private-slot-change="${this.#y}" @slotchange="${this.#R}" ${ref(this.#t)}></slot></div>`}#k;#e;#t;#i;#o;#n;#c;#d;#s;#l;get#O(){return this.#m?.find((({privateActive:e})=>e))}#a;#b(e){this.#u&&"focus"in this.#u&&this.#u?.focus(e)}#p(){this.#k?.(),this.#r&&(this.#r.ariaActivedescendant=""),this.#u&&(this.#u.ariaExpanded="false"),this.#t.value?.hidePopover()}get#r(){const e=this.#t.value?.assignedElements().at(0);return e instanceof GlideCoreMenuOptions?e:null}#R(){ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]),this.#r.privateSize=this.size}#S(){this.open=!1}#w(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#O&&this.#r&&(this.#O.privateActive=!1,e.target.privateActive=!0,this.#r.ariaActivedescendant=e.target.id)}#C(e){if(e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton){if(this.#m)for(const t of this.#m)t.privateActive=t===e.target;this.#r&&(this.#r.ariaActivedescendant=e.target.id)}}#f(e){const t=e.relatedTarget instanceof HTMLElement&&this.#d?.contains(e.relatedTarget),i=e.relatedTarget instanceof GlideCoreMenuOptions,o=e.relatedTarget instanceof GlideCoreMenuButton||e.relatedTarget instanceof GlideCoreMenuLink;t||i||o||(this.open=!1)}#y(){const e=this.#m?.find((({privateActive:e})=>e)),t=this.#m?.at(0);!e&&t&&(t.privateActive=!0)}#v(e){ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions));const t=this.#u instanceof HTMLSpanElement||this.#u instanceof HTMLDivElement;if([" ","Enter"].includes(e.key)&&this.open)return" "===e.key&&t&&e.preventDefault(),this.open=!1,this.#b(),this.#O?.click(),void(this.#i=!0);if([" ","Enter"].includes(e.key)&&t)return e.preventDefault(),void(this.open=!0);if(["Escape"].includes(e.key)&&this.open)return this.open=!1,void this.#b();if(["ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#O)return e.preventDefault(),this.open=!0,void(this.#r.ariaActivedescendant=this.#O.id);if(this.open){ow(this.#m,ow.array),ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions)),ow(this.#O,ow.object.is((e=>e instanceof GlideCoreMenuButton||e instanceof GlideCoreMenuLink)));const t=this.#m.indexOf(this.#O);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#m.at(t-1);return void(i&&0!==t&&(this.#O.privateActive=!1,this.#r.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#m.at(t+1);return void(i&&(this.#O.privateActive=!1,this.#r.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=this.#m.at(0);return void(t&&(this.#O.privateActive=!1,this.#r.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=this.#m.at(-1);return void(t&&(this.#O.privateActive=!1,this.#r.ariaActivedescendant=t.id,t.privateActive=!0))}}}#g(){owSlot(this.#l.value),ow(this.#u,ow.object.instanceOf(Element)),ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions));new MutationObserver((()=>{this.open&&!this.isTargetDisabled?this.#h():this.#p()})).observe(this.#u,{attributes:!0,attributeFilter:["aria-disabled","disabled"]}),this.#u.ariaHasPopup="true",this.#u.id=nanoid(),this.#u.setAttribute("aria-controls",this.#r.id),this.#r.ariaLabelledby=this.#u.id;(this.#u instanceof HTMLSpanElement||this.#u instanceof HTMLDivElement)&&this.#u instanceof HTMLElement&&(this.#u.tabIndex=0),this.open&&!this.isTargetDisabled?this.#h():this.#p()}#E(){this.isTargetDisabled?this.#p():this.#i?this.#i=!1:this.#m&&this.#m.length>0&&(this.open=!this.open)}get#m(){let e=this.#t.value?.assignedElements()?.at(0)?.children;const t=e?.[0];if(t instanceof HTMLSlotElement&&(e=t.assignedElements()),e)return[...e].filter((e=>e instanceof GlideCoreMenuLink||e instanceof GlideCoreMenuButton))}#h(){this.#k?.(),this.#u&&this.#t.value&&(this.#k=autoUpdate(this.#u,this.#t.value,(()=>{(async()=>{if(this.#u&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#u,this.#t.value,{placement:this.placement,middleware:[offset(this.offset),flip()]});this.#t.value.dataset.placement=i,Object.assign(this.#t.value.style,{left:`${e}px`,top:`${t}px`})}this.#t.value?.showPopover(),this.#r&&this.#O?.id&&(this.#r.ariaActivedescendant=this.#O.id),this.#u&&(this.#u.ariaExpanded="true")})()})))}get#u(){return this.#l.value?.assignedElements().at(0)}};__decorate([property({reflect:!0,type:Number})],GlideCoreMenu.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenu.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"placement",void 0),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"size",null),GlideCoreMenu=__decorate([customElement("glide-core-menu")],GlideCoreMenu);export default GlideCoreMenu;

package/dist/menu.options.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var l,r=arguments.length,n=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(n=(r<3?l(n):r>3?l(t,o,n):l(t,o))||n);return r>3&&n&&Object.defineProperty(t,o,n),n};import{LitElement,html}from"lit";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{nanoid}from"nanoid";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import styles from"./menu.options.styles.js";let GlideCoreMenuOptions=class GlideCoreMenuOptions extends LitElement{constructor(){super(...arguments),this.ariaActivedescendant="",this.ariaLabelledby="",this.privateSize="large",this.#e=createRef(),this.#t=nanoid()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menu",this.tabIndex=-1}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink,Text])}render(){return html`<div class="${classMap({component:!0,large:"large"===this.privateSize,small:"small"===this.privateSize})}" role="none"><slot @slotchange="${this.#o}" ${ref(this.#e)}></slot></div>`}#e;#t;#o(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink,Text])}};__decorate([property({attribute:"aria-activedescendant",reflect:!0})],GlideCoreMenuOptions.prototype,"ariaActivedescendant",void 0),__decorate([property({attribute:"aria-labelledby",reflect:!0})],GlideCoreMenuOptions.prototype,"ariaLabelledby",void 0),__decorate([state()],GlideCoreMenuOptions.prototype,"privateSize",void 0),GlideCoreMenuOptions=__decorate([customElement("glide-core-menu-options")],GlideCoreMenuOptions);export default GlideCoreMenuOptions;
+var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(s=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};import{LitElement,html}from"lit";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{nanoid}from"nanoid";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import styles from"./menu.options.styles.js";let GlideCoreMenuOptions=class GlideCoreMenuOptions extends LitElement{constructor(){super(...arguments),this.ariaActivedescendant="",this.ariaLabelledby="",this.privateSize="large",this.#e=nanoid(),this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}connectedCallback(){super.connectedCallback(),this.id=this.#e,this.role="menu",this.tabIndex=-1}firstUpdated(){owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuButton,GlideCoreMenuLink,Text])}render(){return html`<div class="${classMap({component:!0,large:"large"===this.privateSize,small:"small"===this.privateSize})}" role="none"><slot @slotchange="${this.#o}" ${ref(this.#t)}></slot></div>`}#e;#t;#o(){owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuButton,GlideCoreMenuLink,Text]),this.dispatchEvent(new Event("private-slot-change",{bubbles:!0}))}};__decorate([property({attribute:"aria-activedescendant",reflect:!0})],GlideCoreMenuOptions.prototype,"ariaActivedescendant",void 0),__decorate([property({attribute:"aria-labelledby",reflect:!0})],GlideCoreMenuOptions.prototype,"ariaLabelledby",void 0),__decorate([state()],GlideCoreMenuOptions.prototype,"privateSize",void 0),GlideCoreMenuOptions=__decorate([customElement("glide-core-menu-options")],GlideCoreMenuOptions);export default GlideCoreMenuOptions;

package/dist/menu.options.test.events.d.ts

@@ -0,0 +1 @@
+import './menu.button.js';