@crowdstrike/glide-core 0.5.0 → 0.5.2

package/dist/label.test.basics.js

@@ -0,0 +1,129 @@
+import { ArgumentError } from 'ow';
+import { expect, fixture, html } 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);
+});
+it('has defaults', async () => {
+    const component = await fixture(html `<glide-core-label>
+      <label for="input">Label</label>
+      <input id="input" slot="control" />
+    </glide-core-label>`);
+    expect(component.getAttribute('error')).to.equal(null);
+    expect(component.error).to.equal(false);
+    expect(component.getAttribute('hide')).to.equal(null);
+    expect(component.hide).to.equal(false);
+    expect(component.getAttribute('orientation')).to.equal('horizontal');
+    expect(component.orientation).to.equal('horizontal');
+    expect(component.hasAttribute('required')).to.be.false;
+    expect(component.required).to.be.false;
+});
+it('is accessible', async () => {
+    const component = await fixture(html `<glide-core-label>
+      <label for="input">Label</label>
+      <input id="input" slot="control" />
+      <div slot="tooltip">Tooltip</div>
+      <div slot="description">Description</div>
+    </glide-core-label>`);
+    await expect(component).to.be.accessible();
+});
+it('can have a label', async () => {
+    const component = await fixture(html `<glide-core-label>
+      <label for="input">Label</label>
+      <input id="input" slot="control" />
+    </glide-core-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>
+      <label for="input">Label</label>
+      <input id="input" slot="control" />
+      <div slot="description">Description</div>
+    </glide-core-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>
+      <label for="input">Label</label>
+      <input id="input" slot="control" />
+      <div slot="tooltip">Tooltip</div>
+    </glide-core-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>
+      <label for="input">Label</label>
+      <input id="input" slot="control" />
+    </glide-core-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}>
+      <label for="input">Label</label>
+      <input id="input" slot="control" />
+    </glide-core-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>
+      <label for="input">Label</label>
+      <input id="input" slot="control" />
+      <div slot="tooltip">Tooltip</div>
+    </glide-core-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">
+      <label for="input">Label</label>
+      <input id="input" slot="control" />
+      <div slot="tooltip">Tooltip</div>
+    </glide-core-label>`);
+    expect(component.shadowRoot
+        ?.querySelector('glide-core-tooltip')
+        ?.getAttribute('placement')).to.equal('right');
+});
+it('throws if it does not have a default slot', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `<glide-core-label orientation="vertical"
+        ><input slot="control"
+      /></glide-core-label>`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});
+it('throws if it does not have a "control" slot', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `<glide-core-label orientation="vertical">
+        <label>Label</label>
+      </glide-core-label>`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});

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

@@ -1 +1 @@
-"use strict";import{ArgumentError as e}from"ow";import{expect as i}from"@open-wc/testing";import c from"sinon";export default async function(r){const n=window.onerror;window.onerror=null;const o=c.spy();try{await r.call(context)}catch(t){t instanceof e&&o()}i(o.called).to.be.true,window.onerror=n}
+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}

package/dist/library/ow.js

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

package/dist/library/ow.test.js

@@ -0,0 +1,55 @@
+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 { owSlot, owSlotType } from './ow.js';
+let GlideCoreSlot = class GlideCoreSlot extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+GlideCoreSlot = __decorate([
+    customElement('glide-core-slot')
+], GlideCoreSlot);
+export default GlideCoreSlot;
+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');
+    assert(slot !== null);
+    expect(() => owSlot(slot)).to.throw();
+});
+it('throws when a slot lacks a specific node', async () => {
+    const component = await fixture(html `<glide-core-slot>
+      <span>Span</span>
+    </glide-core-slot>`);
+    const slot = component.shadowRoot?.querySelector('slot');
+    assert(slot !== null);
+    expect(() => owSlotType(slot, [HTMLButtonElement])).to.throw();
+});
+it('does not throw when a slot has a node', async () => {
+    const component = await fixture(html `<glide-core-slot>
+      <span>Span</span>
+    </glide-core-slot>`);
+    const slot = component.shadowRoot?.querySelector('slot');
+    assert(slot !== null);
+    expect(() => owSlot(slot)).to.not.throw();
+});
+it('does not throw when a slot has a specific node', async () => {
+    const component = await fixture(html `<glide-core-slot> Text </glide-core-slot>`);
+    const slot = component.shadowRoot?.querySelector('slot');
+    assert(slot !== null);
+    expect(() => owSlotType(slot, [Text])).to.not.throw();
+});
+it('does not throw when a slot has no nodes', async () => {
+    const component = await fixture(html `<glide-core-slot></glide-core-slot>`);
+    const slot = component.shadowRoot?.querySelector('slot');
+    assert(slot !== null);
+    expect(() => owSlotType(slot, [HTMLButtonElement])).to.not.throw();
+});

package/dist/menu.button.d.ts

@@ -15,7 +15,6 @@ export default class GlideCoreMenuButton extends LitElement {
     static styles: import("lit").CSSResult[];
     label?: string;
     privateActive: boolean;
-    privateIsFocused: boolean;
-    focus(): void;
+    connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/menu.button.js

@@ -1 +1 @@
-"use strict";var y=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var c=(e,t,o,a)=>{for(var i=a>1?void 0:a?E(t,o):t,p=e.length-1,f;p>=0;p--)(f=e[p])&&(i=(a?f(t,o,i):f(i))||i);return a&&i&&y(t,o,i),i};var u=(e,t,o)=>{if(!t.has(e))throw TypeError("Cannot "+o)};var v=(e,t,o)=>(u(e,t,"read from private field"),o?o.call(e):t.get(e)),m=(e,t,o)=>{if(t.has(e))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(e):t.set(e,o)};var d=(e,t,o)=>(u(e,t,"access private method"),o);var r,l,$,n,g;import{LitElement as h,html as F}from"lit";import{classMap as R}from"lit/directives/class-map.js";import{createRef as I,ref as w}from"lit/directives/ref.js";import{customElement as x,property as b}from"lit/decorators.js";import A from"./menu.button.styles.js";let s=class extends h{constructor(){super(...arguments);m(this,l);m(this,n);this.privateActive=!1;this.privateIsFocused=!1;m(this,r,I())}focus(){v(this,r).value?.focus()}render(){return F`<button class="${R({component:!0,"component-active":this.privateActive})}" data-test="component" role="menuitem" tabindex="${this.privateActive?"0":"-1"}" type="button" @focusin="${d(this,l,$)}" @focusout="${d(this,n,g)}" ${w(v(this,r))}><slot name="icon"></slot>${this.label}</button>`}};r=new WeakMap,l=new WeakSet,$=function(){this.privateIsFocused=!0},n=new WeakSet,g=function(){this.privateIsFocused=!1},s.shadowRootOptions={...h.shadowRootOptions,mode:"closed"},s.styles=A,c([b({reflect:!0})],s.prototype,"label",2),c([b({type:Boolean})],s.prototype,"privateActive",2),s=c([x("glide-core-menu-button")],s);export{s as default};
+var __decorate=this&&this.__decorate||function(t,e,o,r){var i,n=arguments.length,s=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,r);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(s=(n<3?i(s):n>3?i(e,o,s):i(e,o))||s);return n>3&&s&&Object.defineProperty(e,o,s),s};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import styles from"./menu.button.styles.js";let GlideCoreMenuButton=class GlideCoreMenuButton extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.#t=window.crypto.randomUUID()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menuitem",this.tabIndex=-1}render(){return html`<button class="${classMap({component:!0,active:this.privateActive})}" data-test="component" type="button"><slot name="icon"></slot>${this.label}</button>`}#t};__decorate([property({reflect:!0})],GlideCoreMenuButton.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreMenuButton.prototype,"privateActive",void 0),GlideCoreMenuButton=__decorate([customElement("glide-core-menu-button")],GlideCoreMenuButton);export default GlideCoreMenuButton;

package/dist/menu.button.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"lit";export default[e`
+import{css}from"lit";export default[css`
     .component {
       align-items: center;
       background-color: transparent;
@@ -13,8 +13,8 @@
       padding-inline: var(--padding-inline);
       user-select: none;
 
-      &.component-active {
+      &.active {
         background-color: var(--glide-core-surface-hover);
       }
     }
-  `];
+  `];

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

@@ -0,0 +1,42 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreMenuButton from './menu.button.js';
+GlideCoreMenuButton.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-menu-button')).to.equal(GlideCoreMenuButton);
+});
+it('has defaults', async () => {
+    // Required attributes are supplied and not asserted below. The idea is that
+    // this test shouldn't fail to typecheck if these templates are eventually
+    // 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);
+});
+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');
+});
+it('can have an icon', async () => {
+    const component = await fixture(html `<glide-core-menu-button label="Label">
+      <svg
+        slot="icon"
+        width="16"
+        height="16"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
+        />
+      </svg>
+    </glide-core-menu-button>`);
+    const icon = component?.shadowRoot
+        ?.querySelector('slot[name="icon"]')
+        ?.assignedElements()
+        .at(0);
+    expect(icon instanceof Element).to.be.true;
+});

package/dist/menu.d.ts

@@ -19,9 +19,13 @@ export default class GlideCoreMenu extends LitElement {
     set open(isOpen: boolean);
     placement: Placement;
     size: 'small' | 'large';
+    private get activeOption();
     connectedCallback(): void;
+    createRenderRoot(): ShadowRoot;
     disconnectedCallback(): void;
     firstUpdated(): void;
     focus(): void;
     render(): import("lit").TemplateResult<1>;
+    private ariaActivedescendant;
+    private isTargetDisabled;
 }

package/dist/menu.js

@@ -1 +1 @@
-"use strict";var et=Object.defineProperty;var it=Object.getOwnPropertyDescriptor;var g=(n,a,t,i)=>{for(var r=i>1?void 0:i?it(a,t):a,o=n.length-1,F;o>=0;o--)(F=n[o])&&(r=(i?F(a,t,r):F(r))||r);return i&&r&&et(a,t,r),r};var z=(n,a,t)=>{if(!a.has(n))throw TypeError("Cannot "+t)};var e=(n,a,t)=>(z(n,a,"read from private field"),t?t.call(n):a.get(n)),s=(n,a,t)=>{if(a.has(n))throw TypeError("Cannot add the same private member more than once");a instanceof WeakSet?a.add(n):a.set(n,t)},B=(n,a,t,i)=>(z(n,a,"write to private field"),i?i.call(n,t):a.set(n,t),t);var l=(n,a,t)=>(z(n,a,"access private method"),t);var y,D,m,E,h,v,k,w,N,L,J,U,Q,C,W,K,X,S,Y,R,Z,H,_,M,G,P,tt,p,u,A,j,c,f;import{LitElement as V,html as ot}from"lit";import{autoUpdate as st,computePosition as at,flip as nt,offset as rt}from"@floating-ui/dom";import{classMap as lt}from"lit/directives/class-map.js";import{createRef as T,ref as $}from"lit/directives/ref.js";import{customElement as ct,property as I}from"lit/decorators.js";import{owSlot as b,owSlotType as q}from"./library/ow.js";import x from"./menu.button.js";import O from"./menu.link.js";import pt from"./menu.styles.js";let d=class extends V{constructor(){super(...arguments);s(this,w);s(this,L);s(this,U);s(this,C);s(this,K);s(this,S);s(this,R);s(this,H);s(this,M);s(this,P);s(this,p);s(this,A);s(this,c);this.placement="bottom-start";this.size="large";s(this,y,void 0);s(this,D,T());s(this,m,T());s(this,E,!1);s(this,h,T());s(this,v,T());s(this,k,t=>{t.target&&this.contains(t.target)||(this.open=!1)})}get open(){return e(this,E)}set open(t){var i;B(this,E,t),t?l(this,A,j).call(this):(i=e(this,y))==null||i.call(this),e(this,c,f)&&(e(this,c,f).ariaExpanded=t?"true":"false")}connectedCallback(){super.connectedCallback(),document.addEventListener("click",e(this,k),{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",e(this,k),{capture:!0})}firstUpdated(){b(e(this,m).value),b(e(this,v).value),q(e(this,m).value,[x,O,Text]),l(this,A,j).call(this);const t=e(this,p,u).at(0);t&&(t.privateActive=!0),e(this,c,f)&&e(this,h).value&&(e(this,c,f).ariaHasPopup="true",e(this,c,f).ariaExpanded=this.open?"true":"false")}focus(){const t=e(this,v).value?.assignedElements().at(0);t&&"focus"in t&&t?.focus()}render(){return ot`<div @focusout="${l(this,S,Y)}" @keydown="${l(this,R,Z)}" ${$(e(this,D))} class="component"><div class="target-container" @click="${l(this,H,_)}" @keydown="${l(this,M,G)}" id="target-container"><slot name="target" @slotchange="${l(this,P,tt)}" ${$(e(this,v))}></slot></div><div aria-labelledby="target-container" class="${lt({options:!0,large:this.size==="large",small:this.size==="small",visible:this.open})}" role="menu" ${$(e(this,h))}><slot @click="${l(this,U,Q)}" @keydown="${l(this,C,W)}" @mouseover="${l(this,K,X)}" @slotchange="${l(this,L,J)}" ${$(e(this,m))}></slot></div></div>`}};y=new WeakMap,D=new WeakMap,m=new WeakMap,E=new WeakMap,h=new WeakMap,v=new WeakMap,k=new WeakMap,w=new WeakSet,N=async function(){const t=e(this,p,u).find(i=>i.privateActive);t&&(await this.updateComplete,t.focus())},L=new WeakSet,J=function(){b(e(this,m).value),q(e(this,m).value,[x,O,Text])},U=new WeakSet,Q=function(){this.open=!1},C=new WeakSet,W=function(t){if([" ","Enter"].includes(t.key)){this.open=!1,this.focus();return}const i=e(this,p,u).findIndex(o=>o.privateActive),r=e(this,p,u).at(i);if(r){if(t.key==="ArrowUp"&&!t.metaKey){t.preventDefault();const o=e(this,p,u).at(i-1);o&&i!==0&&(r.privateActive=!1,o.privateActive=!0,o.focus());return}if(t.key==="ArrowDown"&&!t.metaKey){t.preventDefault();const o=e(this,p,u).at(i+1);o&&(r.privateActive=!1,o.privateActive=!0,o.focus());return}if(t.key==="ArrowUp"&&t.metaKey||t.key==="Home"||t.key==="PageUp"){t.preventDefault();const o=e(this,p,u).at(0);o&&(r.privateActive=!1,o.privateActive=!0,o.focus());return}if(t.key==="ArrowDown"&&t.metaKey||t.key==="End"||t.key==="PageDown"){t.preventDefault();const o=e(this,p,u).at(-1);o&&(r.privateActive=!1,o.privateActive=!0,o.focus());return}}},K=new WeakSet,X=function(t){if(t.target instanceof O||t.target instanceof x){for(const i of e(this,p,u))i.privateActive=i===t.target;t.target.focus()}},S=new WeakSet,Y=function(){setTimeout(()=>{e(this,p,u).some(({privateIsFocused:i})=>i)||(this.open=!1)})},R=new WeakSet,Z=function(t){t.key==="Escape"&&(this.open=!1,this.focus())},H=new WeakSet,_=function(){e(this,c,f)instanceof HTMLElement&&(e(this,c,f).ariaExpanded=this.open?"true":"false"),this.open=!this.open,this.open?l(this,w,N).call(this):this.focus()},M=new WeakSet,G=function(t){[" ","ArrowUp","ArrowDown"].includes(t.key)&&(t.preventDefault(),this.open=!0,l(this,w,N).call(this))},P=new WeakSet,tt=function(){b(e(this,v).value)},p=new WeakSet,u=function(){return(e(this,m).value?.assignedElements({flatten:!0})??[]).filter(t=>t instanceof O||t instanceof x)},A=new WeakSet,j=function(){e(this,c,f)&&e(this,h).value&&B(this,y,st(e(this,c,f),e(this,h).value,()=>{(async()=>{if(e(this,c,f)&&e(this,h).value){const{x:t,y:i,placement:r}=await at(e(this,c,f),e(this,h).value,{placement:this.placement,middleware:[rt({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*16}),nt()]});e(this,h).value.dataset.placement=r,Object.assign(e(this,h).value.style,{left:`${t}px`,top:`${i}px`})}})()}))},c=new WeakSet,f=function(){return e(this,v).value?.assignedElements().at(0)},d.shadowRootOptions={...V.shadowRootOptions,mode:"closed"},d.styles=pt,g([I({reflect:!0,type:Boolean})],d.prototype,"open",1),g([I({reflect:!0})],d.prototype,"placement",2),g([I({reflect:!0})],d.prototype,"size",2),d=g([ct("glide-core-menu")],d);export{d as default};
+var __decorate=this&&this.__decorate||function(e,t,i,n){var o,s=arguments.length,a=s<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,n);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(a=(s<3?o(a):s>3?o(t,i,a):o(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};import{LitElement,html}from"lit";import{autoUpdate,computePosition,flip,offset}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{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import styles from"./menu.styles.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.size="large",this.ariaActivedescendant="",this.isTargetDisabled=!1,this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#n=!1,this.#o=createRef(),this.#s=createRef(),this.#a=e=>{e.target&&this.contains(e.target)||(this.open=!1,this.ariaActivedescendant="")}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get open(){return this.#n}set open(e){this.#n=e,e&&!this.isTargetDisabled?(this.#l(),this.ariaActivedescendant=this.activeOption?.id??""):(this.#r?.(),this.ariaActivedescendant=""),this.#c&&(this.#c.ariaExpanded=e&&!this.isTargetDisabled?"true":"false")}get activeOption(){return this.#d?.find((({privateActive:e})=>e))}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#a,{capture:!0})}createRenderRoot(){return this.#p=super.createRenderRoot(),this.#p}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#a,{capture:!0})}firstUpdated(){owSlot(this.#t.value),owSlot(this.#s.value),owSlotType(this.#t.value,[GlideCoreMenuButton,GlideCoreMenuLink,Text]);const e=this.#d.at(0);this.open&&e&&(this.#l(),e.privateActive=!0,this.ariaActivedescendant=e.id)}focus(){this.#c&&"focus"in this.#c&&this.#c?.focus()}render(){return html`<div class="component" @focusout="${this.#h}" ${ref(this.#e)}><div class="container" id="container"><slot name="target" @click="${this.#u}" @keydown="${this.#m}" @slotchange="${this.#f}" ${ref(this.#s)}></slot></div><div aria-activedescendant="${this.ariaActivedescendant}" aria-labelledby="container" class="${classMap({menu:!0,large:"large"===this.size,small:"small"===this.size,visible:this.open&&!this.isTargetDisabled})}" data-test="menu" role="menu" tabindex="-1" ${ref(this.#o)}><slot @click="${this.#v}" @focusin="${this.#g}" @keydown="${this.#m}" @mouseover="${this.#E}" @slotchange="${this.#y}" ${ref(this.#t)}></slot></div></div>`}#r;#e;#t;#i;#n;#o;#p;#s;#a;#y(){owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuButton,GlideCoreMenuLink,Text]);const e=this.#d.at(0);e&&(e.privateActive=!0)}#v(){this.open=!1,this.ariaActivedescendant=""}#g(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.activeOption&&(this.activeOption.privateActive=!1,e.target.privateActive=!0,this.ariaActivedescendant=e.target.id)}#E(e){if(e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton){for(const t of this.#d)t.privateActive=t===e.target;this.ariaActivedescendant=e.target.id}}#h(e){const t=e.relatedTarget instanceof HTMLElement&&this.#p?.contains(e.relatedTarget),i=e.relatedTarget instanceof HTMLElement&&this.contains(e.relatedTarget);t||i||(this.open=!1)}#m(e){if([" ","Enter","Escape"].includes(e.key)&&this.open)return this.open=!1,this.ariaActivedescendant="",this.focus(),void(this.#i=!0);if([" ","ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.activeOption)return e.preventDefault(),this.open=!0,void(this.ariaActivedescendant=this.activeOption.id);if(this.open&&this.activeOption){const t=this.#d.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#d.at(t-1);return void(i&&0!==t&&(this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#d.at(t+1);return void(i&&(this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=this.#d.at(0);return void(t&&(this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=this.#d.at(-1);return void(t&&(this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,t.privateActive=!0))}}}#f(){owSlot(this.#s.value);const e=this.#c&&"disabled"in this.#c&&this.#c.disabled,t=this.#c&&"true"===this.#c.ariaDisabled;this.isTargetDisabled=Boolean(e)||Boolean(t),this.#c&&this.#o.value&&(this.#c.ariaHasPopup="true",this.#c.ariaExpanded=this.open&&!this.isTargetDisabled?"true":"false")}#u(){this.isTargetDisabled||this.#i?this.#i=!1:(this.#c instanceof HTMLElement&&(this.#c.ariaExpanded=this.open?"true":"false"),this.open=!this.open,this.open&&this.activeOption?this.ariaActivedescendant=this.activeOption.id:this.open||(this.ariaActivedescendant="",this.focus()))}get#d(){return(this.#t.value?.assignedElements({flatten:!0})??[]).filter((e=>e instanceof GlideCoreMenuLink||e instanceof GlideCoreMenuButton))}#l(){this.#c&&this.#o.value&&(this.#r=autoUpdate(this.#c,this.#o.value,(()=>{(async()=>{if(this.#c&&this.#o.value){const{x:e,y:t,placement:i}=await computePosition(this.#c,this.#o.value,{placement:this.placement,middleware:[offset({mainAxis:16*Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))}),flip()]});this.#o.value.dataset.placement=i,Object.assign(this.#o.value.style,{left:`${e}px`,top:`${t}px`})}})()})))}get#c(){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",void 0),__decorate([state()],GlideCoreMenu.prototype,"ariaActivedescendant",void 0),__decorate([state()],GlideCoreMenu.prototype,"isTargetDisabled",void 0),GlideCoreMenu=__decorate([customElement("glide-core-menu")],GlideCoreMenu);export default GlideCoreMenu;

package/dist/menu.link.d.ts

@@ -16,7 +16,6 @@ export default class GlideCoreMenuLink extends LitElement {
     label?: string;
     url?: string;
     privateActive: boolean;
-    privateIsFocused: boolean;
-    focus(): void;
+    connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/menu.link.js

@@ -1 +1 @@
-"use strict";var F=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var a=(e,t,o,c)=>{for(var r=c>1?void 0:c?R(t,o):t,f=e.length-1,n;f>=0;f--)(n=e[f])&&(r=(c?n(t,o,r):n(r))||r);return c&&r&&F(t,o,r),r};var d=(e,t,o)=>{if(!t.has(e))throw TypeError("Cannot "+o)};var u=(e,t,o)=>(d(e,t,"read from private field"),o?o.call(e):t.get(e)),m=(e,t,o)=>{if(t.has(e))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(e):t.set(e,o)};var h=(e,t,o)=>(d(e,t,"access private method"),o);var i,l,g,p,E;import{LitElement as $,html as b}from"lit";import{classMap as y}from"lit/directives/class-map.js";import{createRef as I,ref as w}from"lit/directives/ref.js";import{customElement as x,property as v}from"lit/decorators.js";import{ifDefined as A}from"lit/directives/if-defined.js";import T from"./menu.link.styles.js";let s=class extends ${constructor(){super(...arguments);m(this,l);m(this,p);this.privateActive=!1;this.privateIsFocused=!1;m(this,i,I())}focus(){u(this,i).value?.focus()}render(){return b`<a class="${y({component:!0,"component-active":this.privateActive})}" data-test="component" href="${A(this.url)}" role="menuitem" tabindex="${this.privateActive?"0":"-1"}" @focusin="${h(this,l,g)}" @focusout="${h(this,p,E)}" ${w(u(this,i))}><slot name="icon"></slot>${this.label}</a>`}};i=new WeakMap,l=new WeakSet,g=function(){this.privateIsFocused=!0},p=new WeakSet,E=function(){this.privateIsFocused=!1},s.shadowRootOptions={...$.shadowRootOptions,mode:"closed"},s.styles=T,a([v({reflect:!0})],s.prototype,"label",2),a([v({reflect:!0})],s.prototype,"url",2),a([v({type:Boolean})],s.prototype,"privateActive",2),s=a([x("glide-core-menu-link")],s);export{s as default};
+var __decorate=this&&this.__decorate||function(e,t,o,i){var r,n=arguments.length,l=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(l=(n<3?r(l):n>3?r(t,o,l):r(t,o))||l);return n>3&&l&&Object.defineProperty(t,o,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 styles from"./menu.link.styles.js";let GlideCoreMenuLink=class GlideCoreMenuLink extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.#e=window.crypto.randomUUID()}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;

package/dist/menu.link.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"lit";export default[e`
+import{css}from"lit";export default[css`
     .component {
       align-items: center;
       background-color: transparent;
@@ -15,8 +15,8 @@
       text-decoration: none;
       user-select: none;
 
-      &.component-active {
+      &.active {
         background-color: var(--glide-core-surface-hover);
       }
     }
-  `];
+  `];

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

@@ -0,0 +1,46 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreMenuLink from './menu.link.js';
+GlideCoreMenuLink.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-menu-link')).to.equal(GlideCoreMenuLink);
+});
+it('has defaults', async () => {
+    // Required attributes are supplied and not asserted below. The idea is that
+    // this test shouldn't fail to typecheck if these templates are eventually
+    // typechecked, which means supplying required attributes up front.
+    const component = await fixture(html `<glide-core-menu-link label="Label" url="/"></glide-core-menu-link>`);
+    // Not reflected. So no attribute assertions are necessary.
+    expect(component.privateActive).to.be.false;
+});
+it('can have a label', async () => {
+    const component = await fixture(html `<glide-core-menu-link label="Label" url="/"></glide-core-menu-link>`);
+    expect(component.shadowRoot?.textContent?.trim()).to.equal('Label');
+});
+it('can have a URL', async () => {
+    const component = await fixture(html `<glide-core-menu-link label="Label" url="/"></glide-core-menu-link>`);
+    expect(component.url).to.equal('/');
+});
+it('can have an icon', async () => {
+    const component = await fixture(html `<glide-core-menu-link label="Label">
+      <svg
+        slot="icon"
+        width="16"
+        height="16"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
+        />
+      </svg>
+    </glide-core-menu-link>`);
+    const icon = component?.shadowRoot
+        ?.querySelector('slot[name="icon"]')
+        ?.assignedElements()
+        .at(0);
+    expect(icon instanceof Element).to.be.true;
+});

package/dist/menu.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as i}from"lit";export default[i`
+import{css}from"lit";export default[css`
     :host {
       /* Contains elements with "padding", "margin", and "width". Inline by default. */
       display: inline-block;
@@ -9,14 +9,14 @@
       display: flex;
     }
 
-    .target-container {
+    .container {
       display: flex;
       position: relative;
     }
 
-    .options {
-      background-color: var(--glide-core-surface-base-lighter);
-      border: 1px solid var(--glide-core-border-base-lighter);
+    .menu {
+      background-color: var(--glide-core-surface-modal);
+      border: 1px solid var(--glide-core-surface-modal);
       border-radius: var(--glide-core-spacing-xs);
       box-shadow: var(--glide-core-shadow-lg);
       box-sizing: border-box;
@@ -29,6 +29,13 @@
       position: absolute;
       visibility: hidden;
 
+      /*
+        ".container" is relative and many Menus may be stacked in a column.
+        This ensures the ".menu" of Menus earlier in the column aren't obscured
+        by the ".target-container" that come later.
+      */
+      z-index: 1;
+
       &.visible {
         visibility: visible;
       }
@@ -58,4 +65,4 @@
         line-height: var(--glide-core-body-xs-line-height);
       }
     }
-  `];
+  `];