@crowdstrike/glide-core 0.9.0 → 0.9.1

package/dist/menu.test.events.js

@@ -2,8 +2,10 @@
 import './menu.js';
 import './menu.link.js';
 import './menu.options.js';
-import { expect, fixture, html, oneEvent } from '@open-wc/testing';
-it('dispatches a "click" event when a link is clicked', async () => {
+import { aTimeout, assert, expect, fixture, html, oneEvent, } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import sinon from 'sinon';
+it('dispatches one link "click" event when a link is selected via click', async () => {
     const component = await fixture(html `<glide-core-menu open>
       <button slot="target">Target</button>
 
@@ -11,21 +13,209 @@ it('dispatches a "click" event when a link is clicked', async () => {
         <glide-core-menu-link label="Link"></glide-core-menu-link>
       </glide-core-menu-options>
     </glide-core-menu>`);
-    setTimeout(() => document.querySelector('glide-core-menu-link')?.click());
+    const spy = sinon.spy();
+    const link = component.querySelector('glide-core-menu-link');
+    assert(link);
+    link.addEventListener('click', spy);
+    setTimeout(() => link.click());
     const event = await oneEvent(component, 'click');
     expect(event instanceof PointerEvent).to.be.true;
     expect(event.bubbles).to.be.true;
+    expect(event.target).to.equal(link);
+    expect(spy.callCount).to.equal(1);
 });
-it('dispatches a "click" event when a button is clicked', async () => {
+it('dispatches one button "click" event when a button is selected via click', async () => {
     const component = await fixture(html `<glide-core-menu open>
       <button slot="target">Target</button>
 
       <glide-core-menu-options>
-        <glide-core-menu-button label="Link"></glide-core-menu-button>
+        <glide-core-menu-button label="Button"></glide-core-menu-button>
       </glide-core-menu-options>
     </glide-core-menu>`);
-    setTimeout(() => document.querySelector('glide-core-menu-button')?.click());
-    const event = await oneEvent(component, 'click');
+    const spy = sinon.spy();
+    const button = component.querySelector('glide-core-menu-button');
+    assert(button);
+    button.addEventListener('click', spy);
+    setTimeout(() => button.click());
+    const event = await oneEvent(button, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.target).to.equal(button);
+    expect(spy.callCount).to.equal(1);
+});
+it('dispatches one link "click" event when a link is selected via Space', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    const spy = sinon.spy();
+    const link = component.querySelector('glide-core-menu-link');
+    assert(link);
+    link.addEventListener('click', spy);
+    component.focus();
+    sendKeys({ press: 'Space' });
+    const event = await oneEvent(link, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.target).to.equal(link);
+    expect(spy.callCount).to.equal(1);
+});
+it('dispatches one button "click" event when a button is selected via Space', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-button label="Button"></glide-core-menu-button>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    const spy = sinon.spy();
+    const button = component.querySelector('glide-core-menu-button');
+    assert(button);
+    button.addEventListener('click', spy);
+    component.focus();
+    sendKeys({ press: 'Space' });
+    const event = await oneEvent(button, 'click');
     expect(event instanceof PointerEvent).to.be.true;
     expect(event.bubbles).to.be.true;
+    expect(event.target).to.equal(button);
+    expect(spy.callCount).to.equal(1);
+});
+it('dispatches one link "click" event when a link is selected via Enter', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    const spy = sinon.spy();
+    const link = component.querySelector('glide-core-menu-link');
+    assert(link);
+    link.addEventListener('click', spy);
+    component.focus();
+    sendKeys({ press: 'Enter' });
+    const event = await oneEvent(link, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.target).to.equal(link);
+    expect(spy.callCount).to.equal(1);
+});
+it('dispatches one button "click" event when a button is selected via Enter', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-button label="Button"></glide-core-menu-button>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    const spy = sinon.spy();
+    const button = component.querySelector('glide-core-menu-button');
+    assert(button);
+    button.addEventListener('click', spy);
+    component.focus();
+    sendKeys({ press: 'Enter' });
+    const event = await oneEvent(button, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.target).to.equal(button);
+    expect(spy.callCount).to.equal(1);
+});
+it('does not dispatch a link "click" event when opened via click', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    const spy = sinon.spy();
+    const link = component.querySelector('glide-core-menu-link');
+    const target = component.querySelector('button');
+    link?.addEventListener('click', spy);
+    target?.click();
+    await aTimeout(0);
+    expect(spy.callCount).to.equal(0);
+});
+it('does not dispatch a button "click" event when opened via click', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-button label="Button"></glide-core-menu-button>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    const spy = sinon.spy();
+    const button = component.querySelector('glide-core-menu-button');
+    const target = component.querySelector('button');
+    button?.addEventListener('click', spy);
+    target?.click();
+    await aTimeout(0);
+    expect(spy.callCount).to.equal(0);
+});
+it('does not dispatch a link "click" event when opened via Space', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    const spy = sinon.spy();
+    const link = component.querySelector('glide-core-menu-link');
+    link?.addEventListener('click', spy);
+    component.focus();
+    sendKeys({ press: 'Space' });
+    await aTimeout(0);
+    expect(spy.callCount).to.equal(0);
+});
+it('does not dispatch a button "click" event when opened via Space', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-button label="Link"></glide-core-menu-button>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    const spy = sinon.spy();
+    const button = component.querySelector('glide-core-menu-button');
+    button?.addEventListener('click', spy);
+    component.focus();
+    sendKeys({ press: 'Space' });
+    await aTimeout(0);
+    expect(spy.callCount).to.equal(0);
+});
+it('does not dispatch a link "click" event when opened via Enter', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    const spy = sinon.spy();
+    const link = component.querySelector('glide-core-menu-link');
+    link?.addEventListener('click', spy);
+    component.focus();
+    sendKeys({ press: 'Enter' });
+    await aTimeout(0);
+    expect(spy.callCount).to.equal(0);
+});
+it('does not dispatch a button "click" event when opened via Enter', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-button label="Link"></glide-core-menu-button>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    const spy = sinon.spy();
+    const button = component.querySelector('glide-core-menu-button');
+    button?.addEventListener('click', spy);
+    component.focus();
+    sendKeys({ press: 'Enter' });
+    await aTimeout(0);
+    expect(spy.callCount).to.equal(0);
 });

package/dist/menu.test.interactions.js

@@ -412,7 +412,7 @@ it('closes when something outside of it is clicked', async () => {
     expect(options?.getAttribute('aria-activedescendant')).to.equal('');
     expect(target?.ariaExpanded).to.equal('false');
 });
-it('closes on Escape when the button has focus', async () => {
+it('closes on Escape', async () => {
     const component = await fixture(html `<glide-core-menu open>
       <button slot="target">Target</button>
 
@@ -422,7 +422,7 @@ it('closes on Escape when the button has focus', async () => {
     </glide-core-menu>`);
     // Wait for it to open
     await aTimeout(0);
-    component.querySelector('button')?.click();
+    component.focus();
     await sendKeys({ press: 'Escape' });
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');

package/dist/modal.stories.d.ts

@@ -1,6 +1,7 @@
 import './button.js';
 import './icons/storybook.js';
 import './modal.js';
+import './modal.js';
 import './modal.tertiary-icon.js';
 import './tooltip.js';
 import type { Meta, StoryObj } from '@storybook/web-components';

package/dist/modal.tertiary-icon.test.basics.js

@@ -19,8 +19,8 @@ it('renders and sets default attributes', async () => {
     expect(element).to.be.ok;
     const spanTag = element.shadowRoot?.querySelector('span');
     expect(spanTag?.getAttribute('tabindex')).to.equal('0');
-    const toolip = element.shadowRoot?.querySelector('glide-core-tooltip');
-    expect(toolip).to.not.be.null;
+    const tooltip = element.shadowRoot?.querySelector('glide-core-tooltip');
+    expect(tooltip).to.not.be.null;
 });
 it('adds an accessible label when given', async () => {
     const element = await fixture(html `<glide-core-modal-tertiary-icon label="test-label"

package/dist/radio-group.d.ts

@@ -8,10 +8,11 @@ declare global {
 }
 /**
  /**
- * @description A radio group with a label, and optional tooltip and description. Participates in forms and validation via `FormData` and various methods.
+ * @description A radio group with a label, and optional description and tooltip. Participates in forms and validation via `FormData` and various methods.
  *
- * @event change - Dispatched when a radio is clicked or checked by key press.
- * @event input - Dispatched when a radio is clicked or checked by key press.
+ * @event change - `(event: Event) => void`
+ * @event input - `(event: Event) => void`
+ * @event invalid - `(event: Event) => void`
  *
  * @slot - One or more of `<glide-core-radio>`.
  * @slot description - Additional information or context.

package/dist/radio-group.stories.d.ts

@@ -4,5 +4,5 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
 export declare const Vertical: StoryObj;
-export declare const VerticalWithToolip: StoryObj;
+export declare const VerticalWithTooltip: StoryObj;
 export declare const VerticalWithError: StoryObj;

package/dist/radio.d.ts

@@ -6,7 +6,6 @@ declare global {
 }
 /**
  * @description A radio element for use with `<glide-core-radio-group>`.
- *
  */
 export default class GlideCoreRadio extends LitElement {
     #private;
@@ -17,7 +16,7 @@ export default class GlideCoreRadio extends LitElement {
     invalid: boolean;
     required: boolean;
     value: string;
-    label: string;
+    label?: string;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
     willUpdate(changedProperties: PropertyValueMap<GlideCoreRadio>): void;

package/dist/radio.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,r){var a,o=arguments.length,d=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,i,r);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(d=(o<3?a(d):o>3?a(t,i,d):a(t,i))||d);return o>3&&d&&Object.defineProperty(t,i,d),d};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import styles from"./radio.styles.js";let GlideCoreRadio=class GlideCoreRadio extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.invalid=!1,this.required=!1,this.value="",this.label="",this.#e=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.role="radio",this.ariaChecked=this.checked.toString(),this.ariaDisabled=this.disabled.toString(),this.ariaInvalid=this.invalid.toString(),this.ariaRequired=this.required.toString(),this.ariaLabel=this.label,this.#e=!0}render(){return html`<span class="${classMap({component:!0,disabled:this.disabled})}"><span id="radio" class="${classMap({"radio-circle":!0,checked:this.checked,animate:this.#e})}" data-test="radio" data-test-error="${this.invalid}"></span> ${this.label}</span>`}willUpdate(e){this.hasUpdated&&(e.has("checked")&&(this.ariaChecked=this.checked.toString()),e.has("disabled")&&(this.ariaDisabled=this.disabled.toString()),e.has("required")&&(this.ariaRequired=this.required.toString()),e.has("invalid")&&(this.ariaInvalid=this.invalid.toString()),e.has("label")&&(this.ariaLabel=this.label))}#e};__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"checked",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"disabled",void 0),__decorate([property({type:Boolean})],GlideCoreRadio.prototype,"invalid",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"required",void 0),__decorate([property()],GlideCoreRadio.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreRadio.prototype,"label",void 0),GlideCoreRadio=__decorate([customElement("glide-core-radio")],GlideCoreRadio);export default GlideCoreRadio;
+var __decorate=this&&this.__decorate||function(e,t,i,r){var a,o=arguments.length,d=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,i,r);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(d=(o<3?a(d):o>3?a(t,i,d):a(t,i))||d);return o>3&&d&&Object.defineProperty(t,i,d),d};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import styles from"./radio.styles.js";let GlideCoreRadio=class GlideCoreRadio extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.invalid=!1,this.required=!1,this.value="",this.#e=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.role="radio",this.ariaChecked=this.checked.toString(),this.ariaDisabled=this.disabled.toString(),this.ariaInvalid=this.invalid.toString(),this.ariaRequired=this.required.toString(),this.label&&(this.ariaLabel=this.label),this.#e=!0}render(){return html`<span class="${classMap({component:!0,disabled:this.disabled})}"><span id="radio" class="${classMap({"radio-circle":!0,checked:this.checked,animate:this.#e})}" data-test="radio" data-test-error="${this.invalid}"></span> ${this.label}</span>`}willUpdate(e){this.hasUpdated&&(e.has("checked")&&(this.ariaChecked=this.checked.toString()),e.has("disabled")&&(this.ariaDisabled=this.disabled.toString()),e.has("required")&&(this.ariaRequired=this.required.toString()),e.has("invalid")&&(this.ariaInvalid=this.invalid.toString()),e.has("label")&&this.label&&(this.ariaLabel=this.label))}#e};__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"checked",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"disabled",void 0),__decorate([property({type:Boolean})],GlideCoreRadio.prototype,"invalid",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"required",void 0),__decorate([property()],GlideCoreRadio.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreRadio.prototype,"label",void 0),GlideCoreRadio=__decorate([customElement("glide-core-radio")],GlideCoreRadio);export default GlideCoreRadio;

package/dist/split-container.d.ts

@@ -8,7 +8,7 @@ declare global {
     }
 }
 /**
- * @description A split button that provides a button action and a menu of alternate actions.
+ * @description A pair of buttons. One is the primary action. The other controls a menu of alternate actions.
  *
  * @slot - One or more of `<glide-core-menu-link>` or `<glide-core-menu-button>`.
  * @slot primary-action - One of either `<glide-core-split-button>` or `<glide-core-split-link>`.

package/dist/status-indicator.d.ts

@@ -5,7 +5,7 @@ declare global {
     }
 }
 /**
- * @cssprop [--size] - Sets the size of the icon.
+ * @cssprop [--size] - The size of the icon.
  */
 export default class GlideCoreStatusIndicator extends LitElement {
     static shadowRootOptions: ShadowRootInit;

package/dist/tabs.stories.d.ts

@@ -1,3 +1,4 @@
+import './icons/storybook.js';
 import './tab.group.js';
 import './tab.js';
 import './tab.panel.js';

package/dist/tag.d.ts

@@ -5,13 +5,10 @@ declare global {
     }
 }
 /**
- * @description A tag component to categorize information.
+ * @event remove - Emitted when the tag is removed.
  *
- * @event remove - Emitted when `glide-core-tag` is removed
- *
- * @slot - The content of the tag
- *
- * @slot prefix - A slot for an optional icon
+ * @slot - The content of the tag.
+ * @slot prefix - A slot for an optional icon.
  */
 export default class GlideCoreTag extends LitElement {
     #private;

package/dist/textarea.d.ts

@@ -6,10 +6,11 @@ declare global {
     }
 }
 /**
- * @description A textarea with a label and optional description and toolip. Participates in forms and validation via `FormData` and various methods.
+ * @description A text area with a label and optional description and tooltip. Participates in forms and validation via `FormData` and various methods.
  *
- * @event change - (same as native textarea's `change` event)
- * @event input - (same as native textarea's `input` event)
+ * @event change - `(event: Event) => void`
+ * @event input - `(event: Event) => void`
+ * @event invalid - `(event: Event) => void`
  *
  * @slot tooltip - Content for the tooltip.
  * @slot description - Additional information or context.

package/dist/toggle.d.ts

@@ -8,9 +8,9 @@ declare global {
 /**
  * @description A toggle with a label and optional tooltip, summary, and description.
  *
- * @event change - Dispatched when checked or unchecked.
- * @event input - Dispatched when checked or unchecked.
-
+ * @event change - `(event: Event) => void`
+ * @event input - `(event: Event) => void`
+ *
  * @slot description - Additional information or context.
  * @slot tooltip - Content for the tooltip.
  */

package/dist/toggle.js

@@ -1 +1 @@
-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 d=e.length-1;d>=0;d--)(r=e[d])&&(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"./label.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import styles from"./toggle.styles.js";let GlideCoreToggle=class GlideCoreToggle extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.hideLabel=!1,this.orientation="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}render(){return html`<div data-test="component"><glide-core-private-label orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="toggle-and-input" slot="control"><input aria-checked="${this.checked}" aria-describedby="summary description" data-test="input" id="input" role="switch" type="checkbox" ?checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.#t}" ${ref(this.#e)}></div><div slot="summary" id="summary">${this.summary}</div><slot class="description" id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.dispatchEvent(new Event(e.type,e))}};__decorate([property({type:Boolean})],GlideCoreToggle.prototype,"checked",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreToggle.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreToggle.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"name",void 0),__decorate([property()],GlideCoreToggle.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"summary",void 0),GlideCoreToggle=__decorate([customElement("glide-core-toggle")],GlideCoreToggle);export default GlideCoreToggle;
+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 d=e.length-1;d>=0;d--)(r=e[d])&&(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"./label.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import styles from"./toggle.styles.js";let GlideCoreToggle=class GlideCoreToggle extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.hideLabel=!1,this.orientation="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}render(){return html`<div data-test="component"><glide-core-private-label orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="toggle-and-input" slot="control"><input aria-checked="${this.checked}" aria-describedby="summary description" data-test="input" id="input" role="switch" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.#t}" @input="${this.#t}" ${ref(this.#e)}></div><div slot="summary" id="summary">${this.summary}</div><slot class="description" id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),"change"===e.type&&this.dispatchEvent(new Event(e.type,e))}};__decorate([property({type:Boolean})],GlideCoreToggle.prototype,"checked",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreToggle.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreToggle.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"name",void 0),__decorate([property()],GlideCoreToggle.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"summary",void 0),GlideCoreToggle=__decorate([customElement("glide-core-toggle")],GlideCoreToggle);export default GlideCoreToggle;

package/dist/toggle.stories.d.ts

@@ -4,4 +4,4 @@ export default meta;
 export declare const Horizontal: StoryObj;
 export declare const HorizontalWithTooltip: StoryObj;
 export declare const Vertical: StoryObj;
-export declare const VerticalWithToolip: StoryObj;
+export declare const VerticalWithTooltip: StoryObj;

package/dist/toggle.test.interactions.js

@@ -42,3 +42,29 @@ it('is still unchecked after being clicked when unchecked and disabled', async (
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.getAttribute('aria-checked')).to.equal('false');
 });
+it('is unchecked after being clicked then forcibly unchecked via a "change" listener', async () => {
+    const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
+    component.addEventListener('change', async () => {
+        await component.updateComplete;
+        component.checked = false;
+    });
+    component.click();
+    await elementUpdated(component);
+    expect(component.hasAttribute('checked')).to.be.false;
+    expect(component.checked).to.equal(false);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.getAttribute('aria-checked')).to.equal('false');
+});
+it('is unchecked after being clicked then forcibly unchecked via an "input" listener', async () => {
+    const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
+    component.addEventListener('input', async () => {
+        await component.updateComplete;
+        component.checked = false;
+    });
+    component.click();
+    await elementUpdated(component);
+    expect(component.hasAttribute('checked')).to.be.false;
+    expect(component.checked).to.equal(false);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.getAttribute('aria-checked')).to.equal('false');
+});

package/dist/tooltip.d.ts

@@ -5,8 +5,8 @@ declare global {
     }
 }
 /**
- * @slot - The contents of the tooltip.
- * @slot target - The element to which the tooltip should attach.
+ * @slot - The content of the tooltip.
+ * @slot target - The element to which the tooltip should anchor.
  */
 export default class GlideCoreTooltip extends LitElement {
     #private;

package/dist/translations/en.js

@@ -1 +1 @@
-const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",open:"Open",selectAll:"Select all",moreInformation:"More information",nextTab:"Next tab",notifications:"Notifications",previousTab:"Previous tab",announcedCharacterCount:(e,t)=>`Character count ${e} of ${t}`,displayedCharacterCount:(e,t)=>`${e}/${t}`,clearEntry:e=>`Clear ${e} entry`,removeTag:e=>`Remove tag: ${e}`};export default translation;
+const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",open:"Open",selectAll:"Select all",moreInformation:"More information",nextTab:"Next tab",notifications:"Notifications",previousTab:"Previous tab",announcedCharacterCount:(e,o)=>`Character count ${e} of ${o}`,displayedCharacterCount:(e,o)=>`${e}/${o}`,clearEntry:e=>`Clear ${e} entry`,removeTag:e=>`Remove tag: ${e}`,actionsFor:e=>`Actions for ${e}`};export default translation;

package/dist/translations/fr.js

@@ -1 +1 @@
-const translation={$code:"fr",$name:"French",$dir:"ltr",close:"Fermer",dismiss:"Congédier",open:"Ouvrir",selectAll:"Tout sélectionner",moreInformation:"Plus d’informations",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",announcedCharacterCount:(e,r)=>`Character count ${e} of ${r}`,displayedCharacterCount:(e,r)=>`${e}/${r}`,clearEntry:e=>`Clear ${e} entry`,removeTag:e=>`Supprimer la balise : ${e}`};export default translation;
+const translation={$code:"fr",$name:"French",$dir:"ltr",close:"Fermer",dismiss:"Congédier",open:"Ouvrir",selectAll:"Tout sélectionner",moreInformation:"Plus d’informations",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",announcedCharacterCount:(r,e)=>`Character count ${r} of ${e}`,displayedCharacterCount:(r,e)=>`${r}/${e}`,clearEntry:r=>`Clear ${r} entry`,removeTag:r=>`Supprimer la balise : ${r}`,actionsFor:r=>`Actions for ${r}`};export default translation;

package/dist/translations/ja.js

@@ -1 +1 @@
-const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"無視",open:"オープン",selectAll:"すべて選択",moreInformation:"詳細情報",notifications:"通知",nextTab:"Next tab",previousTab:"Previous tab",announcedCharacterCount:(a,e)=>`Character count ${a} of ${e}`,displayedCharacterCount:(a,e)=>`${a}/${e}`,clearEntry:a=>`Clear ${a} entry`,removeTag:a=>`タグを削除: ${a}`};export default translation;
+const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"無視",open:"オープン",selectAll:"すべて選択",moreInformation:"詳細情報",notifications:"通知",nextTab:"Next tab",previousTab:"Previous tab",announcedCharacterCount:(a,t)=>`Character count ${a} of ${t}`,displayedCharacterCount:(a,t)=>`${a}/${t}`,clearEntry:a=>`Clear ${a} entry`,removeTag:a=>`タグを削除: ${a}`,actionsFor:a=>`Actions for ${a}`};export default translation;

package/dist/tree.d.ts

@@ -6,7 +6,7 @@ declare global {
     }
 }
 /**
- * @description A tree element, containing a hierarchy of tree items
+ * @description A tree containing a hierarchy of Tree Items.
  *
  * @slot - One or more of <glide-core-tree-item>
  */

package/dist/tree.item.d.ts

@@ -1,6 +1,5 @@
 import './tree.item.menu.js';
 import { LitElement } from 'lit';
-import type GlideCoreMenu from './menu.js';
 declare global {
     interface HTMLElementTagNameMap {
         'glide-core-tree-item': GlideCoreTreeItem;
@@ -24,8 +23,6 @@ export default class GlideCoreTreeItem extends LitElement {
     selected: boolean;
     removeIndentation: boolean;
     nonCollapsible: boolean;
-    menuSlotAssignedElements: GlideCoreMenu[];
-    prefixSlotAssignedElements: HTMLElement[];
     slotElements: GlideCoreTreeItem[];
     suffixSlotAssignedElements: HTMLElement[];
     firstUpdated(): void;

package/dist/tree.item.icon-button.d.ts

@@ -15,6 +15,7 @@ export default class GlideCoreTreeItemIconButton extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    label: string;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/tree.item.icon-button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var l,n=arguments.length,i=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,r);else for(var s=e.length-1;s>=0;s--)(l=e[s])&&(i=(n<3?l(i):n>3?l(t,o,i):l(t,o))||i);return n>3&&i&&Object.defineProperty(t,o,i),i};import"./icon-button.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement}from"lit/decorators.js";import{owSlot}from"./library/ow.js";import styles from"./tree.item.icon-button.styles.js";let GlideCoreTreeItemIconButton=class GlideCoreTreeItemIconButton extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value)}render(){return html`<glide-core-icon-button class="component" variant="tertiary"><slot @slotchange="${this.#t}" ${ref(this.#e)}></slot></glide-core-icon-button>`}#e=createRef();#t(){owSlot(this.#e.value)}};GlideCoreTreeItemIconButton=__decorate([customElement("glide-core-tree-item-icon-button")],GlideCoreTreeItemIconButton);export default GlideCoreTreeItemIconButton;
+var __decorate=this&&this.__decorate||function(e,t,o,r){var l,n=arguments.length,i=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,r);else for(var s=e.length-1;s>=0;s--)(l=e[s])&&(i=(n<3?l(i):n>3?l(t,o,i):l(t,o))||i);return n>3&&i&&Object.defineProperty(t,o,i),i};import"./icon-button.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot}from"./library/ow.js";import styles from"./tree.item.icon-button.styles.js";let GlideCoreTreeItemIconButton=class GlideCoreTreeItemIconButton extends LitElement{constructor(){super(...arguments),this.label="",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value)}render(){return html`<glide-core-icon-button class="component" variant="tertiary" tabindex="-1" label="${this.label}"><slot @slotchange="${this.#t}" ${ref(this.#e)}></slot></glide-core-icon-button>`}#e;#t(){owSlot(this.#e.value)}};__decorate([property()],GlideCoreTreeItemIconButton.prototype,"label",void 0),GlideCoreTreeItemIconButton=__decorate([customElement("glide-core-tree-item-icon-button")],GlideCoreTreeItemIconButton);export default GlideCoreTreeItemIconButton;

package/dist/tree.item.icon-button.test.basics.js

@@ -1,6 +1,7 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreTreeItemIconButton from './tree.item.icon-button.js';
 import expectArgumentError from './library/expect-argument-error.js';
+GlideCoreTreeItemIconButton.shadowRootOptions.mode = 'open';
 it('registers', async () => {
     expect(window.customElements.get('glide-core-tree-item-icon-button')).to.equal(GlideCoreTreeItemIconButton);
 });
@@ -11,3 +12,11 @@ it('throws if it does not have a default slot', async () => {
     `);
     });
 });
+it('passes its label to the icon button', async () => {
+    const component = await fixture(html `
+    <glide-core-tree-item-icon-button label="My label"
+      >Hello</glide-core-tree-item-icon-button
+    >
+  `);
+    expect(component.shadowRoot?.querySelector('glide-core-icon-button')?.label).to.equal('My label');
+});

package/dist/tree.item.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var r,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 d=e.length-1;d>=0;d--)(r=e[d])&&(l=(s<3?r(l):s>3?r(t,i,l):r(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import"./tree.item.menu.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,queryAssignedElements,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import styles from"./tree.item.styles.js";let GlideCoreTreeItem=class GlideCoreTreeItem extends LitElement{constructor(){super(...arguments),this.expanded=!1,this.label="",this.level=1,this.selected=!1,this.removeIndentation=!1,this.nonCollapsible=!1,this.childTreeItems=[],this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.#t()}focus(e){this.#e.value?.focus(e)}get hasChildTreeItems(){return this.childTreeItems.length>0}get hasExpandIcon(){return this.hasChildTreeItems&&!this.nonCollapsible}render(){return html`<div class="${classMap({component:!0,expanded:this.expanded,selected:this.selected})}" role="treeitem" aria-label="${this.label}" aria-selected="${ifDefined(this.#i)}" aria-expanded="${ifDefined(this.#o)}"><div class="${classMap({"label-container":!0})}" tabindex="-1" ${ref(this.#e)}><div style="flex-shrink: 0; width:${this.#r};"></div>${when(!this.removeIndentation||this.hasExpandIcon,(()=>html`<div class="expand-icon-container">${when(this.hasExpandIcon,(()=>html`<div><svg aria-hidden="true" class="${classMap({"expand-icon":!0,"expand-icon-expanded":this.expanded})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>`))}</div>`))}<slot name="prefix"></slot><div class="label">${this.label}</div><div class="icon-container"><slot name="menu"></slot><slot name="suffix"></slot></div></div><div class="child-items" role="group"><slot></slot></div></div>`}selectItem(e){let t;for(const i of this.slotElements)if(e===i)i.setAttribute("selected","true"),t=i;else{i.removeAttribute("selected");const o=i.selectItem(e);o&&(t=o)}return t}toggleExpand(){this.expanded=!this.expanded}#e;get#o(){return this.hasChildTreeItems?this.expanded?"true":"false":void 0}get#i(){return this.hasChildTreeItems?void 0:this.selected?"true":"false"}get#r(){return 20*(this.level-1)+"px"}#t(){const e=[];for(const t of this.slotElements)t.level=this.level+1,e.push(t);this.childTreeItems=e}};__decorate([property({type:Boolean})],GlideCoreTreeItem.prototype,"expanded",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItem.prototype,"label",void 0),__decorate([property({type:Number})],GlideCoreTreeItem.prototype,"level",void 0),__decorate([property({type:Boolean})],GlideCoreTreeItem.prototype,"selected",void 0),__decorate([property({type:Boolean,attribute:"remove-indentation"})],GlideCoreTreeItem.prototype,"removeIndentation",void 0),__decorate([property({type:Boolean,attribute:"non-collapsible"})],GlideCoreTreeItem.prototype,"nonCollapsible",void 0),__decorate([queryAssignedElements({slot:"menu"})],GlideCoreTreeItem.prototype,"menuSlotAssignedElements",void 0),__decorate([queryAssignedElements({slot:"prefix"})],GlideCoreTreeItem.prototype,"prefixSlotAssignedElements",void 0),__decorate([queryAssignedElements()],GlideCoreTreeItem.prototype,"slotElements",void 0),__decorate([queryAssignedElements({slot:"suffix"})],GlideCoreTreeItem.prototype,"suffixSlotAssignedElements",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"childTreeItems",void 0),GlideCoreTreeItem=__decorate([customElement("glide-core-tree-item")],GlideCoreTreeItem);export default GlideCoreTreeItem;
+var _a,GlideCoreTreeItem_1,__decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,l=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(l=(s<3?r(l):s>3?r(t,o,l):r(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import"./tree.item.menu.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,queryAssignedElements,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import GlideCoreIconButton from"./icon-button.js";import GlideCoreTreeItemMenu from"./tree.item.menu.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./tree.item.styles.js";let GlideCoreTreeItem=class GlideCoreTreeItem extends LitElement{constructor(){super(...arguments),this.expanded=!1,this.label="",this.level=1,this.selected=!1,this.removeIndentation=!1,this.nonCollapsible=!1,this.childTreeItems=[],this.#e=createRef(),this.#t=new LocalizeController(this),this.#o=createRef()}static{GlideCoreTreeItem_1=this}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.#i()}focus(e){this.#e.value?.focus(e),this.#r(0)}get hasChildTreeItems(){return this.childTreeItems.length>0}get hasExpandIcon(){return this.hasChildTreeItems&&!this.nonCollapsible}render(){return html`<div class="${classMap({component:!0,expanded:this.expanded,selected:this.selected})}" role="treeitem" aria-label="${this.label}" aria-selected="${ifDefined(this.#s)}" aria-expanded="${ifDefined(this.#l)}"><div class="${classMap({"label-container":!0})}" tabindex="-1" @focusout="${this.#n}" @focusin="${this.#a}" ${ref(this.#e)}><div style="flex-shrink: 0; width:${this.#d};"></div>${when(!this.removeIndentation||this.hasExpandIcon,(()=>html`<div class="expand-icon-container">${when(this.hasExpandIcon,(()=>html`<div><svg aria-hidden="true" class="${classMap({"expand-icon":!0,"expand-icon-expanded":this.expanded})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>`))}</div>`))}<slot name="prefix"></slot><div class="label">${this.label}</div><div class="icon-container"><slot name="menu" ${ref(this.#o)} @slotchange="${this.#c}"></slot><slot name="suffix"></slot></div></div><div class="child-items" role="group"><slot></slot></div></div>`}selectItem(e){let t;for(const o of this.slotElements)if(e===o)o.setAttribute("selected","true"),t=o;else{o.removeAttribute("selected");const i=o.selectItem(e);i&&(t=i)}return t}toggleExpand(){this.expanded=!this.expanded}#e;#t;#o;get#l(){return this.hasChildTreeItems?this.expanded?"true":"false":void 0}get#s(){return this.hasChildTreeItems?void 0:this.selected?"true":"false"}#a(e){this.#m(e.target)&&e.stopPropagation()}#n(e){this.#m(e.relatedTarget)?e.stopPropagation():this.#r(-1)}get#d(){return 20*(this.level-1)+"px"}#m(e){return e&&e instanceof HTMLElement&&!(e instanceof GlideCoreTreeItem_1)&&this.contains(e)}#c(){owSlotType(this.#o.value,[GlideCoreTreeItemMenu]);for(const e of this.#o.value.assignedElements())e instanceof GlideCoreTreeItemMenu&&(e.label=this.#t.term("actionsFor",this.label))}#r(e){ow(this.#e.value,ow.object.instanceOf(HTMLElement)),this.#e.value.tabIndex=e;for(const t of this.querySelectorAll("& > glide-core-tree-item-icon-button"))t.tabIndex=e}#i(){const e=[];for(const t of this.slotElements)t.level=this.level+1,e.push(t);this.childTreeItems=e}};__decorate([property({type:Boolean})],GlideCoreTreeItem.prototype,"expanded",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItem.prototype,"label",void 0),__decorate([property({type:Number})],GlideCoreTreeItem.prototype,"level",void 0),__decorate([property({type:Boolean})],GlideCoreTreeItem.prototype,"selected",void 0),__decorate([property({type:Boolean,attribute:"remove-indentation"})],GlideCoreTreeItem.prototype,"removeIndentation",void 0),__decorate([property({type:Boolean,attribute:"non-collapsible"})],GlideCoreTreeItem.prototype,"nonCollapsible",void 0),__decorate([queryAssignedElements()],GlideCoreTreeItem.prototype,"slotElements",void 0),__decorate([queryAssignedElements({slot:"suffix"})],GlideCoreTreeItem.prototype,"suffixSlotAssignedElements",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"childTreeItems",void 0),GlideCoreTreeItem=GlideCoreTreeItem_1=__decorate([customElement("glide-core-tree-item")],GlideCoreTreeItem);export default GlideCoreTreeItem;

package/dist/tree.item.menu.d.ts

@@ -19,6 +19,8 @@ export default class GlideCoreTreeItemMenu extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     placement: Placement;
+    label: string;
+    click(): void;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/tree.item.menu.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var l,n=arguments.length,i=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,r);else for(var s=e.length-1;s>=0;s--)(l=e[s])&&(i=(n<3?l(i):n>3?l(t,o,i):l(t,o))||i);return n>3&&i&&Object.defineProperty(t,o,i),i};import"./icon-button.js";import"./menu.js";import"./menu.options.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import styles from"./tree.item.menu.styles.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.#e=createRef(),this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}render(){return html`<glide-core-menu class="component" placement="${this.placement}" ${ref(this.#t)}><glide-core-menu-options><slot @slotchange="${this.#o}" ${ref(this.#e)}></slot></glide-core-menu-options><glide-core-icon-button slot="target" variant="tertiary"><svg width="4" height="14" viewBox="0 0 4 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15Z"/><path d="M2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9C1 8.44772 1.44772 8 2 8Z"/><path d="M2 1C2.55228 1 3 1.44772 3 2C3 2.55228 2.55228 3 2 3C1.44772 3 1 2.55228 1 2C1 1.44772 1.44772 1 2 1Z"/></svg></glide-core-icon-button></glide-core-menu>`}#e;#t;#o(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}};__decorate([property({reflect:!0})],GlideCoreTreeItemMenu.prototype,"placement",void 0),GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu")],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var n,r=arguments.length,i=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(r<3?n(i):r>3?n(t,o,i):n(t,o))||i);return r>3&&i&&Object.defineProperty(t,o,i),i};import"./icon-button.js";import"./menu.js";import"./menu.options.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import GlideCoreIconButton from"./icon-button.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./tree.item.menu.styles.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){ow(this.#t.value,ow.object.instanceOf(GlideCoreIconButton)),this.#t.value.click()}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}render(){return html`<glide-core-menu class="component" placement="${this.placement}" ${ref(this.#o)}><glide-core-menu-options><slot @slotchange="${this.#l}" ${ref(this.#e)}></slot></glide-core-menu-options><glide-core-icon-button slot="target" variant="tertiary" label="${this.label}" ${ref(this.#t)}><svg aria-hidden="true" width="4" height="14" viewBox="0 0 4 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15Z"/><path d="M2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9C1 8.44772 1.44772 8 2 8Z"/><path d="M2 1C2.55228 1 3 1.44772 3 2C3 2.55228 2.55228 3 2 3C1.44772 3 1 2.55228 1 2C1 1.44772 1.44772 1 2 1Z"/></svg></glide-core-icon-button></glide-core-menu>`}#e;#t;#o;#l(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}};__decorate([property({reflect:!0})],GlideCoreTreeItemMenu.prototype,"placement",void 0),__decorate([property()],GlideCoreTreeItemMenu.prototype,"label",void 0),GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu")],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;

package/dist/tree.item.menu.test.basics.js

@@ -48,3 +48,18 @@ it('can set placement of the menu', async () => {
   `);
     expect(treeItemMenu.shadowRoot?.querySelector('glide-core-menu')?.placement).to.equal('bottom-end');
 });
+it('can be opened programmatically', async () => {
+    const treeItemMenu = await fixture(html `
+    <glide-core-tree-item-menu>
+      <glide-core-menu-link label="One" url="/one"> </glide-core-menu-link>
+    </glide-core-tree-item-menu>
+  `);
+    expect(treeItemMenu.shadowRoot
+        ?.querySelector('glide-core-menu')
+        ?.getAttribute('open')).to.equal(null);
+    treeItemMenu.click();
+    await treeItemMenu.updateComplete;
+    expect(treeItemMenu.shadowRoot
+        ?.querySelector('glide-core-menu')
+        ?.getAttribute('open')).to.equal('');
+});