desy-html 16.0.4 → 17.0.1

package/src/js/desy-html.js

@@ -1,813 +1,860 @@
-import "cally";
-import * as computePosition from '@floating-ui/dom';
-import { accordion } from './aria/accordion.js';
-import { alert } from './aria/alert.js';
-import { CheckBox } from './aria/checkBoxes.js';
-import { Collapsible } from './aria/collapsible.js';
-import { dataGrid } from './aria/dataGrid.js';
-import { dialog } from './aria/dialog.js';
-import { LinksList } from './aria/linksList.js';
-import { listbox } from './aria/listbox.js';
-import { MenubarAction } from './aria/MenubarAction.js';
-import { MenubarItemAction } from './aria/MenubarItemAction.js';
-import { MenuHorizontal } from './aria/MenuHorizontal.js';
-import { MenuNavigation } from './aria/MenuNavigation.js';
-import { MenuVertical } from './aria/MenuVertical.js';
-import { Nav } from './aria/Nav.js';
-import { Notification } from './aria/notification.js';
-import { PopupMenuAction } from './aria/PopupMenuAction.js';
-import { PopupMenuItemAction } from './aria/PopupMenuItemAction.js';
-import { RadioButton } from './aria/radioButton.js';
-import { tabs } from './aria/tabs.js';
-import { Toggle } from './aria/toggle.js';
-import { Tree } from './aria/tree.js';
-import { TreeGrid } from './aria/treegrid.js';
-import { Treeitem } from './aria/treeitem.js';
-import { convertSingleDateToISO, convertToISOFormat, detectDateFormat, formatDateToDDMMYYYY, utils } from './aria/utils.js';
-
-export function accordionComponent(aria) {
-  accordion(aria);
-}
-
-export function alertComponent(aria) {
-  alert(aria);
-}
-
-export function toggleComponent(aria) {
-  Toggle(aria);
-}
-
-export function collapsibleComponent(aria) {
-  Collapsible(aria);
-
-  const collapsibles = document.querySelectorAll('[data-module="c-collapsible"]');
-  [...collapsibles].forEach((collapsible) => {
-    aria.collapsibleInit(collapsible);
-  });
-}
-
-export function dialogComponent(aria) {
-  utils(aria);
-  dialog(aria);
-}
-
-export function dropdownComponent(aria) {
-  const modules = document.querySelectorAll('[data-module]');
-  for (const item in modules) if (modules.hasOwnProperty(item)) {
-    const moduleValue = modules[item].getAttribute('data-module');
-
-    if (moduleValue == 'c-dropdown') {
-      const buttonDropdown = modules[item].querySelector('[data-module = "c-dropdown-button"]');
-      const tooltip = modules[item].querySelector('[data-module = "c-dropdown-tooltip"]');
-      const roleCustom = buttonDropdown.getAttribute('data-role');
-      const ariaLabel = buttonDropdown.getAttribute('data-aria-label');
-      const ariaModal = buttonDropdown.getAttribute('data-aria-modal');
-      const ariaHasPopup = buttonDropdown.getAttribute('data-aria-haspopup');
-
-      if (buttonDropdown && tooltip) {
-        // Adjust positioning to match Tippy behavior
-        const middlewares = [
-          computePosition.shift({ padding: 5 })
-        ];
-
-        // Preserve relative position of tooltip with respect to button
-        tooltip.style.width = 'auto';
-        tooltip.style.minWidth = buttonDropdown.offsetWidth + 'px';
-
-        const instance = createFloatingElement(buttonDropdown, tooltip, {
-          placement: 'bottom-start',
-          offset: [0, 0],
-          middleware: middlewares,
-          interactive: true,
-          trigger: 'click',
-          hideOnClick: true,
-          role: roleCustom || false,
-          ariaContent: 'auto',
-          arrow: false,
-          autoPlacement: false,
-          onCreate: (instance) => {
-            if (ariaHasPopup) {
-              instance.reference.setAttribute('aria-haspopup', ariaHasPopup);
-            }
-          },
-          onShown: (instance) => {
-            buttonDropdown.setAttribute('aria-expanded', 'true');
-            aria.Utils.focusFirstDescendant(tooltip);
-            if (ariaLabel) {
-              instance.popper.setAttribute('aria-label', ariaLabel);
-            }
-            if (ariaModal) {
-              instance.popper.setAttribute('aria-modal', ariaModal);
-            }
-          },
-          onHidden: (instance) => {
-            buttonDropdown.setAttribute('aria-expanded', 'false');
-          }
-        });
-        // Initialize aria-expanded state
-        buttonDropdown.setAttribute('aria-expanded', 'false');
-      }
-    }
-  }
-}
-
-export function listboxComponent(aria) {
-  listbox(aria);
-  const modules = document.querySelectorAll('[data-module]');
-  let activeButton;
-  for (const item in modules)
-    if (modules.hasOwnProperty(item)) {
-      const moduleValue = modules[item].getAttribute('data-module');
-
-      if (moduleValue == 'c-listbox') {
-        const buttonListbox = modules[item].querySelector('[data-module = "c-listbox-button"]');
-        const tooltip = modules[item].querySelector('[data-module = "c-listbox-tooltip"]');
-        const list = modules[item].querySelector('[data-module = "c-listbox-list"]');
-
-        if (buttonListbox && tooltip) {
-          const listboxObj = new aria.Listbox(list);
-
-          // Preserve relative position of tooltip with respect to button
-          tooltip.style.width = 'auto';
-          tooltip.style.minWidth = buttonListbox.offsetWidth + 'px';
-
-          const middlewares = [
-            computePosition.shift({ padding: 5 })
-          ];
-
-          const instance = createFloatingElement(buttonListbox, tooltip, {
-            placement: 'bottom-start',
-            offset: [8, -1],
-            middleware: middlewares,
-            interactive: true,
-            trigger: 'manual',
-            hideOnClick: true,
-            role: false,
-            ariaContent: 'auto',
-            hideOnEsc: true,
-            hideOnPopperBlur: true,
-            onMount: (instance) => {
-              if (list.querySelectorAll('[aria-selected="true"]')[0]) {
-                listboxObj.focusItem(list.querySelectorAll('[aria-selected="true"]')[0]);
-              }
-            },
-            onHidden: (instance) => {
-              buttonListbox.classList.remove('open');
-              buttonListbox.setAttribute('aria-expanded', 'false');
-            }
-          });
-
-          buttonListbox.addEventListener("click", (event) => {
-            if (!buttonListbox.classList.contains('open')) {
-              instance.show();
-              list.focus();
-              buttonListbox.classList.add('open');
-              buttonListbox.setAttribute('aria-expanded', 'true');
-            } else {
-              list.blur();
-              instance.hide();
-            }
-          });
-
-          document.addEventListener('keydown', (event) => {
-            if (event.key === 'Enter' && buttonListbox.classList.contains('open')) {
-              instance.hide();
-            }
-          });
-
-          listboxObj.setHandleFocusChange(function (evt) {
-            if ((!list.hasAttribute('aria-multiselectable')) && (buttonListbox.getAttribute('data-change') == 'change')) {
-              buttonListbox.firstElementChild.innerHTML = evt.innerHTML;
-            }
-          });
-
-          const getMultiSelectable = buttonListbox.getAttribute('aria-labelledby');
-          const allowMultiple = getMultiSelectable && getMultiSelectable.includes('is-multiselectable-label');
-
-          if (!allowMultiple) {
-            list.addEventListener("click", (event) => {
-              buttonListbox.click();
-            });
-          }
-
-          // Initialize aria-expanded state
-          buttonListbox.setAttribute('aria-expanded', 'false');
-        }
-      }
-    }
-}
-
-export function linksListComponent(aria) {
-  LinksList(aria);
-
-  const modules = document.querySelectorAll('[data-module="c-links-list"]');
-  [...modules].forEach((module) => {
-    aria.linksListInit(module);
-  });
-}
-
-export function menubarComponent(aria) {
-  PopupMenuItemAction(aria);
-  PopupMenuAction(aria);
-  MenubarItemAction(aria);
-  MenubarAction(aria);
-  const modules = document.querySelectorAll('[data-module="c-menubar"]');
-  [...modules].forEach((module) => {
-    const menubar = new aria.MenubarAction(module);
-    menubar.init(null);
-  });
-}
-
-export function tableAdvancedComponent(aria) {
-  utils(aria);
-  dataGrid(aria);
-  const modules = document.querySelectorAll('[data-module="c-table-advanced"]');
-  [...modules].forEach((module) => {
-    const grid = new aria.Grid(module);
-  });
-}
-
-export function tabsComponent(aria) {
-  tabs(aria);
-  const modules = document.querySelectorAll('[data-module="c-tabs"]');
-  [...modules].forEach((module) => {
-    aria.tabsInit(module);
-  });
-}
-
-export function tooltipComponent(aria) {
-  const modules = document.querySelectorAll('[data-module]');
-  for (const item in modules)
-    if (modules.hasOwnProperty(item)) {
-      const moduleValue = modules[item].getAttribute('data-module');
-
-      if (moduleValue == 'c-tooltip') {
-        const tooltipButton = modules[item].querySelector('[data-module = "c-tooltip-button"]');
-        const ariaContent = tooltipButton.matches('[data-type = "c-tooltip-button-complex"]') ? 'describedby' : 'labelledby';
-        const tooltipTooltip = modules[item].querySelector('[data-module = "c-tooltip-tooltip"]');
-
-        if (tooltipButton && tooltipTooltip) {
-          // Set max-width directly on the tooltip element (350px is Tippy's default)
-          tooltipTooltip.style.maxWidth = '350px';
-
-          // Use shift middleware to keep tooltip within viewport bounds
-          const middlewares = [
-            computePosition.shift({ padding: 8 })
-          ];
-
-          const instance = createFloatingElement(tooltipButton, tooltipTooltip, {
-            placement: 'top',
-            interactive: true,
-            trigger: 'mouseenter focus',
-            hideOnClick: true,
-            role: 'tooltip',
-            ariaContent: ariaContent,
-            arrow: true,
-            middleware: middlewares
-          });
-        }
-      }
-    }
-}
-
-export function treeComponent(aria) {
-  Treeitem(aria);
-  Tree(aria);
-  const modules = document.querySelectorAll('[data-module]');
-  for (const item in modules)
-    if (modules.hasOwnProperty(item)) {
-      const moduleValue = modules[item].getAttribute('data-module');
-
-      if (moduleValue == 'c-tree') {
-        const tree = new aria.Tree(modules[item]);
-        tree.init();
-      }
-
-      if (moduleValue == 'c-tree__item') {
-        modules[item].addEventListener('click', function (event) {
-          event.stopPropagation();
-        });
-      }
-    }
-}
-
-export function notificationComponent(aria) {
-  Notification(aria);
-  const modules = document.querySelectorAll('[data-module="c-notification"]');
-  [...modules].forEach((module) => {
-    aria.notificationInit(module);
-  });
-}
-
-export function radioButtonComponent(aria) {
-  RadioButton(aria);
-}
-
-export function checkBoxComponent(aria) {
-  CheckBox(aria);
-}
-
-export function MenuVerticalComponent(aria) {
-  MenuVertical(aria);
-  const modules = document.querySelectorAll('[data-module="c-menu-vertical"]');
-  [...modules].forEach((module) => {
-    const menuVertical = new aria.MenuVertical(module);
-    menuVertical.init(null);
-  });
-}
-
-export function MenuHorizontalComponent(aria) {
-  MenuHorizontal(aria);
-  const modules = document.querySelectorAll('[data-module="c-menu-horizontal"]');
-  [...modules].forEach((module) => {
-    const MenuHorizontal = new aria.MenuHorizontal(module);
-    MenuHorizontal.init(null);
-  });
-}
-
-export function MenuNavigationComponent(aria) {
-  MenuNavigation(aria);
-  const modules = document.querySelectorAll('[data-module="c-menu-navigation"]');
-  [...modules].forEach((module) => {
-    const menuNavigation = new aria.MenuNavigation(module);
-    menuNavigation.init(null);
-  });
-}
-
-export function NavComponent(aria) {
-  Nav(aria);
-  const modules = document.querySelectorAll('[data-module="c-nav"]');
-  [...modules].forEach((module) => {
-    const nav = new aria.Nav(module);
-    nav.init(null);
-  });
-}
-
-export function DatepickerComponent(aria) {
-  const modules = document.querySelectorAll('[data-module="c-datepicker"]');
-  [...modules].forEach((module) => {
-    const inputElement = module.getElementsByTagName('input')[0];
-    if (inputElement) {
-      // Case with input element (dropdown mode)
-      const dropdownId = inputElement.getAttribute('id');
-      const datepickerDropdown = inputElement.parentNode.querySelector('[data-module="c-dropdown-button"]');
-      let datepickerCalendar = null;
-      let isOpen = false;
-
-      // Variable to store the initial value only when the calendar opens
-      let storedInitialValue = '';
-      let storedInitialFormat = '';
-
-      const focusCalendar = () => {
-        const datepickerSelect = module.querySelector(':is(select)');
-        const datepickerCalendar = module.querySelector(':is(calendar-date, calendar-multi, calendar-range)');
-
-        // Calendar library needs dates to be in ISO format
-        if (datepickerCalendar && datepickerCalendar.min) {
-          datepickerCalendar.min = convertSingleDateToISO(datepickerCalendar.min);
-        }
-        if (datepickerCalendar && datepickerCalendar.max) {
-          datepickerCalendar.max = convertSingleDateToISO(datepickerCalendar.max);
-        }
-
-        // Store the initial value only when the calendar opens with improved format detection
-        if (!storedInitialValue) {
-          storedInitialValue = datepickerCalendar === null ? '' : datepickerCalendar.value;
-          storedInitialFormat = detectDateFormat(storedInitialValue);
-        }
-
-        requestAnimationFrame(() => {
-          if (datepickerCalendar != undefined) {
-            datepickerCalendar.focus();
-            datepickerCalendar.addEventListener('change', (e) => {
-              inputElement.value = formatDateToDDMMYYYY(e.target.value);
-            });
-          }
-
-          if (datepickerSelect != undefined) {
-            datepickerSelect.addEventListener('change', function () {
-              const selectedValue = this.value;
-              // Calendar library needs ISO format for min/max
-              if (datepickerCalendar) {
-                datepickerCalendar.min = selectedValue + "-01-01";
-                datepickerCalendar.max = selectedValue + "-12-31";
-                datepickerCalendar.focusedDate = datepickerCalendar.min;
-              }
-            });
-            datepickerSelect.focus();
-          }
-
-          const datepickerCancel = module.querySelector('#' + dropdownId + '-cancel');
-          const datepickerSubmit = module.querySelector('#' + dropdownId + '-submit');
-
-          if (datepickerCancel != undefined) {
-            datepickerCancel.onclick = function () {
-              // Restore values according to original format
-              if (datepickerCalendar) {
-                if (storedInitialFormat === 'iso') {
-                  datepickerCalendar.value = storedInitialValue;
-                  inputElement.value = formatDateToDDMMYYYY(storedInitialValue);
-                } else if (storedInitialFormat === 'dd-mm-yyyy') {
-                  datepickerCalendar.value = convertToISOFormat(storedInitialValue);
-                  inputElement.value = storedInitialValue;
-                }
-                datepickerCalendar.tentative = "";
-              }
-              closeDropdown();
-            }
-          }
-
-          if (datepickerSubmit != undefined) {
-            datepickerSubmit.onclick = function () {
-              // On submit, clear stored value for next opening
-              storedInitialValue = '';
-              storedInitialFormat = '';
-              closeDropdown();
-            }
-          }
-        });
-      }
-
-      const closeDropdown = () => {
-        setTimeout(() => {
-          isOpen = false;
-          inputElement.focus();
-        }, 300);
-      };
-
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.type === 'attributes' && mutation.attributeName === 'aria-expanded') {
-            const currentExpandedValue = mutation.target.getAttribute('aria-expanded');
-            if (currentExpandedValue !== isOpen) {
-              const datepickerTimeout = setTimeout(focusCalendar, 500);
-              isOpen = currentExpandedValue;
-              if (!isOpen) {
-                clearTimeout(datepickerTimeout);
-                closeDropdown();
-              }
-            }
-          }
-        });
-      });
-
-      observer.observe(datepickerDropdown, { attributes: true, attributeFilter: ['aria-expanded'] });
-    } else {
-      // Standalone case (no input element)
-      const datepickerSelect = module.querySelector(':is(select)');
-      const datepickerCalendar = module.querySelector(':is(calendar-date, calendar-multi, calendar-range)');
-
-      if (datepickerCalendar) {
-        // Calendar library needs dates to be in ISO format
-        if (datepickerCalendar.min) {
-          datepickerCalendar.min = convertSingleDateToISO(datepickerCalendar.min);
-        }
-        if (datepickerCalendar.max) {
-          datepickerCalendar.max = convertSingleDateToISO(datepickerCalendar.max);
-        }
-
-        // Convert initial value to ISO format if it exists
-        if (datepickerCalendar.value) {
-          datepickerCalendar.value = convertToISOFormat(datepickerCalendar.value);
-        }
-      }
-
-      if (datepickerSelect != undefined && datepickerCalendar) {
-        datepickerSelect.addEventListener('change', function () {
-          const selectedValue = this.value;
-          // Calendar library needs ISO format for min/max
-          datepickerCalendar.min = selectedValue + "-01-01";
-          datepickerCalendar.max = selectedValue + "-12-31";
-          datepickerCalendar.focusedDate = datepickerCalendar.min;
-        });
-      }
-    }
-  });
-}
-
-// Global instance manager to ensure only one floating element is shown at a time
-const FloatingManager = {
-  activeInstances: new Set(),
-
-  register(instance) {
-    this.activeInstances.add(instance);
-  },
-
-  unregister(instance) {
-    this.activeInstances.delete(instance);
-  },
-
-  hideAll(except = null) {
-    this.activeInstances.forEach(instance => {
-      if (instance !== except && instance.isShown) {
-        instance.hide();
-      }
-    });
-  }
-};
-
-function createFloatingElement(reference, content, options = {}) {
-  const defaultOptions = {
-    placement: 'bottom',
-    strategy: 'absolute',
-    middleware: [],
-    role: false,
-    ariaContent: 'auto',
-    interactive: false,
-    offset: [0, 10],
-    hideOnEsc: true,
-    hideOnPopperBlur: true,
-    hideOnClick: true,
-    trigger: 'mouseenter focus',
-    onMount: null,
-    onShown: null,
-    onHidden: null,
-    onCreate: null,
-    arrow: false,
-    arrowClassName: 'floating-arrow',
-    autoPlacement: true
-  };
-
-  const config = { ...defaultOptions, ...options };
-
-  let floatingEl = content;
-  let arrowEl = null;
-
-  floatingEl.style.position = 'absolute';
-  floatingEl.style.zIndex = '9999';
-
-  if (config.interactive) {
-    floatingEl.style.pointerEvents = 'auto';
-  } else {
-    floatingEl.style.pointerEvents = 'none';
-  }
-
-  if (config.arrow) {
-    arrowEl = document.createElement('div');
-    arrowEl.className = config.arrowClassName;
-    arrowEl.style.position = 'absolute';
-    arrowEl.style.width = '8px';
-    arrowEl.style.height = '8px';
-    arrowEl.style.background = 'inherit';
-    arrowEl.style.visibility = 'hidden';
-
-    floatingEl.appendChild(arrowEl);
-  }
-
-  floatingEl.style.display = 'none';
-
-  let isShown = false;
-  let cleanup = null;
-
-  const middlewares = [];
-
-  // Add offset if configured
-  if (config.offset[0] !== 0 || config.offset[1] !== 0) {
-    middlewares.push(
-      computePosition.offset({
-        mainAxis: config.offset[1],
-        crossAxis: config.offset[0]
-      })
-    );
-  }
-
-  // Add flip if necessary and autoPlacement is enabled
-  if (config.autoPlacement && config.placement.includes('-')) {
-    middlewares.push(computePosition.flip());
-  }
-
-  // Add hide middleware to detect when element goes out of view
-  middlewares.push(computePosition.hide());
-
-  // Add any custom middleware
-  if (config.middleware && config.middleware.length) {
-    middlewares.push(...config.middleware);
-  }
-
-  if (config.arrow && arrowEl) {
-    middlewares.push(computePosition.arrow({ element: arrowEl }));
-  }
-
-  const updatePosition = async () => {
-    if (!isShown) return;
-
-    const { x, y, placement, middlewareData } = await computePosition.computePosition(reference, floatingEl, {
-      placement: config.placement,
-      strategy: config.strategy,
-      middleware: middlewares
-    });
-
-    Object.assign(floatingEl.style, {
-      left: `${x}px`,
-      top: `${y}px`
-    });
-
-    // Handle hiding when element goes out of view
-    if (middlewareData.hide) {
-      const { referenceHidden, escaped } = middlewareData.hide;
-
-      if (referenceHidden || escaped) {
-        hide();
-        return;
-      }
-    }
-
-    if (config.arrow && arrowEl && middlewareData.arrow) {
-      const { x: arrowX, y: arrowY } = middlewareData.arrow;
-
-      const staticSide = {
-        top: 'bottom',
-        right: 'left',
-        bottom: 'top',
-        left: 'right'
-      }[placement.split('-')[0]];
-
-      Object.assign(arrowEl.style, {
-        left: arrowX != null ? `${arrowX}px` : '',
-        top: arrowY != null ? `${arrowY}px` : '',
-        right: '',
-        bottom: '',
-        [staticSide]: '-4px',
-        transform: staticSide === 'top' ? 'rotate(45deg)' :
-          staticSide === 'bottom' ? 'rotate(225deg)' :
-            staticSide === 'left' ? 'rotate(135deg)' : 'rotate(315deg)',
-        visibility: 'visible'
-      });
-    }
-
-    if (config.onShown && !floatingEl._onShownCalled) {
-      config.onShown({ reference, popper: floatingEl });
-      floatingEl._onShownCalled = true;
-    }
-  };
-
-  let documentClickHandler = null;
-
-  const show = () => {
-    if (isShown) return;
-
-    // Hide all other floating elements before showing this one
-    FloatingManager.hideAll(api);
-
-    isShown = true;
-    floatingEl._onShownCalled = false;
-
-    floatingEl.style.display = 'block';
-
-    updatePosition();
-
-    if (cleanup) {
-      cleanup();
-    }
-
-    cleanup = computePosition.autoUpdate(reference, floatingEl, updatePosition);
-
-    if (config.role) {
-      floatingEl.setAttribute('role', config.role);
-    }
-
-    if (config.ariaContent === 'labelledby') {
-      reference.setAttribute('aria-labelledby', floatingEl.id);
-    } else if (config.ariaContent === 'describedby') {
-      reference.setAttribute('aria-describedby', floatingEl.id);
-    }
-
-    if (config.onMount) {
-      config.onMount({ reference, popper: floatingEl });
-    }
-
-    // Add click outside listener if hideOnClick is enabled
-    if (config.hideOnClick && !documentClickHandler) {
-      documentClickHandler = (event) => {
-        if (isShown &&
-          event.target !== reference &&
-          !reference.contains(event.target) &&
-          !floatingEl.contains(event.target)) {
-          hide();
-        }
-      };
-
-      // Add listener on next tick to avoid immediate trigger
-      setTimeout(() => {
-        document.addEventListener('click', documentClickHandler);
-      }, 0);
-    }
-
-    const event = new CustomEvent('floatingui:shown', {
-      detail: { reference, popper: floatingEl }
-    });
-    reference.dispatchEvent(event);
-  };
-
-  const hide = () => {
-    if (!isShown) return;
-    isShown = false;
-
-    floatingEl.style.display = 'none';
-
-    if (cleanup) {
-      cleanup();
-      cleanup = null;
-    }
-
-    // Remove click outside listener
-    if (documentClickHandler) {
-      document.removeEventListener('click', documentClickHandler);
-      documentClickHandler = null;
-    }
-
-    if (config.ariaContent === 'labelledby') {
-      reference.removeAttribute('aria-labelledby');
-    } else if (config.ariaContent === 'describedby') {
-      reference.removeAttribute('aria-describedby');
-    }
-
-    if (config.onHidden) {
-      config.onHidden({ reference, popper: floatingEl });
-    }
-
-    const event = new CustomEvent('floatingui:hidden', {
-      detail: { reference, popper: floatingEl }
-    });
-    reference.dispatchEvent(event);
-  };
-
-  const toggle = () => {
-    if (isShown) {
-      hide();
-    } else {
-      show();
-    }
-  };
-
-  if (config.trigger.includes('click')) {
-    reference.addEventListener('click', (event) => {
-      event.preventDefault();
-      toggle();
-    });
-  }
-
-  if (config.trigger.includes('mouseenter')) {
-    reference.addEventListener('mouseenter', show);
-    reference.addEventListener('mouseleave', hide);
-  }
-
-  if (config.trigger.includes('focus')) {
-    reference.addEventListener('focus', show);
-    reference.addEventListener('blur', hide);
-  }
-
-  if (config.hideOnEsc) {
-    document.addEventListener('keydown', (event) => {
-      if (isShown && event.key === 'Escape') {
-        hide();
-      }
-    });
-  }
-
-  if (config.hideOnPopperBlur) {
-    floatingEl.addEventListener('focusout', (event) => {
-      if (isShown &&
-        event.relatedTarget &&
-        !floatingEl.contains(event.relatedTarget) &&
-        event.relatedTarget !== reference) {
-        hide();
-      }
-    });
-  }
-
-  const api = {
-    reference,
-    popper: floatingEl,
-    show,
-    hide,
-    toggle,
-    update: updatePosition,
-    get isShown() { return isShown; },
-    destroy: () => {
-      hide();
-      FloatingManager.unregister(api);
-    }
-  };
-
-  // Store the instance on the reference element
-  reference._floatingUI = api;
-
-  // Add data attribute to the floating element
-  floatingEl.setAttribute('data-floating-root', 'true');
-
-  // Register this instance with the global manager
-  FloatingManager.register(api);
-
-  if (config.onCreate) {
-    config.onCreate(api);
-  }
-
-  return api;
-}
-
-export function TreegridComponent(aria) {
-  const doAllowRowFocus = true;
-  const doStartRowFocus = true;
-  document.querySelectorAll('[data-module="c-treegrid"]').forEach((treegridEl) => TreeGrid(treegridEl, doAllowRowFocus, doStartRowFocus));
-}
+import "cally";
+import * as computePosition from '@floating-ui/dom';
+import { accordion } from './aria/accordion.js';
+import { alert } from './aria/alert.js';
+import { CheckBox } from './aria/checkBoxes.js';
+import { Collapsible } from './aria/collapsible.js';
+import { dataGrid } from './aria/dataGrid.js';
+import { dialog } from './aria/dialog.js';
+import { LinksList } from './aria/linksList.js';
+import { combobox } from './aria/combobox.js';
+import { listbox } from './aria/listbox.js';
+import { MenubarAction } from './aria/MenubarAction.js';
+import { MenubarItemAction } from './aria/MenubarItemAction.js';
+import { MenuHorizontal } from './aria/MenuHorizontal.js';
+import { MenuNavigation } from './aria/MenuNavigation.js';
+import { MenuVertical } from './aria/MenuVertical.js';
+import { Nav } from './aria/Nav.js';
+import { Notification } from './aria/notification.js';
+import { PopupMenuAction } from './aria/PopupMenuAction.js';
+import { PopupMenuItemAction } from './aria/PopupMenuItemAction.js';
+import { RadioButton } from './aria/radioButton.js';
+import { tabs } from './aria/tabs.js';
+import { Toggle } from './aria/toggle.js';
+import { Tree } from './aria/tree.js';
+import { TreeGrid } from './aria/treegrid.js';
+import { Treeitem } from './aria/treeitem.js';
+import { convertSingleDateToISO, convertToISOFormat, detectDateFormat, formatDateToDDMMYYYY, utils } from './aria/utils.js';
+
+export function accordionComponent(aria) {
+  accordion(aria);
+}
+
+export function alertComponent(aria) {
+  alert(aria);
+}
+
+export function comboboxComponent(aria) {
+  utils(aria);
+  combobox(aria);
+
+  var modules = document.querySelectorAll('[data-module="c-combobox"]');
+  [...modules].forEach(function (module) {
+    var inputNode = module.querySelector('[data-module="c-combobox-input"]');
+    var listboxNode = module.querySelector('[data-module="c-combobox-list"]');
+    var hiddenInputNode = module.querySelector('[data-module="c-combobox-hidden"]');
+    var tooltipNode = module.querySelector('[data-module="c-combobox-tooltip"]');
+    var noResultsNode = module.querySelector('[data-module="c-combobox-no-results"]');
+    var toggleButtonNode = module.querySelector('[data-module="c-combobox-toggle"]');
+
+    if (inputNode && listboxNode) {
+      var comboboxObj = new aria.Combobox(module, inputNode, listboxNode, hiddenInputNode, tooltipNode, noResultsNode, toggleButtonNode);
+
+      // Store instance reference for global API
+      inputNode._comboboxInstance = comboboxObj;
+
+      tooltipNode.style.width = 'auto';
+      tooltipNode.style.minWidth = inputNode.offsetWidth + 'px';
+
+      var middlewares = [
+        computePosition.shift({ padding: 5 })
+      ];
+
+      var instance = createFloatingElement(inputNode, tooltipNode, {
+        placement: 'bottom-start',
+        offset: [8, -1],
+        middleware: middlewares,
+        interactive: true,
+        trigger: 'manual',
+        hideOnClick: false,
+        hideOnEsc: false,
+        hideOnPopperBlur: false,
+        role: false,
+        ariaContent: 'auto',
+        arrow: false,
+        autoPlacement: false
+      });
+
+      comboboxObj.floatingInstance = instance;
+    }
+  });
+}
+
+export function toggleComponent(aria) {
+  Toggle(aria);
+}
+
+export function collapsibleComponent(aria) {
+  Collapsible(aria);
+
+  const collapsibles = document.querySelectorAll('[data-module="c-collapsible"]');
+  [...collapsibles].forEach((collapsible) => {
+    aria.collapsibleInit(collapsible);
+  });
+}
+
+export function dialogComponent(aria) {
+  utils(aria);
+  dialog(aria);
+}
+
+export function dropdownComponent(aria) {
+  const modules = document.querySelectorAll('[data-module]');
+  for (const item in modules) if (modules.hasOwnProperty(item)) {
+    const moduleValue = modules[item].getAttribute('data-module');
+
+    if (moduleValue == 'c-dropdown') {
+      const buttonDropdown = modules[item].querySelector('[data-module = "c-dropdown-button"]');
+      const tooltip = modules[item].querySelector('[data-module = "c-dropdown-tooltip"]');
+      const roleCustom = buttonDropdown.getAttribute('data-role');
+      const ariaLabel = buttonDropdown.getAttribute('data-aria-label');
+      const ariaModal = buttonDropdown.getAttribute('data-aria-modal');
+      const ariaHasPopup = buttonDropdown.getAttribute('data-aria-haspopup');
+
+      if (buttonDropdown && tooltip) {
+        // Adjust positioning to match Tippy behavior
+        const middlewares = [
+          computePosition.shift({ padding: 5 })
+        ];
+
+        // Preserve relative position of tooltip with respect to button
+        tooltip.style.width = 'auto';
+        tooltip.style.minWidth = buttonDropdown.offsetWidth + 'px';
+
+        const instance = createFloatingElement(buttonDropdown, tooltip, {
+          placement: 'bottom-start',
+          offset: [0, 0],
+          middleware: middlewares,
+          interactive: true,
+          trigger: 'click',
+          hideOnClick: true,
+          role: roleCustom || false,
+          ariaContent: 'auto',
+          arrow: false,
+          autoPlacement: false,
+          onCreate: (instance) => {
+            if (ariaHasPopup) {
+              instance.reference.setAttribute('aria-haspopup', ariaHasPopup);
+            }
+          },
+          onShown: (instance) => {
+            buttonDropdown.setAttribute('aria-expanded', 'true');
+            aria.Utils.focusFirstDescendant(tooltip);
+            if (ariaLabel) {
+              instance.popper.setAttribute('aria-label', ariaLabel);
+            }
+            if (ariaModal) {
+              instance.popper.setAttribute('aria-modal', ariaModal);
+            }
+          },
+          onHidden: (instance) => {
+            buttonDropdown.setAttribute('aria-expanded', 'false');
+          }
+        });
+        // Initialize aria-expanded state
+        buttonDropdown.setAttribute('aria-expanded', 'false');
+      }
+    }
+  }
+}
+
+export function listboxComponent(aria) {
+  listbox(aria);
+  const modules = document.querySelectorAll('[data-module]');
+  let activeButton;
+  for (const item in modules)
+    if (modules.hasOwnProperty(item)) {
+      const moduleValue = modules[item].getAttribute('data-module');
+
+      if (moduleValue == 'c-listbox') {
+        const buttonListbox = modules[item].querySelector('[data-module = "c-listbox-button"]');
+        const tooltip = modules[item].querySelector('[data-module = "c-listbox-tooltip"]');
+        const list = modules[item].querySelector('[data-module = "c-listbox-list"]');
+
+        if (buttonListbox && tooltip) {
+          const listboxObj = new aria.Listbox(list);
+
+          // Preserve relative position of tooltip with respect to button
+          tooltip.style.width = 'auto';
+          tooltip.style.minWidth = buttonListbox.offsetWidth + 'px';
+
+          const middlewares = [
+            computePosition.shift({ padding: 5 })
+          ];
+
+          const instance = createFloatingElement(buttonListbox, tooltip, {
+            placement: 'bottom-start',
+            offset: [8, -1],
+            middleware: middlewares,
+            interactive: true,
+            trigger: 'manual',
+            hideOnClick: true,
+            role: false,
+            ariaContent: 'auto',
+            hideOnEsc: true,
+            hideOnPopperBlur: true,
+            onMount: (instance) => {
+              if (list.querySelectorAll('[aria-selected="true"]')[0]) {
+                listboxObj.focusItem(list.querySelectorAll('[aria-selected="true"]')[0]);
+              }
+            },
+            onHidden: (instance) => {
+              buttonListbox.classList.remove('open');
+              buttonListbox.setAttribute('aria-expanded', 'false');
+            }
+          });
+
+          buttonListbox.addEventListener("click", (event) => {
+            if (!buttonListbox.classList.contains('open')) {
+              instance.show();
+              list.focus();
+              buttonListbox.classList.add('open');
+              buttonListbox.setAttribute('aria-expanded', 'true');
+            } else {
+              list.blur();
+              instance.hide();
+            }
+          });
+
+          document.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter' && buttonListbox.classList.contains('open')) {
+              instance.hide();
+            }
+          });
+
+          listboxObj.setHandleFocusChange(function (evt) {
+            if ((!list.hasAttribute('aria-multiselectable')) && (buttonListbox.getAttribute('data-change') == 'change')) {
+              buttonListbox.firstElementChild.innerHTML = evt.innerHTML;
+            }
+          });
+
+          const getMultiSelectable = buttonListbox.getAttribute('aria-labelledby');
+          const allowMultiple = getMultiSelectable && getMultiSelectable.includes('is-multiselectable-label');
+
+          if (!allowMultiple) {
+            list.addEventListener("click", (event) => {
+              buttonListbox.click();
+            });
+          }
+
+          // Initialize aria-expanded state
+          buttonListbox.setAttribute('aria-expanded', 'false');
+        }
+      }
+    }
+}
+
+export function linksListComponent(aria) {
+  LinksList(aria);
+
+  const modules = document.querySelectorAll('[data-module="c-links-list"]');
+  [...modules].forEach((module) => {
+    aria.linksListInit(module);
+  });
+}
+
+export function menubarComponent(aria) {
+  PopupMenuItemAction(aria);
+  PopupMenuAction(aria);
+  MenubarItemAction(aria);
+  MenubarAction(aria);
+  const modules = document.querySelectorAll('[data-module="c-menubar"]');
+  [...modules].forEach((module) => {
+    const menubar = new aria.MenubarAction(module);
+    menubar.init(null);
+  });
+}
+
+export function tableAdvancedComponent(aria) {
+  utils(aria);
+  dataGrid(aria);
+  const modules = document.querySelectorAll('[data-module="c-table-advanced"]');
+  [...modules].forEach((module) => {
+    const grid = new aria.Grid(module);
+  });
+}
+
+export function tabsComponent(aria) {
+  tabs(aria);
+  const modules = document.querySelectorAll('[data-module="c-tabs"]');
+  [...modules].forEach((module) => {
+    aria.tabsInit(module);
+  });
+}
+
+export function tooltipComponent(aria) {
+  const modules = document.querySelectorAll('[data-module]');
+  for (const item in modules)
+    if (modules.hasOwnProperty(item)) {
+      const moduleValue = modules[item].getAttribute('data-module');
+
+      if (moduleValue == 'c-tooltip') {
+        const tooltipButton = modules[item].querySelector('[data-module = "c-tooltip-button"]');
+        const ariaContent = tooltipButton.matches('[data-type = "c-tooltip-button-complex"]') ? 'describedby' : 'labelledby';
+        const tooltipTooltip = modules[item].querySelector('[data-module = "c-tooltip-tooltip"]');
+
+        if (tooltipButton && tooltipTooltip) {
+          // Set max-width directly on the tooltip element (350px is Tippy's default)
+          tooltipTooltip.style.maxWidth = '350px';
+
+          // Use shift middleware to keep tooltip within viewport bounds
+          const middlewares = [
+            computePosition.shift({ padding: 8 })
+          ];
+
+          const instance = createFloatingElement(tooltipButton, tooltipTooltip, {
+            placement: 'top',
+            interactive: true,
+            trigger: 'mouseenter focus',
+            hideOnClick: true,
+            role: 'tooltip',
+            ariaContent: ariaContent,
+            arrow: true,
+            middleware: middlewares
+          });
+        }
+      }
+    }
+}
+
+export function treeComponent(aria) {
+  Treeitem(aria);
+  Tree(aria);
+  const modules = document.querySelectorAll('[data-module]');
+  for (const item in modules)
+    if (modules.hasOwnProperty(item)) {
+      const moduleValue = modules[item].getAttribute('data-module');
+
+      if (moduleValue == 'c-tree') {
+        const tree = new aria.Tree(modules[item]);
+        tree.init();
+      }
+
+      if (moduleValue == 'c-tree__item') {
+        modules[item].addEventListener('click', function (event) {
+          event.stopPropagation();
+        });
+      }
+    }
+}
+
+export function notificationComponent(aria) {
+  Notification(aria);
+  const modules = document.querySelectorAll('[data-module="c-notification"]');
+  [...modules].forEach((module) => {
+    aria.notificationInit(module);
+  });
+}
+
+export function radioButtonComponent(aria) {
+  RadioButton(aria);
+}
+
+export function checkBoxComponent(aria) {
+  CheckBox(aria);
+}
+
+export function MenuVerticalComponent(aria) {
+  MenuVertical(aria);
+  const modules = document.querySelectorAll('[data-module="c-menu-vertical"]');
+  [...modules].forEach((module) => {
+    const menuVertical = new aria.MenuVertical(module);
+    menuVertical.init(null);
+  });
+}
+
+export function MenuHorizontalComponent(aria) {
+  MenuHorizontal(aria);
+  const modules = document.querySelectorAll('[data-module="c-menu-horizontal"]');
+  [...modules].forEach((module) => {
+    const MenuHorizontal = new aria.MenuHorizontal(module);
+    MenuHorizontal.init(null);
+  });
+}
+
+export function MenuNavigationComponent(aria) {
+  MenuNavigation(aria);
+  const modules = document.querySelectorAll('[data-module="c-menu-navigation"]');
+  [...modules].forEach((module) => {
+    const menuNavigation = new aria.MenuNavigation(module);
+    menuNavigation.init(null);
+  });
+}
+
+export function NavComponent(aria) {
+  Nav(aria);
+  const modules = document.querySelectorAll('[data-module="c-nav"]');
+  [...modules].forEach((module) => {
+    const nav = new aria.Nav(module);
+    nav.init(null);
+  });
+}
+
+export function DatepickerComponent(aria) {
+  const modules = document.querySelectorAll('[data-module="c-datepicker"]');
+  [...modules].forEach((module) => {
+    const inputElement = module.getElementsByTagName('input')[0];
+    if (inputElement) {
+      // Case with input element (dropdown mode)
+      const dropdownId = inputElement.getAttribute('id');
+      const datepickerDropdown = inputElement.parentNode.querySelector('[data-module="c-dropdown-button"]');
+      let datepickerCalendar = null;
+      let isOpen = false;
+
+      // Variable to store the initial value only when the calendar opens
+      let storedInitialValue = '';
+      let storedInitialFormat = '';
+
+      const focusCalendar = () => {
+        const datepickerSelect = module.querySelector(':is(select)');
+        const datepickerCalendar = module.querySelector(':is(calendar-date, calendar-multi, calendar-range)');
+
+        // Calendar library needs dates to be in ISO format
+        if (datepickerCalendar && datepickerCalendar.min) {
+          datepickerCalendar.min = convertSingleDateToISO(datepickerCalendar.min);
+        }
+        if (datepickerCalendar && datepickerCalendar.max) {
+          datepickerCalendar.max = convertSingleDateToISO(datepickerCalendar.max);
+        }
+
+        // Store the initial value only when the calendar opens with improved format detection
+        if (!storedInitialValue) {
+          storedInitialValue = datepickerCalendar === null ? '' : datepickerCalendar.value;
+          storedInitialFormat = detectDateFormat(storedInitialValue);
+        }
+
+        requestAnimationFrame(() => {
+          if (datepickerCalendar != undefined) {
+            datepickerCalendar.focus();
+            datepickerCalendar.addEventListener('change', (e) => {
+              inputElement.value = formatDateToDDMMYYYY(e.target.value);
+            });
+          }
+
+          if (datepickerSelect != undefined) {
+            datepickerSelect.addEventListener('change', function () {
+              const selectedValue = this.value;
+              // Calendar library needs ISO format for min/max
+              if (datepickerCalendar) {
+                datepickerCalendar.min = selectedValue + "-01-01";
+                datepickerCalendar.max = selectedValue + "-12-31";
+                datepickerCalendar.focusedDate = datepickerCalendar.min;
+              }
+            });
+            datepickerSelect.focus();
+          }
+
+          const datepickerCancel = module.querySelector('#' + dropdownId + '-cancel');
+          const datepickerSubmit = module.querySelector('#' + dropdownId + '-submit');
+
+          if (datepickerCancel != undefined) {
+            datepickerCancel.onclick = function () {
+              // Restore values according to original format
+              if (datepickerCalendar) {
+                if (storedInitialFormat === 'iso') {
+                  datepickerCalendar.value = storedInitialValue;
+                  inputElement.value = formatDateToDDMMYYYY(storedInitialValue);
+                } else if (storedInitialFormat === 'dd-mm-yyyy') {
+                  datepickerCalendar.value = convertToISOFormat(storedInitialValue);
+                  inputElement.value = storedInitialValue;
+                }
+                datepickerCalendar.tentative = "";
+              }
+              closeDropdown();
+            }
+          }
+
+          if (datepickerSubmit != undefined) {
+            datepickerSubmit.onclick = function () {
+              // On submit, clear stored value for next opening
+              storedInitialValue = '';
+              storedInitialFormat = '';
+              closeDropdown();
+            }
+          }
+        });
+      }
+
+      const closeDropdown = () => {
+        setTimeout(() => {
+          isOpen = false;
+          inputElement.focus();
+        }, 300);
+      };
+
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'aria-expanded') {
+            const currentExpandedValue = mutation.target.getAttribute('aria-expanded');
+            if (currentExpandedValue !== isOpen) {
+              const datepickerTimeout = setTimeout(focusCalendar, 500);
+              isOpen = currentExpandedValue;
+              if (!isOpen) {
+                clearTimeout(datepickerTimeout);
+                closeDropdown();
+              }
+            }
+          }
+        });
+      });
+
+      observer.observe(datepickerDropdown, { attributes: true, attributeFilter: ['aria-expanded'] });
+    } else {
+      // Standalone case (no input element)
+      const datepickerSelect = module.querySelector(':is(select)');
+      const datepickerCalendar = module.querySelector(':is(calendar-date, calendar-multi, calendar-range)');
+
+      if (datepickerCalendar) {
+        // Calendar library needs dates to be in ISO format
+        if (datepickerCalendar.min) {
+          datepickerCalendar.min = convertSingleDateToISO(datepickerCalendar.min);
+        }
+        if (datepickerCalendar.max) {
+          datepickerCalendar.max = convertSingleDateToISO(datepickerCalendar.max);
+        }
+
+        // Convert initial value to ISO format if it exists
+        if (datepickerCalendar.value) {
+          datepickerCalendar.value = convertToISOFormat(datepickerCalendar.value);
+        }
+      }
+
+      if (datepickerSelect != undefined && datepickerCalendar) {
+        datepickerSelect.addEventListener('change', function () {
+          const selectedValue = this.value;
+          // Calendar library needs ISO format for min/max
+          datepickerCalendar.min = selectedValue + "-01-01";
+          datepickerCalendar.max = selectedValue + "-12-31";
+          datepickerCalendar.focusedDate = datepickerCalendar.min;
+        });
+      }
+    }
+  });
+}
+
+// Global instance manager to ensure only one floating element is shown at a time
+const FloatingManager = {
+  activeInstances: new Set(),
+
+  register(instance) {
+    this.activeInstances.add(instance);
+  },
+
+  unregister(instance) {
+    this.activeInstances.delete(instance);
+  },
+
+  hideAll(except = null) {
+    this.activeInstances.forEach(instance => {
+      if (instance !== except && instance.isShown) {
+        instance.hide();
+      }
+    });
+  }
+};
+
+function createFloatingElement(reference, content, options = {}) {
+  const defaultOptions = {
+    placement: 'bottom',
+    strategy: 'absolute',
+    middleware: [],
+    role: false,
+    ariaContent: 'auto',
+    interactive: false,
+    offset: [0, 10],
+    hideOnEsc: true,
+    hideOnPopperBlur: true,
+    hideOnClick: true,
+    trigger: 'mouseenter focus',
+    onMount: null,
+    onShown: null,
+    onHidden: null,
+    onCreate: null,
+    arrow: false,
+    arrowClassName: 'floating-arrow',
+    autoPlacement: true
+  };
+
+  const config = { ...defaultOptions, ...options };
+
+  let floatingEl = content;
+  let arrowEl = null;
+
+  floatingEl.style.position = 'absolute';
+  floatingEl.style.zIndex = '9999';
+
+  if (config.interactive) {
+    floatingEl.style.pointerEvents = 'auto';
+  } else {
+    floatingEl.style.pointerEvents = 'none';
+  }
+
+  if (config.arrow) {
+    arrowEl = document.createElement('div');
+    arrowEl.className = config.arrowClassName;
+    arrowEl.style.position = 'absolute';
+    arrowEl.style.width = '8px';
+    arrowEl.style.height = '8px';
+    arrowEl.style.background = 'inherit';
+    arrowEl.style.visibility = 'hidden';
+
+    floatingEl.appendChild(arrowEl);
+  }
+
+  floatingEl.style.display = 'none';
+
+  let isShown = false;
+  let cleanup = null;
+
+  const middlewares = [];
+
+  // Add offset if configured
+  if (config.offset[0] !== 0 || config.offset[1] !== 0) {
+    middlewares.push(
+      computePosition.offset({
+        mainAxis: config.offset[1],
+        crossAxis: config.offset[0]
+      })
+    );
+  }
+
+  // Add flip if necessary and autoPlacement is enabled
+  if (config.autoPlacement && config.placement.includes('-')) {
+    middlewares.push(computePosition.flip());
+  }
+
+  // Add hide middleware to detect when element goes out of view
+  middlewares.push(computePosition.hide());
+
+  // Add any custom middleware
+  if (config.middleware && config.middleware.length) {
+    middlewares.push(...config.middleware);
+  }
+
+  if (config.arrow && arrowEl) {
+    middlewares.push(computePosition.arrow({ element: arrowEl }));
+  }
+
+  const updatePosition = async () => {
+    if (!isShown) return;
+
+    const { x, y, placement, middlewareData } = await computePosition.computePosition(reference, floatingEl, {
+      placement: config.placement,
+      strategy: config.strategy,
+      middleware: middlewares
+    });
+
+    Object.assign(floatingEl.style, {
+      left: `${x}px`,
+      top: `${y}px`
+    });
+
+    // Handle hiding when element goes out of view
+    if (middlewareData.hide) {
+      const { referenceHidden, escaped } = middlewareData.hide;
+
+      if (referenceHidden || escaped) {
+        hide();
+        return;
+      }
+    }
+
+    if (config.arrow && arrowEl && middlewareData.arrow) {
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
+
+      const staticSide = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right'
+      }[placement.split('-')[0]];
+
+      Object.assign(arrowEl.style, {
+        left: arrowX != null ? `${arrowX}px` : '',
+        top: arrowY != null ? `${arrowY}px` : '',
+        right: '',
+        bottom: '',
+        [staticSide]: '-4px',
+        transform: staticSide === 'top' ? 'rotate(45deg)' :
+          staticSide === 'bottom' ? 'rotate(225deg)' :
+            staticSide === 'left' ? 'rotate(135deg)' : 'rotate(315deg)',
+        visibility: 'visible'
+      });
+    }
+
+    if (config.onShown && !floatingEl._onShownCalled) {
+      config.onShown({ reference, popper: floatingEl });
+      floatingEl._onShownCalled = true;
+    }
+  };
+
+  let documentClickHandler = null;
+
+  const show = () => {
+    if (isShown) return;
+
+    // Hide all other floating elements before showing this one
+    FloatingManager.hideAll(api);
+
+    isShown = true;
+    floatingEl._onShownCalled = false;
+
+    floatingEl.style.display = 'block';
+
+    updatePosition();
+
+    if (cleanup) {
+      cleanup();
+    }
+
+    cleanup = computePosition.autoUpdate(reference, floatingEl, updatePosition);
+
+    if (config.role) {
+      floatingEl.setAttribute('role', config.role);
+    }
+
+    if (config.ariaContent === 'labelledby') {
+      reference.setAttribute('aria-labelledby', floatingEl.id);
+    } else if (config.ariaContent === 'describedby') {
+      reference.setAttribute('aria-describedby', floatingEl.id);
+    }
+
+    if (config.onMount) {
+      config.onMount({ reference, popper: floatingEl });
+    }
+
+    // Add click outside listener if hideOnClick is enabled
+    if (config.hideOnClick && !documentClickHandler) {
+      documentClickHandler = (event) => {
+        if (isShown &&
+          event.target !== reference &&
+          !reference.contains(event.target) &&
+          !floatingEl.contains(event.target)) {
+          hide();
+        }
+      };
+
+      // Add listener on next tick to avoid immediate trigger
+      setTimeout(() => {
+        document.addEventListener('click', documentClickHandler);
+      }, 0);
+    }
+
+    const event = new CustomEvent('floatingui:shown', {
+      detail: { reference, popper: floatingEl }
+    });
+    reference.dispatchEvent(event);
+  };
+
+  const hide = () => {
+    if (!isShown) return;
+    isShown = false;
+
+    floatingEl.style.display = 'none';
+
+    if (cleanup) {
+      cleanup();
+      cleanup = null;
+    }
+
+    // Remove click outside listener
+    if (documentClickHandler) {
+      document.removeEventListener('click', documentClickHandler);
+      documentClickHandler = null;
+    }
+
+    if (config.ariaContent === 'labelledby') {
+      reference.removeAttribute('aria-labelledby');
+    } else if (config.ariaContent === 'describedby') {
+      reference.removeAttribute('aria-describedby');
+    }
+
+    if (config.onHidden) {
+      config.onHidden({ reference, popper: floatingEl });
+    }
+
+    const event = new CustomEvent('floatingui:hidden', {
+      detail: { reference, popper: floatingEl }
+    });
+    reference.dispatchEvent(event);
+  };
+
+  const toggle = () => {
+    if (isShown) {
+      hide();
+    } else {
+      show();
+    }
+  };
+
+  if (config.trigger.includes('click')) {
+    reference.addEventListener('click', (event) => {
+      event.preventDefault();
+      toggle();
+    });
+  }
+
+  if (config.trigger.includes('mouseenter')) {
+    reference.addEventListener('mouseenter', show);
+    reference.addEventListener('mouseleave', hide);
+  }
+
+  if (config.trigger.includes('focus')) {
+    reference.addEventListener('focus', show);
+    reference.addEventListener('blur', hide);
+  }
+
+  if (config.hideOnEsc) {
+    document.addEventListener('keydown', (event) => {
+      if (isShown && event.key === 'Escape') {
+        hide();
+      }
+    });
+  }
+
+  if (config.hideOnPopperBlur) {
+    floatingEl.addEventListener('focusout', (event) => {
+      if (isShown &&
+        event.relatedTarget &&
+        !floatingEl.contains(event.relatedTarget) &&
+        event.relatedTarget !== reference) {
+        hide();
+      }
+    });
+  }
+
+  const api = {
+    reference,
+    popper: floatingEl,
+    show,
+    hide,
+    toggle,
+    update: updatePosition,
+    get isShown() { return isShown; },
+    destroy: () => {
+      hide();
+      FloatingManager.unregister(api);
+    }
+  };
+
+  // Store the instance on the reference element
+  reference._floatingUI = api;
+
+  // Add data attribute to the floating element
+  floatingEl.setAttribute('data-floating-root', 'true');
+
+  // Register this instance with the global manager
+  FloatingManager.register(api);
+
+  if (config.onCreate) {
+    config.onCreate(api);
+  }
+
+  return api;
+}
+
+export function TreegridComponent(aria) {
+  const doAllowRowFocus = true;
+  const doStartRowFocus = true;
+  document.querySelectorAll('[data-module="c-treegrid"]').forEach((treegridEl) => TreeGrid(treegridEl, doAllowRowFocus, doStartRowFocus));
+}