@crowdstrike/glide-core 0.9.0 → 0.9.2

package/dist/input.stories.d.ts

@@ -6,10 +6,6 @@ export default meta;
 export declare const Default: StoryObj;
 export declare const Password: StoryObj;
 export declare const WithError: StoryObj;
-export declare const Description: StoryObj;
-export declare const Readonly: StoryObj;
-export declare const Disabled: StoryObj;
-export declare const Placeholder: StoryObj;
 export declare const Clearable: StoryObj;
 export declare const SuffixIcon: StoryObj;
 export declare const PrefixIcon: StoryObj;

package/dist/input.styles.d.ts

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

package/dist/input.styles.js

@@ -1,115 +1,115 @@
-import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";export default css`
-  .meta {
-    column-gap: var(--glide-core-spacing-xs);
-    display: flex;
-    font-size: 0.75rem;
-    grid-column: 2;
-    justify-content: space-between;
-  }
-
-  .description {
-    display: block;
-  }
+import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
+    ${visuallyHidden(".character-count .hidden")}
+  `,css`
+    .meta {
+      column-gap: var(--glide-core-spacing-xs);
+      display: flex;
+      font-size: 0.75rem;
+      grid-column: 2;
+      justify-content: space-between;
+    }
 
-  .character-count {
-    &.error {
-      font-weight: var(--glide-core-font-weight-bold);
+    .description {
+      display: block;
     }
 
-    .hidden {
-      ${visuallyHidden};
+    .character-count {
+      &.error {
+        font-weight: var(--glide-core-font-weight-bold);
+      }
     }
-  }
 
-  .search-icon {
-    align-items: center;
-    display: flex;
-  }
+    .search-icon {
+      align-items: center;
+      display: flex;
+    }
 
-  .input-container {
-    align-items: center;
-    background-color: var(--glide-core-surface-base-lighter);
-    block-size: 2.125rem;
-    border: 1px solid var(--glide-core-border-base-light);
-    border-radius: var(--glide-core-spacing-xs);
-    box-sizing: border-box;
-    color: var(--glide-core-text-body-1);
-    display: flex;
-    gap: var(--glide-core-spacing-xxs);
-    line-height: var(--glide-core-body-xs-line-height);
-    padding-inline: var(--glide-core-spacing-sm);
+    .input-container {
+      align-items: center;
+      background-color: var(--glide-core-surface-base-lighter);
+      block-size: 2.125rem;
+      border: 1px solid var(--glide-core-border-base);
+      border-radius: var(--glide-core-spacing-xs);
+      box-sizing: border-box;
+      color: var(--glide-core-text-body-1);
+      display: flex;
+      gap: var(--glide-core-spacing-xxs);
+      line-height: var(--glide-core-body-xs-line-height);
+      padding-inline: var(--glide-core-spacing-sm);
 
-    &.error {
-      border-color: var(--glide-core-status-error);
-    }
+      &.focused,
+      &:hover {
+        border-color: var(--glide-core-border-focus);
+        transition: border-color 200ms ease-in-out;
+      }
 
-    &.focused:not(.error) {
-      border-color: var(--glide-core-border-focus);
-      transition: border-color 200ms ease-in-out;
-    }
+      &.error {
+        border-color: var(--glide-core-status-error);
+      }
 
-    /* We had to resort to a class selector because there may be a bug in Chrome and Safari
+      /* We had to resort to a class selector because there may be a bug in Chrome and Safari
     * with ":read-only"
     * https://bugs.chromium.org/p/chromium/issues/detail?id=1519649
     */
-    &.readonly {
-      border: 1px solid transparent;
-      padding-inline-start: 0;
-    }
+      &.readonly {
+        border: 1px solid transparent;
+        padding-inline-start: 0;
+      }
 
-    &.disabled {
-      background-color: var(--glide-core-surface-disabled);
-      color: var(--glide-core-text-tertiary-disabled);
-    }
+      &.disabled {
+        background-color: var(--glide-core-surface-disabled);
+        border-color: var(--glide-core-border-base-light);
+        color: var(--glide-core-text-tertiary-disabled);
+      }
 
-    input {
-      background-color: transparent;
-      border: none;
-      color: inherit;
-      cursor: inherit;
-      font-family: var(--glide-core-font-sans);
-      font-size: var(--glide-core-body-sm-font-size);
-      font-weight: var(--glide-core-body-xs-font-weight);
-      inline-size: 100%;
-      min-inline-size: 0;
-      outline: none;
-      padding: 0;
+      input {
+        background-color: transparent;
+        border: none;
+        color: inherit;
+        cursor: inherit;
+        font-family: var(--glide-core-font-sans);
+        font-size: var(--glide-core-body-sm-font-size);
+        font-weight: var(--glide-core-body-xs-font-weight);
+        inline-size: 100%;
+        min-inline-size: 0;
+        outline: none;
+        padding: 0;
+
+        &::-webkit-search-decoration,
+        &::-webkit-search-cancel-button,
+        &::-webkit-search-results-button,
+        &::-webkit-search-results-decoration {
+          appearance: none;
+        }
+      }
 
-      &::-webkit-search-decoration,
-      &::-webkit-search-cancel-button,
-      &::-webkit-search-results-button,
-      &::-webkit-search-results-decoration {
-        appearance: none;
+      .suffix {
+        align-items: center;
+        display: flex;
       }
     }
 
-    .suffix {
+    .clear-icon-button,
+    .password-toggle,
+    ::slotted([slot='suffix']) {
       align-items: center;
-      display: flex;
+      background: none;
+      border: none;
+      color: var(--glide-core-icon-default);
+      display: inline-flex;
+      justify-content: center;
+      padding: 0;
     }
-  }
-
-  .clear-icon-button,
-  .password-toggle,
-  ::slotted([slot='suffix']) {
-    align-items: center;
-    background: none;
-    border: none;
-    color: var(--glide-core-icon-default);
-    display: inline-flex;
-    justify-content: center;
-    padding: 0;
-  }
 
-  .clear-icon-button,
-  .password-toggle,
-  .search-icon,
-  ::slotted([slot='prefix']),
-  ::slotted([slot='suffix']) {
-    display: flex;
-  }
+    .clear-icon-button,
+    .password-toggle,
+    .search-icon,
+    ::slotted([slot='prefix']),
+    ::slotted([slot='suffix']) {
+      display: flex;
+    }
 
-  .empty .clear-icon-button {
-    visibility: hidden;
-  }
-`;
+    .empty .clear-icon-button {
+      visibility: hidden;
+    }
+  `];

package/dist/input.test.basics.js

@@ -7,43 +7,43 @@ it('registers', async () => {
     expect(window.customElements.get('glide-core-input')).to.equal(GlideCoreInput);
 });
 it('is accessible', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test" value="lorem"></glide-core-input>
   `);
-    await expect(element).to.be.accessible();
+    await expect(component).to.be.accessible();
 });
 it('accepts and contains "value" attribute', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test" value="lorem"></glide-core-input>
   `);
-    expect(element.value).to.equal('lorem');
+    expect(component.value).to.equal('lorem');
 });
 it('accepts disable attribute and disables the underlying input', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test" disabled></glide-core-input>
   `);
-    const inputElement = element.shadowRoot?.querySelector('input');
+    const inputElement = component.shadowRoot?.querySelector('input');
     expect(inputElement).to.exist;
     expect(inputElement?.hasAttribute('disabled')).to.be.true;
 });
 it('accepts readonly attribute and applies readonly to the underlying input', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test" readonly></glide-core-input>
   `);
-    const inputElement = element.shadowRoot?.querySelector('input');
+    const inputElement = component.shadowRoot?.querySelector('input');
     expect(inputElement).to.exist;
     expect(inputElement?.hasAttribute('readonly')).to.be.true;
 });
 it('accepts a type attribute', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test" type="number"></glide-core-input>
   `);
-    const inputElement = element.shadowRoot?.querySelector('input');
+    const inputElement = component.shadowRoot?.querySelector('input');
     expect(inputElement).to.exist;
     expect(inputElement?.getAttribute('type')).to.equal('number');
 });
 it('changes to type text when password is revealed', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input
       label="Test"
       value="password123"
@@ -51,89 +51,89 @@ it('changes to type text when password is revealed', async () => {
       password-toggle
     ></glide-core-input>
   `);
-    const inputElement = element.shadowRoot?.querySelector('input');
+    const inputElement = component.shadowRoot?.querySelector('input');
     expect(inputElement).to.exist;
     expect(inputElement?.getAttribute('type')).to.equal('password');
-    const passwordToggle = element.shadowRoot?.querySelector('[data-test="password-toggle"]');
+    const passwordToggle = component.shadowRoot?.querySelector('[data-test="password-toggle"]');
     passwordToggle?.click();
-    await element.updateComplete;
+    await component.updateComplete;
     expect(inputElement?.getAttribute('type')).to.equal('text');
 });
 it('shows search icon with type search', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test" type="search"></glide-core-input>
   `);
-    const inputElement = element.shadowRoot?.querySelector('input');
+    const inputElement = component.shadowRoot?.querySelector('input');
     expect(inputElement).to.exist;
     expect(inputElement?.getAttribute('type')).to.equal('search');
-    const searchIcon = element.shadowRoot?.querySelector('[data-test="search-icon"]');
+    const searchIcon = component.shadowRoot?.querySelector('[data-test="search-icon"]');
     expect(searchIcon).to.exist;
 });
 it('when using "focus() on input", the native input is focused', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test"></glide-core-input>
   `);
-    const inputElement = element.shadowRoot?.querySelector('input');
-    element.focus();
-    expect(document.activeElement).to.equal(element);
-    expect(element.shadowRoot?.activeElement).to.equal(inputElement);
+    const inputElement = component.shadowRoot?.querySelector('input');
+    component.focus();
+    expect(document.activeElement).to.equal(component);
+    expect(component.shadowRoot?.activeElement).to.equal(inputElement);
 });
 it('emits input events when text is changed and reports a value through the event target', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test"></glide-core-input>
   `);
     let inputEventCaught = false;
     let value = '';
-    element.addEventListener('input', (event) => {
+    component.addEventListener('input', (event) => {
         inputEventCaught = true;
         if (event.target instanceof GlideCoreInput) {
             value = event.target.value;
         }
     });
-    element.focus();
+    component.focus();
     await sendKeys({ type: 'testing' });
-    element.blur();
+    component.blur();
     expect(inputEventCaught).to.be.true;
     expect(value).to.be.equal('testing');
 });
 it('clearable attribute allows for a button which can clear input', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test" clearable></glide-core-input>
   `);
-    const clearButton = element.shadowRoot?.querySelector('[data-test="clear-button"]');
-    element.focus();
+    const clearButton = component.shadowRoot?.querySelector('[data-test="clear-button"]');
+    component.focus();
     await sendKeys({ type: 'testing' });
-    expect(element.value).to.be.equal('testing');
+    expect(component.value).to.be.equal('testing');
     clearButton?.click();
-    expect(element.value).to.be.equal('');
+    expect(component.value).to.be.equal('');
 });
 it('label correctly displays when provided as an attribute', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test label"></glide-core-input>
   `);
-    const labelElement = element?.shadowRoot?.querySelector('label');
+    const labelElement = component?.shadowRoot?.querySelector('label');
     const labelText = labelElement?.textContent?.trim();
     expect(labelText).to.be.equal('Test label');
 });
 it('displays a max character and current character count if maxlength is provided', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test label" maxlength="5"></glide-core-input>
   `);
-    const maxCharacterCountText = element.shadowRoot?.querySelector('[data-test="character-count-text"]');
+    const maxCharacterCountText = component.shadowRoot?.querySelector('[data-test="character-count-text"]');
     expect(maxCharacterCountText?.textContent?.trim()).to.equal('0/5');
 });
 it('displays visually hidden character count text for screenreaders', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test label" maxlength="5"></glide-core-input>
   `);
-    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
+    const maxCharacterCountAnnouncement = component.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
     expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 0 of 5');
 });
 it('does not render a character count when attribute `maxlength` is set less than than zero', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test label" maxlength="0"></glide-core-input>
   `);
-    const container = element.shadowRoot?.querySelector('[data-test="character-count-container"]');
+    const container = component.shadowRoot?.querySelector('[data-test="character-count-container"]');
     expect(container).to.be.null;
 });
 it('supports a "tooltip" slot', async () => {
@@ -146,25 +146,25 @@ it('supports a "tooltip" slot', async () => {
     expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
 });
 it('supports a "description" slot', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test">
       <div slot="description">Description</div>
     </glide-core-input>
   `);
-    const assignedElements = element.shadowRoot
+    const assignedElements = component.shadowRoot
         ?.querySelector('slot[name="description"]')
         ?.assignedElements();
     expect(assignedElements?.at(0)?.textContent).to.equal('Description');
 });
 it('supports a "prefix" icon slot', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test">
       <div slot="prefix">
         <span data-svg></span>
       </div>
     </glide-core-input>
   `);
-    const assignedElements = element.shadowRoot
+    const assignedElements = component.shadowRoot
         ?.querySelector('slot[name="prefix"]')
         ?.assignedElements();
     const slottedSvg = assignedElements
@@ -173,14 +173,14 @@ it('supports a "prefix" icon slot', async () => {
     expect(slottedSvg).to.exist;
 });
 it('supports a "suffix" icon slot', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-input label="Test">
       <div slot="suffix">
         <span data-svg></span>
       </div>
     </glide-core-input>
   `);
-    const assignedElements = element.shadowRoot
+    const assignedElements = component.shadowRoot
         ?.querySelector('slot[name="suffix"]')
         ?.assignedElements();
     const slottedSvg = assignedElements

package/dist/input.test.form.js

@@ -1,6 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './input.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreInput from './input.js';
+import sinon from 'sinon';
 it('can be reset to initial value', async () => {
     const form = document.createElement('form');
     const input = await fixture(html `<glide-core-input value="value"></glide-core-input>`, {
@@ -55,3 +58,17 @@ it('has no `formData` value when it has a value but without a `name`', async ()
     const formData = new FormData(form);
     expect(formData.get('name')).to.be.null;
 });
+it('submits its form on Enter', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-input value="value"></glide-core-input>`, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    form.addEventListener('submit', (event) => {
+        event.preventDefault();
+        spy();
+    });
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(spy.callCount).to.equal(1);
+});

package/dist/label.styles.js

@@ -1,6 +1,11 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
+    ${focusOutline(".optional-tooltip-target:focus-visible ")}
+    ${visuallyHidden(".tooltips-and-label.hidden")}
+  `,css`
     .component {
       &.horizontal {
+        --column-gap: var(--glide-core-spacing-sm);
+
         column-gap: var(--glide-core-spacing-sm);
         display: grid;
         grid-template-columns: auto minmax(min-content, 1fr);
@@ -16,7 +21,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
 
       &.middle {
-        grid-template-columns: 50% 50%;
+        grid-template-columns: calc(50% - var(--column-gap) / 2) calc(
+            50% - var(--column-gap) / 2
+          );
       }
 
       &.hidden-label {
@@ -30,13 +37,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       column-gap: var(--glide-core-spacing-xs);
       display: flex;
 
-      /* 
-        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" 
+      /*
+        Allows for an ellipsis on the label. See the linked comment for why it's "3ch"
         instead of "0".
 
+        - https://github.com/CrowdStrike/glide-core/pull/317#issuecomment-2297025365
         - 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;
 
@@ -44,10 +50,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       &.left {
         justify-content: flex-end;
       }
-
-      &.hidden {
-        ${visuallyHidden};
-      }
     }
 
     .optional-tooltip {
@@ -80,10 +82,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
       display: flex;
       padding: 0;
-
-      &:focus-visible {
-        ${focusOutline};
-      }
     }
 
     .label {

package/dist/library/localize.d.ts

@@ -18,4 +18,5 @@ export interface Translation extends DefaultTranslation {
     displayedCharacterCount: (current: number, maximum: number) => string;
     clearEntry: (label: string) => string;
     removeTag: (name: string) => string;
+    actionsFor: (label: string) => string;
 }

package/dist/library/localize.test.js

@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+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;
+};
+import { LitElement } from 'lit';
+import { LocalizeController } from './localize.js';
+import { customElement } from 'lit/decorators.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import en from '../translations/en.js';
+let GlideCoreMockComponent = class GlideCoreMockComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.localize = new LocalizeController(this);
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: 'closed',
+    }; }
+};
+GlideCoreMockComponent = __decorate([
+    customElement('mock-component')
+], GlideCoreMockComponent);
+it('can call any term from en translation if locale is Japanese', async () => {
+    const component = await fixture(
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    html `<mock-component></mock-component>`);
+    component.lang = 'ja';
+    expect(component.localize.lang()).to.equal('ja');
+    const keys = Object.keys(en);
+    for (const key of keys) {
+        expect(component.localize.term(key)).to.be.ok;
+    }
+});
+it('can call any term from en translation if locale is French', async () => {
+    const component = await fixture(html `<mock-component></mock-component>`);
+    component.lang = 'fr';
+    expect(component.localize.lang()).to.equal('fr');
+    const keys = Object.keys(en);
+    for (const key of keys) {
+        expect(component.localize.term(key)).to.be.ok;
+    }
+});

package/dist/menu.button.styles.js

@@ -11,6 +11,7 @@ import{css}from"lit";export default[css`
       inline-size: 100%;
       padding-block: var(--padding-block);
       padding-inline: var(--padding-inline);
+      transition: background-color 100ms ease-in-out;
       user-select: none;
 
       &.active {

package/dist/menu.js

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

package/dist/menu.link.styles.js

@@ -13,6 +13,7 @@ import{css}from"lit";export default[css`
       padding-block: var(--padding-block);
       padding-inline: var(--padding-inline);
       text-decoration: none;
+      transition: background-color 100ms ease-in-out;
       user-select: none;
 
       &.active {

package/dist/menu.styles.js

@@ -1,4 +1,6 @@
-import{css}from"lit";export default[css`
+import{css}from"lit";import menuOpeningAnimation from"./styles/menu-opening-animation.js";export default[css`
+    ${menuOpeningAnimation(".default-slot:popover-open")}
+  `,css`
     :host {
       /* Contains elements with "padding", "margin", and "width". Inline by default. */
       display: inline-block;