@orderlyshop/web-components 0.1.0

package/dist/navigation.js

@@ -0,0 +1,818 @@
+// src/utils/dom.ts
+var defaultMobileMediaQuery = "(max-width: 767px)";
+var responsiveTemplateConfig = {
+  mobileMediaQuery: defaultMobileMediaQuery
+};
+var responsiveMediaQuery;
+var responsiveListenersConnected = false;
+var responsiveNotificationQueued = false;
+var responsiveTemplateListeners = /* @__PURE__ */ new Set();
+var globalTemplates = [];
+function currentTemplateViewport() {
+  if (matchesMedia(responsiveTemplateConfig.mobileMediaQuery)) {
+    return "mobile";
+  }
+  return "desktop";
+}
+function observeResponsiveTemplateChanges(callback) {
+  if (typeof window === "undefined") {
+    return () => void 0;
+  }
+  responsiveTemplateListeners.add(callback);
+  connectResponsiveListeners();
+  return () => {
+    responsiveTemplateListeners.delete(callback);
+    if (responsiveTemplateListeners.size === 0) {
+      disconnectResponsiveListeners();
+    }
+  };
+}
+function ensureRenderRoot(host) {
+  const existing = host.querySelector(":scope > [data-orderly-render-root]");
+  if (existing instanceof HTMLElement) {
+    return existing;
+  }
+  const root = document.createElement("div");
+  root.dataset.orderlyRenderRoot = "";
+  host.append(root);
+  return root;
+}
+function render(host, content) {
+  host.dataset.orderlyViewport = currentTemplateViewport();
+  const root = ensureRenderRoot(host);
+  root.dataset.orderlyViewport = currentTemplateViewport();
+  root.replaceChildren();
+  if (typeof content === "string") {
+    root.innerHTML = content;
+  } else {
+    root.append(content);
+  }
+  host.dataset.orderlyReady = "true";
+  host.setAttribute("data-orderly-ready", "true");
+  return root;
+}
+function template(host, name) {
+  const localCandidates = [...host.children].filter((element) => element instanceof HTMLTemplateElement && element.dataset.orderlyTemplate === name);
+  return selectResponsiveTemplate(localCandidates) ?? selectResponsiveTemplate(globalTemplateCandidates(host, name));
+}
+function cloneTemplate(host, name) {
+  const found = template(host, name);
+  return found?.content.cloneNode(true);
+}
+function slotTarget(root, name) {
+  const target = root.querySelector(`[data-orderly-slot="${name}"], slot[name="${name}"]`);
+  return target ?? void 0;
+}
+function replaceSlot(root, name, content) {
+  const target = slotTarget(root, name);
+  if (!target) {
+    return;
+  }
+  target.replaceChildren();
+  if (typeof content === "string") {
+    target.textContent = content;
+  } else if (content) {
+    target.append(content);
+  }
+}
+function bindText(root, name, value) {
+  root.querySelectorAll(`[data-orderly-bind="${name}"]`).forEach((element) => {
+    element.textContent = value ?? "";
+  });
+}
+function dispatch(target, type, detail, options = {}) {
+  return target.dispatchEvent(new CustomEvent(type, {
+    bubbles: true,
+    composed: true,
+    ...options,
+    detail
+  }));
+}
+function selectResponsiveTemplate(candidates) {
+  const viewport = currentTemplateViewport();
+  const mediaMatch = candidates.find((candidate) => {
+    const media = candidate.dataset.orderlyMedia ?? candidate.getAttribute("media") ?? "";
+    return Boolean(media && matchesMedia(media));
+  });
+  if (mediaMatch) {
+    return mediaMatch;
+  }
+  const viewportMatch = candidates.find((candidate) => normalizeViewport(candidate.dataset.orderlyViewport) === viewport);
+  if (viewportMatch) {
+    return viewportMatch;
+  }
+  return candidates.find((candidate) => {
+    const media = candidate.dataset.orderlyMedia ?? candidate.getAttribute("media");
+    return !media && !candidate.dataset.orderlyViewport;
+  });
+}
+function globalTemplateCandidates(host, name) {
+  return [
+    ...globalTemplates,
+    ...documentGlobalTemplates()
+  ].filter((candidate) => candidate.dataset.orderlyTemplate === name && templateAppliesToHost(candidate, host));
+}
+function documentGlobalTemplates() {
+  if (typeof document === "undefined") {
+    return [];
+  }
+  return [...document.querySelectorAll("template[data-orderly-template]")].filter((element) => element instanceof HTMLTemplateElement).filter((element) => element.hasAttribute("data-orderly-for") || element.hasAttribute("data-orderly-component") || element.hasAttribute("data-orderly-template-scope") || element.hasAttribute("data-orderly-global"));
+}
+function templateAppliesToHost(templateElement, host) {
+  if (templateElement.hasAttribute("data-orderly-global")) {
+    return true;
+  }
+  const targets = splitTemplateTargets(
+    templateElement.dataset.orderlyFor ?? templateElement.dataset.orderlyComponent ?? templateElement.dataset.orderlyTemplateScope
+  );
+  if (targets.length === 0) {
+    return false;
+  }
+  const componentName = shortComponentName(host.localName);
+  return targets.some((target) => target === "*" || target === host.localName || target === componentName);
+}
+function splitTemplateTargets(value) {
+  return (value ?? "").split(/[\s,]+/g).map((target) => target.trim()).filter(Boolean);
+}
+function shortComponentName(localName) {
+  return localName.includes("-") ? localName.split("-").slice(1).join("-") : localName;
+}
+function normalizeViewport(value) {
+  if (value === "mobile" || value === "desktop") {
+    return value;
+  }
+  return void 0;
+}
+function matchesMedia(media) {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(media).matches;
+}
+function connectResponsiveListeners() {
+  if (responsiveListenersConnected || typeof window === "undefined") {
+    return;
+  }
+  responsiveListenersConnected = true;
+  if (typeof window.matchMedia === "function") {
+    responsiveMediaQuery = window.matchMedia(responsiveTemplateConfig.mobileMediaQuery);
+    addMediaQueryListener(responsiveMediaQuery, notifyResponsiveTemplateListeners);
+  }
+  window.addEventListener("resize", notifyResponsiveTemplateListeners);
+}
+function disconnectResponsiveListeners() {
+  if (!responsiveListenersConnected || typeof window === "undefined") {
+    return;
+  }
+  if (responsiveMediaQuery) {
+    removeMediaQueryListener(responsiveMediaQuery, notifyResponsiveTemplateListeners);
+  }
+  responsiveMediaQuery = void 0;
+  responsiveListenersConnected = false;
+  window.removeEventListener("resize", notifyResponsiveTemplateListeners);
+}
+function notifyResponsiveTemplateListeners() {
+  if (responsiveNotificationQueued) {
+    return;
+  }
+  responsiveNotificationQueued = true;
+  queueMicrotask(() => {
+    responsiveNotificationQueued = false;
+    responsiveTemplateListeners.forEach((listener) => listener());
+  });
+}
+function addMediaQueryListener(query, listener) {
+  query.addEventListener("change", listener);
+}
+function removeMediaQueryListener(query, listener) {
+  query.removeEventListener("change", listener);
+}
+
+// src/i18n.ts
+var UI_TEXTS = {
+  DA: {
+    addressTitle: "Adresse",
+    basketCheckoutDisabledLabel: "L\xE6g varer i kurven f\xF8r betaling",
+    basketCheckoutLabel: "G\xE5 til betaling",
+    basketEmptyLabel: "Din kurv er tom",
+    basketLabel: "Kurv",
+    basketPanelTitle: "Kurv",
+    categoriesLabel: "Kategorier",
+    categoryConfigurationErrorTitle: "Fejl i kategorikonfiguration",
+    categoryNoConfigured: "Der er ikke konfigureret nogen kategori.",
+    categoryNoDefinitions: "Der er ikke konfigureret nogen navigation.",
+    categoryNoSlugMatch: 'Ingen kategori matcher slug "{slug}". Tjek navigation.ts og slug-attributten p\xE5 orderly-category-page.',
+    categoryNoUrlMatch: 'Ingen kategori matcher URL-id "{id}". Tjek navigation.ts og #id-v\xE6rdien.',
+    checkoutAddressTitle: "Leveringsadresse",
+    checkoutCityLabel: "By",
+    checkoutCompanyLabel: "Firma",
+    checkoutCountryLabel: "Land",
+    checkoutCustomerTitle: "Kundeoplysninger",
+    checkoutChooseServicePointLabel: "V\xE6lg {method}",
+    checkoutDeliveryAddressPrompt: "Udfyld adresse, postnummer og by for at se leveringsmetoder.",
+    checkoutDeliveryMethodLabel: "Leveringsmetode",
+    checkoutDeliveryTitle: "Leveringsmetode",
+    checkoutEmailLabel: "Email",
+    checkoutErrorLabel: "Checkout kunne ikke gennemf\xF8res.",
+    checkoutFirstNameLabel: "Fornavn",
+    checkoutFormTitle: "Levering og kontakt",
+    checkoutLastNameLabel: "Efternavn",
+    checkoutOrderTitle: "Din ordre",
+    checkoutNoDeliveryMethodsLabel: "Der blev ikke fundet leveringsmetoder til adressen.",
+    checkoutNoServicePointsLabel: "Der blev ikke fundet udleveringssteder til adressen.",
+    checkoutPageDescription: "Udfyld leveringsoplysninger, v\xE6lg levering og gennemf\xF8r din ordre sikkert.",
+    checkoutPageTitle: "Levering & betaling",
+    checkoutPhoneCountryLabel: "Landekode",
+    checkoutPhoneLabel: "Telefon",
+    checkoutServicePointLabel: "Udleveringssted",
+    checkoutServicePointHelpLabel: "V\xE6lg dit \xF8nskede udleveringssted",
+    checkoutStreet2Label: "Adresse 2",
+    checkoutStreetLabel: "Adresse",
+    checkoutSubmitLabel: "Betal og bestil",
+    checkoutSubmittingLabel: "Sender ordre...",
+    checkoutTermsLabel: "Jeg accepterer",
+    checkoutTermsLinkLabel: "forretningsbetingelserne",
+    checkoutZipLabel: "Postnummer",
+    clearBasketLabel: "T\xF8m kurv",
+    clearSearchLabel: "Ryd s\xF8gning",
+    closeLabel: "Luk",
+    closeMenuLabel: "Luk menu",
+    collapseLabel: "Luk {label}",
+    contactTitle: "Kontakt",
+    continueShoppingLabel: "Forts\xE6t med at handle",
+    deliveryFallbackLabel: "Levering {index}",
+    deliveryNote: "Levering beregnes fra valgt leveringsmetode.",
+    emailLabel: "Email",
+    emptyLabel: "Der blev ikke fundet varer.",
+    expandLabel: "\xC5bn {label}",
+    homeRailCtaLabel: "Se alle",
+    homeTitle: "Butik",
+    informationLinksTitle: "Information",
+    itemFallbackTitle: "Vare",
+    loadMoreLabel: "Indl\xE6s flere",
+    loadingLabel: "Indl\xE6ser...",
+    mainCategoriesLabel: "Hovedkategorier",
+    mainNavigationLabel: "Navigation",
+    menuLabel: "Menu",
+    navigationItemFallbackLabel: "Punkt {index}",
+    openingHoursTitle: "\xC5bningstider",
+    phoneLabel: "Telefon",
+    productAddLabel: "L\xE6g i kurven",
+    productDetailColorLabel: "Farve",
+    productDetailConditionLabel: "Stand",
+    productDetailSizeLabel: "St\xF8rrelse",
+    productErrorLabel: "Produktet kunne ikke indl\xE6ses.",
+    productFallbackTitle: "Produkt",
+    productImageLabel: "billede {index}",
+    productImageOverlayLabel: "Produktbillede",
+    productLoadingLabel: "Indl\xE6ser produkt...",
+    productNotFoundLabel: "Produktet blev ikke fundet.",
+    productOpenImageLabel: "\xC5bn produktbillede i fuld sk\xE6rm",
+    productOpenPageLabel: "\xC5bn produktside",
+    productRemoveLabel: "Fjern fra kurven",
+    productViewLabel: "Vis produkt",
+    productViewWithTitle: "Vis {title}",
+    productsLabel: "varer",
+    productsLoadError: "Varerne kunne ikke indl\xE6ses.",
+    quantityLabel: "Antal",
+    quantityShortLabel: "Antal",
+    removeLabel: "Fjern",
+    searchLabel: "S\xF8g",
+    searchPlaceholder: "S\xF8g produkter",
+    searchPromptLabel: "Skriv i s\xF8gefeltet for at finde varer.",
+    searchingLabel: "S\xF8ger efter",
+    servicePointFallbackLabel: "Udleveringssted {index}",
+    shippingLabel: "Levering",
+    shopBrandLabel: "Butik",
+    shopNowLabel: "Se varer",
+    sortLabel: "Sorter",
+    subtotalLabel: "Varer",
+    totalLabel: "Total",
+    totalNote: "Inkl. moms",
+    websiteLabel: "Website"
+  },
+  EN: {
+    addressTitle: "Address",
+    basketCheckoutDisabledLabel: "Add items before checkout",
+    basketCheckoutLabel: "Go to checkout",
+    basketEmptyLabel: "Your basket is empty",
+    basketLabel: "Basket",
+    basketPanelTitle: "Basket",
+    categoriesLabel: "Categories",
+    categoryConfigurationErrorTitle: "Category configuration error",
+    categoryNoConfigured: "No category has been configured.",
+    categoryNoDefinitions: "No navigation definitions have been configured.",
+    categoryNoSlugMatch: 'No category matches slug "{slug}". Check navigation.ts and the orderly-category-page slug attribute.',
+    categoryNoUrlMatch: 'No category matches URL id "{id}". Check navigation.ts and the #id value.',
+    checkoutAddressTitle: "Delivery address",
+    checkoutCityLabel: "City",
+    checkoutCompanyLabel: "Company",
+    checkoutCountryLabel: "Country",
+    checkoutCustomerTitle: "Customer information",
+    checkoutChooseServicePointLabel: "Choose {method}",
+    checkoutDeliveryAddressPrompt: "Enter street, zip, and city to see delivery methods.",
+    checkoutDeliveryMethodLabel: "Delivery method",
+    checkoutDeliveryTitle: "Delivery method",
+    checkoutEmailLabel: "Email",
+    checkoutErrorLabel: "Checkout failed.",
+    checkoutFirstNameLabel: "First name",
+    checkoutFormTitle: "Delivery and contact",
+    checkoutLastNameLabel: "Last name",
+    checkoutOrderTitle: "Your order",
+    checkoutNoDeliveryMethodsLabel: "No delivery methods were found for the address.",
+    checkoutNoServicePointsLabel: "No service points were found for the address.",
+    checkoutPageDescription: "Enter your delivery details, choose delivery, and complete your order securely.",
+    checkoutPageTitle: "Delivery & Payment",
+    checkoutPhoneCountryLabel: "Phone country",
+    checkoutPhoneLabel: "Phone",
+    checkoutServicePointLabel: "Service point",
+    checkoutServicePointHelpLabel: "Choose your preferred pickup point",
+    checkoutStreet2Label: "Street 2",
+    checkoutStreetLabel: "Street",
+    checkoutSubmitLabel: "Create order",
+    checkoutSubmittingLabel: "Creating order...",
+    checkoutTermsLabel: "I accept the terms and conditions",
+    checkoutTermsLinkLabel: "terms",
+    checkoutZipLabel: "Zip",
+    clearBasketLabel: "Clear basket",
+    clearSearchLabel: "Clear search",
+    closeLabel: "Close",
+    closeMenuLabel: "Close menu",
+    collapseLabel: "Collapse {label}",
+    contactTitle: "Contact",
+    continueShoppingLabel: "Continue shopping",
+    deliveryFallbackLabel: "Delivery {index}",
+    deliveryNote: "Delivery is calculated from the selected delivery method.",
+    emailLabel: "Email",
+    emptyLabel: "No products found.",
+    expandLabel: "Expand {label}",
+    homeRailCtaLabel: "See all",
+    homeTitle: "Shop",
+    informationLinksTitle: "Information",
+    itemFallbackTitle: "Item",
+    loadMoreLabel: "Load more",
+    loadingLabel: "Loading...",
+    mainCategoriesLabel: "Main categories",
+    mainNavigationLabel: "Main navigation",
+    menuLabel: "Menu",
+    navigationItemFallbackLabel: "Item {index}",
+    openingHoursTitle: "Opening hours",
+    phoneLabel: "Phone",
+    productAddLabel: "Add to basket",
+    productDetailColorLabel: "Color",
+    productDetailConditionLabel: "Condition",
+    productDetailSizeLabel: "Size",
+    productErrorLabel: "Product could not be loaded.",
+    productFallbackTitle: "Product",
+    productImageLabel: "image {index}",
+    productImageOverlayLabel: "Product image",
+    productLoadingLabel: "Loading product...",
+    productNotFoundLabel: "Product could not be found.",
+    productOpenImageLabel: "Open product image fullscreen",
+    productOpenPageLabel: "Open product page",
+    productRemoveLabel: "Remove from basket",
+    productViewLabel: "View product",
+    productViewWithTitle: "View {title}",
+    productsLabel: "products",
+    productsLoadError: "Products could not be loaded.",
+    quantityLabel: "Quantity",
+    quantityShortLabel: "Qty",
+    removeLabel: "Remove",
+    searchLabel: "Search",
+    searchPlaceholder: "Search products",
+    searchPromptLabel: "Start typing to find products.",
+    searchingLabel: "Searching for",
+    servicePointFallbackLabel: "Service point {index}",
+    shippingLabel: "Shipping",
+    shopBrandLabel: "Shop",
+    shopNowLabel: "Shop now",
+    sortLabel: "Sort",
+    subtotalLabel: "Items",
+    totalLabel: "Total",
+    totalNote: "Incl. VAT",
+    websiteLabel: "Website"
+  }
+};
+var currentUiLanguage = "DA";
+function uiText(key, language = currentUiLanguage) {
+  return UI_TEXTS[language][key] ?? UI_TEXTS.DA[key];
+}
+function formatUiText(key, values, language = currentUiLanguage) {
+  return uiText(key, language).replace(/\{(\w+)\}/g, (_match, name) => {
+    const value = values[name];
+    return value === void 0 ? "" : String(value);
+  });
+}
+
+// src/navigation.ts
+var NavigationController = class extends EventTarget {
+  items = [];
+  activePath = locationPath();
+  expandedIds = /* @__PURE__ */ new Set();
+  menuOpen = false;
+  setItems(items) {
+    this.items = items;
+    this.emitChange();
+  }
+  setActivePath(path) {
+    this.activePath = path;
+    this.emitChange();
+  }
+  toggle(id) {
+    if (this.expandedIds.has(id)) {
+      this.expandedIds.delete(id);
+    } else {
+      this.expandedIds.add(id);
+    }
+    this.emitChange();
+  }
+  closeAll() {
+    this.expandedIds.clear();
+    this.emitChange();
+  }
+  openMenu() {
+    if (!this.menuOpen) {
+      this.menuOpen = true;
+      this.emitChange();
+    }
+  }
+  closeMenu() {
+    if (this.menuOpen) {
+      this.menuOpen = false;
+      this.emitChange();
+    }
+  }
+  toggleMenu() {
+    this.menuOpen = !this.menuOpen;
+    this.emitChange();
+  }
+  select(item) {
+    this.dispatchEvent(new CustomEvent("select", {
+      detail: { item }
+    }));
+  }
+  isActive(item) {
+    return Boolean(item.href && normalizePath(item.href) === normalizePath(this.activePath));
+  }
+  emitChange() {
+    this.dispatchEvent(new Event("change"));
+  }
+};
+var OrderlyNavigationElement = class extends HTMLElement {
+  static observedAttributes = ["sticky"];
+  controller = new NavigationController();
+  menuPanelId = `orderly-navigation-panel-${nextNavigationId()}`;
+  disconnectResponsiveTemplates;
+  get sticky() {
+    return booleanAttribute(this.getAttribute("sticky"), true);
+  }
+  set sticky(value) {
+    if (value) {
+      this.removeAttribute("sticky");
+    } else {
+      this.setAttribute("sticky", "false");
+    }
+  }
+  connectedCallback() {
+    this.disconnectResponsiveTemplates?.();
+    this.disconnectResponsiveTemplates = observeResponsiveTemplateChanges(() => this.render());
+    this.controller.addEventListener("change", this.onControllerChange);
+    this.controller.addEventListener("select", this.onControllerSelect);
+    this.controller.setItems(this.getNavigationItems());
+    this.addEventListener("click", this.onClick);
+    this.addEventListener("keydown", this.onKeyDown);
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.updateStickyState();
+    if (this.isConnected) {
+      this.render();
+    }
+  }
+  disconnectedCallback() {
+    this.controller.removeEventListener("change", this.onControllerChange);
+    this.controller.removeEventListener("select", this.onControllerSelect);
+    this.removeEventListener("click", this.onClick);
+    this.removeEventListener("keydown", this.onKeyDown);
+    updateBodyNavigationLock(this, false);
+    this.disconnectResponsiveTemplates?.();
+    this.disconnectResponsiveTemplates = void 0;
+  }
+  refresh() {
+    this.controller.setItems(this.getNavigationItems());
+  }
+  closeAll() {
+    this.controller.closeAll();
+  }
+  openMenu() {
+    this.controller.openMenu();
+  }
+  closeMenu() {
+    this.controller.closeMenu();
+  }
+  toggleMenu() {
+    this.controller.toggleMenu();
+  }
+  render() {
+    const root = cloneTemplate(this, "navigation") ?? defaultNavigation(this.getAttribute("aria-label") ?? uiText("mainNavigationLabel"));
+    this.updateStickyState();
+    bindNavigationMenu(root, this.controller, this.menuPanelId, this.sticky);
+    replaceSlot(root, "items", renderItems(this.controller, this.controller.items, this));
+    render(this, root);
+  }
+  updateStickyState() {
+    this.dataset.orderlyNavigationHost = "";
+    this.dataset.orderlySticky = String(this.sticky);
+  }
+  onControllerChange = () => {
+    updateBodyNavigationLock(this, this.controller.menuOpen);
+    this.render();
+  };
+  onControllerSelect = (event) => {
+    dispatch(this, "orderly-navigation-select", event.detail);
+  };
+  onClick = (event) => {
+    const target = event.target;
+    const menuToggle = target?.closest('[data-orderly-nav-menu-toggle], [data-orderly-action="menu-toggle"]');
+    const menuClose = target?.closest('[data-orderly-action="menu-close"]');
+    const toggle = target?.closest("[data-orderly-nav-toggle]");
+    const link = target?.closest("[data-orderly-nav-id]");
+    const parent = target?.closest("[data-orderly-nav-parent]");
+    if (menuToggle instanceof HTMLElement) {
+      event.preventDefault();
+      this.controller.toggleMenu();
+      return;
+    }
+    if (menuClose instanceof HTMLElement) {
+      event.preventDefault();
+      this.controller.closeMenu();
+      return;
+    }
+    if (toggle instanceof HTMLElement) {
+      event.preventDefault();
+      this.controller.toggle(toggle.dataset.orderlyNavToggle ?? "");
+      return;
+    }
+    if (link instanceof HTMLElement) {
+      const item = findItem(this.controller.items, link.dataset.orderlyNavId ?? "");
+      if (item) {
+        if (item.children?.length && !this.controller.expandedIds.has(item.id)) {
+          event.preventDefault();
+          this.controller.toggle(item.id);
+          return;
+        }
+        this.controller.select(item);
+        this.controller.closeMenu();
+      }
+      return;
+    }
+    if (parent instanceof HTMLElement && target === parent) {
+      this.controller.toggle(parent.dataset.orderlyNavParent ?? "");
+    }
+  };
+  onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      this.controller.closeAll();
+      this.controller.closeMenu();
+    }
+  };
+};
+var OrderlyNavigationMenuElement = class extends OrderlyNavigationElement {
+  items = [];
+  getNavigationItems() {
+    return this.items;
+  }
+};
+function navigationItemsFromUIMenu(menus) {
+  return menus.map((menu, index) => {
+    const label = menu.Link?.DisplayName ?? menu.Link?.URL ?? formatUiText("navigationItemFallbackLabel", { index: index + 1 });
+    return {
+      id: menu.Link?.URL ?? `${index}`,
+      label,
+      href: menu.Link?.URL,
+      menu,
+      children: navigationItemsFromUIMenu(menu.Children)
+    };
+  });
+}
+function navigationItemsFromWebsitePages(pages) {
+  return pages.map((page) => ({
+    id: page.Id?.Id?.Value ?? page.Path,
+    label: page.DisplayName,
+    href: page.Path,
+    page
+  }));
+}
+function renderItems(controller, items, host, listId) {
+  const list = document.createElement("ul");
+  list.className = "orderly-navigation__list";
+  if (listId) {
+    list.id = listId;
+  }
+  for (const item of items) {
+    const custom = cloneTemplate(host, "item");
+    if (custom) {
+      bindNavigationItem(custom, controller, item, host);
+      list.append(custom);
+      continue;
+    }
+    const element = document.createElement("li");
+    element.className = "orderly-navigation__item";
+    element.dataset.orderlyItem = item.id;
+    const link = document.createElement("a");
+    link.className = "orderly-navigation__link";
+    link.dataset.orderlyNavId = item.id;
+    link.textContent = item.label;
+    link.href = item.href ?? "#";
+    if (item.target) {
+      link.target = item.target;
+    }
+    if (controller.isActive(item)) {
+      link.setAttribute("aria-current", "page");
+    }
+    if (item.disabled) {
+      link.setAttribute("aria-disabled", "true");
+    }
+    element.append(link);
+    if (item.children?.length) {
+      const childListId = `orderly-navigation-children-${safeDomId(item.id)}`;
+      element.dataset.orderlyHasChildren = "true";
+      element.dataset.orderlyNavParent = item.id;
+      const button = document.createElement("button");
+      button.className = "orderly-navigation__toggle";
+      button.type = "button";
+      button.dataset.orderlyNavToggle = item.id;
+      button.setAttribute("aria-expanded", String(controller.expandedIds.has(item.id)));
+      button.setAttribute("aria-controls", childListId);
+      button.setAttribute("aria-label", controller.expandedIds.has(item.id) ? formatUiText("collapseLabel", { label: item.label }) : formatUiText("expandLabel", { label: item.label }));
+      button.innerHTML = `
+        <svg class="orderly-navigation__chevron" viewBox="0 0 20 20" focusable="false" aria-hidden="true">
+          <path d="m7 5 5 5-5 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+        </svg>
+      `;
+      element.append(button);
+      if (controller.expandedIds.has(item.id)) {
+        element.append(renderItems(controller, item.children, host, childListId));
+      }
+    }
+    list.append(element);
+  }
+  return list;
+}
+function defaultNavigation(label) {
+  const fragment = document.createDocumentFragment();
+  const nav = document.createElement("nav");
+  nav.className = "orderly-navigation";
+  nav.setAttribute("aria-label", label);
+  nav.innerHTML = `
+    <button class="orderly-navigation__menu-button" type="button" data-orderly-action="menu-toggle">
+      <span class="orderly-navigation__menu-icon" aria-hidden="true"></span>
+      <span class="orderly-navigation__menu-label">${uiText("menuLabel")}</span>
+    </button>
+    <button class="orderly-navigation__backdrop" type="button" data-orderly-action="menu-close" aria-label="${uiText("closeMenuLabel")}"></button>
+    <div class="orderly-navigation__panel" data-orderly-menu-panel>
+      <button class="orderly-navigation__close" type="button" data-orderly-action="menu-close" aria-label="${uiText("closeMenuLabel")}">
+        <span aria-hidden="true">\xD7</span>
+      </button>
+      <div data-orderly-slot="items"></div>
+    </div>
+  `;
+  fragment.append(nav);
+  return fragment;
+}
+function bindNavigationMenu(root, controller, panelId, sticky) {
+  let resolvedPanelId = panelId;
+  root.querySelectorAll(".orderly-navigation, [data-orderly-navigation]").forEach((element) => {
+    if (element instanceof HTMLElement) {
+      element.dataset.orderlyMenuOpen = String(controller.menuOpen);
+      element.dataset.orderlySticky = String(sticky);
+    }
+  });
+  root.querySelectorAll("[data-orderly-menu-panel]").forEach((element) => {
+    if (element instanceof HTMLElement) {
+      element.id ||= panelId;
+      resolvedPanelId = element.id;
+      element.dataset.orderlyMenuOpen = String(controller.menuOpen);
+    }
+  });
+  root.querySelectorAll('[data-orderly-nav-menu-toggle], [data-orderly-action="menu-toggle"]').forEach((element) => {
+    if (element instanceof HTMLElement) {
+      element.dataset.orderlyNavMenuToggle = "";
+      element.setAttribute("aria-expanded", String(controller.menuOpen));
+      element.setAttribute("aria-controls", resolvedPanelId);
+    }
+  });
+}
+function bindNavigationItem(root, controller, item, host) {
+  const active = controller.isActive(item);
+  bindText(root, "label", item.label);
+  root.querySelectorAll("[data-orderly-item]").forEach((element) => {
+    if (element instanceof HTMLElement) {
+      element.dataset.orderlyItem = item.id;
+      element.toggleAttribute("data-orderly-active", active);
+      element.toggleAttribute("data-orderly-disabled", Boolean(item.disabled));
+      element.toggleAttribute("data-orderly-has-children", Boolean(item.children?.length));
+      if (item.children?.length) {
+        element.dataset.orderlyNavParent = item.id;
+      } else {
+        element.removeAttribute("data-orderly-nav-parent");
+      }
+    }
+  });
+  const link = root.querySelector('[data-orderly-action="select"], a');
+  if (link instanceof HTMLElement) {
+    link.dataset.orderlyNavId = item.id;
+    if (link instanceof HTMLAnchorElement) {
+      link.href = item.href ?? "#";
+      if (item.target) {
+        link.target = item.target;
+      }
+    }
+    if (active) {
+      link.setAttribute("aria-current", "page");
+    } else {
+      link.removeAttribute("aria-current");
+    }
+    if (item.disabled) {
+      link.setAttribute("aria-disabled", "true");
+    } else {
+      link.removeAttribute("aria-disabled");
+    }
+  }
+  const toggle = root.querySelector('[data-orderly-action="toggle"], button');
+  if (toggle instanceof HTMLElement) {
+    if (item.children?.length) {
+      toggle.hidden = false;
+      toggle.dataset.orderlyNavToggle = item.id;
+      toggle.setAttribute("aria-expanded", String(controller.expandedIds.has(item.id)));
+      toggle.setAttribute("aria-controls", `orderly-navigation-children-${safeDomId(item.id)}`);
+      toggle.setAttribute("aria-label", controller.expandedIds.has(item.id) ? formatUiText("collapseLabel", { label: item.label }) : formatUiText("expandLabel", { label: item.label }));
+    } else {
+      toggle.hidden = true;
+      toggle.removeAttribute("data-orderly-nav-toggle");
+      toggle.removeAttribute("aria-controls");
+    }
+  }
+  const children = item.children?.length && controller.expandedIds.has(item.id) ? renderItems(controller, item.children, host, `orderly-navigation-children-${safeDomId(item.id)}`) : void 0;
+  replaceSlot(root, "children", children);
+}
+function findItem(items, id) {
+  for (const item of items) {
+    if (item.id === id) {
+      return item;
+    }
+    const child = item.children ? findItem(item.children, id) : void 0;
+    if (child) {
+      return child;
+    }
+  }
+  return void 0;
+}
+function normalizePath(path) {
+  try {
+    const url = new URL(path, "https://orderly.local");
+    return `${url.pathname}${url.search}${url.hash}`;
+  } catch {
+    return path;
+  }
+}
+function locationPath() {
+  try {
+    const current = globalThis.location;
+    return current ? `${current.pathname}${current.search}${current.hash}` : "/";
+  } catch {
+    return "/";
+  }
+}
+function booleanAttribute(value, fallback) {
+  if (value === null) {
+    return fallback;
+  }
+  const normalized = value.trim().toLowerCase();
+  return normalized !== "false" && normalized !== "0" && normalized !== "off";
+}
+var navigationId = 0;
+var openNavigationMenus = /* @__PURE__ */ new Set();
+function nextNavigationId() {
+  navigationId += 1;
+  return navigationId;
+}
+function safeDomId(value) {
+  return value.replace(/[^a-zA-Z0-9_-]+/g, "-");
+}
+function updateBodyNavigationLock(host, open) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (open) {
+    openNavigationMenus.add(host);
+  } else {
+    openNavigationMenus.delete(host);
+  }
+  document.body?.classList.toggle("orderly-navigation-menu-open", openNavigationMenus.size > 0);
+}
+export {
+  NavigationController,
+  OrderlyNavigationElement,
+  OrderlyNavigationMenuElement,
+  navigationItemsFromUIMenu,
+  navigationItemsFromWebsitePages
+};
+//# sourceMappingURL=navigation.js.map