@crowdstrike/glide-core 0.5.1 → 0.6.0

package/dist/label.js

@@ -1 +1 @@
-"use strict";var O=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var r=(o,e,t,S)=>{for(var n=S>1?void 0:S?U(e,t):e,R=o.length-1,w;R>=0;R--)(w=o[R])&&(n=(S?w(e,t,n):w(n))||n);return S&&n&&O(e,t,n),n};var N=(o,e,t)=>{if(!e.has(o))throw TypeError("Cannot "+t)};var i=(o,e,t)=>(N(o,e,"read from private field"),t?t.call(o):e.get(o)),l=(o,e,t)=>{if(e.has(o))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(o):e.set(o,t)};var h=(o,e,t)=>(N(o,e,"access private method"),t);var c,d,v,f,g,y,k,E,D,T,z,b,q,M,I;import"./tooltip.js";import{LitElement as x,html as H}from"lit";import{classMap as a}from"lit/directives/class-map.js";import{createRef as m,ref as p}from"lit/directives/ref.js";import{customElement as j,property as u,state as B}from"lit/decorators.js";import{owSlot as $}from"./library/ow.js";import A from"./label.styles.js";import{svg as F}from"lit/static-html.js";const J=F`<svg aria-label="More information" width="16" height="16" viewBox="0 0 24 24" fill="none"><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"/></svg>`;let s=class extends x{constructor(){super(...arguments);l(this,y);l(this,E);l(this,T);l(this,b);l(this,M);this.disabled=!1;this.error=!1;this.hide=!1;this.orientation="horizontal";this.required=!1;this.hasDescriptionSlot=!1;this.hasSummarySlot=!1;this.hasTooltipSlot=!1;l(this,c,m());l(this,d,m());l(this,v,m());l(this,f,m());l(this,g,m())}firstUpdated(){$(i(this,d).value),$(i(this,c).value)}render(){return H`<div class="${a({component:!0,horizontal:this.orientation==="horizontal",vertical:this.orientation==="vertical","hidden-label":this.hide})}"><div class="${a({"tooltip-and-label":!0,hidden:this.hide})}" part="tooltip-and-label-container"><div class="tooltip-and-label"><glide-core-tooltip class="${a({tooltip:!0,vertical:this.orientation==="vertical",visible:this.hasTooltipSlot})}" placement="${this.orientation==="vertical"?"right":"bottom"}"><span class="tooltip-target" slot="target" tabindex="0">${J}</span><slot class="${a({tooltip:!0,visible:this.hasTooltipSlot})}" name="tooltip" @slotchange="${h(this,M,I)}" ${p(i(this,g))}></slot></glide-core-tooltip><div class="${a({label:!0,disabled:this.disabled})}" data-test="label"><slot @slotchange="${h(this,E,D)}" ${p(i(this,d))}></slot>${this.required?H`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div></div></div><div class="control-and-summary"><slot class="${a({control:!0,error:this.error,disabled:this.disabled,vertical:this.orientation==="vertical",summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" @slotchange="${h(this,y,k)}" ${p(i(this,c))}></slot><slot class="${a({summary:!0,error:this.error})}" name="summary" @slotchange="${h(this,b,q)}" ${p(i(this,f))}></slot></div><slot class="${a({description:!0,visible:this.hasDescriptionSlot,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" @slotchange="${h(this,T,z)}" ${p(i(this,v))}></slot></div>`}};c=new WeakMap,d=new WeakMap,v=new WeakMap,f=new WeakMap,g=new WeakMap,y=new WeakSet,k=function(){$(i(this,c).value)},E=new WeakSet,D=function(){$(i(this,d).value)},T=new WeakSet,z=function(){const t=i(this,v).value?.assignedNodes({flatten:!0});this.hasDescriptionSlot=!!(t&&t.length>0)},b=new WeakSet,q=function(){const t=i(this,f).value?.assignedNodes({flatten:!0});this.hasSummarySlot=!!(t&&t.length>0)},M=new WeakSet,I=function(){const t=i(this,g).value?.assignedNodes({flatten:!0});this.hasTooltipSlot=!!(t&&t.length>0)},s.shadowRootOptions={...x.shadowRootOptions,mode:"closed"},s.styles=A,r([u({reflect:!0,type:Boolean})],s.prototype,"disabled",2),r([u({reflect:!0,type:Boolean})],s.prototype,"error",2),r([u({reflect:!0,type:Boolean})],s.prototype,"hide",2),r([u({reflect:!0})],s.prototype,"orientation",2),r([u({reflect:!0,type:Boolean})],s.prototype,"required",2),r([B()],s.prototype,"hasDescriptionSlot",2),r([B()],s.prototype,"hasSummarySlot",2),r([B()],s.prototype,"hasTooltipSlot",2),s=r([j("glide-core-label")],s);export{s as default};
+var __decorate=this&&this.__decorate||function(t,e,o,l){var i,r=arguments.length,s=r<3?e:null===l?l=Object.getOwnPropertyDescriptor(e,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,l);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(s=(r<3?i(s):r>3?i(e,o,s):i(e,o))||s);return r>3&&s&&Object.defineProperty(e,o,s),s};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{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.#t=createRef(),this.#e=createRef(),this.#o=createRef(),this.#l=new LocalizeController(this),this.#i=createRef(),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value),owSlot(this.#t.value)}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,"hidden-label":this.hide})}"><div class="${classMap({"tooltip-and-label":!0,hidden:this.hide})}" part="tooltip-and-label-container"><div class="tooltip-and-label"><glide-core-tooltip class="${classMap({tooltip:!0,vertical:"vertical"===this.orientation,visible:this.hasTooltipSlot})}" placement="${"vertical"===this.orientation?"right":"bottom"}"><span class="tooltip-target" slot="target" tabindex="0"><svg aria-label="${this.#l.term("moreInformation")}" width="16" height="16" viewBox="0 0 24 24" fill="none">${infoCircleIcon}</svg></span><slot class="${classMap({tooltip:!0,visible:this.hasTooltipSlot})}" name="tooltip" @slotchange="${this.#s}" ${ref(this.#r)}></slot></glide-core-tooltip><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label"><slot @slotchange="${this.#a}" ${ref(this.#e)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div></div></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.#n}" ${ref(this.#t)}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#c}" ${ref(this.#i)}></slot></div><slot class="${classMap({description:!0,visible:this.hasDescriptionSlot,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" @slotchange="${this.#d}" ${ref(this.#o)}></slot></div>`}#t;#e;#o;#l;#i;#r;#n(){owSlot(this.#t.value)}#a(){owSlot(this.#e.value)}#d(){const t=this.#o.value?.assignedNodes({flatten:!0});this.hasDescriptionSlot=Boolean(t&&t.length>0)}#c(){const t=this.#i.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(t&&t.length>0)}#s(){const t=this.#r.value?.assignedNodes({flatten:!0});this.hasTooltipSlot=Boolean(t&&t.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([state()],GlideCoreLabel.prototype,"hasDescriptionSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasTooltipSlot",void 0),GlideCoreLabel=__decorate([customElement("glide-core-label")],GlideCoreLabel);export default GlideCoreLabel;

package/dist/label.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"lit";import o from"./styles/visually-hidden.js";export default[e`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
     .component {
       &.horizontal {
         column-gap: var(--glide-core-spacing-sm);
@@ -29,7 +29,7 @@
       display: flex;
 
       &.hidden {
-        ${o};
+        ${visuallyHidden};
       }
     }
 
@@ -52,23 +52,21 @@
     .tooltip-target {
       background-color: transparent;
       border: none;
-
-      /* TODO
-We want the focus outline to wrap neatly around the trigger. Tooltip should
-probably wrap its default slot in a SPAN with "tabindex=0" and include the
-below styles so every consumer doesn't have to.
-*/
-      border-radius: 50%;
+      border-radius: 0.0625rem;
       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;
-      outline-offset: 1px;
       padding: 0;
+
+      &:focus-visible {
+        ${focusOutline};
+      }
     }
 
     .label {
@@ -151,4 +149,4 @@ make it difficult to center vertically with the label.
         display: block;
       }
     }
-  `];
+  `];

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/localize.d.ts

@@ -0,0 +1,17 @@
+import { LocalizeController as DefaultLocalizationController } from '@shoelace-style/localize';
+import type { Translation as DefaultTranslation } from '@shoelace-style/localize';
+export declare class LocalizeController extends DefaultLocalizationController<Translation> {
+}
+export interface Translation extends DefaultTranslation {
+    $code: string;
+    $name: string;
+    $dir: 'ltr' | 'rtl';
+    close: string;
+    dismiss: string;
+    open: string;
+    selectAll: string;
+    clearEntry: string;
+    moreInformation: string;
+    notifications: string;
+    removeTag: (name: string) => string;
+}

package/dist/library/localize.js

@@ -0,0 +1 @@
+import{LocalizeController as DefaultLocalizationController,registerTranslation}from"@shoelace-style/localize";import en from"../translations/en.js";import fr from"../translations/fr.js";import ja from"../translations/ja.js";export class LocalizeController extends DefaultLocalizationController{static{registerTranslation(en,ja,fr)}}

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/library/set-containing-block.d.ts

@@ -0,0 +1,15 @@
+interface Arguments {
+    elements: Element[];
+    containingBlock: Element;
+}
+/**
+ * Sets the containing block for all child elements that might contain
+ * floating-ui components (i.e. tooltips, popovers, or menus),
+ * for cases where the containing block element is inside a closed shadow DOM,
+ * and therefore wouldn't be able to be detected by floating-ui's getOffsetParent calculations.
+ * Necessary when the containing block has something like a backdrop-filter
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+ * https://github.com/floating-ui/floating-ui/issues/2955
+ */
+export declare function setContainingBlock({ elements, containingBlock }: Arguments): void;
+export {};

package/dist/library/set-containing-block.js

@@ -0,0 +1 @@
+import GlideCoreMenu from"../menu.js";import GlideCoreTooltip from"../tooltip.js";import GlideCoreTree from"../tree.js";export function setContainingBlock({elements:o,containingBlock:e}){const i=o.filter((o=>o instanceof GlideCoreTooltip||o instanceof GlideCoreMenu||o instanceof GlideCoreTree));for(const o of i)o.setContainingBlock(e)}

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

@@ -8,7 +8,7 @@ declare global {
 /**
  * @description A basic menu.
  *
- * @slot - One or more of <glide-core-menu-link> or <glide-core-menu-button>.
+ * @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,10 +18,15 @@ export default class GlideCoreMenu extends LitElement {
     get open(): boolean;
     set open(isOpen: boolean);
     placement: Placement;
-    size: 'small' | 'large';
+    containingBlock?: Element;
+    get size(): 'small' | 'large';
+    set size(size: 'small' | 'large');
     connectedCallback(): void;
+    createRenderRoot(): ShadowRoot;
     disconnectedCallback(): void;
     firstUpdated(): void;
     focus(): void;
     render(): import("lit").TemplateResult<1>;
+    setContainingBlock(containingBlock: Element): void;
+    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(t,e,i,o){var n,s=arguments.length,l=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,i,o);else for(var a=t.length-1;a>=0;a--)(n=t[a])&&(l=(s<3?n(l):s>3?n(e,i,l):n(e,i))||l);return s>3&&l&&Object.defineProperty(e,i,l),l};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{offsetParent}from"composed-offset-position";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import styles from"./menu.styles.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.isTargetDisabled=!1,this.#t=createRef(),this.#e=createRef(),this.#i=!1,this.#o=!1,this.#n="large",this.#s=createRef(),this.#l=t=>{t.target&&this.contains(t.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(t){this.#o=t,t&&!this.isTargetDisabled&&this.#a?(this.#r(),this.#a.ariaActivedescendant=this.#c?.id??""):this.#a&&(this.#p?.(),this.#a.ariaActivedescendant=""),this.#h&&(this.#h.ariaExpanded=t&&!this.isTargetDisabled?"true":"false")}get size(){return this.#n}set size(t){this.#n=t,this.#a&&(this.#a.privateSize=t)}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(){owSlot(this.#e.value),owSlot(this.#s.value),owSlotType(this.#e.value,[GlideCoreMenuOptions]);const t=this.#m?.at(0);this.open&&t&&this.#a&&(this.#r(),t.privateActive=!0,this.#a.ariaActivedescendant=t.id)}focus(){this.#h&&"focus"in this.#h&&this.#h?.focus()}render(){return html`<div class="component" @focusout="${this.#f}" ${ref(this.#t)}><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&&!this.isTargetDisabled})}" @click="${this.#v}" @focusin="${this.#S}" @keydown="${this.#E}" @mouseover="${this.#y}" @slotchange="${this.#C}" ${ref(this.#e)}></slot></div>`}setContainingBlock(t){this.containingBlock=t}#p;#t;#e;#i;#o;#d;#n;#s;get#c(){return this.#m?.find((({privateActive:t})=>t))}get#a(){const t=this.#e.value?.assignedElements().at(0);return t||null}#l;#C(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuOptions]);const t=this.#m?.at(0);t&&(t.privateActive=!0),this.#a&&(this.#a.privateSize=this.size)}#v(){this.open=!1,this.#a&&(this.#a.ariaActivedescendant="")}#S(t){(t.target instanceof GlideCoreMenuButton||t.target instanceof GlideCoreMenuLink)&&this.#c&&this.#a&&(this.#c.privateActive=!1,t.target.privateActive=!0,this.#a.ariaActivedescendant=t.target.id)}#y(t){if(t.target instanceof GlideCoreMenuLink||t.target instanceof GlideCoreMenuButton){if(this.#m)for(const e of this.#m)e.privateActive=e===t.target;this.#a&&(this.#a.ariaActivedescendant=t.target.id)}}#f(t){const e=t.relatedTarget instanceof HTMLElement&&this.#d?.contains(t.relatedTarget),i=t.relatedTarget instanceof HTMLElement&&this.contains(t.relatedTarget);e||i||(this.open=!1)}#E(t){if([" ","Enter","Escape"].includes(t.key)&&this.open&&this.#a)return this.open=!1,this.#a.ariaActivedescendant="",this.focus(),void(this.#i=!0);if([" ","ArrowUp","ArrowDown"].includes(t.key)&&!this.open&&this.#c&&this.#a)return t.preventDefault(),this.open=!0,void(this.#a.ariaActivedescendant=this.#c.id);if(this.open&&this.#c&&this.#m){const e=this.#m.indexOf(this.#c);if("ArrowUp"===t.key&&!t.metaKey){t.preventDefault();const i=this.#m?.at(e-1);return void(i&&0!==e&&this.#a&&(this.#c.privateActive=!1,this.#a.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===t.key&&!t.metaKey&&this.#a){t.preventDefault();const i=this.#m?.at(e+1);return void(i&&(this.#c.privateActive=!1,this.#a.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===t.key&&t.metaKey||"Home"===t.key||"PageUp"===t.key){t.preventDefault();const e=this.#m?.at(0);return void(e&&this.#a&&(this.#c.privateActive=!1,this.#a.ariaActivedescendant=e.id,e.privateActive=!0))}if("ArrowDown"===t.key&&t.metaKey||"End"===t.key||"PageDown"===t.key){t.preventDefault();const e=this.#m?.at(-1);return void(e&&this.#a&&(this.#c.privateActive=!1,this.#a.ariaActivedescendant=e.id,e.privateActive=!0))}}}#g(){owSlot(this.#s.value);const t=this.#h&&"disabled"in this.#h&&this.#h.disabled,e=this.#h&&"true"===this.#h.ariaDisabled;this.isTargetDisabled=Boolean(t)||Boolean(e),this.#h&&this.#a&&(this.#h.ariaHasPopup="true",this.#h.ariaExpanded=this.open&&!this.isTargetDisabled?"true":"false",this.#h.id=window.crypto.randomUUID(),this.#h.setAttribute("aria-controls",this.#a.id),this.#a.ariaLabelledby=this.#h.id)}#u(){this.isTargetDisabled||this.#i?this.#i=!1:(this.#h instanceof HTMLElement&&(this.#h.ariaExpanded=this.open?"true":"false"),this.open=!this.open,this.open&&this.#c&&this.#a?this.#a.ariaActivedescendant=this.#c.id:!this.open&&this.#a&&(this.#a.ariaActivedescendant="",this.focus()))}get#m(){const t=this.#e.value?.assignedElements()?.at(0)?.children;if(t)return[...t].filter((t=>t instanceof GlideCoreMenuLink||t instanceof GlideCoreMenuButton))}#r(){this.#h&&this.#e.value&&(this.#p=autoUpdate(this.#h,this.#e.value,(()=>{(async()=>{if(this.#h&&this.#e.value){const{x:t,y:e,placement:i}=await computePosition(this.#h,this.#e.value,{platform:{...platform,getOffsetParent:t=>this.containingBlock??platform.getOffsetParent(t,offsetParent)},placement:this.placement,middleware:[offset({mainAxis:16*Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))}),flip()]});this.#e.value.dataset.placement=i,Object.assign(this.#e.value.style,{left:`${t}px`,top:`${e}px`})}})()})))}get#h(){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;

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.options.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-menu-options': GlideCoreMenuOptions;
+    }
+}
+/**
+ * @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 {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    ariaActivedescendant: string;
+    ariaLabelledby: string;
+    privateSize: 'small' | 'large';
+    connectedCallback(): void;
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/menu.options.js

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

package/dist/menu.options.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;