@lion/ui 0.16.0 → 0.17.0-menu-system.0

package/components/input-datepicker/src/LionInputDatepicker.js

@@ -274,8 +274,12 @@ export class LionInputDatepicker extends ScopedElementsMixin(
         type="button"
         @click="${this.__openCalendarOverlay}"
         id="${this.__invokerId}"
-        aria-label="${this.msgLit('lion-input-datepicker:openDatepickerLabel')}"
-        title="${this.msgLit('lion-input-datepicker:openDatepickerLabel')}"
+        aria-label="${this.msgLit('lion-input-datepicker:openDatepickerLabel', {
+          fieldName: this.fieldName || 'date',
+        })}"
+        title="${this.msgLit('lion-input-datepicker:openDatepickerLabel', {
+          fieldName: this.fieldName || 'date',
+        })}"
       >
         ${this._invokerIconTemplate()}
       </button>

package/components/input-datepicker/src/localizeNamespaceLoader.js

@@ -6,6 +6,7 @@ async function combineLocalizeImports(importPromises) {
   const combinedResult = localizeObjects[0];
   for (const localizeObject of localizeObjects.slice(1)) {
     Object.entries(localizeObject.default).forEach(([key, val]) => {
+      // @ts-ignore - dynamic property access
       combinedResult.default[key] = val;
     });
   }

package/components/input-datepicker/test/lion-input-datepicker.test.js

@@ -538,8 +538,8 @@ describe('<lion-input-datepicker>', () => {
       const elObj = new DatepickerInputObject(el);
       await elObj.openCalendar();
 
-      expect(elObj.invokerEl.getAttribute('title')).to.equal('Open date picker');
-      expect(elObj.invokerEl.getAttribute('aria-label')).to.equal('Open date picker');
+      expect(elObj.invokerEl.getAttribute('title')).to.equal('Open "date" picker');
+      expect(elObj.invokerEl.getAttribute('aria-label')).to.equal('Open "date" picker');
     });
 
     it('adds [aria-expanded] to invoker button', async () => {
@@ -590,6 +590,21 @@ describe('<lion-input-datepicker>', () => {
       await expect(elObj.calendarEl).to.be.accessible();
       elObj.overlayCloseButtonEl.click();
     });
+
+    it('have different aria-label when multiple invoker', async () => {
+      const el = await fixture(html`
+        <lion-input-datepicker label="Start date" name="startDate"></lion-input-datepicker>
+        <lion-input-datepicker label="End date" name="endDate"></lion-input-datepicker>
+      `);
+
+      const elements = el.parentElement?.children;
+      // @ts-ignore - accessing by name property
+      const startLabel = elements?.startDate?.querySelector('button')?.ariaLabel;
+      // @ts-ignore - accessing by name property
+      const endLabel = elements?.endDate?.querySelector('button')?.ariaLabel;
+
+      expect(startLabel).to.not.equal(endLabel);
+    });
   });
 
   describe.skip('Subclassers', () => {

package/components/input-datepicker/translations/bg.js

@@ -1,3 +1,3 @@
 export default {
-  openDatepickerLabel: 'Избор на отворена дата',
+  openDatepickerLabel: 'Отворете "{fieldName}" избор',
 };

package/components/input-datepicker/translations/cs.js

@@ -1,3 +1,3 @@
 export default {
-  openDatepickerLabel: 'Otevřete pro výběr data',
+  openDatepickerLabel: 'Otevřít výběr "{fieldName}"',
 };

package/components/input-datepicker/translations/de.js

@@ -1,3 +1,3 @@
 export default {
-  openDatepickerLabel: 'Datumswähler öffnen',
+  openDatepickerLabel: '"{fieldName}"-Wähler öffnen',
 };

package/components/input-datepicker/translations/en.js

@@ -1,3 +1,3 @@
 export default {
-  openDatepickerLabel: 'Open date picker',
+  openDatepickerLabel: 'Open "{fieldName}" picker',
 };

package/components/input-datepicker/translations/es.js

@@ -1,3 +1,3 @@
 export default {
-  openDatepickerLabel: 'Abrir selector de fecha',
+  openDatepickerLabel: 'Abrir selector "{fieldName}"',
 };

package/components/input-datepicker/translations/fr.js

@@ -1,3 +1,3 @@
 export default {
-  openDatepickerLabel: 'Ouvrir le sélecteur de dates',
+  openDatepickerLabel: 'Ouvrir le sélecteur "{fieldName}"',
 };

package/components/input-datepicker/translations/hu.js

@@ -1,3 +1,3 @@
 export default {
-  openDatepickerLabel: 'Dátumválasztó megnyitása',
+  openDatepickerLabel: 'Megnyitás "{fieldName}" választóhoz',
 };

package/components/input-datepicker/translations/it.js

@@ -1,3 +1,3 @@
 export default {
-  openDatepickerLabel: 'Raccoglitore di data aperta',
+  openDatepickerLabel: 'Apri il selettore "{fieldName}"',
 };

package/components/input-datepicker/translations/nl.js

@@ -1,3 +1,3 @@
 export default {
-  openDatepickerLabel: 'Open kalender',
+  openDatepickerLabel: 'Open "{fieldName}" kiezer',
 };

package/components/input-datepicker/translations/pl.js

@@ -1,3 +1,3 @@
 export default {
-  openDatepickerLabel: 'Otwórz pole daty',
+  openDatepickerLabel: 'Otwórz selektor "{fieldName}"',
 };

package/components/input-datepicker/translations/ro.js

@@ -1,3 +1,3 @@
 export default {
-  openDatepickerLabel: 'Deschidere selector dată',
+  openDatepickerLabel: 'Deschideți selectorul "{fieldName}"',
 };

package/components/input-datepicker/translations/ru.js

@@ -1,3 +1,3 @@
 export default {
-  openDatepickerLabel: 'Открыть модуль выбора даты',
+  openDatepickerLabel: 'Открыть выбор "{fieldName}"',
 };

package/components/input-datepicker/translations/sk.js

@@ -1,3 +1,3 @@
 export default {
-  openDatepickerLabel: 'Otvoriť nástroj na výber dátumu',
+  openDatepickerLabel: 'Otvoriť výber "{fieldName}"',
 };

package/components/input-datepicker/translations/tr.js

@@ -1,3 +1,3 @@
 export default {
-  openDatepickerLabel: 'Tarih seçimini aç',
+  openDatepickerLabel: '"{fieldName}" seçiciyi açın',
 };

package/components/input-datepicker/translations/uk.js

@@ -1,3 +1,3 @@
 export default {
-  openDatepickerLabel: 'Відкрити модуль вибору дати',
+  openDatepickerLabel: 'Відкрити вибір "{fieldName}"',
 };

package/components/input-datepicker/translations/zh.js

@@ -1,3 +1,3 @@
 export default {
-  openDatepickerLabel: '打开日期选择器',
+  openDatepickerLabel: '打开"{fieldName}"选择器',
 };

package/components/input-stepper/src/LionInputStepper.js

@@ -1,7 +1,7 @@
-import { html, css, render, nothing } from 'lit';
-import { formatNumber, LocalizeMixin, parseNumber } from '@lion/ui/localize-no-side-effects.js';
+import { IsNumber, MaxNumber, MinNumber } from '@lion/ui/form-core.js';
 import { LionInput } from '@lion/ui/input.js';
-import { IsNumber, MinNumber, MaxNumber } from '@lion/ui/form-core.js';
+import { formatNumber, LocalizeMixin, parseNumber } from '@lion/ui/localize-no-side-effects.js';
+import { css, html, nothing, render } from 'lit';
 import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
 
 /**
@@ -280,9 +280,14 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
 
   /**
    * Increment the value based on given step or default step value is 1
+   * @param {Event} [ev] - Click event
    * @protected
    */
-  _increment() {
+  _increment(ev) {
+    if (this.disabled || this.readOnly) {
+      ev?.preventDefault();
+      return;
+    }
     const { step, min, max } = this.values;
     const stepMin = min !== Infinity ? min : 0;
     const epsilon = 1e-10; // Tolerance for floating-point comparison
@@ -309,9 +314,14 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
 
   /**
    * Decrement the value based on given step or default step value is 1
+   * @param {Event} [ev] - Click event
    * @protected
    */
-  _decrement() {
+  _decrement(ev) {
+    if (this.disabled || this.readOnly) {
+      ev?.preventDefault();
+      return;
+    }
     const { step, max, min } = this.values;
     const stepMin = min !== Infinity ? min : 0;
     const epsilon = 1e-10; // Tolerance for floating-point comparison
@@ -410,7 +420,6 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
   _decrementorTemplate() {
     return html`
       <button
-        ?disabled=${this.disabled || this.readOnly}
         @click=${this._decrement}
         type="button"
         aria-label="${this.msgLit('lion-input-stepper:decrease')} ${this.fieldName}"
@@ -428,7 +437,6 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
   _incrementorTemplate() {
     return html`
       <button
-        ?disabled=${this.disabled || this.readOnly}
         @click=${this._increment}
         type="button"
         aria-label="${this.msgLit('lion-input-stepper:increase')} ${this.fieldName}"

package/components/input-stepper/test-suites/lion-input-stepper.suite.js

@@ -1,14 +1,14 @@
+import { formatNumber } from '@lion/ui/localize-no-side-effects.js';
 import {
-  expect,
-  defineCE,
   fixture as _fixture,
+  defineCE,
+  expect,
+  html,
   nextFrame,
   unsafeStatic,
-  html,
 } from '@open-wc/testing';
 import { nothing } from 'lit';
 import sinon from 'sinon';
-import { formatNumber } from '@lion/ui/localize-no-side-effects.js';
 import { LionInputStepper } from '../src/LionInputStepper.js';
 
 /**
@@ -29,6 +29,14 @@ export function runInputStepperSuite(klass = LionInputStepper) {
     max="200"
     label="Label"
   ></${tag}>`;
+  const inputStepperReadOnly = html`<${tag}
+    step="10"
+    min="100"
+    max="200"
+    label="Label"
+    value="1"
+    readonly
+  ></${tag}>`;
 
   describe('InputStepper', async () => {
     describe('Stepper', () => {
@@ -104,6 +112,22 @@ export function runInputStepperSuite(klass = LionInputStepper) {
     });
 
     describe('User interaction', () => {
+      it('should NOT increment the value to 1 on [ArrowUp] when is readonly', async () => {
+        const el = await fixture(inputStepperReadOnly);
+        expect(el.value).to.equal('1');
+        el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
+        await el.updateComplete;
+        expect(el.value).to.equal('1');
+      });
+
+      it('should NOT decrement the value to -1 on [ArrowDown] when is readonly', async () => {
+        const el = await fixture(inputStepperReadOnly);
+        expect(el.value).to.equal('1');
+        el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+        await el.updateComplete;
+        expect(el.value).to.equal('1');
+      });
+
       it('should increment the value to 1 on [ArrowUp]', async () => {
         const el = await fixture(defaultInputStepper);
         expect(el.value).to.equal('');

package/components/localize/test/date/formatDate.test.js

@@ -210,6 +210,7 @@ describe('formatDate', () => {
           locale,
         };
         const parsedDate = /** @type {Date} */ (parseDate('12.10.2019'));
+        // @ts-ignore - dynamic locale key access
         expect(formatDate(parsedDate, options)).to.equal(LOCALE_FORMATTED_DATE_MAP[locale]);
       });
     });

package/components/menu/CHANGELOG.md

@@ -0,0 +1,37 @@
+Allow advanced preprocessing
+
+- Turn '1' into '01-__-____'
+- Turn ’20’ into ’20-’, -> ’20-4’ into ’20-04’ etc…
+
+See: https://nosir.github.io/cleave.js/(But we should enhance the UX when editing the middle of a date)So:
+
+```js
+/**  * @returns {string | { viewValue:string, caretIndex:number } } */
+preprocessor(viewValue, { previousViewValue = ‘’, currentCaretIndex }) {
+  const diff = viewValue.length - previousViewValue.length;
+  if (diff === -1) && !isNaN(Number(previousViewValue[currentCaretIndex]))) {
+    // don’t respond to delete actions
+    return viewValue;
+  }
+
+  let newValue = '';
+  const strippedVal = viewValue.replace('-', '');
+  let dashesPlaced = 0;
+  let newCaretIndex;
+  for (let i = 0; i < 10; i+= 1) {
+    if (i === 2 || i === 4) {
+      newValue += ‘-’;
+      dashesPlaced += 1;
+      }
+    else if (i < strippedVal.length + dashesPlaced) {
+      newValue += strippedVal[i];
+    } else {
+      newValue += ‘_’;
+      if (newCaretIndex === undefined) {
+        newCaretIndex = i;
+      }
+    }
+  }
+  return { viewValue: newValue, caretIndex: newCaretIndex };
+}
+```

package/components/menu/README.md

@@ -0,0 +1,335 @@
+# Menu
+
+A menu is a widget that offers a list of choices to the user, such as a set of actions or functions. A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a sub menu, or by invoking a command, such as Shift + F10 in Windows, that opens a context specific menu. When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
+
+A menu that is visually persistent is a menubar. A menubar is typically horizontal and is often used to create a menu bar similar to those found near the top of the window in many desktop applications, offering the user quick access to a consistent set of commands.
+
+A common convention for indicating that a menu item launches a dialog box is to append "…" (ellipsis) to the menu item label, e.g., "Save as …".
+
+> From [menu wai-aria best practices](https://www.w3.org/TR/wai-aria-practices/#menu)
+
+```js script
+import { html } from 'lit-html';
+import './lion-menu.js';
+import './lion-menu-overlay.js';
+import './lion-tree.js';
+import './lion-toolbar.js';
+import './lion-spinbutton.js';
+import { applyMenuDemoStyles } from './applyMenuDemoStyles.js';
+
+applyMenuDemoStyles();
+
+export default {
+  title: 'Navigation/Menu',
+};
+```
+
+```js preview-story
+export const menuButton = () => html`
+  <nav>
+    <button data-invoker>Open menu</button>
+    <lion-menu>
+      <div role="menuitem">Go to Definition</div>
+      <div role="menuitem">Go to Type Definition</div>
+      <div>
+        <div role="menuitem" data-invoker>Peek</div>
+        <lion-menu>
+          <div role="menuitem">Peek Call Hierarchy</div>
+          <div role="separator"></div>
+          <div role="menuitem">Peek Definition</div>
+        </lion-menu>
+      </div>
+      <div role="separator"></div>
+      <div role="menuitem">Find all References</div>
+    </lion-menu>
+  </nav>
+`;
+```
+
+```js preview-story
+export const menuButtonZ = () => html`
+  <nav>
+    <button data-invoker for="menu">Open menu</button>
+    <lion-menu id="menu">
+      <lion-menuitem> Go to Definition </lion-menuitem>
+      <lion-menuitem> Go to Type Definition </lion-menuitem>
+      <lion-menuitem>
+        <button slot="invoker">Peek</button>
+        <lion-menu>
+          <lion-menuitem type="radio"> Peek Call Hierarchy </lion-menuitem>
+          <div role="separator"></div>
+          <lion-menuitem type="radio"> Peek Definition </lion-menuitem>
+        </lion-menu>
+      </lion-menuitem>
+      <div role="separator"></div>
+      <lion-menuitem type="checkbox"> Find all References </lion-menuitem>
+    </lion-menu>
+  </nav>
+`;
+```
+
+## Groups, menuitemradios and menuitemcheckboxes
+
+From [wai aria menu fragment](https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-2/menubar-2.html)
+
+```js preview-story
+export const groups = () => html`
+  <lion-menu bar invoker-interaction="hover">
+    <div>
+      <div role="menuitem">Font</div>
+      <lion-menu-overlay aria-label="Font">
+        <div role="menuitemradio">Sans-serif</div>
+        <div role="menuitemradio">Serif</div>
+        <div role="menuitemradio">Monospace</div>
+        <div role="menuitemradio">Fantasy</div>
+      </lion-menu-overlay>
+    </div>
+    <div>
+      <div role="menuitem">Style/Color</div>
+      <lion-menu-overlay aria-label="Style/Color">
+        <div role="menuitemcheckbox" aria-checked="true">Bold</div>
+        <div role="menuitemcheckbox" aria-checked="true">Italic</div>
+        <div role="separator"></div>
+        <div role="group" aria-label="Text Color">
+          <div role="menuitemradio" aria-checked="false">Black</div>
+          <div role="menuitemradio" aria-checked="false">Blue</div>
+          <div role="menuitemradio" aria-checked="true">Red</div>
+          <div role="menuitemradio" aria-checked="false">Green</div>
+        </div>
+        <div role="separator"></div>
+        <div role="group" aria-label="Text Decoration">
+          <div role="menuitemradio" aria-checked="true">None</div>
+          <div role="menuitemradio" aria-checked="false">Overline</div>
+          <div role="menuitemradio" aria-checked="false">Line-through</div>
+          <div role="menuitemradio" aria-checked="false">Underline</div>
+        </div>
+      </lion-menu-overlay>
+    </div>
+  </lion-menu>
+`;
+```
+
+## Tree
+
+```js preview-story
+export const tree = () => html`
+  <lion-tree>
+    <div>
+      <div role="treeitem">Fruits</div>
+      <lion-tree>
+        <div role="treeitem">Peek Call Hierarchy</div>
+        <div role="treeitem">Peek Definition</div>
+      </lion-tree>
+    </div>
+    <div>
+      <div role="treeitem">Vegetables</div>
+      <lion-tree>
+        <div role="treeitem">Peek Call Hierarchy</div>
+        <div>
+          <div role="treeitem">Peek</div>
+          <lion-tree>
+            <div role="treeitem">Peek Call Hierarchy</div>
+            <div role="treeitem">Peek Definition</div>
+          </lion-tree>
+        </div>
+      </lion-tree>
+    </div>
+    <div>
+      <div role="treeitem">Grains</div>
+      <lion-tree>
+        <div role="treeitem">Peek Call Hierarchy</div>
+        <div role="treeitem">Peek Definition</div>
+      </lion-tree>
+    </div>
+  </lion-tree>
+`;
+```
+
+## Disclosure menu
+
+See https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-navigation.html
+
+```js preview-story
+export const disclosureMenu = () => html`
+ <nav aria-label="Mythical University">
+   <lion-menu bar>
+    <div role="listitem">
+      <button data-invoker>About</button>
+      <lion-menu>
+        <div role="listitem">
+          <a href="#mythical-page-content">Overview</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Administration</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Facts</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Campus Tours</a>
+        </div>
+      </ul>
+    </div>
+    <div role="listitem">
+      <button data-invoker>
+        Admissions
+      </button>
+      <lion-menu id="id_admissions_menu">
+        <div role="listitem">
+          <a href="#mythical-page-content">Apply</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Tuition</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Sign Up</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Visit</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Photo Tour</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Connect</a>
+        </div>
+      </ul>
+    </div>
+    <div role="listitem">
+      <button data-invoker>Academics</button>
+      <lion-menu>
+        <div role="listitem">
+          <a href="#mythical-page-content">Colleges & Schools</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Programs of Study</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Honors Programs</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Online Courses</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Course Explorer</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Register for Class</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Academic Calendar</a>
+        </div>
+        <div role="listitem">
+          <a href="#mythical-page-content">Transcripts</a>
+        </div>
+      </ul>
+    </div>
+  </ul>
+</nav>
+`;
+```
+
+## Toolbar
+
+From [wai aria toolbar](https://www.w3.org/TR/wai-aria-practices-1.2/examples/toolbar/toolbar.html)
+
+```js preview-story
+export const toolbar = () => html`
+  <lion-toolbar>
+    <div>
+      <button data-item title="bold" aria-label="Bold">
+        <span class="fas fa-bold" aria-hidden="true"></span>
+      </button>
+      <button data-item title="italic" aria-label="Italic">
+        <span class="fas fa-italic" aria-hidden="true"></span>
+      </button>
+      <button data-item title="underline" aria-label="Underline">
+        <span class="fas fa-underline" aria-hidden="true"></span>
+      </button>
+    </div>
+    <div role="separator"></div>
+    <div role="radiogroup" aria-label="Text Alignment">
+      <button data-item role="radio" aria-label="Text Align Left">
+        <span class="fas fa-align-left" aria-hidden="true"></span>
+      </button>
+      <button data-item role="radio" aria-label="Text Align Center">
+        <span class="fas fa-align-center" aria-hidden="true"></span>
+      </button>
+      <button data-item role="radio" aria-label="Text Align Right">
+        <span class="fas fa-align-right" aria-hidden="true"></span>
+      </button>
+    </div>
+    <div role="separator"></div>
+
+    <lion-spinbutton data-item now="20" min="12" max="40" unit="px"></lion-spinbutton>
+    <div role="separator"></div>
+
+    <div>
+      <div role="menuitem">Font</div>
+      <lion-menu-overlay aria-label="Font">
+        <div role="menuitemradio">Sans-serif</div>
+        <div role="menuitemradio">Serif</div>
+        <div role="menuitemradio">Monospace</div>
+        <div role="menuitemradio">Fantasy</div>
+      </lion-menu-overlay>
+    </div>
+    <div>
+      <div role="menuitem">Style/Color</div>
+      <lion-menu-overlay aria-label="Style/Color">
+        <div role="menuitemcheckbox" aria-checked="true">Bold</div>
+        <div role="menuitemcheckbox" aria-checked="true">Italic</div>
+        <div role="separator"></div>
+        <div role="group" aria-label="Text Color">
+          <div role="menuitemradio" aria-checked="false">Black</div>
+          <div role="menuitemradio" aria-checked="false">Blue</div>
+          <div role="menuitemradio" aria-checked="true">Red</div>
+          <div role="menuitemradio" aria-checked="false">Green</div>
+        </div>
+        <div role="separator"></div>
+        <div role="group" aria-label="Text Decoration">
+          <div role="menuitemradio" aria-checked="true">None</div>
+          <div role="menuitemradio" aria-checked="false">Overline</div>
+          <div role="menuitemradio" aria-checked="false">Line-through</div>
+          <div role="menuitemradio" aria-checked="false">Underline</div>
+        </div>
+      </lion-menu-overlay>
+    </div>
+  </lion-toolbar>
+`;
+```
+
+## Tree lion-item
+
+```js preview-storyb
+export const tree = () => html`
+  <lion-tree>
+    <lion-item>
+      <div>Fruits</div>
+      <lion-tree>
+        <lion-item>Peek Call Hierarchy</lion-item>
+        <lion-item>Peek Definition</lion-item>
+      </lion-tree>
+    </lion-item>
+    <lion-item>
+      <div>Vegetables</div>
+      <lion-tree>
+        <lion-item>Peek Call Hierarchy</lion-item>
+        <lion-item>
+          <div>Peek</div>
+          <lion-tree>
+            <lion-item>Peek Call Hierarchy</lion-item>
+            <lion-item>Peek Definition</lion-item>
+          </lion-tree>
+        </lion-item>
+      </lion-tree>
+    </lion-item>
+    <lion-item>
+      <div>Grains</div>
+      <lion-tree>
+        <lion-item>Peek Call Hierarchy</lion-item>
+        <lion-item>Peek Definition</lion-item>
+      </lion-tree>
+    </lion-item>
+  </lion-tree>
+`;
+```

package/components/menu/index.js

@@ -0,0 +1,2 @@
+export { LionMenu } from './src/LionMenu.js';
+export { InteractiveListMixin } from './src/InteractiveListMixin.js';

package/components/menu/lion-menu-overlay.js

@@ -0,0 +1,3 @@
+import { LionMenuOverlay } from './src/LionMenuOverlay.js';
+
+customElements.define('lion-menu-overlay', LionMenuOverlay);