@crowdstrike/glide-core 0.7.0 → 0.9.0

package/dist/input.test.validity.js

@@ -1,14 +1,17 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './input.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
-import Input from './input.js';
-Input.shadowRootOptions.mode = 'open';
+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');
 });
 it('is valid after being filled in when empty and required', async () => {
     const input = await fixture(html `<glide-core-input required></glide-core-input>`);
@@ -18,6 +21,8 @@ it('is valid after being filled in when empty and required', async () => {
     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');
 });
 it('is invalid if no value and required', async () => {
     const input = await fixture(html `<glide-core-input required></glide-core-input>`);
@@ -26,6 +31,8 @@ it('is invalid if no value and required', async () => {
     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');
 });
 it('is invalid after value is cleared when required', async () => {
     const input = await fixture(html `<glide-core-input
@@ -33,13 +40,76 @@ it('is invalid after value is cleared when required', async () => {
       value="value"
       required
     ></glide-core-input>`);
-    const clearButton = input.shadowRoot?.querySelector('.clear-icon-button');
+    const clearButton = input.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');
+});
+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');
+});
+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();
+    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');
+});
+it('is valid when filled in, disabled, and value exceeds `maxlength`', async () => {
+    const input = 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');
+});
+it('is valid when filled in, readonly, and value exceeds `maxlength`', async () => {
+    const input = 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');
+});
+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();
+    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');
 });
 it('is valid if no value and required but disabled', async () => {
     const input = await fixture(html `<glide-core-input disabled required></glide-core-input>`);
@@ -47,4 +117,64 @@ it('is valid if no value and required but disabled', async () => {
     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');
+});
+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');
+    // 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');
+});
+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');
+});
+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');
 });

package/dist/label.d.ts

@@ -2,7 +2,7 @@ import './tooltip.js';
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'glide-core-label': GlideCoreLabel;
+        'glide-core-private-label': GlideCoreLabel;
     }
 }
 /**

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}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";import{svg}from"lit";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-overflow-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-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.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;

package/dist/label.styles.js

@@ -3,13 +3,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       &.horizontal {
         column-gap: var(--glide-core-spacing-sm);
         display: grid;
-
-        /*
-         Since 1fr is actually minmax(auto, 1fr), this explicit minmax will make it so
-         the first column is sized to its content, and the second column fills the rest
-         of the space.
-        */
-        grid-template-columns: auto minmax(0, 1fr);
+        grid-template-columns: auto minmax(min-content, 1fr);
       }
 
       &.vertical {
@@ -22,7 +16,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
 
       &.middle {
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 50% 50%;
       }
 
       &.hidden-label {
@@ -35,10 +29,21 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       align-items: center;
       column-gap: var(--glide-core-spacing-xs);
       display: flex;
-      justify-content: flex-end;
 
-      /* Prevent it from growing larger than its column percentage when a child of Form Controls Layout. */
-      min-inline-size: 0;
+      /* 
+        Prevents it from growing larger than its column percentage when a child of Form Controls 
+        Layout. Also allows for an ellipsis on the label. See the linked comment for why it's "3ch" 
+        instead of "0".
+
+        - https://css-tricks.com/flexbox-truncated-text/#aa-the-solution-is-min-width-0-on-the-flex-child
+        - https://github.com/CrowdStrike/glide-core/pull/317#issuecomment-2297025365 
+      */
+      min-inline-size: 3ch;
+
+      &.middle,
+      &.left {
+        justify-content: flex-end;
+      }
 
       &.hidden {
         ${visuallyHidden};
@@ -54,9 +59,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
       &.visible {
         /*
-      The default is "display: content". But "order" does not work with
-      "display: content" and "order" is needed above.
-    */
+    The default is "display: content". But "order" does not work with
+    "display: content" and "order" is needed above.
+  */
         display: block;
       }
     }
@@ -68,10 +73,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       color: var(--glide-core-text-body-1);
 
       /*
-      Any "display" that's not inline-level will do. We don't want the button to
-      acquire a line box, which will make it taller than its content and thus
-      make it difficult to center vertically with the label.
-      */
+    Any "display" that's not inline-level will do. We don't want the button to
+    acquire a line box, which will make it taller than its content and thus
+    make it difficult to center vertically with the label.
+    */
 
       display: flex;
       padding: 0;
@@ -110,8 +115,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
     }
 
-    .label-overflow-tooltip {
-      inline-size: 100%;
+    .label-tooltip {
+      display: flex;
+      max-inline-size: 100%;
+
+      /* https://css-tricks.com/flexbox-truncated-text/#aa-the-solution-is-min-width-0-on-the-flex-child */
+      min-inline-size: 0;
     }
 
     .required-symbol {

package/dist/label.test.basics.js

@@ -1,16 +1,17 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { ArgumentError } from 'ow';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import GlideCoreLabel from './label.js';
 import sinon from 'sinon';
 GlideCoreLabel.shadowRootOptions.mode = 'open';
 it('registers', async () => {
-    expect(window.customElements.get('glide-core-label')).to.equal(GlideCoreLabel);
+    expect(window.customElements.get('glide-core-private-label')).to.equal(GlideCoreLabel);
 });
 it('has defaults', async () => {
-    const component = await fixture(html `<glide-core-label>
+    const component = await fixture(html `<glide-core-private-label>
       <label for="input">Label</label>
       <input id="input" slot="control" />
-    </glide-core-label>`);
+    </glide-core-private-label>`);
     expect(component.getAttribute('error')).to.equal(null);
     expect(component.error).to.equal(false);
     expect(component.getAttribute('hide')).to.equal(null);
@@ -21,80 +22,80 @@ it('has defaults', async () => {
     expect(component.required).to.be.false;
 });
 it('is accessible', async () => {
-    const component = await fixture(html `<glide-core-label>
+    const component = await fixture(html `<glide-core-private-label>
       <label for="input">Label</label>
       <input id="input" slot="control" />
       <div slot="tooltip">Tooltip</div>
       <div slot="description">Description</div>
-    </glide-core-label>`);
+    </glide-core-private-label>`);
     await expect(component).to.be.accessible();
 });
 it('can have a label', async () => {
-    const component = await fixture(html `<glide-core-label>
+    const component = await fixture(html `<glide-core-private-label>
       <label for="input">Label</label>
       <input id="input" slot="control" />
-    </glide-core-label>`);
+    </glide-core-private-label>`);
     const assignedElements = component.shadowRoot
         ?.querySelector('slot:not([name])')
         ?.assignedElements();
     expect(assignedElements?.at(0)?.textContent).to.equal('Label');
 });
 it('can have a description', async () => {
-    const component = await fixture(html `<glide-core-label>
+    const component = await fixture(html `<glide-core-private-label>
       <label for="input">Label</label>
       <input id="input" slot="control" />
       <div slot="description">Description</div>
-    </glide-core-label>`);
+    </glide-core-private-label>`);
     const assignedElements = component.shadowRoot
         ?.querySelector('slot[name="description"]')
         ?.assignedElements();
     expect(assignedElements?.at(0)?.textContent).to.equal('Description');
 });
 it('can have a tooltip', async () => {
-    const component = await fixture(html `<glide-core-label>
+    const component = await fixture(html `<glide-core-private-label>
       <label for="input">Label</label>
       <input id="input" slot="control" />
       <div slot="tooltip">Tooltip</div>
-    </glide-core-label>`);
+    </glide-core-private-label>`);
     const assignedElements = component.shadowRoot
         ?.querySelector('slot[name="tooltip"]')
         ?.assignedElements();
     expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
 });
 it('can be required', async () => {
-    const component = await fixture(html `<glide-core-label required>
+    const component = await fixture(html `<glide-core-private-label required>
       <label for="input">Label</label>
       <input id="input" slot="control" />
-    </glide-core-label>`);
+    </glide-core-private-label>`);
     expect(component.hasAttribute('required')).to.be.true;
     expect(component.required).to.equal(true);
     const label = component.shadowRoot?.querySelector('[data-test="label"]');
     expect(label?.textContent?.includes('*')).to.be.true;
 });
 it('can have an `error`', async () => {
-    const component = await fixture(html `<glide-core-label ?error=${true}>
+    const component = await fixture(html `<glide-core-private-label ?error=${true}>
       <label for="input">Label</label>
       <input id="input" slot="control" />
-    </glide-core-label>`);
+    </glide-core-private-label>`);
     expect(component.hasAttribute('error')).to.be.true;
     expect(component.error).to.equal(true);
 });
 it('places the tooltip on the bottom when horizontal', async () => {
-    const component = await fixture(html `<glide-core-label>
+    const component = await fixture(html `<glide-core-private-label>
       <label for="input">Label</label>
       <input id="input" slot="control" />
       <div slot="tooltip">Tooltip</div>
-    </glide-core-label>`);
+    </glide-core-private-label>`);
     expect(component.shadowRoot
         ?.querySelector('glide-core-tooltip')
         ?.getAttribute('placement')).to.equal('bottom');
 });
 it('places the tooltip on the right when vertical', async () => {
-    const component = await fixture(html `<glide-core-label orientation="vertical">
+    const component = await fixture(html `<glide-core-private-label orientation="vertical">
       <label for="input">Label</label>
       <input id="input" slot="control" />
       <div slot="tooltip">Tooltip</div>
-    </glide-core-label>`);
+    </glide-core-private-label>`);
     expect(component.shadowRoot
         ?.querySelector('glide-core-tooltip')
         ?.getAttribute('placement')).to.equal('right');
@@ -102,29 +103,31 @@ it('places the tooltip on the right when vertical', async () => {
 it('throws if it does not have a default slot', async () => {
     const spy = sinon.spy();
     try {
-        await fixture(html `<glide-core-label><input slot="control" /></glide-core-label>`);
+        await fixture(html `<glide-core-private-label
+        ><input slot="control"
+      /></glide-core-private-label>`);
     }
     catch (error) {
         if (error instanceof ArgumentError) {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });
 it('throws if it does not have a "control" slot', async () => {
     const spy = sinon.spy();
     const stub = sinon.stub(console, 'error');
     try {
-        await fixture(html `<glide-core-label>
+        await fixture(html `<glide-core-private-label>
         <label>Label</label>
-      </glide-core-label>`);
+      </glide-core-private-label>`);
     }
     catch (error) {
         if (error instanceof ArgumentError) {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
     // It's not clear to me why the error logged by Ow shows up in the console
     // here and not in the above test or elsewhere. A bug in Web Test Runner?
     // Something I don't understand about Lit's lifecycle?

package/dist/library/expect-argument-error.js

@@ -1 +1 @@
-import{ArgumentError}from"ow";import{expect}from"@open-wc/testing";import sinon from"sinon";export default async function(o){const r=window.onerror;window.onerror=null;const n=sinon.spy();try{await o.call(context)}catch(o){o instanceof ArgumentError&&n()}expect(n.called).to.be.true,window.onerror=r}
+import{ArgumentError}from"ow";import{expect}from"@open-wc/testing";import sinon from"sinon";export default async function(o){const n=window.onerror;window.onerror=null;const r=sinon.spy();try{await o.call(context)}catch(o){o instanceof ArgumentError&&r()}expect(r.callCount).to.equal(1),window.onerror=n}

package/dist/library/localize.d.ts

@@ -10,8 +10,12 @@ export interface Translation extends DefaultTranslation {
     dismiss: string;
     open: string;
     selectAll: string;
-    clearEntry: string;
     moreInformation: string;
     notifications: string;
+    nextTab: string;
+    previousTab: string;
+    announcedCharacterCount: (current: number, maximum: number) => string;
+    displayedCharacterCount: (current: number, maximum: number) => string;
+    clearEntry: (label: string) => string;
     removeTag: (name: string) => string;
 }

package/dist/library/ow.test.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
 export default class GlideCoreSlot extends LitElement {
-    render(): any;
+    static shadowRootOptions: ShadowRootInit;
+    render(): import("lit").TemplateResult<1>;
 }

package/dist/library/ow.test.js

@@ -1,24 +1,29 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-/* eslint-disable @crowdstrike/glide-core-eslint-plugin/prefer-closed-shadow-root */
-/* This is a test file that doesn't contain one of our components, so we don't need to enforce this rule. */
 import { LitElement } from 'lit';
 import { assert, expect, fixture, html } from '@open-wc/testing';
 import { customElement } from 'lit/decorators.js';
+import { html as litHtml } from 'lit';
 import { owSlot, owSlotType } from './ow.js';
 let GlideCoreSlot = class GlideCoreSlot extends LitElement {
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: 'closed',
+    }; }
     render() {
-        return html `<slot></slot>`;
+        return litHtml `<slot></slot>`;
     }
 };
 GlideCoreSlot = __decorate([
     customElement('glide-core-slot')
 ], GlideCoreSlot);
 export default GlideCoreSlot;
+GlideCoreSlot.shadowRootOptions.mode = 'open';
 it('throws when a slot lacks a node', async () => {
     const component = await fixture(html `<glide-core-slot></glide-core-slot>`);
     const slot = component.shadowRoot?.querySelector('slot');

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreMenuButton from './menu.button.js';
 GlideCoreMenuButton.shadowRootOptions.mode = 'open';

package/dist/menu.d.ts

@@ -8,7 +8,7 @@ declare global {
 /**
  * @description A basic menu.
  *
- * @slot - <glide-core-menu-options>.
+ * @slot - `<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 {
@@ -18,15 +18,13 @@ export default class GlideCoreMenu extends LitElement {
     get open(): boolean;
     set open(isOpen: boolean);
     placement: Placement;
-    containingBlock?: Element;
     get size(): 'small' | 'large';
     set size(size: 'small' | 'large');
     connectedCallback(): void;
     createRenderRoot(): ShadowRoot;
     disconnectedCallback(): void;
     firstUpdated(): void;
-    focus(): void;
+    focus(options?: FocusOptions): void;
+    private get isTargetDisabled();
     render(): import("lit").TemplateResult<1>;
-    setContainingBlock(containingBlock: Element): void;
-    private isTargetDisabled;
 }

package/dist/menu.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var n,s=arguments.length,a=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(n=e[l])&&(a=(s<3?n(a):s>3?n(t,i,a):n(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};import{LitElement,html}from"lit";import{autoUpdate,computePosition,flip,offset,platform}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{nanoid}from"nanoid";import{offsetParent}from"composed-offset-position";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.isTargetDisabled=!1,this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#n="large",this.#s=createRef(),this.#a=e=>{e.target&&e.target instanceof Node&&this.contains(e.target)||(this.open=!1,this.#l&&(this.#l.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.#l?(this.#r(),this.#l.ariaActivedescendant=this.#c?.id??""):this.#l&&(this.#p?.(),this.#l.ariaActivedescendant=""),this.#d&&(this.#d.ariaExpanded=e&&!this.isTargetDisabled?"true":"false")}get size(){return this.#n}set size(e){this.#n=e,this.#l&&(this.#l.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#a,{capture:!0})}createRenderRoot(){return this.#h=super.createRenderRoot(),this.#h}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#a,{capture:!0})}firstUpdated(){ow(this.#l,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlot(this.#s.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]);const e=this.#m?.at(0);this.open&&e&&(this.#r(),e.privateActive=!0,this.#l.ariaActivedescendant=e.id)}focus(){this.#d&&"focus"in this.#d&&this.#d?.focus()}render(){return html`<div class="component" @focusout="${this.#f}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#u}" @keydown="${this.#E}" @slotchange="${this.#g}" ${ref(this.#s)}></slot><slot class="${classMap({"default-slot":!0,visible:this.open})}" @click="${this.#v}" @focusin="${this.#C}" @keydown="${this.#E}" @mouseover="${this.#w}" @slotchange="${this.#S}" ${ref(this.#t)}></slot></div>`}setContainingBlock(e){this.containingBlock=e}#p;#e;#t;#i;#o;#h;#n;#s;get#c(){return this.#m?.find((({privateActive:e})=>e))}get#l(){const e=this.#t.value?.assignedElements().at(0);return e||null}#a;#S(){ow(this.#l,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]);const e=this.#m?.at(0);e&&(e.privateActive=!0),this.#l.privateSize=this.size}#v(){this.open=!1,this.#l&&(this.#l.ariaActivedescendant="")}#C(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#c&&this.#l&&(e.target.privateActive=!0,this.#c.privateActive=!1,this.#l.ariaActivedescendant=e.target.id)}#w(e){if(e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton){if(this.#m)for(const t of this.#m)t.privateActive=t===e.target;this.#l&&(this.#l.ariaActivedescendant=e.target.id)}}#f(e){const t=e.relatedTarget instanceof HTMLElement&&this.#h?.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.#l,ow.object.instanceOf(GlideCoreMenuOptions)),[" ","Enter","Escape"].includes(e.key)&&this.open)return this.open=!1,this.#l.ariaActivedescendant="",this.focus(),void(this.#i=!0);if([" ","ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#c)return e.preventDefault(),this.open=!0,void(this.#l.ariaActivedescendant=this.#c.id);if(this.open){ow(this.#m,ow.array),ow(this.#l,ow.object.instanceOf(GlideCoreMenuOptions)),ow(this.#c,ow.object.is((e=>e instanceof GlideCoreMenuButton||e instanceof GlideCoreMenuLink)));const t=this.#m.indexOf(this.#c);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#m.at(t-1);return void(i&&0!==t&&(this.#c.privateActive=!1,this.#l.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#m.at(t+1);return void(i&&(this.#c.privateActive=!1,this.#l.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=this.#m.at(0);return void(t&&(this.#c.privateActive=!1,this.#l.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=this.#m.at(-1);return void(t&&(this.#c.privateActive=!1,this.#l.ariaActivedescendant=t.id,t.privateActive=!0))}}}#g(){owSlot(this.#s.value),ow(this.#d,ow.object.instanceOf(Element)),ow(this.#l,ow.object.instanceOf(GlideCoreMenuOptions)),this.#y(),this.isTargetDisabled&&(this.open=!1);new MutationObserver((e=>{e.some((e=>"disabled"===e.attributeName||"aria-disabled"===e.attributeName))&&(this.#y(),this.isTargetDisabled&&(this.open=!1))})).observe(this.#d,{attributes:!0}),this.#d.ariaHasPopup="true",this.#d.ariaExpanded=this.open?"true":"false",this.#d.id=nanoid(),this.#d.setAttribute("aria-controls",this.#l.id),this.#l.ariaLabelledby=this.#d.id}#u(){this.isTargetDisabled||this.#i?this.#i=!1:(this.#d instanceof HTMLElement&&(this.#d.ariaExpanded=this.open?"true":"false"),this.#m&&this.#m.length>0&&(this.open=!this.open),this.open&&this.#c&&this.#l?this.#l.ariaActivedescendant=this.#c.id:!this.open&&this.#l&&(this.#l.ariaActivedescendant="",this.focus()))}get#m(){let e=this.#t.value?.assignedElements()?.at(0)?.children;const t=e?.[0];if(t instanceof HTMLSlotElement&&(e=t.assignedElements()),e)return[...e].filter((e=>e instanceof GlideCoreMenuLink||e instanceof GlideCoreMenuButton))}#y(){const e=this.#d&&"disabled"in this.#d&&this.#d.disabled,t=this.#d&&"true"===this.#d.ariaDisabled;this.isTargetDisabled=Boolean(e)||Boolean(t)}#r(){this.#d&&this.#t.value&&(this.#p=autoUpdate(this.#d,this.#t.value,(()=>{(async()=>{if(this.#d&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#d,this.#t.value,{platform:{...platform,getOffsetParent:e=>this.containingBlock??platform.getOffsetParent(e,offsetParent)},placement:this.placement,middleware:[offset({mainAxis:16*Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))}),flip()]});this.#t.value.dataset.placement=i,Object.assign(this.#t.value.style,{left:`${e}px`,top:`${t}px`})}})()})))}get#d(){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([state()],GlideCoreMenu.prototype,"containingBlock",void 0),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"size",null),__decorate([state()],GlideCoreMenu.prototype,"isTargetDisabled",void 0),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="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.#m}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#u}" @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&&(e.target.privateActive=!0,this.#y.privateActive=!1,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)}}#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)}#f(e){if(ow(this.#a,ow.object.instanceOf(GlideCoreMenuOptions)),[" ","Enter","Escape"].includes(e.key)&&this.open)return this.open=!1,this.focus(),void(this.#i=!0);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()}#u(){this.isTargetDisabled?this.#c():this.#i?this.#i=!1:(this.#h&&this.#h.length>0&&(this.open=!this.open),!this.open&&this.#a&&this.focus())}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;

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreMenuLink from './menu.link.js';
 GlideCoreMenuLink.shadowRootOptions.mode = 'open';

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './menu.button.js';
 import './menu.link.js';
 import { ArgumentError } from 'ow';
@@ -18,7 +19,7 @@ it('throws if it does not have a default slot', async () => {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });
 it('throws if the default slot is the incorrect type', async () => {
     await expectArgumentError(() => {
@@ -39,5 +40,5 @@ it('does not throw if the default slot only contains whitespace', async () => {
             spy();
         }
     }
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });