@lion/ui 0.21.1-menu-system.0 → 0.22.0

package/docs/components/menu/src/DemoToolbar.js

@@ -1,101 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable import/no-relative-packages */
-import { LionMenu } from '@lion/ui/menu.js';
-import {
-  setChecked,
-  toggleChecked,
-} from '../../../../packages/ui/components/menu/src/utils/listItemInteractions.js';
-
-/**
- * @typedef {import('../../../../packages/ui/components/menu/types/InteractiveListMixinTypes.js').InteractiveListItemRole} InteractiveListItemRole
- */
-
-// @ts-ignore - class extension properties mismatch at the OverlayWithListInvokerMixin boundary
-export class DemoToolbar extends LionMenu {
-  constructor() {
-    super();
-
-    this._listRole = 'toolbar';
-    this.bar = true;
-  }
-
-  /**
-   * Allows groups ([role=radiogroup|checkboxgroup]) within one level.
-   * In case we deal with [role=checkbox], we treat it as multiple choice group
-   * @override InteractiveListMixin
-   * @param {number} index
-   */
-  setCheckedIndex(index) {
-    const item = this.listItems[index];
-    if (item) {
-      // @ts-ignore - InteractiveListItemRole type
-      const role = /** @type {InteractiveListItemRole} */ (item.getAttribute('role'));
-      let listItemsWithinGroup = this.listItems;
-      let multiple = this.multipleChoice;
-      if (role === 'radio' || role === 'checkbox') {
-        /**
-         * If index = 1 (radio 'Red'), closest group will be div[role=radiogroup]
-         * @example
-         * <demo-toolbar>
-         *   <div role="radiogroup" aria-label="Text Color">
-         *     <button role="radio" aria-checked="false">Blue</button>
-         *     <button role="radio" aria-checked="true">Red</button>
-         *     <button role="radio" aria-checked="false">Green</button>
-         *   </div>
-         *   <div role="separator"></div>
-         *   <div role="checkboxgroup" aria-label="Text Color">
-         *     <button role="checkbox" aria-checked="false">Blue</button>
-         *     <button role="checkbox" aria-checked="true">Red</button>
-         *     <button role="checkbox" aria-checked="false">Green</button>
-         *   </div>
-         * </demo-toolbar>
-         */
-        let closestGroup;
-        if (role === 'radio') {
-          closestGroup = item.closest('[role="radiogroup"]');
-        } else if (role === 'checkbox') {
-          closestGroup = item.closest('[role="checkboxgroup"]');
-        }
-
-        const group = closestGroup && this.contains(closestGroup) ? closestGroup : this;
-        listItemsWithinGroup = this.listItems.filter(listItem => group.contains(listItem));
-        multiple = role === 'checkbox';
-      }
-
-      if (!multiple) {
-        // Uncheck all
-        listItemsWithinGroup.forEach(listItem => {
-          setChecked(listItem, true);
-        });
-        setChecked(this.listItems[index]);
-      } else {
-        toggleChecked(this.listItems[index]);
-      }
-    }
-  }
-
-  /**
-   * @param {*} newItems
-   */
-  _initListItems(newItems) {
-    super._initListItems(newItems);
-
-    // @ts-ignore - forEach parameter
-    newItems.forEach(item => {
-      if (
-        item.getAttribute('role') === 'button' ||
-        (item.tagName === 'BUTTON' && !item.hasAttribute('role'))
-      ) {
-        const initialAriaPressed = item.getAttribute('aria-pressed');
-        item.setAttribute('aria-pressed', initialAriaPressed || 'false');
-
-        item.addEventListener('click', () => {
-          const ariaPressed = item.getAttribute('aria-pressed') === 'true';
-          item.setAttribute('aria-pressed', `${!ariaPressed}`);
-        });
-      }
-    });
-  }
-}
-
-customElements.define('demo-toolbar', DemoToolbar);

package/docs/components/menu/src/DemoTree.js

@@ -1,55 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable import/no-relative-packages */
-import { LitElement } from 'lit';
-import { MultiLevelListMixin } from '../../../../packages/ui/components/menu/src/MultiLevelListMixin.js';
-
-// @ts-ignore - class extension with mixin
-export class DemoTree extends MultiLevelListMixin(LitElement) {
-  constructor() {
-    super();
-
-    /** @configure InteractiveListMixin */
-    this._listRole = 'tree';
-    /** @configure InteractiveListMixin */
-    this._activateOnTypedChars = true;
-    /** @configure DisclosureMixin */
-    this.invokerInteraction = 'click';
-  }
-
-  /**
-   * @param {*} changedProperties
-   */
-  updated(changedProperties) {
-    super.updated(changedProperties);
-
-    if (changedProperties.has('level')) {
-      if (this.level > 1) {
-        this._listNode.setAttribute('role', 'group');
-      }
-      this.__setAriaLevelForListItems();
-    }
-  }
-
-  /**
-   * @param {*} newItems
-   */
-  _initListItems(newItems) {
-    // @ts-ignore - parameter types
-    super._initListItems(newItems);
-
-    this.__setAriaLevelForListItems();
-    // @ts-ignore - forEach parameters
-    newItems.forEach((item, index) => {
-      item.setAttribute('aria-posinset', `${index + 1}`);
-      item.setAttribute('aria-setsize', `${this.listItems.length}`);
-    });
-  }
-
-  __setAriaLevelForListItems() {
-    this.listItems.forEach(item => {
-      item.setAttribute?.('aria-level', `${this.level + 1}`);
-    });
-  }
-}
-
-customElements.define('demo-tree', DemoTree);

package/docs/components/menu/src/navigation-bar-types.js

@@ -1,41 +0,0 @@
-/**
- * @typedef {'mobile' | 'desktop'} NavBarResponsiveMode
- * Responsive mode for the navigation bar
- */
-
-/**
- * @typedef {Object} MenuItem
- * Navigation menu item
- * @property {string} [id] - Optional unique identifier
- * @property {string} title - Display title of the menu item
- * @property {string} [link] - URL for the menu item (for leaf items)
- * @property {MenuItem[]} [sub] - Submenu items (for parent items)
- */
-
-/**
- * @typedef {Object} CtaLink
- * Call-to-action link
- * @property {string} [id] - Optional unique identifier
- * @property {string} [href] - URL for the CTA
- * @property {string} [text] - Display text for the CTA
- * @property {string} [label] - Accessible label for the CTA
- */
-
-/**
- * @typedef {Object} Logo
- * Logo configuration for the navigation bar
- * @property {string} type - Logo type (e.g., 'ing')
- * @property {string} alt - Alternative text for the logo
- * @property {string} href - URL the logo links to
- * @property {string} [src] - Optional custom logo source URL
- */
-
-/**
- * @typedef {Object} LevelConfig
- * Configuration for a menu level
- * @property {boolean} [isBar] - Whether this level is displayed as a bar
- * @property {boolean} [hasFullWidthFlyout] - Whether this level has a full-width flyout
- * @property {object} [openableConfig] - Configuration for the openable overlay
- */
-
-export {};

package/docs/components/menu/use-cases.md

@@ -1,74 +0,0 @@
----
-title: 'Menu: Overview'
-parts:
-  - Menu
-  - Use Cases
-eleventyNavigation:
-  key: 'Menu: Use Cases'
-  order: 20
-  parent: Menu
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from 'lit';
-import '@lion/ui/define/lion-item.js';
-import '@lion/ui/define/lion-menu.js';
-import { applyMenuDemoStyles } from './applyMenuDemoStyles.js';
-
-applyMenuDemoStyles();
-```
-
-## Default
-
-```html preview-story
-<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>
-      <button role="menuitem" data-invoker>Peek</button>
-      <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>
-```
-
-## Overflow
-
-## Attributes & Properties
-
-### Bar
-
-By adding the `bar` attribute the orientation will be set to horizontal and the role will be set to menubar.
-
-```html preview-story
-<nav>
-  <lion-menu bar>
-    <div>
-      <a role="menuitem" data-invoker href="#home">home</a>
-    </div>
-    <div role="menuitem">Go to Definition</div>
-    <div role="menuitem">Go to Type Definition</div>
-    <div>
-      <button role="menuitem" data-invoker>Details</button>
-      <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>
-```

package/exports/define/lion-item.js

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

package/exports/define/lion-menu.js

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

package/exports/menu-test-suites.js

@@ -1,4 +0,0 @@
-/* eslint-disable import/no-relative-packages */
-export { runInteractiveListMixinSuite } from '../components/menu/test-suites/InteractiveListMixin.suite.js';
-export { runMultiLevelListMixinSuite } from '../components/menu/test-suites/MultiLevelListMixin.suite.js';
-export { runLionMenuInteractionsSuite } from '../components/menu/test-suites/LionMenuInteractions.suite.js';

package/exports/menu.js

@@ -1,3 +0,0 @@
-/* eslint-disable import/no-relative-packages */
-export { LionMenu } from '../components/menu/src/LionMenu.js';
-export { LionItem, LionMenuitem } from '../components/menu/src/InteractiveListMixin.js';

package/menu-test-suites.js

@@ -1,4 +0,0 @@
-/* eslint-disable import/no-relative-packages */
-export { runInteractiveListMixinSuite } from './components/menu/test-suites/InteractiveListMixin.suite.js';
-export { runMultiLevelListMixinSuite } from './components/menu/test-suites/MultiLevelListMixin.suite.js';
-export { runLionMenuInteractionsSuite } from './components/menu/test-suites/LionMenuInteractions.suite.js';

package/menu.js

@@ -1,3 +0,0 @@
-/* eslint-disable import/no-relative-packages */
-export { LionMenu } from './components/menu/src/LionMenu.js';
-export { LionItem, LionMenuitem } from './components/menu/src/InteractiveListMixin.js';