MenubarMOL

/* -- Menubar component ----------------------------------------------- */

/* A horizontal bar of menu triggers - File, Edit, View - each opening a

   dropdown menu (dropdown.css / dropdown.js, submenus included). The bar

   is the menubar; menubar.js adds moving between the menus. */

@layer components {

  .menubar {

    display: flex;

    align-items: center;

    gap: 0.125rem;

    width: fit-content;

    max-width: 100%;

    padding: 0.25rem;

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    background: var(--background);

    box-shadow: var(--shadow-2xs);

    &[data-variant="ghost"] {

      border-color: transparent;

      box-shadow: none;

      padding: 0;

    }

    &[data-variant="muted"] {

      background: var(--muted);

      border-color: transparent;

      box-shadow: none;

    }

    /* -- Sizes: the triggers scale (the menus keep their own data-size) */

    &[data-size="sm"] .menubar-trigger {

      height: 1.625rem;

      padding-inline: 0.5rem;

      font-size: 0.8125rem;

    }

    &[data-size="lg"] .menubar-trigger {

      height: 2.25rem;

      padding-inline: 0.875rem;

      font-size: 0.9375rem;

    }

  }

  .menubar-trigger {

    display: inline-flex;

    align-items: center;

    gap: 0.375rem;

    height: 1.875rem;

    padding-inline: 0.625rem;

    border: 0;

    border-radius: var(--radius-sm);

    background: transparent;

    color: var(--foreground);

    font: inherit;

    font-size: 0.875rem;

    font-weight: 500;

    cursor: default;

    user-select: none;

    outline: none;

    & svg {

      width: 1rem;

      height: 1rem;

      flex-shrink: 0;

    }

    &:hover,

    &:focus-visible {

      background-color: var(--accent);

      color: var(--accent-foreground);

    }

    &[aria-expanded="true"] {

      background-color: var(--accent);

      color: var(--accent-foreground);

    }

    &:focus-visible {

      outline: 2px solid var(--ring);

      outline-offset: 1px;

    }

    &:disabled,

    &[aria-disabled="true"] {

      opacity: 0.5;

      pointer-events: none;

    }

  }

  /* the menus hang just under the bar */

  .menubar > .dropdown-content {

    margin-top: 0.5rem;

  }

  .menubar:dir(rtl) > .dropdown-content:not(.dropdown-sub-content) {

    left: auto;

    right: anchor(right);

  }

}

@media (prefers-contrast: more) {

  @layer components {

    .menubar {

      border-color: var(--foreground);

    }

    .menubar-trigger[aria-expanded="true"] {

      outline: 1px solid var(--foreground);

    }

  }

}

@media (forced-colors: active) {

  @layer components {

    .menubar {

      border-color: CanvasText;

    }

    .menubar-trigger:is(:hover, :focus-visible, [aria-expanded="true"]) {

      forced-color-adjust: none;

      background: Highlight;

      color: HighlightText;

    }

  }

}

/* -- Menubar component ------------------------------------------------ */

// A .menubar[role="menubar"] of .menubar-trigger buttons, each wired to a

// dropdown menu by dropdown.js (data-dropdown-trigger - submenus, checkbox

// and radio items included). This module adds the menubar pattern (WAI-ARIA

// APG): one tab stop for the whole bar (roving tabindex), Left / Right /

// Home / End between the triggers, Down / Up / Enter opening a menu, Left /

// Right inside an open menu moving to the neighbouring menu, and - while a

// menu is open - hovering another trigger switching to its menu. Needs

// dropdown.js (all.js carries both).

// Shared preamble (AGENTS.md "State API"); the implementation lives in core.js —

// build.ts rewrites this import into a df$.shadcn.shared binding in dist/.

import {

  defussGlobals,

  safeShowPopover,

  defussQuery,

  componentState,

  bindComponent,

} from '../../../shared/state-api.js';

const df$ = defussGlobals();

const dfDollar = defussQuery();

/** default = every menu closed; open = one menu open ({ menu: id | index }). */

const menubarStates = ['default', 'open'];

// VERIFIED: (verify's API docs gate) the states below are exactly the declared ones, each

// described, and every config field typed, described and named in the code.

/** setState() configs per state (getState() reports the open menu's id). */

export interface MenubarStateConfigs {

  /** Every menu closed. */

  default: {

    /** reported by getState(): null - no menu is open */

    menu?: string | null;

  };

  /** One menu open. */

  open: {

    /** the menu to open: its id (its trigger's data-dropdown-trigger), or its index; default the first. getState() reports the open menu's id */

    menu?: string | number | null;

  };

}

const triggersOf = (bar) =>

  Array.from(dfDollar(bar).find<HTMLButtonElement>('.menubar-trigger').toArray()).filter(

    (t) => t.closest('.menubar') === bar && !t.disabled && t.getAttribute('aria-disabled') !== 'true',

  );

const menuOf = (trigger) =>

  dfDollar('#' + CSS.escape(trigger.dataset.dropdownTrigger || trigger.getAttribute('popovertarget') || '')).get(0);

const openMenuOf = (bar) =>

  triggersOf(bar)

    .map(menuOf)

    .find((m) => m?.matches(':popover-open')) ?? null;

function setRoving(bar, active) {

  triggersOf(bar).forEach((t) => t.setAttribute('tabindex', t === active ? '0' : '-1'));

}

/** Open a trigger's menu (closing the other - popover="auto" does that

 * natively); focus its first item unless `quiet` (hover switching). */

function openMenu(bar, trigger, quiet = false) {

  const menu = menuOf(trigger);

  if (!menu) return;

  setRoving(bar, trigger);

  if (menu.matches(':popover-open')) {

    if (!quiet) focusItem(menu);

    return;

  }

  menu._noFocus = quiet;

  if (quiet) trigger.focus({ preventScroll: true });

  safeShowPopover(menu);

}

/** Focus the first (or last) own item of an open menu. */

function focusItem(menu, last = false) {

  const own = Array.from(dfDollar(menu).find('[role^="menuitem"]').toArray()).filter(

    (x) =>

      x.closest('[role="menu"]') === menu &&

      !(x as HTMLButtonElement).disabled &&

      x.getAttribute('aria-disabled') !== 'true',

  );

  own.forEach((x) => x.removeAttribute('data-highlighted'));

  const item = last ? own.at(-1) : own[0];

  item?.setAttribute('data-highlighted', '');

  (item as HTMLElement | undefined)?.focus({ preventScroll: true });

}

/**

 * The markup of a state, for render(): the attributes a state writes, applied

 * to a detached copy of the authored markup ('default' IS the authored

 * markup). The live element gets the same markup from triggerStateChange -

 * the e2e render round trip proves they agree.

 */

function applyMarkup(_el, _stateName) {

  // 'open' shows one of the bar's dropdown menus - a top-layer popover, not

  // markup; the roving tabindex and the triggers' aria-expanded the runtime

  // keeps are runtime-owned (see the e2e)

}

function triggerStateChange(bar, stateName, config) {

  switch (stateName) {

    case 'default': {

      const open = openMenuOf(bar);

      if (open) {

        try {

          open.hidePopover();

        } catch {

          /* closed */

        }

      }

      break;

    }

    case 'open': {

      const ts = triggersOf(bar);

      const t =

        typeof config.menu === 'number'

          ? ts[config.menu]

          : config.menu

            ? ts.find((x) => x.dataset.dropdownTrigger === config.menu)

            : ts[0];

      if (t) openMenu(bar, t);

      break;

    }

  }

}

/** Registry-level API; pass the .menubar explicitly. Unknown names throw. */

export const menubarApi = componentState({

  component: 'menubar',

  states: menubarStates,

  apply: (bar, state) => {

    bar.dataset.stateName = state.name;

    triggerStateChange(bar, state.name, state.config);

  },

  read: (bar, state) => {

    const open = openMenuOf(bar);

    return { name: open ? 'open' : 'default', config: { ...state.config, menu: open?.id ?? null } };

  },

  markup: (el, state) => applyMarkup(el, state.name),

});

df$.menubarApi = menubarApi;

df$.menubarStates = menubarStates;

function init() {

  dfDollar('.menubar:not([data-init])')

    .toArray()

    .forEach((bar) => {

      bar.dataset.init = '';

      if (!bar.hasAttribute('role')) bar.setAttribute('role', 'menubar');

      // el.store + el.api (AGENTS.md "State through stores")

      bindComponent(bar, menubarApi);

      const triggers = triggersOf(bar);

      triggers.forEach((t) => {

        if (!t.hasAttribute('role')) t.setAttribute('role', 'menuitem');

      });

      setRoving(bar, triggers[0]);

      // keep the state name honest whatever opened / closed a menu

      triggers.forEach((t) => {

        menuOf(t)?.addEventListener('toggle', () => {

          bar.dataset.stateName = openMenuOf(bar) ? 'open' : 'default';

        });

      });

      // hover switching while a menu is open

      bar.addEventListener('pointerover', (e) => {

        const t = e.target instanceof Element ? e.target.closest<HTMLButtonElement>('.menubar-trigger') : null;

        if (!t || t.closest('.menubar') !== bar || !triggersOf(bar).includes(t)) return;

        const open = openMenuOf(bar);

        if (open && menuOf(t) !== open) openMenu(bar, t, true);

      });

      bar.addEventListener('keydown', (e) => {

        const ts = triggersOf(bar);

        const rtl = getComputedStyle(bar).direction === 'rtl';

        const next = rtl ? 'ArrowLeft' : 'ArrowRight';

        const prev = rtl ? 'ArrowRight' : 'ArrowLeft';

        const onTrigger = e.target instanceof Element && e.target.classList.contains('menubar-trigger');

        const openMenuEl = openMenuOf(bar);

        const i = onTrigger ? ts.indexOf(e.target as HTMLButtonElement) : ts.findIndex((t) => menuOf(t) === openMenuEl);

        if (i < 0) return;

        const step = (d) => ts[(i + d + ts.length) % ts.length];

        if (onTrigger) {

          // with a menu open (hover switching left focus on its trigger), the

          // arrows switch the open menu; otherwise they just move focus

          const moveTo = (t) => {

            if (openMenuEl) openMenu(bar, t);

            else {

              setRoving(bar, t);

              t.focus();

            }

          };

          switch (e.key) {

            case next:

              e.preventDefault();

              moveTo(step(1));

              break;

            case prev:

              e.preventDefault();

              moveTo(step(-1));

              break;

            case 'Home':

              e.preventDefault();

              setRoving(bar, ts[0]);

              ts[0].focus();

              break;

            case 'End':

              e.preventDefault();

              setRoving(bar, ts[ts.length - 1]);

              ts[ts.length - 1].focus();

              break;

            case 'ArrowDown':

            case 'Enter':

            case ' ':

              e.preventDefault();

              openMenu(bar, ts[i]);

              break;

            case 'ArrowUp': {

              e.preventDefault();

              const menu = menuOf(ts[i]);

              // up opens with the LAST item highlighted - in the open toggle,

              // after the dropdown's own handler highlighted the first one (the

              // toggle event is a queued task; a timer raced it under load)

              if (menu && !menu.matches(':popover-open')) {

                menu.addEventListener(

                  'toggle',

                  (ev) => {

                    if ((ev as ToggleEvent).newState === 'open') focusItem(menu, true);

                  },

                  { once: true },

                );

                openMenu(bar, ts[i]);

              } else {

                openMenu(bar, ts[i]);

                if (menu) focusItem(menu, true);

              }

              break;

            }

          }

          return;

        }

        // inside an open menu: left / right that the dropdown did not use

        // (a submenu trigger opens on right, a submenu closes on left) move to

        // the neighbouring menu

        if (e.defaultPrevented) return;

        if (e.key === next) {

          e.preventDefault();

          openMenu(bar, step(1));

        } else if (e.key === prev) {

          e.preventDefault();

          openMenu(bar, step(-1));

        }

      });

    });

}

init();

new MutationObserver(init).observe(document, { childList: true, subtree: true });