@trimble-oss/moduswebcomponents/components/p-KUMhHkeW.js

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-X1tirp06.js';
import { i as inheritAriaAttributes } from './p-VPqXjOQn.js';

const convertPropsToClasses = ({ bordered, orientation, size, }) => {
    let classes = '';
    if (bordered) {
        classes = `${classes} modus-wc-menu--bordered`;
    }
    if (orientation === 'horizontal') {
        classes = `${classes} modus-wc-menu-horizontal`;
    }
    if (size) {
        classes = `${classes} modus-wc-menu-${size}`;
    }
    return classes.trim();
};

const modusWcMenuCss = "modus-wc-menu.modus-wc-menu-submenu{display:contents}modus-wc-menu .modus-wc-menu{background-color:var(--modus-wc-color-base-page);border-radius:var(--modus-wc-border-radius-md);list-style:none;margin:0;padding:0;padding-inline-start:0}modus-wc-menu .modus-wc-menu.modus-wc-menu--bordered{border:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-200)}modus-wc-menu .modus-wc-menu-dropdown{display:none;list-style:none}modus-wc-menu .modus-wc-menu-dropdown-show{display:block}[data-theme=modus-classic-light] modus-wc-menu .modus-wc-menu{background-color:var(--modus-wc-color-white);border-color:var(--modus-wc-color-gray-0)}[data-theme=modus-classic-dark] modus-wc-menu .modus-wc-menu{background-color:var(--modus-wc-color-black);border-color:var(--modus-wc-color-gray-8)}";

const ModusWcMenu = /*@__PURE__*/ proxyCustomElement(class ModusWcMenu extends H {
    constructor() {
        super();
        this.__registerHost();
        this.menuFocusout = createEvent(this, "menuFocusout");
        this.inheritedAttributes = {};
        /** Custom CSS class to apply to the ul element. */
        this.customClass = '';
        /** The orientation of the menu. */
        this.orientation = 'vertical';
        /** The size of the menu. */
        this.size = 'md';
        this.handleFocusout = (e) => {
            // Check if the new focus target is still within this menu
            if (!this.el.contains(e.relatedTarget)) {
                // Focus has left the menu entirely
                this.menuFocusout.emit(e);
                // Stop propagation for submenus to prevent double emission
                if (this.isSubMenu) {
                    e.stopPropagation();
                }
            }
        };
        this.getMenuRole = () => this.orientation === 'horizontal' ? 'menubar' : 'menu';
    }
    componentWillLoad() {
        if (!this.el.ariaLabel) {
            this.el.ariaLabel = 'Menu';
        }
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    getClasses() {
        // For submenus, only add the dropdown class
        if (this.isSubMenu) {
            const classList = ['modus-wc-menu-dropdown'];
            if (this.customClass)
                classList.push(this.customClass);
            return classList.join(' ');
        }
        // For regular menus, add all the standard classes
        const classList = ['modus-wc-menu modus-wc-w-full'];
        const propClasses = convertPropsToClasses({
            bordered: this.bordered,
            orientation: this.orientation,
            size: this.size,
        });
        // The order CSS classes are added matters to CSS specificity
        if (propClasses)
            classList.push(propClasses);
        if (this.customClass)
            classList.push(this.customClass);
        return classList.join(' ');
    }
    render() {
        return (h(Host, { key: '6c84e9bf11325a2f679a9e9c84bbee201f483ec7', class: this.isSubMenu ? 'modus-wc-menu-submenu' : undefined }, h("ul", Object.assign({ key: '095e756b51978dae6468097431cd6f78006a2058', "aria-orientation": this.orientation, class: this.getClasses(), onFocusout: this.handleFocusout, role: this.getMenuRole() }, this.inheritedAttributes), h("slot", { key: 'd8c279b7bdf157f06fde0f1f6a98aba402fb33f5' }))));
    }
    get el() { return this; }
    static get style() { return modusWcMenuCss; }
}, [4, "modus-wc-menu", {
        "bordered": [4],
        "customClass": [1, "custom-class"],
        "orientation": [1],
        "size": [1],
        "isSubMenu": [4, "is-sub-menu"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["modus-wc-menu"];
    components.forEach(tagName => { switch (tagName) {
        case "modus-wc-menu":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ModusWcMenu);
            }
            break;
    } });
}

export { ModusWcMenu as M, defineCustomElement as d };