@crowdstrike/glide-core 0.9.6 → 0.10.0

package/dist/input.test.validity.js

@@ -5,176 +5,176 @@ import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreInput from './input.js';
 GlideCoreInput.shadowRootOptions.mode = 'open';
 it('is valid if empty but not required', async () => {
-    const input = await fixture(html `<glide-core-input></glide-core-input>`);
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    const component = await fixture(html `<glide-core-input></glide-core-input>`);
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('is valid after being filled in when empty and required', async () => {
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`);
-    input.focus();
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`);
+    component.focus();
     await sendKeys({ type: 'value' });
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('is invalid if no value and required', async () => {
-    const input = await fixture(html `<glide-core-input required></glide-core-input>`);
-    expect(input.validity?.valid).to.be.false;
-    expect(input.validity?.valueMissing).to.be.true;
-    expect(input.willValidate).to.be.true;
-    expect(input.checkValidity()).to.be.false;
-    expect(input.reportValidity()).to.be.false;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
+    const component = await fixture(html `<glide-core-input required></glide-core-input>`);
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.willValidate).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
 });
 it('is invalid after value is cleared when required', async () => {
-    const input = await fixture(html `<glide-core-input
+    const component = await fixture(html `<glide-core-input
       clearable
       value="value"
       required
     ></glide-core-input>`);
-    const clearButton = input.shadowRoot?.querySelector('[data-test="clear-button"]');
+    const clearButton = component.shadowRoot?.querySelector('[data-test="clear-button"]');
     clearButton?.click();
-    await input.updateComplete;
-    expect(input.validity?.valid).to.be.false;
-    expect(input.validity?.valueMissing).to.be.true;
-    expect(input.checkValidity()).to.be.false;
-    expect(input.reportValidity()).to.be.false;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
+    await component.updateComplete;
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
 });
 it('is valid when empty and does not exceed `maxlength`', async () => {
-    const input = await fixture(html `<glide-core-input maxlength="3"></glide-core-input>`);
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.validity?.tooLong).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    const component = await fixture(html `<glide-core-input maxlength="3"></glide-core-input>`);
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.validity?.tooLong).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('is valid when filled in and does not exceed `maxlength`', async () => {
-    const input = await fixture(html `<glide-core-input maxlength="3"></glide-core-input>`);
-    input.focus();
+    const component = await fixture(html `<glide-core-input maxlength="3"></glide-core-input>`);
+    component.focus();
     await sendKeys({ type: 'val' });
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.validity?.tooLong).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.validity?.tooLong).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('is valid when filled in, disabled, and value exceeds `maxlength`', async () => {
-    const input = await fixture(html `<glide-core-input
+    const component = await fixture(html `<glide-core-input
       value="value"
       maxlength="3"
       disabled
     ></glide-core-input>`);
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.validity?.tooLong).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.validity?.tooLong).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('is valid when filled in, readonly, and value exceeds `maxlength`', async () => {
-    const input = await fixture(html `<glide-core-input
+    const component = await fixture(html `<glide-core-input
       value="value"
       maxlength="3"
       readonly
     ></glide-core-input>`);
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.validity?.tooLong).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.validity?.tooLong).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('is invalid when filled in and exceeds `maxlength`', async () => {
-    const input = await fixture(html `<glide-core-input maxlength="3"></glide-core-input>`);
-    input.focus();
+    const component = await fixture(html `<glide-core-input maxlength="3"></glide-core-input>`);
+    component.focus();
     await sendKeys({ type: 'value' });
-    expect(input.validity?.valid).to.be.false;
-    expect(input.validity?.tooLong).to.be.true;
-    expect(input.checkValidity()).to.be.false;
-    expect(input.reportValidity()).to.be.false;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.tooLong).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
 });
 it('is valid if no value and required but disabled', async () => {
-    const input = await fixture(html `<glide-core-input disabled required></glide-core-input>`);
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    const component = await fixture(html `<glide-core-input disabled required></glide-core-input>`);
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
 });
 it('updates validity when `required` and `value` is changed programmatically', async () => {
-    const input = await fixture(html `<glide-core-input label="Label" required></glide-core-input>`);
-    expect(input.validity?.valid).to.be.false;
-    expect(input.validity?.valueMissing).to.be.true;
-    expect(input.checkValidity()).to.be.false;
-    expect(input.reportValidity()).to.be.false;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
-    input.value = 'text';
-    await elementUpdated(input);
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    const component = await fixture(html `<glide-core-input label="Label" required></glide-core-input>`);
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
+    component.value = 'text';
+    await elementUpdated(component);
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
     // Resetting the value to empty to ensure it goes
     // back to an invalid state
-    input.value = '';
-    await elementUpdated(input);
-    expect(input.validity?.valid).to.be.false;
-    expect(input.validity?.valueMissing).to.be.true;
-    expect(input.checkValidity()).to.be.false;
-    expect(input.reportValidity()).to.be.false;
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
+    component.value = '';
+    await elementUpdated(component);
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
 });
 it('is invalid when `value` is empty and `required` is set to `true` programmatically', async () => {
-    const input = await fixture(html `<glide-core-input label="Label"></glide-core-input>`);
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
-    input.required = true;
-    await elementUpdated(input);
-    expect(input.validity?.valid).to.be.false;
-    expect(input.validity?.valueMissing).to.be.true;
-    expect(input.checkValidity()).to.be.false;
-    expect(input.reportValidity()).to.be.false;
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
+    const component = await fixture(html `<glide-core-input label="Label"></glide-core-input>`);
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
+    component.required = true;
+    await elementUpdated(component);
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
 });
 it('is valid when `value` is empty and `required` is set to `false` programmatically', async () => {
-    const input = await fixture(html `<glide-core-input label="Label" required></glide-core-input>`);
-    expect(input.validity?.valid).to.be.false;
-    expect(input.validity?.valueMissing).to.be.true;
-    expect(input.checkValidity()).to.be.false;
-    expect(input.reportValidity()).to.be.false;
-    await elementUpdated(input);
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'true');
-    input.required = false;
-    await elementUpdated(input);
-    expect(input.validity?.valid).to.be.true;
-    expect(input.validity?.valueMissing).to.be.false;
-    expect(input.checkValidity()).to.be.true;
-    expect(input.reportValidity()).to.be.true;
-    expect(input.shadowRoot?.querySelector('input')).to.have.attribute('aria-invalid', 'false');
+    const component = await fixture(html `<glide-core-input label="Label" required></glide-core-input>`);
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
+    component.required = false;
+    await elementUpdated(component);
+    expect(component.validity?.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
 });

package/dist/label.d.ts

@@ -8,8 +8,6 @@ declare global {
 /**
  * @private
  *
- * @description A label with a required control and optional description and tooltip.
- *
  * @slot - The label.
  * @slot control - The control with which the label is associated.
  * @slot summary - Additional information or context.
@@ -28,7 +26,7 @@ export default class GlideCoreLabel extends LitElement {
     split?: 'left' | 'middle';
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
-    private hasDescriptionSlot;
+    private hasDescription;
     private hasSummarySlot;
     private hasTooltipSlot;
     private isLabelTooltip;

package/dist/label.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,r=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import"./tooltip.js";import{LitElement,html,svg}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,state}from"lit/decorators.js";import ow,{owSlot}from"./library/ow.js";import styles from"./label.styles.js";const infoCircleIcon=svg`<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="1" fill="currentColor">`;let GlideCoreLabel=class GlideCoreLabel extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescriptionSlot=!1,this.hasSummarySlot=!1,this.hasTooltipSlot=!1,this.isLabelTooltip=!1,this.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#i=new LocalizeController(this),this.#s=createRef(),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#e.value)}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,"hidden-label":this.hide})}"><div class="${classMap({"tooltips-and-label":!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split})}" part="tooltips-and-label"><glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:this.hasTooltipSlot})}" placement="${"vertical"===this.orientation?"right":"bottom"}"><span class="optional-tooltip-target" slot="target" tabindex="0"><svg aria-label="${this.#i.term("moreInformation")}" width="16" height="16" viewBox="0 0 24 24" fill="none">${infoCircleIcon}</svg></span><slot name="tooltip" @slotchange="${this.#a}" ${ref(this.#r)}></slot></glide-core-tooltip><glide-core-tooltip class="label-tooltip" placement="right" ?disabled="${!this.isLabelTooltip}"><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#l)}><slot @slotchange="${this.#n}" ${ref(this.#t)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div><div aria-hidden="true">${this.label}</div></glide-core-tooltip></div><div class="control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" @slotchange="${this.#d}" ${ref(this.#e)}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#c}" ${ref(this.#s)}></slot></div><slot class="${classMap({description:!0,visible:this.hasDescriptionSlot,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" @slotchange="${this.#h}" ${ref(this.#o)}></slot></div>`}#e;#t;#o;#l;#i;#s;#r;#d(){owSlot(this.#e.value)}#n(){owSlot(this.#t.value);const e=this.#t.value?.assignedElements().at(0),t=this.#l.value;ow(e,ow.object.instanceOf(Element)),ow(t,ow.object.instanceOf(HTMLElement)),e.textContent&&(this.label=e.textContent);new ResizeObserver((()=>{this.isLabelTooltip=e.getBoundingClientRect().width>t.getBoundingClientRect().width})).observe(t)}#h(){const e=this.#o.value?.assignedNodes({flatten:!0});this.hasDescriptionSlot=Boolean(e&&e.length>0)}#c(){const e=this.#s.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}#a(){const e=this.#r.value?.assignedNodes({flatten:!0});this.hasTooltipSlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescriptionSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasTooltipSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"label",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label")],GlideCoreLabel);export default GlideCoreLabel;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,r=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import"./tooltip.js";import{LitElement,html,svg}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,state}from"lit/decorators.js";import ow,{owSlot}from"./library/ow.js";import styles from"./label.styles.js";const infoCircleIcon=svg`<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="1" fill="currentColor">`;let GlideCoreLabel=class GlideCoreLabel extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescription=!1,this.hasSummarySlot=!1,this.hasTooltipSlot=!1,this.isLabelTooltip=!1,this.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#i=new LocalizeController(this),this.#s=createRef(),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#e.value);const e=new ResizeObserver((()=>{this.hasDescription=Boolean(this.#o.value&&this.#o.value.offsetHeight>0)}));this.#o.value&&e.observe(this.#o.value)}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,"hidden-label":this.hide})}"><div class="${classMap({"tooltips-and-label":!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split})}" part="tooltips-and-label"><glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:this.hasTooltipSlot})}" placement="${"vertical"===this.orientation?"right":"bottom"}"><span class="optional-tooltip-target" slot="target" tabindex="0"><svg aria-label="${this.#i.term("moreInformation")}" width="16" height="16" viewBox="0 0 24 24" fill="none">${infoCircleIcon}</svg></span><slot name="tooltip" @slotchange="${this.#a}" ${ref(this.#r)}></slot></glide-core-tooltip><glide-core-tooltip class="label-tooltip" placement="right" ?disabled="${!this.isLabelTooltip}"><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#l)}><slot @slotchange="${this.#n}" ${ref(this.#t)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div><div aria-hidden="true">${this.label}</div></glide-core-tooltip></div><div class="control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" @slotchange="${this.#d}" ${ref(this.#e)}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#c}" ${ref(this.#s)}></slot></div><slot class="${classMap({description:!0,content:this.hasDescription,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" ${ref(this.#o)}></slot></div>`}#e;#t;#o;#l;#i;#s;#r;#d(){owSlot(this.#e.value)}#n(){owSlot(this.#t.value);const e=this.#t.value?.assignedElements().at(0),t=this.#l.value;ow(e,ow.object.instanceOf(Element)),ow(t,ow.object.instanceOf(HTMLElement)),e.textContent&&(this.label=e.textContent);new ResizeObserver((()=>{this.isLabelTooltip=e.getBoundingClientRect().width>t.getBoundingClientRect().width})).observe(t)}#c(){const e=this.#s.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}#a(){const e=this.#r.value?.assignedNodes({flatten:!0});this.hasTooltipSlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescription",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasTooltipSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"label",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label")],GlideCoreLabel);export default GlideCoreLabel;

package/dist/label.styles.js

@@ -160,21 +160,20 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
     .description {
       color: var(--glide-core-text-body-1);
-      display: none;
+      display: block;
       font-family: var(--glide-core-body-xs-font-family);
       font-size: var(--glide-core-body-xs-font-size);
       font-style: var(--glide-core-body-xs-font-style);
       font-weight: var(--glide-core-body-xs-font-weight);
       grid-column: 2;
       line-height: var(--glide-core-body-xs-line-height);
-      margin-block-start: var(--glide-core-spacing-xxs);
 
-      &.error {
-        color: var(--glide-core-status-error);
+      &.content {
+        margin-block-start: var(--glide-core-spacing-xxs);
       }
 
-      &.visible {
-        display: block;
+      &.error {
+        color: var(--glide-core-status-error);
       }
     }
   `];

package/dist/label.test.basics.js

@@ -13,9 +13,9 @@ it('has defaults', async () => {
       <input id="input" slot="control" />
     </glide-core-private-label>`);
     expect(component.getAttribute('error')).to.equal(null);
-    expect(component.error).to.equal(false);
+    expect(component.error).to.be.false;
     expect(component.getAttribute('hide')).to.equal(null);
-    expect(component.hide).to.equal(false);
+    expect(component.hide).to.be.false;
     expect(component.getAttribute('orientation')).to.equal('horizontal');
     expect(component.orientation).to.equal('horizontal');
     expect(component.hasAttribute('required')).to.be.false;
@@ -68,7 +68,7 @@ it('can be required', async () => {
       <input id="input" slot="control" />
     </glide-core-private-label>`);
     expect(component.hasAttribute('required')).to.be.true;
-    expect(component.required).to.equal(true);
+    expect(component.required).to.be.true;
     const label = component.shadowRoot?.querySelector('[data-test="label"]');
     expect(label?.textContent?.includes('*')).to.be.true;
 });
@@ -78,7 +78,7 @@ it('can have an `error`', async () => {
       <input id="input" slot="control" />
     </glide-core-private-label>`);
     expect(component.hasAttribute('error')).to.be.true;
-    expect(component.error).to.equal(true);
+    expect(component.error).to.be.true;
 });
 it('places the tooltip on the bottom when horizontal', async () => {
     const component = await fixture(html `<glide-core-private-label>

package/dist/library/ow.js

@@ -1 +1 @@
-import ow,{}from"ow";const isDevelopment=window.location.host.startsWith("localhost")||window.location.host.startsWith("127.0.0.1");export function owSlot(e){isDevelopment&&(ow(e,ow.object.is((e=>e instanceof HTMLSlotElement))),ow(e.assignedNodes().length,ow.number.is((e=>e>0)).message(e.name?`Expected a "${e.name}" slot.`:"Expected a default slot.")))}export function owSlotType(e,o=[]){if(isDevelopment&&(ow(e,ow.object.is((e=>e instanceof HTMLSlotElement))),0!==e.assignedNodes().length&&o.length>0)){const t=e.assignedNodes({flatten:!0}).filter((e=>!!(e instanceof Text&&o.includes(Text))||!(e instanceof Text)));ow(t.length,ow.number.is((e=>e>0)).message(`Expected a slotted node that extends ${o.map((({name:e})=>e)).join(" or ")}.`));for(const e of t){const t=`Expected slotted node to extend ${o.map((({name:e})=>e)).join(" or ")}. Extends ${e.constructor.name} instead.`,n=o.some((o=>e instanceof o));ow(n,ow.boolean.true.message(t))}}}const shim=new Proxy((()=>{}),{get:()=>shim,apply:()=>shim}),owOrShim=isDevelopment?ow:shim;export default owOrShim;
+import ow,{}from"ow";const isDevelopment=window.location.host.startsWith("localhost")||window.location.host.startsWith("127.0.0.1");export function owSlot(e){isDevelopment&&(ow(e,ow.object.is((e=>e instanceof HTMLSlotElement))),ow(e.assignedNodes().length,ow.number.is((e=>e>0)).message(e.name?`Expected a "${e.name}" slot.`:"Expected a default slot.")))}export function owSlotType(e,o=[]){if(isDevelopment&&(ow(e,ow.object.is((e=>e instanceof HTMLSlotElement))),0!==e.assignedNodes().length&&o.length>0)){const t=e.assignedNodes({flatten:!0}).filter((e=>!!(e instanceof Text&&o.includes(Text))||!(e instanceof Text)));ow(t.length,ow.number.is((e=>e>0)).message(`Expected a slotted element that extends ${o.map((({name:e})=>e)).join(" or ")}.`));for(const e of t){const t=`Expected slotted element to extend ${o.map((({name:e})=>e)).join(" or ")}. Extends ${e.constructor.name} instead.`,n=o.some((o=>e instanceof o));ow(n,ow.boolean.true.message(t))}}}const shim=new Proxy((()=>{}),{get:()=>shim,apply:()=>shim}),owOrShim=isDevelopment?ow:shim;export default owOrShim;

package/dist/menu.button.d.ts

@@ -5,8 +5,6 @@ declare global {
     }
 }
 /**
- * @description A button for use within a <glide-core-menu>.
- *
  * @slot icon - An icon.
  */
 export default class GlideCoreMenuButton extends LitElement {

package/dist/menu.button.test.basics.js

@@ -11,11 +11,11 @@ it('has defaults', async () => {
     // typechecked, which means supplying required attributes up front.
     const component = await fixture(html `<glide-core-menu-button label="Label"></glide-core-menu-button>`);
     // Not reflected. So no attribute assertions are necessary.
-    expect(component.privateActive).to.equal(false);
+    expect(component.privateActive).to.be.false;
 });
 it('can have a label', async () => {
-    const button = await fixture(html `<glide-core-menu-button label="Label"></glide-core-menu-button>`);
-    expect(button.shadowRoot?.textContent?.trim()).to.equal('Label');
+    const component = await fixture(html `<glide-core-menu-button label="Label"></glide-core-menu-button>`);
+    expect(component.shadowRoot?.textContent?.trim()).to.equal('Label');
 });
 it('can have an icon', async () => {
     const component = await fixture(html `<glide-core-menu-button label="Label">

package/dist/menu.d.ts

@@ -6,9 +6,7 @@ declare global {
     }
 }
 /**
- * @description A basic menu.
- *
- * @slot - `<glide-core-menu-options>`.
+ * @slot - One of `<glide-core-menu-options>`.
  * @slot target - A focusable element against which Menu will be positioned. Opens and closes Menu when interacted with.
  */
 export default class GlideCoreMenu extends LitElement {
@@ -24,7 +22,6 @@ export default class GlideCoreMenu extends LitElement {
     createRenderRoot(): ShadowRoot;
     disconnectedCallback(): void;
     firstUpdated(): void;
-    focus(options?: FocusOptions): void;
     private get isTargetDisabled();
     render(): import("lit").TemplateResult<1>;
 }

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="large",this.#s=createRef(),this.#l=e=>{e.target&&e.target instanceof Node&&this.contains(e.target)||(this.open=!1,this.#a&&(this.#a.ariaActivedescendant=""))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get open(){return this.#o}set open(e){this.#o=e,e&&!this.isTargetDisabled?this.#r():this.#c()}get size(){return this.#n}set size(e){this.#n=e,this.#a&&(this.#a.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#l,{capture:!0})}createRenderRoot(){return this.#d=super.createRenderRoot(),this.#d}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#l,{capture:!0})}firstUpdated(){ow(this.#a,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlot(this.#s.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]),this.#t.value.popover="manual";const e=this.#h?.at(0);this.open&&e&&!this.isTargetDisabled&&(e.privateActive=!0,this.#r())}focus(e){this.#p&&"focus"in this.#p&&this.#p?.focus(e)}get isTargetDisabled(){const e=this.#p&&"disabled"in this.#p&&this.#p.disabled,t=this.#p&&"true"===this.#p.ariaDisabled;return Boolean(e)||Boolean(t)}render(){return html`<div class="component" @focusout="${this.#u}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#m}" @keydown="${this.#f}" @slotchange="${this.#E}" ${ref(this.#s)}></slot><slot class="default-slot" @click="${this.#v}" @focusin="${this.#g}" @keydown="${this.#f}" @mouseover="${this.#w}" @slotchange="${this.#S}" ${ref(this.#t)}></slot></div>`}#C;#e;#t;#i;#o;#d;#n;#s;get#y(){return this.#h?.find((({privateActive:e})=>e))}#l;#c(){this.#C?.(),this.#a&&(this.#a.ariaActivedescendant=""),this.#p&&(this.#p.ariaExpanded="false"),this.#t.value?.hidePopover()}get#a(){const e=this.#t.value?.assignedElements().at(0);return e instanceof GlideCoreMenuOptions?e:null}#S(){ow(this.#a,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]);const e=this.#h?.at(0);e&&(e.privateActive=!0),this.#a.privateSize=this.size}#v(){this.open=!1}#g(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#y&&this.#a&&(this.#y.privateActive=!1,e.target.privateActive=!0,this.#a.ariaActivedescendant=e.target.id)}#w(e){if(e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton){if(this.#h)for(const t of this.#h)t.privateActive=t===e.target;this.#a&&(this.#a.ariaActivedescendant=e.target.id)}}#u(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)}#f(e){if(ow(this.#a,ow.object.instanceOf(GlideCoreMenuOptions)),[" ","Enter"].includes(e.key)&&this.open)return this.open=!1,this.focus(),this.#y?.dispatchEvent(new PointerEvent("click",{bubbles:!0})),void(this.#i=!0);if(["Escape"].includes(e.key)&&this.open)return this.open=!1,void this.focus();if(["ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#y)return e.preventDefault(),this.open=!0,void(this.#a.ariaActivedescendant=this.#y.id);if(this.open){ow(this.#h,ow.array),ow(this.#a,ow.object.instanceOf(GlideCoreMenuOptions)),ow(this.#y,ow.object.is((e=>e instanceof GlideCoreMenuButton||e instanceof GlideCoreMenuLink)));const t=this.#h.indexOf(this.#y);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#h.at(t-1);return void(i&&0!==t&&(this.#y.privateActive=!1,this.#a.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#h.at(t+1);return void(i&&(this.#y.privateActive=!1,this.#a.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=this.#h.at(0);return void(t&&(this.#y.privateActive=!1,this.#a.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=this.#h.at(-1);return void(t&&(this.#y.privateActive=!1,this.#a.ariaActivedescendant=t.id,t.privateActive=!0))}}}#E(){owSlot(this.#s.value),ow(this.#p,ow.object.instanceOf(Element)),ow(this.#a,ow.object.instanceOf(GlideCoreMenuOptions));new MutationObserver((e=>{e.some((e=>"disabled"===e.attributeName||"aria-disabled"===e.attributeName))&&(this.open&&!this.isTargetDisabled?this.#r():this.#c())})).observe(this.#p,{attributes:!0}),this.#p.ariaHasPopup="true",this.#p.id=nanoid(),this.#p.setAttribute("aria-controls",this.#a.id),this.#a.ariaLabelledby=this.#p.id,this.open&&!this.isTargetDisabled?this.#r():this.#c()}#m(){this.isTargetDisabled?this.#c():this.#i?this.#i=!1:this.#h&&this.#h.length>0&&(this.open=!this.open)}get#h(){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))}#r(){this.#C?.(),this.#p&&this.#t.value&&(this.#C=autoUpdate(this.#p,this.#t.value,(()=>{(async()=>{if(this.#p&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#p,this.#t.value,{placement:this.placement,middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#t.value.dataset.placement=i,Object.assign(this.#t.value.style,{left:`${e}px`,top:`${t}px`})}this.#t.value?.showPopover(),this.#a&&this.#y?.id&&(this.#a.ariaActivedescendant=this.#y.id),this.#p&&(this.#p.ariaExpanded="true")})()})))}get#p(){return this.#s.value?.assignedElements().at(0)}};__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 open(){return this.#o}set open(e){this.#o=e,e&&!this.isTargetDisabled?this.#c():this.#h()}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.#p?.at(0);this.open&&e&&!this.isTargetDisabled&&(e.privateActive=!0,this.#c()),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.#m}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#f}" @keydown="${this.#E}" @slotchange="${this.#v}" ${ref(this.#l)}></slot><slot class="default-slot" @click="${this.#g}" @focusin="${this.#S}" @keydown="${this.#E}" @mouseover="${this.#w}" @slotchange="${this.#C}" ${ref(this.#t)}></slot></div>`}#y;#e;#t;#i;#o;#n;#d;#s;#l;get#R(){return this.#p?.find((({privateActive:e})=>e))}#a;#k(e){this.#u&&"focus"in this.#u&&this.#u?.focus(e)}#h(){this.#y?.(),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}#C(){ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]);const e=this.#p?.at(0);e&&(e.privateActive=!0),this.#r.privateSize=this.size}#g(){this.open=!1}#S(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#R&&this.#r&&(this.#R.privateActive=!1,e.target.privateActive=!0,this.#r.ariaActivedescendant=e.target.id)}#w(e){if(e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton){if(this.#p)for(const t of this.#p)t.privateActive=t===e.target;this.#r&&(this.#r.ariaActivedescendant=e.target.id)}}#m(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)}#E(e){if(ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions)),[" ","Enter"].includes(e.key)&&this.open)return this.open=!1,this.#k(),this.#R?.click(),void(this.#i=!0);if(["Escape"].includes(e.key)&&this.open)return this.open=!1,void this.#k();if(["ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#R)return e.preventDefault(),this.open=!0,void(this.#r.ariaActivedescendant=this.#R.id);if(this.open){ow(this.#p,ow.array),ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions)),ow(this.#R,ow.object.is((e=>e instanceof GlideCoreMenuButton||e instanceof GlideCoreMenuLink)));const t=this.#p.indexOf(this.#R);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#p.at(t-1);return void(i&&0!==t&&(this.#R.privateActive=!1,this.#r.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#p.at(t+1);return void(i&&(this.#R.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.#p.at(0);return void(t&&(this.#R.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.#p.at(-1);return void(t&&(this.#R.privateActive=!1,this.#r.ariaActivedescendant=t.id,t.privateActive=!0))}}}#v(){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.#c():this.#h()})).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.open&&!this.isTargetDisabled?this.#c():this.#h()}#f(){this.isTargetDisabled?this.#h():this.#i?this.#i=!1:this.#p&&this.#p.length>0&&(this.open=!this.open)}get#p(){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))}#c(){this.#y?.(),this.#u&&this.#t.value&&(this.#y=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({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),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.#R?.id&&(this.#r.ariaActivedescendant=this.#R.id),this.#u&&(this.#u.ariaExpanded="true")})()})))}get#u(){return this.#l.value?.assignedElements().at(0)}};__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.link.d.ts

@@ -5,8 +5,6 @@ declare global {
     }
 }
 /**
- * @description A link for use within a <glide-core-menu>.
- *
  * @slot icon - An icon.
  */
 export default class GlideCoreMenuLink extends LitElement {
@@ -16,6 +14,7 @@ export default class GlideCoreMenuLink extends LitElement {
     label?: string;
     url?: string;
     privateActive: boolean;
+    click(): void;
     connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/menu.link.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var r,n=arguments.length,l=n<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 s=e.length-1;s>=0;s--)(r=e[s])&&(l=(n<3?r(l):n>3?r(t,i,l):r(t,i))||l);return n>3&&l&&Object.defineProperty(t,i,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{nanoid}from"nanoid";import styles from"./menu.link.styles.js";let GlideCoreMenuLink=class GlideCoreMenuLink extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.#e=nanoid()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}connectedCallback(){super.connectedCallback(),this.id=this.#e,this.role="menuitem",this.tabIndex=-1}render(){return html`<a class="${classMap({component:!0,active:this.privateActive})}" data-test="component" href="${ifDefined(this.url)}"><slot name="icon"></slot>${this.label}</a>`}#e};__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"url",void 0),__decorate([property({type:Boolean})],GlideCoreMenuLink.prototype,"privateActive",void 0),GlideCoreMenuLink=__decorate([customElement("glide-core-menu-link")],GlideCoreMenuLink);export default GlideCoreMenuLink;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var r,n=arguments.length,l=n<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 s=e.length-1;s>=0;s--)(r=e[s])&&(l=(n<3?r(l):n>3?r(t,i,l):r(t,i))||l);return n>3&&l&&Object.defineProperty(t,i,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{nanoid}from"nanoid";import styles from"./menu.link.styles.js";let GlideCoreMenuLink=class GlideCoreMenuLink extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.#e=createRef(),this.#t=nanoid()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menuitem",this.tabIndex=-1}render(){return html`<a class="${classMap({component:!0,active:this.privateActive})}" data-test="component" href="${ifDefined(this.url)}" ${ref(this.#e)}><slot name="icon"></slot>${this.label}</a>`}#e;#t};__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"url",void 0),__decorate([property({type:Boolean})],GlideCoreMenuLink.prototype,"privateActive",void 0),GlideCoreMenuLink=__decorate([customElement("glide-core-menu-link")],GlideCoreMenuLink);export default GlideCoreMenuLink;

package/dist/menu.options.d.ts

@@ -5,8 +5,6 @@ declare global {
     }
 }
 /**
- * @description An options container for use within a <glide-core-menu>.
- *
  * @slot - One or more of <glide-core-menu-link> or <glide-core-menu-button>.
  */
 export default class GlideCoreMenuOptions extends LitElement {

package/dist/menu.test.events.js

@@ -55,8 +55,8 @@ it('dispatches one link "click" event when a link is selected via Space', async
     const link = component.querySelector('glide-core-menu-link');
     assert(link);
     link.addEventListener('click', spy);
-    component.focus();
-    sendKeys({ press: 'Space' });
+    component.querySelector('button')?.focus();
+    sendKeys({ press: ' ' });
     const event = await oneEvent(link, 'click');
     expect(event instanceof PointerEvent).to.be.true;
     expect(event.bubbles).to.be.true;
@@ -75,8 +75,8 @@ it('dispatches one button "click" event when a button is selected via Space', as
     const button = component.querySelector('glide-core-menu-button');
     assert(button);
     button.addEventListener('click', spy);
-    component.focus();
-    sendKeys({ press: 'Space' });
+    component.querySelector('button')?.focus();
+    sendKeys({ press: ' ' });
     const event = await oneEvent(button, 'click');
     expect(event instanceof PointerEvent).to.be.true;
     expect(event.bubbles).to.be.true;
@@ -95,7 +95,7 @@ it('dispatches one link "click" event when a link is selected via Enter', async
     const link = component.querySelector('glide-core-menu-link');
     assert(link);
     link.addEventListener('click', spy);
-    component.focus();
+    component.querySelector('button')?.focus();
     sendKeys({ press: 'Enter' });
     const event = await oneEvent(link, 'click');
     expect(event instanceof PointerEvent).to.be.true;
@@ -115,7 +115,7 @@ it('dispatches one button "click" event when a button is selected via Enter', as
     const button = component.querySelector('glide-core-menu-button');
     assert(button);
     button.addEventListener('click', spy);
-    component.focus();
+    component.querySelector('button')?.focus();
     sendKeys({ press: 'Enter' });
     const event = await oneEvent(button, 'click');
     expect(event instanceof PointerEvent).to.be.true;