@reliability-design/web 1.0.2

package/dist/components/rel-menu/rel-menu.stories.ts

@@ -0,0 +1,910 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import './rel-menu';
+import type { MenuItem } from './rel-menu';
+
+/**
+ * The Menu component provides a flexible dropdown menu system with multiple types.
+ * Built with Lit web components for framework-agnostic usage with full token support.
+ *
+ * ## Features
+ * - **3 Menu Types**: default, checkbox, arrow (with submenus)
+ * - **Keyboard Navigation**: Arrow keys, Enter, Escape support
+ * - **Submenu Support**: Nested menus for hierarchical navigation
+ * - **Interactive States**: Active, disabled, checked states
+ * - **Token-Based Styling**: Uses design system tokens
+ * - **Accessible**: ARIA roles and keyboard interactions
+ */
+const meta: Meta = {
+  title: 'Components/Menu',
+  tags: ['autodocs'],
+  component: 'rel-menu',
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['default', 'checkbox', 'arrow'],
+      description: 'Menu type',
+      table: {
+        defaultValue: { summary: 'default' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Default menu with selectable items
+ */
+export const Default: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'Profile', active: false },
+      { label: 'Settings', active: false },
+      { label: 'Dashboard', active: true },
+      { label: 'Logout', active: false },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'default';
+    menu.items = items;
+
+    menu.addEventListener('item-selected', (e: CustomEvent) => {
+      console.log('Item selected:', e.detail.item.label);
+    });
+
+    return menu;
+  },
+};
+
+/**
+ * Menu with checkboxes for multiple selections
+ */
+export const Checkbox: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'Show Grid', checked: true },
+      { label: 'Show Rulers', checked: false },
+      { label: 'Show Guides', checked: true },
+      { label: 'Snap to Grid', checked: false },
+      { label: 'Show Comments', checked: true, disabled: false },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'checkbox';
+    menu.items = items;
+
+    menu.addEventListener('item-checked', (e: CustomEvent) => {
+      console.log('Item checked:', e.detail.item.label, e.detail.checked);
+    });
+
+    return menu;
+  },
+};
+
+/**
+ * Menu with arrow indicators and submenus
+ */
+export const Arrow: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'New File', active: false },
+      {
+        label: 'Open Recent',
+        active: false,
+        submenu: [
+          { label: 'project-1.txt', active: false },
+          { label: 'notes.md', active: false },
+          { label: 'data.json', active: false },
+        ],
+      },
+      { label: 'Save', active: false },
+      {
+        label: 'Export',
+        active: false,
+        submenu: [
+          { label: 'PDF', active: false },
+          { label: 'PNG', active: false },
+          { label: 'SVG', active: false },
+          { label: 'HTML', active: false },
+        ],
+      },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'arrow';
+    menu.items = items;
+
+    menu.addEventListener('submenu-selected', (e: CustomEvent) => {
+      console.log('Submenu selected:', e.detail.parent.label, '→', e.detail.sub.label);
+    });
+
+    return menu;
+  },
+};
+
+/**
+ * Menu with disabled items
+ */
+export const WithDisabled: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'Cut', active: false, disabled: true },
+      { label: 'Copy', active: false },
+      { label: 'Paste', active: false, disabled: true },
+      { label: 'Delete', active: false },
+      { label: 'Select All', active: false },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'default';
+    menu.items = items;
+
+    return menu;
+  },
+};
+
+/**
+ * Checkbox menu with disabled options
+ */
+export const CheckboxWithDisabled: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'Notifications', checked: true },
+      { label: 'Email Updates', checked: false, disabled: true },
+      { label: 'SMS Alerts', checked: true },
+      { label: 'Push Notifications', checked: false },
+      { label: 'Desktop Alerts', checked: true, disabled: true },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'checkbox';
+    menu.items = items;
+
+    return menu;
+  },
+};
+
+/**
+ * Complex arrow menu with multiple levels
+ */
+export const ComplexArrow: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'Home', active: false },
+      {
+        label: 'Products',
+        active: false,
+        submenu: [
+          { label: 'Electronics', active: false },
+          { label: 'Clothing', active: false },
+          { label: 'Books', active: false },
+          { label: 'Toys', active: false },
+        ],
+      },
+      {
+        label: 'Services',
+        active: false,
+        submenu: [
+          { label: 'Consulting', active: false },
+          { label: 'Support', active: false },
+          { label: 'Training', active: false },
+        ],
+      },
+      { label: 'About', active: false },
+      { label: 'Contact', active: false },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'arrow';
+    menu.items = items;
+
+    return menu;
+  },
+};
+
+/**
+ * File menu example
+ */
+export const FileMenu: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'New', active: false },
+      { label: 'Open...', active: false },
+      {
+        label: 'Open Recent',
+        active: false,
+        submenu: [
+          { label: 'Document 1.txt', active: false },
+          { label: 'Presentation.pptx', active: false },
+          { label: 'Spreadsheet.xlsx', active: false },
+        ],
+      },
+      { label: 'Save', active: false },
+      { label: 'Save As...', active: false },
+      {
+        label: 'Export',
+        active: false,
+        submenu: [
+          { label: 'PDF Document', active: false },
+          { label: 'PNG Image', active: false },
+          { label: 'SVG Vector', active: false },
+        ],
+      },
+      { label: 'Print', active: false, disabled: true },
+      { label: 'Close', active: false },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'arrow';
+    menu.items = items;
+
+    return menu;
+  },
+};
+
+/**
+ * View options menu (checkbox)
+ */
+export const ViewMenu: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'Show Toolbar', checked: true },
+      { label: 'Show Sidebar', checked: true },
+      { label: 'Show Status Bar', checked: false },
+      { label: 'Show Minimap', checked: true },
+      { label: 'Show Breadcrumbs', checked: false },
+      { label: 'Show Line Numbers', checked: true },
+      { label: 'Word Wrap', checked: false },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'checkbox';
+    menu.items = items;
+
+    return menu;
+  },
+};
+
+/**
+ * User account menu
+ */
+export const UserMenu: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'My Profile', active: false },
+      { label: 'Account Settings', active: false },
+      {
+        label: 'Preferences',
+        active: false,
+        submenu: [
+          { label: 'Theme', active: false },
+          { label: 'Language', active: false },
+          { label: 'Privacy', active: false },
+        ],
+      },
+      { label: 'Billing', active: false },
+      { label: 'Help & Support', active: false },
+      { label: 'Sign Out', active: false },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'arrow';
+    menu.items = items;
+
+    return menu;
+  },
+};
+
+/**
+ * Keyboard navigation demo
+ */
+export const KeyboardNavigation: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <div style="background: var(--rel-colors-blue-tertiary); color: white; padding: 16px; border-radius: 8px;">
+        <strong>Keyboard Controls:</strong>
+        <ul style="margin: 8px 0 0; padding-left: 20px; font-size: 14px;">
+          <li>↑/↓ Arrow Keys: Navigate menu items</li>
+          <li>→ Arrow Key: Open submenu (arrow type)</li>
+          <li>← Arrow Key / Escape: Close submenu</li>
+          <li>Enter / Space: Select item</li>
+          <li>Tab: Focus menu</li>
+        </ul>
+      </div>
+      ${(() => {
+        const items: MenuItem[] = [
+          { label: 'First Item', active: false },
+          {
+            label: 'With Submenu',
+            active: false,
+            submenu: [
+              { label: 'Submenu Item 1', active: false },
+              { label: 'Submenu Item 2', active: false },
+            ],
+          },
+          { label: 'Third Item', active: false },
+          { label: 'Fourth Item', active: false },
+        ];
+
+        const menu = document.createElement('rel-menu') as any;
+        menu.type = 'arrow';
+        menu.items = items;
+        return menu;
+      })()}
+    </div>
+  `,
+};
+
+/**
+ * All menu types showcase
+ */
+export const AllTypes: Story = {
+  render: () => html`
+    <div style="display: flex; gap: 24px; flex-wrap: wrap;">
+      <div style="display: flex; flex-direction: column; gap: 12px;">
+        <h4 style="margin: 0; color: var(--rel-colors-gray-heading); font-size: 14px;">Default Menu</h4>
+        ${(() => {
+          const items: MenuItem[] = [
+            { label: 'Option 1', active: false },
+            { label: 'Option 2', active: true },
+            { label: 'Option 3', active: false },
+            { label: 'Option 4', active: false },
+          ];
+          const menu = document.createElement('rel-menu') as any;
+          menu.type = 'default';
+          menu.items = items;
+          return menu;
+        })()}
+      </div>
+
+      <div style="display: flex; flex-direction: column; gap: 12px;">
+        <h4 style="margin: 0; color: var(--rel-colors-gray-heading); font-size: 14px;">Checkbox Menu</h4>
+        ${(() => {
+          const items: MenuItem[] = [
+            { label: 'Feature 1', checked: true },
+            { label: 'Feature 2', checked: false },
+            { label: 'Feature 3', checked: true },
+            { label: 'Feature 4', checked: false },
+          ];
+          const menu = document.createElement('rel-menu') as any;
+          menu.type = 'checkbox';
+          menu.items = items;
+          return menu;
+        })()}
+      </div>
+
+      <div style="display: flex; flex-direction: column; gap: 12px;">
+        <h4 style="margin: 0; color: var(--rel-colors-gray-heading); font-size: 14px;">Arrow Menu</h4>
+        ${(() => {
+          const items: MenuItem[] = [
+            { label: 'Main 1', active: false },
+            {
+              label: 'Main 2',
+              active: false,
+              submenu: [
+                { label: 'Sub 1', active: false },
+                { label: 'Sub 2', active: false },
+              ],
+            },
+            { label: 'Main 3', active: false },
+          ];
+          const menu = document.createElement('rel-menu') as any;
+          menu.type = 'arrow';
+          menu.items = items;
+          return menu;
+        })()}
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Context menu example
+ */
+export const ContextMenu: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <div style="background: var(--rel-colors-gray-light); padding: 24px; border-radius: 8px; text-align: center; color: var(--rel-colors-gray-primary);">
+        <p style="margin: 0;"><strong>Right-click menu simulation</strong></p>
+        <p style="margin: 8px 0 0; font-size: 13px;">This represents a typical context menu</p>
+      </div>
+      ${(() => {
+        const items: MenuItem[] = [
+          { label: 'Cut', active: false },
+          { label: 'Copy', active: false },
+          { label: 'Paste', active: false, disabled: true },
+          { label: 'Delete', active: false },
+          {
+            label: 'Share',
+            active: false,
+            submenu: [
+              { label: 'Email', active: false },
+              { label: 'Social Media', active: false },
+              { label: 'Copy Link', active: false },
+            ],
+          },
+          { label: 'Properties', active: false },
+        ];
+
+        const menu = document.createElement('rel-menu') as any;
+        menu.type = 'arrow';
+        menu.items = items;
+        return menu;
+      })()}
+    </div>
+  `,
+};
+
+/**
+ * Simple default menu - demonstrates basic selection behavior
+ */
+export const SimpleDefault: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'Home', active: true },
+      { label: 'About', active: false },
+      { label: 'Services', active: false },
+      { label: 'Contact', active: false },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'default';
+    menu.items = items;
+
+    menu.addEventListener('item-selected', (e: CustomEvent) => {
+      console.log('Selected:', e.detail.item.label);
+    });
+
+    return menu;
+  },
+};
+
+/**
+ * Default menu with all disabled items except one
+ */
+export const DefaultMostlyDisabled: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'New Project', active: false, disabled: true },
+      { label: 'Open Project', active: false },
+      { label: 'Save Project', active: false, disabled: true },
+      { label: 'Close Project', active: false, disabled: true },
+      { label: 'Exit', active: false, disabled: true },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'default';
+    menu.items = items;
+
+    return menu;
+  },
+};
+
+/**
+ * Simple checkbox menu - demonstrates basic checkbox functionality
+ */
+export const SimpleCheckbox: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'Remember me', checked: true },
+      { label: 'Stay signed in', checked: false },
+      { label: 'Enable notifications', checked: false },
+      { label: 'Auto-save', checked: true },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'checkbox';
+    menu.items = items;
+
+    menu.addEventListener('item-checked', (e: CustomEvent) => {
+      console.log('Checked:', e.detail.item.label, '=', e.detail.checked);
+    });
+
+    return menu;
+  },
+};
+
+/**
+ * Checkbox menu with multiple checked items
+ */
+export const CheckboxMultipleChecked: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'JavaScript', checked: true },
+      { label: 'TypeScript', checked: true },
+      { label: 'Python', checked: true },
+      { label: 'Java', checked: false },
+      { label: 'C++', checked: false },
+      { label: 'Ruby', checked: true },
+      { label: 'Go', checked: true },
+      { label: 'Rust', checked: false },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'checkbox';
+    menu.items = items;
+
+    return menu;
+  },
+};
+
+/**
+ * Checkbox menu with mixed states and disabled
+ */
+export const CheckboxMixedStates: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'Dark Mode', checked: true },
+      { label: 'High Contrast', checked: false, disabled: true },
+      { label: 'Animations', checked: true },
+      { label: 'Auto-play Videos', checked: false },
+      { label: 'Reduced Motion', checked: false, disabled: true },
+      { label: 'Large Text', checked: false },
+      { label: 'Screen Reader', checked: true, disabled: true },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'checkbox';
+    menu.items = items;
+
+    return menu;
+  },
+};
+
+/**
+ * Simple arrow menu - demonstrates basic submenu functionality
+ */
+export const SimpleArrow: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'Dashboard', active: false },
+      {
+        label: 'Reports',
+        active: false,
+        submenu: [
+          { label: 'Monthly Report', active: false },
+          { label: 'Quarterly Report', active: false },
+          { label: 'Annual Report', active: false },
+        ],
+      },
+      { label: 'Settings', active: false },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'arrow';
+    menu.items = items;
+
+    menu.addEventListener('submenu-selected', (e: CustomEvent) => {
+      console.log('Selected:', e.detail.parent.label, '→', e.detail.sub.label);
+    });
+
+    return menu;
+  },
+};
+
+/**
+ * Arrow menu with nested submenus and multiple items
+ */
+export const ArrowNestedComplex: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'File', active: false },
+      {
+        label: 'Edit',
+        active: false,
+        submenu: [
+          { label: 'Undo', active: false },
+          { label: 'Redo', active: false },
+          { label: 'Cut', active: false },
+          { label: 'Copy', active: false },
+          { label: 'Paste', active: false },
+          { label: 'Find', active: false },
+          { label: 'Replace', active: false },
+        ],
+      },
+      {
+        label: 'View',
+        active: false,
+        submenu: [
+          { label: 'Zoom In', active: false },
+          { label: 'Zoom Out', active: false },
+          { label: 'Actual Size', active: false },
+          { label: 'Fit to Window', active: false },
+          { label: 'Full Screen', active: false },
+        ],
+      },
+      {
+        label: 'Tools',
+        active: false,
+        submenu: [
+          { label: 'Spell Check', active: false },
+          { label: 'Word Count', active: false },
+          { label: 'Character Map', active: false },
+          { label: 'Color Picker', active: false },
+        ],
+      },
+      { label: 'Help', active: false },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'arrow';
+    menu.items = items;
+
+    return menu;
+  },
+};
+
+/**
+ * Arrow menu with disabled parent and submenu items
+ */
+export const ArrowWithDisabled: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'New Document', active: false },
+      {
+        label: 'Import',
+        active: false,
+        disabled: true,
+        submenu: [
+          { label: 'From File', active: false },
+          { label: 'From URL', active: false },
+          { label: 'From Clipboard', active: false },
+        ],
+      },
+      {
+        label: 'Export',
+        active: false,
+        submenu: [
+          { label: 'As PDF', active: false },
+          { label: 'As Word', active: false, disabled: true },
+          { label: 'As HTML', active: false },
+          { label: 'As Text', active: false, disabled: true },
+        ],
+      },
+      { label: 'Print', active: false, disabled: true },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'arrow';
+    menu.items = items;
+
+    return menu;
+  },
+};
+
+/**
+ * Navigation menu with hierarchical structure
+ */
+export const NavigationMenu: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'Home', active: true },
+      {
+        label: 'Products',
+        active: false,
+        submenu: [
+          { label: 'All Products', active: false },
+          { label: 'New Arrivals', active: false },
+          { label: 'Best Sellers', active: false },
+          { label: 'Sale Items', active: false },
+          { label: 'Clearance', active: false },
+        ],
+      },
+      {
+        label: 'Categories',
+        active: false,
+        submenu: [
+          { label: 'Electronics', active: false },
+          { label: 'Clothing', active: false },
+          { label: 'Home & Garden', active: false },
+          { label: 'Sports & Outdoors', active: false },
+          { label: 'Toys & Games', active: false },
+          { label: 'Books & Media', active: false },
+        ],
+      },
+      {
+        label: 'Support',
+        active: false,
+        submenu: [
+          { label: 'FAQs', active: false },
+          { label: 'Contact Us', active: false },
+          { label: 'Shipping Info', active: false },
+          { label: 'Returns', active: false },
+        ],
+      },
+      { label: 'About Us', active: false },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'arrow';
+    menu.items = items;
+
+    return menu;
+  },
+};
+
+/**
+ * Filter menu with checkboxes for search filters
+ */
+export const FilterMenu: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'In Stock', checked: true },
+      { label: 'On Sale', checked: false },
+      { label: 'Free Shipping', checked: true },
+      { label: 'New Arrivals', checked: false },
+      { label: 'Top Rated', checked: true },
+      { label: 'Price: Low to High', checked: false },
+      { label: 'Price: High to Low', checked: false },
+      { label: 'Most Popular', checked: false },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'checkbox';
+    menu.items = items;
+
+    return menu;
+  },
+};
+
+/**
+ * Settings menu with all checkbox options enabled
+ */
+export const SettingsAllEnabled: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'Auto-save', checked: true },
+      { label: 'Cloud Sync', checked: true },
+      { label: 'Offline Mode', checked: true },
+      { label: 'Dark Theme', checked: true },
+      { label: 'Notifications', checked: true },
+      { label: 'Sound Effects', checked: true },
+      { label: 'Haptic Feedback', checked: true },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'checkbox';
+    menu.items = items;
+
+    return menu;
+  },
+};
+
+/**
+ * Editor context menu with realistic options
+ */
+export const EditorContextMenu: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'Undo', active: false },
+      { label: 'Redo', active: false, disabled: true },
+      { label: 'Cut', active: false },
+      { label: 'Copy', active: false },
+      { label: 'Paste', active: false },
+      {
+        label: 'Insert',
+        active: false,
+        submenu: [
+          { label: 'Image', active: false },
+          { label: 'Table', active: false },
+          { label: 'Link', active: false },
+          { label: 'Code Block', active: false },
+          { label: 'Quote', active: false },
+          { label: 'Divider', active: false },
+        ],
+      },
+      {
+        label: 'Format',
+        active: false,
+        submenu: [
+          { label: 'Bold', active: false },
+          { label: 'Italic', active: false },
+          { label: 'Underline', active: false },
+          { label: 'Strikethrough', active: false },
+          { label: 'Code', active: false },
+        ],
+      },
+      { label: 'Select All', active: false },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'arrow';
+    menu.items = items;
+
+    return menu;
+  },
+};
+
+/**
+ * Application menu with extensive submenus
+ */
+export const ApplicationMenu: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'About Application', active: false },
+      {
+        label: 'Preferences',
+        active: false,
+        submenu: [
+          { label: 'General', active: false },
+          { label: 'Appearance', active: false },
+          { label: 'Editor', active: false },
+          { label: 'Extensions', active: false },
+          { label: 'Keyboard Shortcuts', active: false },
+          { label: 'Advanced', active: false },
+        ],
+      },
+      {
+        label: 'Services',
+        active: false,
+        disabled: true,
+        submenu: [
+          { label: 'Text to Speech', active: false },
+          { label: 'Search', active: false },
+          { label: 'New Email', active: false },
+        ],
+      },
+      { label: 'Hide Application', active: false },
+      { label: 'Hide Others', active: false },
+      { label: 'Show All', active: false },
+      { label: 'Quit Application', active: false },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'arrow';
+    menu.items = items;
+
+    return menu;
+  },
+};
+
+/**
+ * Developer tools menu
+ */
+export const DeveloperToolsMenu: Story = {
+  render: () => {
+    const items: MenuItem[] = [
+      { label: 'Inspect Element', active: false },
+      { label: 'View Source', active: false },
+      {
+        label: 'Console',
+        active: false,
+        submenu: [
+          { label: 'Clear Console', active: false },
+          { label: 'Preserve Log', active: false },
+          { label: 'Show Timestamps', active: false },
+        ],
+      },
+      {
+        label: 'Network',
+        active: false,
+        submenu: [
+          { label: 'Clear Network Log', active: false },
+          { label: 'Disable Cache', active: false },
+          { label: 'Offline Mode', active: false },
+          { label: 'Throttling', active: false },
+        ],
+      },
+      {
+        label: 'Performance',
+        active: false,
+        submenu: [
+          { label: 'Start Recording', active: false },
+          { label: 'Take Heap Snapshot', active: false },
+          { label: 'Collect Garbage', active: false },
+        ],
+      },
+      { label: 'Lighthouse', active: false },
+      { label: 'Security', active: false },
+    ];
+
+    const menu = document.createElement('rel-menu') as any;
+    menu.type = 'arrow';
+    menu.items = items;
+
+    return menu;
+  },
+};