@reliability-design/web 1.0.2 → 1.0.6

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

@@ -1,910 +0,0 @@
-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;
-  },
-};