Navigation Components

/**
 * Tab container for organizing content into switchable panels
 */
interface Tabs extends HTMLElement {
  /** Index of currently selected tab */
  selected: number;
  /** Tab orientation: horizontal or vertical */
  orientation: 'horizontal' | 'vertical';

  /** Select tab by index */
  selectIndex(index: number): void;
  /** Focus the tabs component */
  focus(): void;
}

/**
 * Individual tab within Tabs container
 */
interface Tab extends HTMLElement {
  /** Tab is currently selected */
  selected: boolean;
  /** Tab is disabled */
  disabled: boolean;
  /** Tab label text */
  label: string;

  /** Focus this tab */
  focus(): void;
}

/**
 * Accordion container with expandable panels
 */
interface Accordion extends HTMLElement {
  /** Index of currently opened panel (null if none) */
  opened: number | null;
  /** Array of panel items */
  items: AccordionPanel[];

  /** Open panel at specific index */
  open(index: number): void;
  /** Close currently opened panel */
  close(): void;
}

/**
 * Individual accordion panel
 */
interface AccordionPanel extends HTMLElement {
  /** Panel is currently opened */
  opened: boolean;
  /** Panel summary/header text */
  summary: string;

  /** Toggle panel open/close state */
  toggle(): void;
}

/**
 * Side navigation component with collapsible structure
 */
interface SideNav extends HTMLElement {
  /** Navigation can be collapsed */
  collapsible: boolean;
  /** Navigation is currently collapsed */
  collapsed: boolean;

  /** Collapse the navigation */
  collapse(): void;
  /** Expand the navigation */
  expand(): void;
}

/**
 * Navigation item within SideNav
 */
interface SideNavItem extends HTMLElement {
  /** Navigation path or URL */
  path: string;
  /** Item is currently active */
  current: boolean;
  /** Item is expanded (for parent items) */
  expanded: boolean;
  /** Item label text */
  label: string;
}

/**
 * Horizontal menu bar with multi-level dropdown support
 * Provides consistent navigation and action access
 */
interface MenuBar extends HTMLElement {
  /** Array of root-level menu items */
  items: MenuBarItem[];
  /** Menu is currently open/expanded */
  opened: boolean;
  /** Menu bar is disabled */
  disabled: boolean;
  /** Internationalization configuration */
  i18n: MenuBarI18n;
  /** Theme variant */
  theme: string;

  /** Close all open menus */
  close(): void;
  /** Focus the menu bar */
  focus(): void;
}

/**
 * Menu bar item configuration with hierarchical support
 */
interface MenuBarItem {
  /** Item display text */
  text: string;
  /** Item tooltip text */
  tooltip?: string;
  /** Item is disabled */
  disabled?: boolean;
  /** Item theme variants */
  theme?: string | string[];
  /** CSS class names */
  className?: string;
  /** Submenu items */
  children?: SubMenuItem[];
  /** Custom component for rendering */
  component?: HTMLElement | string;
}

/**
 * Submenu item configuration
 */
interface SubMenuItem {
  /** Item display text */
  text: string;
  /** Item is disabled */
  disabled?: boolean;
  /** Item is checked (for toggle items) */
  checked?: boolean;
  /** Item theme variants */
  theme?: string | string[];
  /** CSS class names */
  className?: string;
  /** Nested submenu items */
  children?: SubMenuItem[];
  /** Custom component for rendering */
  component?: HTMLElement | string;
}

/**
 * Menu bar internationalization
 */
interface MenuBarI18n {
  /** Text for overflow menu button */
  moreOptions: string;
}

import '@vaadin/menu-bar';

// Create menu bar
const menuBar = document.createElement('vaadin-menu-bar');

// Configure menu structure
menuBar.items = [
  {
    text: 'File',
    children: [
      { text: 'New', children: [
        { text: 'Document' },
        { text: 'Folder' }
      ]},
      { text: 'Open' },
      { text: 'Save' },
      { text: 'Save As...' }
    ]
  },
  {
    text: 'Edit',
    children: [
      { text: 'Cut' },
      { text: 'Copy' },
      { text: 'Paste' }
    ]
  },
  {
    text: 'View',
    children: [
      { text: 'Zoom In' },
      { text: 'Zoom Out' },
      { text: 'Full Screen', checked: true }
    ]
  },
  { text: 'Help' }
];

// Listen for item selections
menuBar.addEventListener('item-selected', (e) => {
  console.log('Selected:', e.detail.value.text);
});

document.body.appendChild(menuBar);