<commit_before><div id="widgets_popupMenu_demo">
    
    <p>
        This is the basic <code>HTML</code> layout needed to build a Popup Menu:
    </p>
    
    <div class="paragraph">
        <div class="basic-layout">
            <button class="btn">Basic layout</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
    </div>
    
    <p>
        The trigger element can be any <code>html</code> tag:
    </p>
    
    <div class="paragraph">
        <div class="alternative-layout">
            <a href="#" style="border: 1px solid #cccccc; padding: 1px 3px; background-color: #F5F5F5; display: inline-block;">
                <span class="k-icon k-i-custom"></span>
            </a>
            <ul>
                <li>
                    Tools
                    <ul>
                        <li>Extensions</li>
                        <li>Task manager</li>
                    </ul>
                </li>
                <li>Settings</li>
            </ul>
        </div>
    </div>
    
    <p>
        Menu opening can be triggered when the mouse stops over the trigger:
    </p>
    
    <div class="paragraph">
        <div class="openOnHover-option">
            <button class="btn">This opens on hover</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
    </div>
    
    <p>
        Menu and submenus can be opened in various directions:
    </p>
    
    <div class="paragraph">
        <div class="bottom-right-direction-option">
            <button class="btn">Bottom Right</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
        
        <div class="bottom-left-direction-option">
            <button class="btn">Bottom Left</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
        
        <div class="top-right-direction-option">
            <button class="btn">Top Right</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
        
        <div class="top-left-direction-option">
            <button class="btn">Top Left</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
    </div>
    
    <p>
        Menu opening and closing animation can be configured:
    </p>
    
    <div class="paragraph">
        <div class="expand-animation-option">
            <button class="btn">Expand</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
        
        <div class="fade-animation-option">
            <button class="btn">Fade</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
        
        <div class="none-animation-option">
            <button class="btn">None</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
    </div>
    
    <p>
        Menu can be built using a <code>dataSource</code> instead of static <code>HTML</code>:
    <p>
    
    <div class="paragraph">
        <div class="datasource-option">
            <button class="btn">Built with a dataSource</button>
            <ul></ul>
        </div>
    </div>
    
    <p>
        The widget fires some events to which you can subscribe:
    </p>
    
    <div class="paragraph">
        <div class="well kiuiEventLogger">
            <h4>Logged events:</h4>
            <ul></ul>
        </div>
    </div>
    
    <div class="paragraph">
        <div class="trigger-events">
            <button class="btn">Trigger events</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
    
        <div class="cancel-event">
            <button class="btn">Cancel an event</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li><commit_msg>feat(widgets-popupMenu): fix widget events demo style<commit_after><div id="widgets_popupMenu_demo">
    
    <p>
        This is the basic <code>HTML</code> layout needed to build a Popup Menu:
    </p>
    
    <div class="paragraph">
        <div class="basic-layout">
            <button class="btn">Basic layout</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
    </div>
    
    <p>
        The trigger element can be any <code>html</code> tag:
    </p>
    
    <div class="paragraph">
        <div class="alternative-layout">
            <a href="#" style="border: 1px solid #cccccc; padding: 1px 3px; background-color: #F5F5F5; display: inline-block;">
                <span class="k-icon k-i-custom"></span>
            </a>
            <ul>
                <li>
                    Tools
                    <ul>
                        <li>Extensions</li>
                        <li>Task manager</li>
                    </ul>
                </li>
                <li>Settings</li>
            </ul>
        </div>
    </div>
    
    <p>
        Menu opening can be triggered when the mouse stops over the trigger:
    </p>
    
    <div class="paragraph">
        <div class="openOnHover-option">
            <button class="btn">This opens on hover</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
    </div>
    
    <p>
        Menu and submenus can be opened in various directions:
    </p>
    
    <div class="paragraph">
        <div class="bottom-right-direction-option">
            <button class="btn">Bottom Right</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
        
        <div class="bottom-left-direction-option">
            <button class="btn">Bottom Left</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
        
        <div class="top-right-direction-option">
            <button class="btn">Top Right</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
        
        <div class="top-left-direction-option">
            <button class="btn">Top Left</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
    </div>
    
    <p>
        Menu opening and closing animation can be configured:
    </p>
    
    <div class="paragraph">
        <div class="expand-animation-option">
            <button class="btn">Expand</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
        
        <div class="fade-animation-option">
            <button class="btn">Fade</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
        
        <div class="none-animation-option">
            <button class="btn">None</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
    </div>
    
    <p>
        Menu can be built using a <code>dataSource</code> instead of static <code>HTML</code>:
    <p>
    
    <div class="paragraph">
        <div class="datasource-option">
            <button class="btn">Built with a dataSource</button>
            <ul></ul>
        </div>
    </div>
    
    <p>
        The widget fires some events to which you can subscribe:
    </p>
    
    <div class="paragraph">
        <div class="well kiuiEventLogger">
            <h5>Logged events:</h5>
            <ul></ul>
        </div>
    </div>
    
    <div class="paragraph">
        <div class="trigger-events">
            <button class="btn">Trigger events</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
                <li>Menu 2</li>
            </ul>
        </div>
    
        <div class="cancel-event">
            <button class="btn">Cancel an event</button>
            <ul>
                <li>
                    Menu 1
                    <ul>
                        <li>SubMenu 1</li>
                        <li>SubMenu 2</li>
                    </ul>
                </li>
{'fraction_non_alphanumeric': 0.12534864643150123, 'fraction_numerical': 0.008367514356029532, 'mean_word_length': 0.8004726037512923, 'pattern_counts': {'":': 0, '<': 483, '<?xml version=': 0, '>': 483, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3723506', 'n_tokens_mistral': 3518, 'n_tokens_neox': 3220, 'n_words': 748}