quirk-ui 0.1.148 → 0.1.150

package/dist/core/components/NavBar/NavBar.test.cjs

@@ -1 +1 @@
-"use strict";const t=require("react/jsx-runtime"),e=require("../../../react.esm-C_9Ma9mj.cjs"),a=require("./index.cjs");require("../../../index-CW_Ehh1q.cjs");e.vi.mock("../../utils/NoScroll/noScroll",()=>({lockScroll:e.vi.fn(),unlockScroll:e.vi.fn()}));e.vi.mock("../Modal",()=>({Modal:({trigger:n,content:o})=>t.jsxs("div",{"data-testid":"modal-wrapper",children:[n,o]})}));const s=()=>{Object.defineProperty(window,"innerWidth",{writable:!0,configurable:!0,value:1024}),window.dispatchEvent(new Event("resize"))},p=()=>{Object.defineProperty(window,"innerWidth",{writable:!0,configurable:!0,value:375}),window.dispatchEvent(new Event("resize"))},r=[{_key:"home",label:"Home",href:"/"},{_key:"about",label:"About",href:"/about"},{_key:"ext",label:"External",href:"https://example.com",isExternal:!0}],c=[{_key:"products",label:"Products",sublinks:[{_key:"p1",label:"Widget",href:"/widget"},{_key:"p2",label:"Gadget",href:"/gadget"}]}],i=[{_key:"g1",title:"Solutions",primaryItems:[{_key:"s1",label:"Enterprise",href:"/enterprise",sublinks:[{_key:"e1",label:"SSO",href:"/sso"},{_key:"e2",label:"Security",href:"/security"}]},{_key:"s2",label:"Startup",href:"/startup"}],secondaryItems:[{_key:"r1",label:"Case Studies",href:"/case-studies"}]}],d=[{_key:"login",label:"Log in",ariaLabel:"Log in",href:"/login",variant:"secondary"},{_key:"signup",label:"Sign up",ariaLabel:"Sign up",href:"/signup",variant:"primary"}];e.describe("Navbar",()=>{e.describe("Rendering",()=>{e.it("renders the header element",()=>{e.render(t.jsx(a.Navbar,{})),e.globalExpect(e.screen.getByRole("banner")).toBeInTheDocument()}),e.it("renders logo when provided",()=>{e.render(t.jsx(a.Navbar,{logo:t.jsx("img",{"data-testid":"logo",src:"/logo.svg",alt:"Logo"})})),e.globalExpect(e.screen.getByTestId("logo")).toBeInTheDocument()}),e.it("renders title when no logo provided",()=>{e.render(t.jsx(a.Navbar,{title:"My Site"})),e.globalExpect(e.screen.getByText("My Site")).toBeInTheDocument()}),e.it("renders nothing in logo slot when neither logo nor title given",()=>{const{container:n}=e.render(t.jsx(a.Navbar,{}));e.globalExpect(n.querySelector(".logo")).not.toBeInTheDocument(),e.globalExpect(n.querySelector(".title")).not.toBeInTheDocument()}),e.it("renders navigation landmark",()=>{e.render(t.jsx(a.Navbar,{items:r})),e.globalExpect(e.screen.getByRole("navigation",{name:"Primary navigation"})).toBeInTheDocument()})}),e.describe("Flat navigation items",()=>{e.it("renders all flat nav links",()=>{e.render(t.jsx(a.Navbar,{items:r})),e.globalExpect(e.screen.getByText("Home")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("About")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("External")).toBeInTheDocument()}),e.it("renders correct hrefs",()=>{e.render(t.jsx(a.Navbar,{items:r})),e.globalExpect(e.screen.getByText("Home")).toHaveAttribute("href","/"),e.globalExpect(e.screen.getByText("About")).toHaveAttribute("href","/about")}),e.it("renders external links with target=_blank",()=>{e.render(t.jsx(a.Navbar,{items:r})),e.globalExpect(e.screen.getByText("External")).toHaveAttribute("target","_blank")}),e.it("renders external links with rel=noopener noreferrer",()=>{e.render(t.jsx(a.Navbar,{items:r})),e.globalExpect(e.screen.getByText("External")).toHaveAttribute("rel","noopener noreferrer")}),e.it("renders internal links with target=_self",()=>{e.render(t.jsx(a.Navbar,{items:r})),e.globalExpect(e.screen.getByText("Home")).toHaveAttribute("target","_self")})}),e.describe("Items with sublinks (default navigationType)",()=>{e.it("renders parent item as button when no href",()=>{e.render(t.jsx(a.Navbar,{items:c})),e.globalExpect(e.screen.getByRole("button",{name:/products/i})).toBeInTheDocument()}),e.it("toggle button has aria-haspopup=true",()=>{e.render(t.jsx(a.Navbar,{items:c})),e.globalExpect(e.screen.getByRole("button",{name:/products/i})).toHaveAttribute("aria-haspopup","true")}),e.it("toggle button starts with aria-expanded=false",()=>{e.render(t.jsx(a.Navbar,{items:c})),e.globalExpect(e.screen.getByRole("button",{name:/products/i})).toHaveAttribute("aria-expanded","false")}),e.it("sublink dropdown has role=menu and aria-label",()=>{const{container:n}=e.render(t.jsx(a.Navbar,{items:c}));e.globalExpect(n.querySelector("[role='menu'][aria-label='Products submenu']")).toBeInTheDocument()}),e.it("clicking toggle button opens dropdown (aria-expanded=true)",()=>{e.render(t.jsx(a.Navbar,{items:c}));const n=e.screen.getByRole("button",{name:/products/i});e.fireEvent.click(n),e.globalExpect(n).toHaveAttribute("aria-expanded","true")}),e.it("clicking toggle button twice closes dropdown (aria-expanded=false)",()=>{e.render(t.jsx(a.Navbar,{items:c}));const n=e.screen.getByRole("button",{name:/products/i});e.fireEvent.click(n),e.fireEvent.click(n),e.globalExpect(n).toHaveAttribute("aria-expanded","false")}),e.it("sublinks are rendered inside the dropdown",()=>{e.render(t.jsx(a.Navbar,{items:c})),e.globalExpect(e.screen.getByText("Widget")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("Gadget")).toBeInTheDocument()}),e.it("sublinks have correct hrefs",()=>{e.render(t.jsx(a.Navbar,{items:c})),e.globalExpect(e.screen.getByText("Widget")).toHaveAttribute("href","/widget"),e.globalExpect(e.screen.getByText("Gadget")).toHaveAttribute("href","/gadget")})}),e.describe("onClick callback",()=>{e.it("calls onClick when a flat link is clicked",()=>{const n=e.vi.fn(),o=[{_key:"click",label:"Click me",href:"#",onClick:n}];e.render(t.jsx(a.Navbar,{items:o})),e.fireEvent.click(e.screen.getByText("Click me")),e.globalExpect(n).toHaveBeenCalledOnce()})}),e.describe("Variant",()=>{e.it("applies standard variant class by default",()=>{e.render(t.jsx(a.Navbar,{})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("standard")}),e.it("applies transparent variant class",()=>{e.render(t.jsx(a.Navbar,{variant:"transparent"})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("transparent")})}),e.describe("Alignment",()=>{e.it("applies right alignment class by default",()=>{e.render(t.jsx(a.Navbar,{})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("right")}),e.it("applies left alignment class",()=>{e.render(t.jsx(a.Navbar,{alignment:"left"})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("left")}),e.it("applies center alignment class",()=>{e.render(t.jsx(a.Navbar,{alignment:"center"})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("center")})}),e.describe("Sticky",()=>{e.it("does not apply sticky class by default",()=>{e.render(t.jsx(a.Navbar,{})),e.globalExpect(e.screen.getByRole("banner")).not.toHaveClass("sticky")}),e.it("applies sticky class when isSticky=true",()=>{e.render(t.jsx(a.Navbar,{isSticky:!0})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("sticky")})}),e.describe("Navigation type",()=>{e.it("applies default class when no groups",()=>{e.render(t.jsx(a.Navbar,{items:r})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("default")}),e.it("applies advanced class when groups provided",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("advanced")})}),e.describe("Utility items",()=>{e.it("renders both desktop and mobile utility navs",()=>{e.render(t.jsx(a.Navbar,{utilityItems:d}));const n=e.screen.getAllByRole("navigation",{name:"Utility navigation"});e.globalExpect(n).toHaveLength(2)}),e.it("renders all utility button labels",()=>{e.render(t.jsx(a.Navbar,{utilityItems:d})),e.globalExpect(e.screen.getAllByText("Log in").length).toBeGreaterThan(0),e.globalExpect(e.screen.getAllByText("Sign up").length).toBeGreaterThan(0)}),e.it("does not render utility nav when no items",()=>{e.render(t.jsx(a.Navbar,{utilityItems:[]})),e.globalExpect(e.screen.queryByRole("navigation",{name:"Utility navigation"})).not.toBeInTheDocument()}),e.it("does not crash when only one utility item provided (no index[1] access)",()=>{const n=[{_key:"cta",label:"Sign up",ariaLabel:"Sign up",href:"/signup"}];e.globalExpect(()=>e.render(t.jsx(a.Navbar,{utilityItems:n}))).not.toThrow()})}),e.describe("Mobile menu toggle",()=>{e.it("renders toggle button",()=>{e.render(t.jsx(a.Navbar,{items:r})),e.globalExpect(e.screen.getByRole("button",{name:/open menu/i})).toBeInTheDocument()}),e.it("toggle starts closed (aria-expanded=false)",()=>{e.render(t.jsx(a.Navbar,{items:r})),e.globalExpect(e.screen.getByRole("button",{name:/open menu/i})).toHaveAttribute("aria-expanded","false")}),e.it("opens menu on click",()=>{e.render(t.jsx(a.Navbar,{items:r}));const n=e.screen.getByRole("button",{name:/open menu/i});e.fireEvent.click(n),e.globalExpect(n).toHaveAttribute("aria-expanded","true")}),e.it("closes menu on second click",()=>{e.render(t.jsx(a.Navbar,{items:r}));const n=e.screen.getByRole("button",{name:/open menu/i});e.fireEvent.click(n),e.fireEvent.click(n),e.globalExpect(n).toHaveAttribute("aria-expanded","false")}),e.it("toggle has aria-controls pointing to main-menu",()=>{e.render(t.jsx(a.Navbar,{items:r})),e.globalExpect(e.screen.getByRole("button",{name:/open menu/i})).toHaveAttribute("aria-controls","main-menu")}),e.it("aria-label changes to 'Close menu' when menu is open",()=>{e.render(t.jsx(a.Navbar,{items:r}));const n=e.screen.getByRole("button",{name:/open menu/i});e.fireEvent.click(n),e.globalExpect(e.screen.getByRole("button",{name:/close menu/i})).toBeInTheDocument()})}),e.describe("Search button",()=>{e.it("does not render search button when showSearch=false",()=>{e.render(t.jsx(a.Navbar,{showSearch:!1})),e.globalExpect(e.screen.queryByRole("button",{name:/search/i})).not.toBeInTheDocument()}),e.it("renders search button in mobile bar when showSearch=true and on mobile",()=>{p(),e.render(t.jsx(a.Navbar,{showSearch:!0,items:r})),e.globalExpect(e.screen.getByRole("button",{name:/search/i})).toBeInTheDocument()}),e.it("renders search button in nav when showSearch=true and on desktop",()=>{s(),e.render(t.jsx(a.Navbar,{showSearch:!0,items:r})),e.globalExpect(e.screen.getByRole("button",{name:/search/i})).toBeInTheDocument()})}),e.describe("Custom styling",()=>{e.it("applies custom className",()=>{e.render(t.jsx(a.Navbar,{className:"my-navbar"})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("my-navbar")}),e.it("preserves base navbar class alongside custom className",()=>{e.render(t.jsx(a.Navbar,{className:"my-navbar"})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("navbar")}),e.it("applies inline style",()=>{e.render(t.jsx(a.Navbar,{style:{borderBottom:"2px solid red"}}));const n=e.screen.getByRole("banner");e.globalExpect(n.style.borderBottom).toBe("2px solid red")})}),e.describe("Accessibility",()=>{e.it("header has banner landmark role",()=>{e.render(t.jsx(a.Navbar,{})),e.globalExpect(e.screen.getByRole("banner")).toBeInTheDocument()}),e.it("header has aria-label='Site header'",()=>{e.render(t.jsx(a.Navbar,{})),e.globalExpect(e.screen.getByRole("banner")).toHaveAttribute("aria-label","Site header")}),e.it("primary nav has id=main-menu",()=>{const{container:n}=e.render(t.jsx(a.Navbar,{items:r}));e.globalExpect(n.querySelector("#main-menu")).toBeInTheDocument()}),e.it("primary nav has aria-label='Primary navigation'",()=>{e.render(t.jsx(a.Navbar,{items:r})),e.globalExpect(e.screen.getByRole("navigation",{name:"Primary navigation"})).toBeInTheDocument()}),e.it("decorative icons are aria-hidden",()=>{e.render(t.jsx(a.Navbar,{items:r})),e.globalExpect(document.querySelectorAll("[aria-hidden='true']").length).toBeGreaterThan(0)}),e.it("external link icons are aria-hidden",()=>{e.render(t.jsx(a.Navbar,{items:r}));const o=e.screen.getByText("External").querySelector("[aria-hidden='true']");e.globalExpect(o).toBeInTheDocument()})}),e.describe("Props forwarding",()=>{e.it("forwards data attributes to header",()=>{e.render(t.jsx(a.Navbar,{"data-testid":"my-navbar"})),e.globalExpect(e.screen.getByTestId("my-navbar")).toBeInTheDocument()})}),e.describe("Advanced navigation (groups)",()=>{e.beforeEach(()=>{s()}),e.it("renders group titles",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"})),e.globalExpect(e.screen.getByText("Solutions")).toBeInTheDocument()}),e.it("group toggle button has aria-haspopup=true",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"})),e.globalExpect(e.screen.getByRole("button",{name:/solutions/i})).toHaveAttribute("aria-haspopup","true")}),e.it("group toggle starts with aria-expanded=false",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"})),e.globalExpect(e.screen.getByRole("button",{name:/solutions/i})).toHaveAttribute("aria-expanded","false")}),e.it("group submenu has role=menu and aria-label",()=>{const{container:n}=e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"}));e.globalExpect(n.querySelector("[aria-label='Solutions submenu']")).toBeInTheDocument()}),e.it("mouseenter on group wrapper opens the mega-menu (aria-expanded=true)",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"}));const n=e.screen.getByRole("button",{name:/solutions/i});e.fireEvent.mouseEnter(n.closest(".linkWrapper")),e.globalExpect(n).toHaveAttribute("aria-expanded","true")}),e.it("renders primary items inside the mega-menu",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"})),e.globalExpect(e.screen.getByText("Enterprise")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("Startup")).toBeInTheDocument()}),e.it("primary items with href are rendered as links",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"}));const n=e.screen.getByText("Enterprise").closest("a");e.globalExpect(n).not.toBeNull(),e.globalExpect(n.tagName).toBe("A"),e.globalExpect(n).toHaveAttribute("href","/enterprise")}),e.it("renders secondary items",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"})),e.globalExpect(e.screen.getByText("Case Studies")).toBeInTheDocument()}),e.it("hovering a primary item with sublinks reveals column 2 children",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"})),e.fireEvent.mouseEnter(e.screen.getByText("Enterprise").closest("a")),e.globalExpect(e.screen.getByText("SSO")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("Security")).toBeInTheDocument()}),e.it("column 2 disappears after hovering a primary item without sublinks",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"})),e.fireEvent.mouseEnter(e.screen.getByText("Enterprise").closest("a")),e.globalExpect(e.screen.getByText("SSO")).toBeInTheDocument(),e.fireEvent.mouseEnter(e.screen.getByText("Startup").closest("a")),e.globalExpect(e.screen.queryByText("SSO")).not.toBeInTheDocument()}),e.it("mouseleave on submenu panel closes the mega-menu",()=>{const{container:n}=e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"})),o=e.screen.getByRole("button",{name:/solutions/i}),l=o.closest(".linkWrapper"),g=n.querySelector("[aria-label='Solutions submenu']");e.fireEvent.mouseEnter(l),e.globalExpect(o).toHaveAttribute("aria-expanded","true"),e.fireEvent.mouseLeave(g),e.globalExpect(o).toHaveAttribute("aria-expanded","false")}),e.it("primary item click calls onClick and closes dropdown",()=>{const n=e.vi.fn(),o=[{_key:"g1",title:"Menu",primaryItems:[{_key:"item1",label:"Clickable",href:"/dest",onClick:n}]}];e.render(t.jsx(a.Navbar,{groups:o,navigationType:"advanced"})),e.fireEvent.click(e.screen.getByText("Clickable").closest("a")),e.globalExpect(n).toHaveBeenCalledOnce()})}),e.describe("Spotlight card",()=>{const o=[{_key:"spot",title:"Spotlight Group",primaryItems:[{_key:"p1",label:"Item One",href:"/one"}],spotlight:{title:"New Feature",description:"Check it out",callToAction:{label:"Learn more",ariaLabel:"Learn more about new feature",variant:"primary",linkOptions:{linkType:"internal",internalUrl:{slug:{current:"new-feature"}}}}}}];e.it("renders the spotlight CTA button",()=>{s(),e.render(t.jsx(a.Navbar,{groups:o,navigationType:"advanced"})),e.globalExpect(e.screen.getByRole("link",{name:/learn more/i})).toBeInTheDocument()}),e.it("spotlight CTA resolves internal href correctly",()=>{s(),e.render(t.jsx(a.Navbar,{groups:o,navigationType:"advanced"})),e.globalExpect(e.screen.getByRole("link",{name:/learn more/i})).toHaveAttribute("href","/new-feature")}),e.it("spotlight CTA resolves external href correctly",()=>{s();const g=[{_key:"g",title:"Ext Group",primaryItems:[{_key:"p1",label:"Item",href:"/item"}],spotlight:{callToAction:{label:"Visit",ariaLabel:"Visit external site",linkOptions:{linkType:"external",externalUrl:"https://example.com"}}}}];e.render(t.jsx(a.Navbar,{groups:g,navigationType:"advanced"}));const b=e.screen.getByRole("link",{name:/visit/i});e.globalExpect(b).toHaveAttribute("href","https://example.com"),e.globalExpect(b).toHaveAttribute("target","_blank")}),e.it("renders spotlight image when provided",()=>{s();const l=[{_key:"g",title:"Img Group",primaryItems:[{_key:"p1",label:"Item",href:"/item"}],spotlight:{callToAction:{label:"Go",linkOptions:{linkType:"internal",internalUrl:{slug:{current:"go"}}}},image:{asset:{_id:"1",url:"/img.jpg",altText:"Demo image",title:"Demo",description:"Demo desc"},imageUrls:{small:"/s.jpg",medium:"/m.jpg",large:"/l.jpg"}}}}];e.render(t.jsx(a.Navbar,{groups:l,navigationType:"advanced"}));const g=e.screen.getByAltText("Demo image");e.globalExpect(g).toBeInTheDocument(),e.globalExpect(g).toHaveAttribute("src","/m.jpg")}),e.it("renders nothing when callToAction is absent",()=>{s();const l=[{_key:"g",title:"No CTA",primaryItems:[{_key:"p1",label:"Item",href:"/item"}],spotlight:{title:"Title only"}}];e.globalExpect(()=>e.render(t.jsx(a.Navbar,{groups:l,navigationType:"advanced"}))).not.toThrow()})}),e.describe("renderText prop",()=>{e.it("calls renderText for spotlight title when provided",()=>{s();const n=e.vi.fn(l=>typeof l=="string"?t.jsx("span",{children:l}):null),o=[{_key:"g",title:"Group",primaryItems:[{_key:"p1",label:"Item",href:"/item"}],spotlight:{title:"Spotlight Title",callToAction:{label:"Go",linkOptions:{linkType:"internal",internalUrl:{slug:{current:"go"}}}}}}];e.render(t.jsx(a.Navbar,{groups:o,navigationType:"advanced",renderText:n})),e.globalExpect(n).toHaveBeenCalledWith("Spotlight Title",e.globalExpect.any(String))})})});
+"use strict";const t=require("react/jsx-runtime"),e=require("../../../react.esm-C_9Ma9mj.cjs"),a=require("./index.cjs");require("../../../index-CW_Ehh1q.cjs");e.vi.mock("../../utils/NoScroll/noScroll",()=>({lockScroll:e.vi.fn(),unlockScroll:e.vi.fn()}));const d=e.vi.fn();e.vi.mock("../../../core/context/ModalContext",()=>({useModal:()=>({open:d})}));e.vi.mock("../Modal",()=>({Modal:({trigger:n,content:r})=>t.jsxs("div",{"data-testid":"modal-wrapper",children:[n,r]})}));const s=()=>{Object.defineProperty(window,"innerWidth",{writable:!0,configurable:!0,value:1024}),window.dispatchEvent(new Event("resize"))},u=()=>{Object.defineProperty(window,"innerWidth",{writable:!0,configurable:!0,value:375}),window.dispatchEvent(new Event("resize"))},o=[{_key:"home",label:"Home",href:"/"},{_key:"about",label:"About",href:"/about"},{_key:"ext",label:"External",href:"https://example.com",isExternal:!0}],c=[{_key:"products",label:"Products",sublinks:[{_key:"p1",label:"Widget",href:"/widget"},{_key:"p2",label:"Gadget",href:"/gadget"}]}],i=[{_key:"g1",title:"Solutions",primaryItems:[{_key:"s1",label:"Enterprise",href:"/enterprise",sublinks:[{_key:"e1",label:"SSO",href:"/sso"},{_key:"e2",label:"Security",href:"/security"}]},{_key:"s2",label:"Startup",href:"/startup"}],secondaryItems:[{_key:"r1",label:"Case Studies",href:"/case-studies"}]}],b=[{_key:"login",label:"Log in",ariaLabel:"Log in",href:"/login",variant:"secondary"},{_key:"signup",label:"Sign up",ariaLabel:"Sign up",href:"/signup",variant:"primary"}];e.describe("Navbar",()=>{e.describe("Rendering",()=>{e.it("renders the header element",()=>{e.render(t.jsx(a.Navbar,{})),e.globalExpect(e.screen.getByRole("banner")).toBeInTheDocument()}),e.it("renders logo when provided",()=>{e.render(t.jsx(a.Navbar,{logo:t.jsx("img",{"data-testid":"logo",src:"/logo.svg",alt:"Logo"})})),e.globalExpect(e.screen.getByTestId("logo")).toBeInTheDocument()}),e.it("renders title when no logo provided",()=>{e.render(t.jsx(a.Navbar,{title:"My Site"})),e.globalExpect(e.screen.getByText("My Site")).toBeInTheDocument()}),e.it("renders nothing in logo slot when neither logo nor title given",()=>{const{container:n}=e.render(t.jsx(a.Navbar,{}));e.globalExpect(n.querySelector(".logo")).not.toBeInTheDocument(),e.globalExpect(n.querySelector(".title")).not.toBeInTheDocument()}),e.it("renders navigation landmark",()=>{e.render(t.jsx(a.Navbar,{items:o})),e.globalExpect(e.screen.getByRole("navigation",{name:"Primary navigation"})).toBeInTheDocument()})}),e.describe("Flat navigation items",()=>{e.it("renders all flat nav links",()=>{e.render(t.jsx(a.Navbar,{items:o})),e.globalExpect(e.screen.getByText("Home")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("About")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("External")).toBeInTheDocument()}),e.it("renders correct hrefs",()=>{e.render(t.jsx(a.Navbar,{items:o})),e.globalExpect(e.screen.getByText("Home")).toHaveAttribute("href","/"),e.globalExpect(e.screen.getByText("About")).toHaveAttribute("href","/about")}),e.it("renders external links with target=_blank",()=>{e.render(t.jsx(a.Navbar,{items:o})),e.globalExpect(e.screen.getByText("External")).toHaveAttribute("target","_blank")}),e.it("renders external links with rel=noopener noreferrer",()=>{e.render(t.jsx(a.Navbar,{items:o})),e.globalExpect(e.screen.getByText("External")).toHaveAttribute("rel","noopener noreferrer")}),e.it("renders internal links with target=_self",()=>{e.render(t.jsx(a.Navbar,{items:o})),e.globalExpect(e.screen.getByText("Home")).toHaveAttribute("target","_self")})}),e.describe("Items with sublinks (default navigationType)",()=>{e.it("renders parent item as button when no href",()=>{e.render(t.jsx(a.Navbar,{items:c})),e.globalExpect(e.screen.getByRole("button",{name:/products/i})).toBeInTheDocument()}),e.it("toggle button has aria-haspopup=true",()=>{e.render(t.jsx(a.Navbar,{items:c})),e.globalExpect(e.screen.getByRole("button",{name:/products/i})).toHaveAttribute("aria-haspopup","true")}),e.it("toggle button starts with aria-expanded=false",()=>{e.render(t.jsx(a.Navbar,{items:c})),e.globalExpect(e.screen.getByRole("button",{name:/products/i})).toHaveAttribute("aria-expanded","false")}),e.it("sublink dropdown has role=menu and aria-label",()=>{const{container:n}=e.render(t.jsx(a.Navbar,{items:c}));e.globalExpect(n.querySelector("[role='menu'][aria-label='Products submenu']")).toBeInTheDocument()}),e.it("clicking toggle button opens dropdown (aria-expanded=true)",()=>{e.render(t.jsx(a.Navbar,{items:c}));const n=e.screen.getByRole("button",{name:/products/i});e.fireEvent.click(n),e.globalExpect(n).toHaveAttribute("aria-expanded","true")}),e.it("clicking toggle button twice closes dropdown (aria-expanded=false)",()=>{e.render(t.jsx(a.Navbar,{items:c}));const n=e.screen.getByRole("button",{name:/products/i});e.fireEvent.click(n),e.fireEvent.click(n),e.globalExpect(n).toHaveAttribute("aria-expanded","false")}),e.it("sublinks are rendered inside the dropdown",()=>{e.render(t.jsx(a.Navbar,{items:c})),e.globalExpect(e.screen.getByText("Widget")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("Gadget")).toBeInTheDocument()}),e.it("sublinks have correct hrefs",()=>{e.render(t.jsx(a.Navbar,{items:c})),e.globalExpect(e.screen.getByText("Widget")).toHaveAttribute("href","/widget"),e.globalExpect(e.screen.getByText("Gadget")).toHaveAttribute("href","/gadget")})}),e.describe("onClick callback",()=>{e.it("calls onClick when a flat link is clicked",()=>{const n=e.vi.fn(),r=[{_key:"click",label:"Click me",href:"#",onClick:n}];e.render(t.jsx(a.Navbar,{items:r})),e.fireEvent.click(e.screen.getByText("Click me")),e.globalExpect(n).toHaveBeenCalledOnce()})}),e.describe("Variant",()=>{e.it("applies standard variant class by default",()=>{e.render(t.jsx(a.Navbar,{})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("standard")}),e.it("applies transparent variant class",()=>{e.render(t.jsx(a.Navbar,{variant:"transparent"})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("transparent")})}),e.describe("Alignment",()=>{e.it("applies right alignment class by default",()=>{e.render(t.jsx(a.Navbar,{})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("right")}),e.it("applies left alignment class",()=>{e.render(t.jsx(a.Navbar,{alignment:"left"})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("left")}),e.it("applies center alignment class",()=>{e.render(t.jsx(a.Navbar,{alignment:"center"})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("center")})}),e.describe("Sticky",()=>{e.it("does not apply sticky class by default",()=>{e.render(t.jsx(a.Navbar,{})),e.globalExpect(e.screen.getByRole("banner")).not.toHaveClass("sticky")}),e.it("applies sticky class when isSticky=true",()=>{e.render(t.jsx(a.Navbar,{isSticky:!0})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("sticky")})}),e.describe("Navigation type",()=>{e.it("applies default class when no groups",()=>{e.render(t.jsx(a.Navbar,{items:o})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("default")}),e.it("applies advanced class when groups provided",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("advanced")})}),e.describe("Utility items",()=>{e.it("renders both desktop and mobile utility navs",()=>{e.render(t.jsx(a.Navbar,{utilityItems:b}));const n=e.screen.getAllByRole("navigation",{name:"Utility navigation"});e.globalExpect(n).toHaveLength(2)}),e.it("renders all utility button labels",()=>{e.render(t.jsx(a.Navbar,{utilityItems:b})),e.globalExpect(e.screen.getAllByText("Log in").length).toBeGreaterThan(0),e.globalExpect(e.screen.getAllByText("Sign up").length).toBeGreaterThan(0)}),e.it("renders link utility items as anchors with correct href",()=>{e.render(t.jsx(a.Navbar,{utilityItems:b}));const n=e.screen.getAllByRole("link",{name:"Sign up"});e.globalExpect(n.length).toBeGreaterThan(0),n.forEach(r=>e.globalExpect(r).toHaveAttribute("href","/signup"))}),e.it("does not render utility nav when no items",()=>{e.render(t.jsx(a.Navbar,{utilityItems:[]})),e.globalExpect(e.screen.queryByRole("navigation",{name:"Utility navigation"})).not.toBeInTheDocument()}),e.it("does not crash when only one utility item provided",()=>{const n=[{_key:"cta",label:"Sign up",ariaLabel:"Sign up",href:"/signup"}];e.globalExpect(()=>e.render(t.jsx(a.Navbar,{utilityItems:n}))).not.toThrow()}),e.it("renders modal utility item as a button (not an anchor)",()=>{const n=[{_key:"contact",label:"Contact Us",ariaLabel:"Contact Us",variant:"primary",modalPayload:{heading:"Contact Us"}}];e.render(t.jsx(a.Navbar,{utilityItems:n}));const r=e.screen.getAllByRole("button",{name:"Contact Us"});e.globalExpect(r.length).toBeGreaterThan(0),r.forEach(l=>e.globalExpect(l.tagName).toBe("BUTTON"))}),e.it("calls useModal open with correct payload when modal utility item is clicked",()=>{d.mockClear();const n={heading:"Contact Us",formReference:{_id:"form-1",heading:"Contact"}},r=[{_key:"contact",label:"Contact Us",ariaLabel:"Contact Us",variant:"primary",modalPayload:n}];e.render(t.jsx(a.Navbar,{utilityItems:r}));const l=e.screen.getAllByRole("button",{name:"Contact Us"});e.fireEvent.click(l[0]),e.globalExpect(d).toHaveBeenCalledWith(n)}),e.it("renders mixed link and modal utility items correctly",()=>{const n=[{_key:"login",label:"Log in",ariaLabel:"Log in",href:"/login",variant:"secondary"},{_key:"contact",label:"Contact Us",ariaLabel:"Contact Us",variant:"primary",modalPayload:{heading:"Contact"}}];e.render(t.jsx(a.Navbar,{utilityItems:n}));const r=e.screen.getAllByRole("link",{name:"Log in"});e.globalExpect(r.length).toBeGreaterThan(0);const l=e.screen.getAllByRole("button",{name:"Contact Us"});e.globalExpect(l.length).toBeGreaterThan(0)})}),e.describe("Mobile menu toggle",()=>{e.it("renders toggle button",()=>{e.render(t.jsx(a.Navbar,{items:o})),e.globalExpect(e.screen.getByRole("button",{name:/open menu/i})).toBeInTheDocument()}),e.it("toggle starts closed (aria-expanded=false)",()=>{e.render(t.jsx(a.Navbar,{items:o})),e.globalExpect(e.screen.getByRole("button",{name:/open menu/i})).toHaveAttribute("aria-expanded","false")}),e.it("opens menu on click",()=>{e.render(t.jsx(a.Navbar,{items:o}));const n=e.screen.getByRole("button",{name:/open menu/i});e.fireEvent.click(n),e.globalExpect(n).toHaveAttribute("aria-expanded","true")}),e.it("closes menu on second click",()=>{e.render(t.jsx(a.Navbar,{items:o}));const n=e.screen.getByRole("button",{name:/open menu/i});e.fireEvent.click(n),e.fireEvent.click(n),e.globalExpect(n).toHaveAttribute("aria-expanded","false")}),e.it("toggle has aria-controls pointing to main-menu",()=>{e.render(t.jsx(a.Navbar,{items:o})),e.globalExpect(e.screen.getByRole("button",{name:/open menu/i})).toHaveAttribute("aria-controls","main-menu")}),e.it("aria-label changes to 'Close menu' when menu is open",()=>{e.render(t.jsx(a.Navbar,{items:o}));const n=e.screen.getByRole("button",{name:/open menu/i});e.fireEvent.click(n),e.globalExpect(e.screen.getByRole("button",{name:/close menu/i})).toBeInTheDocument()})}),e.describe("Search button",()=>{e.it("does not render search button when showSearch=false",()=>{e.render(t.jsx(a.Navbar,{showSearch:!1})),e.globalExpect(e.screen.queryByRole("button",{name:/search/i})).not.toBeInTheDocument()}),e.it("renders search button in mobile bar when showSearch=true and on mobile",()=>{u(),e.render(t.jsx(a.Navbar,{showSearch:!0,items:o})),e.globalExpect(e.screen.getByRole("button",{name:/search/i})).toBeInTheDocument()}),e.it("renders search button in nav when showSearch=true and on desktop",()=>{s(),e.render(t.jsx(a.Navbar,{showSearch:!0,items:o})),e.globalExpect(e.screen.getByRole("button",{name:/search/i})).toBeInTheDocument()})}),e.describe("Custom styling",()=>{e.it("applies custom className",()=>{e.render(t.jsx(a.Navbar,{className:"my-navbar"})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("my-navbar")}),e.it("preserves base navbar class alongside custom className",()=>{e.render(t.jsx(a.Navbar,{className:"my-navbar"})),e.globalExpect(e.screen.getByRole("banner")).toHaveClass("navbar")}),e.it("applies inline style",()=>{e.render(t.jsx(a.Navbar,{style:{borderBottom:"2px solid red"}}));const n=e.screen.getByRole("banner");e.globalExpect(n.style.borderBottom).toBe("2px solid red")})}),e.describe("Accessibility",()=>{e.it("header has banner landmark role",()=>{e.render(t.jsx(a.Navbar,{})),e.globalExpect(e.screen.getByRole("banner")).toBeInTheDocument()}),e.it("header has aria-label='Site header'",()=>{e.render(t.jsx(a.Navbar,{})),e.globalExpect(e.screen.getByRole("banner")).toHaveAttribute("aria-label","Site header")}),e.it("primary nav has id=main-menu",()=>{const{container:n}=e.render(t.jsx(a.Navbar,{items:o}));e.globalExpect(n.querySelector("#main-menu")).toBeInTheDocument()}),e.it("primary nav has aria-label='Primary navigation'",()=>{e.render(t.jsx(a.Navbar,{items:o})),e.globalExpect(e.screen.getByRole("navigation",{name:"Primary navigation"})).toBeInTheDocument()}),e.it("decorative icons are aria-hidden",()=>{e.render(t.jsx(a.Navbar,{items:o})),e.globalExpect(document.querySelectorAll("[aria-hidden='true']").length).toBeGreaterThan(0)}),e.it("external link icons are aria-hidden",()=>{e.render(t.jsx(a.Navbar,{items:o}));const r=e.screen.getByText("External").querySelector("[aria-hidden='true']");e.globalExpect(r).toBeInTheDocument()})}),e.describe("Props forwarding",()=>{e.it("forwards data attributes to header",()=>{e.render(t.jsx(a.Navbar,{"data-testid":"my-navbar"})),e.globalExpect(e.screen.getByTestId("my-navbar")).toBeInTheDocument()})}),e.describe("Advanced navigation (groups)",()=>{e.beforeEach(()=>{s()}),e.it("renders group titles",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"})),e.globalExpect(e.screen.getByText("Solutions")).toBeInTheDocument()}),e.it("group toggle button has aria-haspopup=true",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"})),e.globalExpect(e.screen.getByRole("button",{name:/solutions/i})).toHaveAttribute("aria-haspopup","true")}),e.it("group toggle starts with aria-expanded=false",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"})),e.globalExpect(e.screen.getByRole("button",{name:/solutions/i})).toHaveAttribute("aria-expanded","false")}),e.it("group submenu has role=menu and aria-label",()=>{const{container:n}=e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"}));e.globalExpect(n.querySelector("[aria-label='Solutions submenu']")).toBeInTheDocument()}),e.it("mouseenter on group wrapper opens the mega-menu (aria-expanded=true)",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"}));const n=e.screen.getByRole("button",{name:/solutions/i});e.fireEvent.mouseEnter(n.closest(".linkWrapper")),e.globalExpect(n).toHaveAttribute("aria-expanded","true")}),e.it("renders primary items inside the mega-menu",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"})),e.globalExpect(e.screen.getByText("Enterprise")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("Startup")).toBeInTheDocument()}),e.it("primary items with href are rendered as links",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"}));const n=e.screen.getByText("Enterprise").closest("a");e.globalExpect(n).not.toBeNull(),e.globalExpect(n.tagName).toBe("A"),e.globalExpect(n).toHaveAttribute("href","/enterprise")}),e.it("renders secondary items",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"})),e.globalExpect(e.screen.getByText("Case Studies")).toBeInTheDocument()}),e.it("hovering a primary item with sublinks reveals column 2 children",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"})),e.fireEvent.mouseEnter(e.screen.getByText("Enterprise").closest("a")),e.globalExpect(e.screen.getByText("SSO")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("Security")).toBeInTheDocument()}),e.it("column 2 disappears after hovering a primary item without sublinks",()=>{e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"})),e.fireEvent.mouseEnter(e.screen.getByText("Enterprise").closest("a")),e.globalExpect(e.screen.getByText("SSO")).toBeInTheDocument(),e.fireEvent.mouseEnter(e.screen.getByText("Startup").closest("a")),e.globalExpect(e.screen.queryByText("SSO")).not.toBeInTheDocument()}),e.it("mouseleave on submenu panel closes the mega-menu",()=>{const{container:n}=e.render(t.jsx(a.Navbar,{groups:i,navigationType:"advanced"})),r=e.screen.getByRole("button",{name:/solutions/i}),l=r.closest(".linkWrapper"),g=n.querySelector("[aria-label='Solutions submenu']");e.fireEvent.mouseEnter(l),e.globalExpect(r).toHaveAttribute("aria-expanded","true"),e.fireEvent.mouseLeave(g),e.globalExpect(r).toHaveAttribute("aria-expanded","false")}),e.it("primary item click calls onClick and closes dropdown",()=>{const n=e.vi.fn(),r=[{_key:"g1",title:"Menu",primaryItems:[{_key:"item1",label:"Clickable",href:"/dest",onClick:n}]}];e.render(t.jsx(a.Navbar,{groups:r,navigationType:"advanced"})),e.fireEvent.click(e.screen.getByText("Clickable").closest("a")),e.globalExpect(n).toHaveBeenCalledOnce()})}),e.describe("Spotlight card",()=>{const r=[{_key:"spot",title:"Spotlight Group",primaryItems:[{_key:"p1",label:"Item One",href:"/one"}],spotlight:{title:"New Feature",description:"Check it out",callToAction:{label:"Learn more",ariaLabel:"Learn more about new feature",variant:"primary",linkOptions:{linkType:"internal",internalUrl:{slug:{current:"new-feature"}}}}}}];e.it("renders the spotlight CTA button",()=>{s(),e.render(t.jsx(a.Navbar,{groups:r,navigationType:"advanced"})),e.globalExpect(e.screen.getByRole("link",{name:/learn more/i})).toBeInTheDocument()}),e.it("spotlight CTA resolves internal href correctly",()=>{s(),e.render(t.jsx(a.Navbar,{groups:r,navigationType:"advanced"})),e.globalExpect(e.screen.getByRole("link",{name:/learn more/i})).toHaveAttribute("href","/new-feature")}),e.it("spotlight CTA resolves external href correctly",()=>{s();const g=[{_key:"g",title:"Ext Group",primaryItems:[{_key:"p1",label:"Item",href:"/item"}],spotlight:{callToAction:{label:"Visit",ariaLabel:"Visit external site",linkOptions:{linkType:"external",externalUrl:"https://example.com"}}}}];e.render(t.jsx(a.Navbar,{groups:g,navigationType:"advanced"}));const p=e.screen.getByRole("link",{name:/visit/i});e.globalExpect(p).toHaveAttribute("href","https://example.com"),e.globalExpect(p).toHaveAttribute("target","_blank")}),e.it("renders spotlight image when provided",()=>{s();const l=[{_key:"g",title:"Img Group",primaryItems:[{_key:"p1",label:"Item",href:"/item"}],spotlight:{callToAction:{label:"Go",linkOptions:{linkType:"internal",internalUrl:{slug:{current:"go"}}}},image:{asset:{_id:"1",url:"/img.jpg",altText:"Demo image",title:"Demo",description:"Demo desc"},imageUrls:{small:"/s.jpg",medium:"/m.jpg",large:"/l.jpg"}}}}];e.render(t.jsx(a.Navbar,{groups:l,navigationType:"advanced"}));const g=e.screen.getByAltText("Demo image");e.globalExpect(g).toBeInTheDocument(),e.globalExpect(g).toHaveAttribute("src","/m.jpg")}),e.it("renders nothing when callToAction is absent",()=>{s();const l=[{_key:"g",title:"No CTA",primaryItems:[{_key:"p1",label:"Item",href:"/item"}],spotlight:{title:"Title only"}}];e.globalExpect(()=>e.render(t.jsx(a.Navbar,{groups:l,navigationType:"advanced"}))).not.toThrow()})}),e.describe("renderText prop",()=>{e.it("calls renderText for spotlight title when provided",()=>{s();const n=e.vi.fn(l=>typeof l=="string"?t.jsx("span",{children:l}):null),r=[{_key:"g",title:"Group",primaryItems:[{_key:"p1",label:"Item",href:"/item"}],spotlight:{title:"Spotlight Title",callToAction:{label:"Go",linkOptions:{linkType:"internal",internalUrl:{slug:{current:"go"}}}}}}];e.render(t.jsx(a.Navbar,{groups:r,navigationType:"advanced",renderText:n})),e.globalExpect(n).toHaveBeenCalledWith("Spotlight Title",e.globalExpect.any(String))})})});

package/dist/core/components/NavBar/NavBar.test.mjs

@@ -1,33 +1,37 @@
-import { jsxs as B, jsx as n } from "react/jsx-runtime";
-import { v as y, d as s, i as a, r as o, g as e, s as t, f as c, b as T } from "../../../react.esm-DjxyacK8.js";
+import { jsxs as k, jsx as n } from "react/jsx-runtime";
+import { v as d, d as c, i as a, r as o, g as e, s as t, f as u, b as T } from "../../../react.esm-DjxyacK8.js";
 import { Navbar as i } from "./index.mjs";
 import "../../../index-DPGXWTtt.js";
-y.mock("../../utils/NoScroll/noScroll", () => ({
-  lockScroll: y.fn(),
-  unlockScroll: y.fn()
+d.mock("../../utils/NoScroll/noScroll", () => ({
+  lockScroll: d.fn(),
+  unlockScroll: d.fn()
 }));
-y.mock("../Modal", () => ({
+const v = d.fn();
+d.mock("../../../core/context/ModalContext", () => ({
+  useModal: () => ({ open: v })
+}));
+d.mock("../Modal", () => ({
   Modal: ({
     trigger: r,
-    content: u
-  }) => /* @__PURE__ */ B("div", { "data-testid": "modal-wrapper", children: [
+    content: l
+  }) => /* @__PURE__ */ k("div", { "data-testid": "modal-wrapper", children: [
     r,
-    u
+    l
   ] })
 }));
-const d = () => {
+const p = () => {
   Object.defineProperty(window, "innerWidth", {
     writable: !0,
     configurable: !0,
     value: 1024
   }), window.dispatchEvent(new Event("resize"));
-}, k = () => {
+}, f = () => {
   Object.defineProperty(window, "innerWidth", {
     writable: !0,
     configurable: !0,
     value: 375
   }), window.dispatchEvent(new Event("resize"));
-}, l = [
+}, s = [
   { _key: "home", label: "Home", href: "/" },
   { _key: "about", label: "About", href: "/about" },
   {
@@ -36,7 +40,7 @@ const d = () => {
     href: "https://example.com",
     isExternal: !0
   }
-], p = [
+], y = [
   {
     _key: "products",
     label: "Products",
@@ -65,7 +69,7 @@ const d = () => {
       { _key: "r1", label: "Case Studies", href: "/case-studies" }
     ]
   }
-], v = [
+], b = [
   {
     _key: "login",
     label: "Log in",
@@ -81,8 +85,8 @@ const d = () => {
     variant: "primary"
   }
 ];
-s("Navbar", () => {
-  s("Rendering", () => {
+c("Navbar", () => {
+  c("Rendering", () => {
     a("renders the header element", () => {
       o(/* @__PURE__ */ n(i, {})), e(t.getByRole("banner")).toBeInTheDocument();
     }), a("renders logo when provided", () => {
@@ -95,72 +99,72 @@ s("Navbar", () => {
       const { container: r } = o(/* @__PURE__ */ n(i, {}));
       e(r.querySelector(".logo")).not.toBeInTheDocument(), e(r.querySelector(".title")).not.toBeInTheDocument();
     }), a("renders navigation landmark", () => {
-      o(/* @__PURE__ */ n(i, { items: l })), e(
+      o(/* @__PURE__ */ n(i, { items: s })), e(
         t.getByRole("navigation", { name: "Primary navigation" })
       ).toBeInTheDocument();
     });
-  }), s("Flat navigation items", () => {
+  }), c("Flat navigation items", () => {
     a("renders all flat nav links", () => {
-      o(/* @__PURE__ */ n(i, { items: l })), e(t.getByText("Home")).toBeInTheDocument(), e(t.getByText("About")).toBeInTheDocument(), e(t.getByText("External")).toBeInTheDocument();
+      o(/* @__PURE__ */ n(i, { items: s })), e(t.getByText("Home")).toBeInTheDocument(), e(t.getByText("About")).toBeInTheDocument(), e(t.getByText("External")).toBeInTheDocument();
     }), a("renders correct hrefs", () => {
-      o(/* @__PURE__ */ n(i, { items: l })), e(t.getByText("Home")).toHaveAttribute("href", "/"), e(t.getByText("About")).toHaveAttribute("href", "/about");
+      o(/* @__PURE__ */ n(i, { items: s })), e(t.getByText("Home")).toHaveAttribute("href", "/"), e(t.getByText("About")).toHaveAttribute("href", "/about");
     }), a("renders external links with target=_blank", () => {
-      o(/* @__PURE__ */ n(i, { items: l })), e(t.getByText("External")).toHaveAttribute("target", "_blank");
+      o(/* @__PURE__ */ n(i, { items: s })), e(t.getByText("External")).toHaveAttribute("target", "_blank");
     }), a("renders external links with rel=noopener noreferrer", () => {
-      o(/* @__PURE__ */ n(i, { items: l })), e(t.getByText("External")).toHaveAttribute(
+      o(/* @__PURE__ */ n(i, { items: s })), e(t.getByText("External")).toHaveAttribute(
         "rel",
         "noopener noreferrer"
       );
     }), a("renders internal links with target=_self", () => {
-      o(/* @__PURE__ */ n(i, { items: l })), e(t.getByText("Home")).toHaveAttribute("target", "_self");
+      o(/* @__PURE__ */ n(i, { items: s })), e(t.getByText("Home")).toHaveAttribute("target", "_self");
     });
-  }), s("Items with sublinks (default navigationType)", () => {
+  }), c("Items with sublinks (default navigationType)", () => {
     a("renders parent item as button when no href", () => {
-      o(/* @__PURE__ */ n(i, { items: p })), e(
+      o(/* @__PURE__ */ n(i, { items: y })), e(
         t.getByRole("button", { name: /products/i })
       ).toBeInTheDocument();
     }), a("toggle button has aria-haspopup=true", () => {
-      o(/* @__PURE__ */ n(i, { items: p })), e(t.getByRole("button", { name: /products/i })).toHaveAttribute(
+      o(/* @__PURE__ */ n(i, { items: y })), e(t.getByRole("button", { name: /products/i })).toHaveAttribute(
         "aria-haspopup",
         "true"
       );
     }), a("toggle button starts with aria-expanded=false", () => {
-      o(/* @__PURE__ */ n(i, { items: p })), e(t.getByRole("button", { name: /products/i })).toHaveAttribute(
+      o(/* @__PURE__ */ n(i, { items: y })), e(t.getByRole("button", { name: /products/i })).toHaveAttribute(
         "aria-expanded",
         "false"
       );
     }), a("sublink dropdown has role=menu and aria-label", () => {
-      const { container: r } = o(/* @__PURE__ */ n(i, { items: p }));
+      const { container: r } = o(/* @__PURE__ */ n(i, { items: y }));
       e(
         r.querySelector("[role='menu'][aria-label='Products submenu']")
       ).toBeInTheDocument();
     }), a("clicking toggle button opens dropdown (aria-expanded=true)", () => {
-      o(/* @__PURE__ */ n(i, { items: p }));
+      o(/* @__PURE__ */ n(i, { items: y }));
       const r = t.getByRole("button", { name: /products/i });
-      c.click(r), e(r).toHaveAttribute("aria-expanded", "true");
+      u.click(r), e(r).toHaveAttribute("aria-expanded", "true");
     }), a("clicking toggle button twice closes dropdown (aria-expanded=false)", () => {
-      o(/* @__PURE__ */ n(i, { items: p }));
+      o(/* @__PURE__ */ n(i, { items: y }));
       const r = t.getByRole("button", { name: /products/i });
-      c.click(r), c.click(r), e(r).toHaveAttribute("aria-expanded", "false");
+      u.click(r), u.click(r), e(r).toHaveAttribute("aria-expanded", "false");
     }), a("sublinks are rendered inside the dropdown", () => {
-      o(/* @__PURE__ */ n(i, { items: p })), e(t.getByText("Widget")).toBeInTheDocument(), e(t.getByText("Gadget")).toBeInTheDocument();
+      o(/* @__PURE__ */ n(i, { items: y })), e(t.getByText("Widget")).toBeInTheDocument(), e(t.getByText("Gadget")).toBeInTheDocument();
     }), a("sublinks have correct hrefs", () => {
-      o(/* @__PURE__ */ n(i, { items: p })), e(t.getByText("Widget")).toHaveAttribute("href", "/widget"), e(t.getByText("Gadget")).toHaveAttribute("href", "/gadget");
+      o(/* @__PURE__ */ n(i, { items: y })), e(t.getByText("Widget")).toHaveAttribute("href", "/widget"), e(t.getByText("Gadget")).toHaveAttribute("href", "/gadget");
     });
-  }), s("onClick callback", () => {
+  }), c("onClick callback", () => {
     a("calls onClick when a flat link is clicked", () => {
-      const r = y.fn();
+      const r = d.fn();
       o(/* @__PURE__ */ n(i, { items: [
         { _key: "click", label: "Click me", href: "#", onClick: r }
-      ] })), c.click(t.getByText("Click me")), e(r).toHaveBeenCalledOnce();
+      ] })), u.click(t.getByText("Click me")), e(r).toHaveBeenCalledOnce();
     });
-  }), s("Variant", () => {
+  }), c("Variant", () => {
     a("applies standard variant class by default", () => {
       o(/* @__PURE__ */ n(i, {})), e(t.getByRole("banner")).toHaveClass("standard");
     }), a("applies transparent variant class", () => {
       o(/* @__PURE__ */ n(i, { variant: "transparent" })), e(t.getByRole("banner")).toHaveClass("transparent");
     });
-  }), s("Alignment", () => {
+  }), c("Alignment", () => {
     a("applies right alignment class by default", () => {
       o(/* @__PURE__ */ n(i, {})), e(t.getByRole("banner")).toHaveClass("right");
     }), a("applies left alignment class", () => {
@@ -168,32 +172,36 @@ s("Navbar", () => {
     }), a("applies center alignment class", () => {
       o(/* @__PURE__ */ n(i, { alignment: "center" })), e(t.getByRole("banner")).toHaveClass("center");
     });
-  }), s("Sticky", () => {
+  }), c("Sticky", () => {
     a("does not apply sticky class by default", () => {
       o(/* @__PURE__ */ n(i, {})), e(t.getByRole("banner")).not.toHaveClass("sticky");
     }), a("applies sticky class when isSticky=true", () => {
       o(/* @__PURE__ */ n(i, { isSticky: !0 })), e(t.getByRole("banner")).toHaveClass("sticky");
     });
-  }), s("Navigation type", () => {
+  }), c("Navigation type", () => {
     a("applies default class when no groups", () => {
-      o(/* @__PURE__ */ n(i, { items: l })), e(t.getByRole("banner")).toHaveClass("default");
+      o(/* @__PURE__ */ n(i, { items: s })), e(t.getByRole("banner")).toHaveClass("default");
     }), a("applies advanced class when groups provided", () => {
       o(/* @__PURE__ */ n(i, { groups: g, navigationType: "advanced" })), e(t.getByRole("banner")).toHaveClass("advanced");
     });
-  }), s("Utility items", () => {
+  }), c("Utility items", () => {
     a("renders both desktop and mobile utility navs", () => {
-      o(/* @__PURE__ */ n(i, { utilityItems: v }));
+      o(/* @__PURE__ */ n(i, { utilityItems: b }));
       const r = t.getAllByRole("navigation", {
         name: "Utility navigation"
       });
       e(r).toHaveLength(2);
     }), a("renders all utility button labels", () => {
-      o(/* @__PURE__ */ n(i, { utilityItems: v })), e(t.getAllByText("Log in").length).toBeGreaterThan(0), e(t.getAllByText("Sign up").length).toBeGreaterThan(0);
+      o(/* @__PURE__ */ n(i, { utilityItems: b })), e(t.getAllByText("Log in").length).toBeGreaterThan(0), e(t.getAllByText("Sign up").length).toBeGreaterThan(0);
+    }), a("renders link utility items as anchors with correct href", () => {
+      o(/* @__PURE__ */ n(i, { utilityItems: b }));
+      const r = t.getAllByRole("link", { name: "Sign up" });
+      e(r.length).toBeGreaterThan(0), r.forEach((l) => e(l).toHaveAttribute("href", "/signup"));
     }), a("does not render utility nav when no items", () => {
       o(/* @__PURE__ */ n(i, { utilityItems: [] })), e(
         t.queryByRole("navigation", { name: "Utility navigation" })
       ).not.toBeInTheDocument();
-    }), a("does not crash when only one utility item provided (no index[1] access)", () => {
+    }), a("does not crash when only one utility item provided", () => {
       const r = [
         {
           _key: "cta",
@@ -203,50 +211,102 @@ s("Navbar", () => {
         }
       ];
       e(() => o(/* @__PURE__ */ n(i, { utilityItems: r }))).not.toThrow();
+    }), a("renders modal utility item as a button (not an anchor)", () => {
+      o(/* @__PURE__ */ n(i, { utilityItems: [
+        {
+          _key: "contact",
+          label: "Contact Us",
+          ariaLabel: "Contact Us",
+          variant: "primary",
+          modalPayload: { heading: "Contact Us" }
+        }
+      ] }));
+      const l = t.getAllByRole("button", { name: "Contact Us" });
+      e(l.length).toBeGreaterThan(0), l.forEach((m) => e(m.tagName).toBe("BUTTON"));
+    }), a("calls useModal open with correct payload when modal utility item is clicked", () => {
+      v.mockClear();
+      const r = {
+        heading: "Contact Us",
+        formReference: { _id: "form-1", heading: "Contact" }
+      };
+      o(/* @__PURE__ */ n(i, { utilityItems: [
+        {
+          _key: "contact",
+          label: "Contact Us",
+          ariaLabel: "Contact Us",
+          variant: "primary",
+          modalPayload: r
+        }
+      ] }));
+      const m = t.getAllByRole("button", { name: "Contact Us" });
+      u.click(m[0]), e(v).toHaveBeenCalledWith(r);
+    }), a("renders mixed link and modal utility items correctly", () => {
+      o(/* @__PURE__ */ n(i, { utilityItems: [
+        {
+          _key: "login",
+          label: "Log in",
+          ariaLabel: "Log in",
+          href: "/login",
+          variant: "secondary"
+        },
+        {
+          _key: "contact",
+          label: "Contact Us",
+          ariaLabel: "Contact Us",
+          variant: "primary",
+          modalPayload: { heading: "Contact" }
+        }
+      ] }));
+      const l = t.getAllByRole("link", { name: "Log in" });
+      e(l.length).toBeGreaterThan(0);
+      const m = t.getAllByRole("button", {
+        name: "Contact Us"
+      });
+      e(m.length).toBeGreaterThan(0);
     });
-  }), s("Mobile menu toggle", () => {
+  }), c("Mobile menu toggle", () => {
     a("renders toggle button", () => {
-      o(/* @__PURE__ */ n(i, { items: l })), e(
+      o(/* @__PURE__ */ n(i, { items: s })), e(
         t.getByRole("button", { name: /open menu/i })
       ).toBeInTheDocument();
     }), a("toggle starts closed (aria-expanded=false)", () => {
-      o(/* @__PURE__ */ n(i, { items: l })), e(
+      o(/* @__PURE__ */ n(i, { items: s })), e(
         t.getByRole("button", { name: /open menu/i })
       ).toHaveAttribute("aria-expanded", "false");
     }), a("opens menu on click", () => {
-      o(/* @__PURE__ */ n(i, { items: l }));
+      o(/* @__PURE__ */ n(i, { items: s }));
       const r = t.getByRole("button", { name: /open menu/i });
-      c.click(r), e(r).toHaveAttribute("aria-expanded", "true");
+      u.click(r), e(r).toHaveAttribute("aria-expanded", "true");
     }), a("closes menu on second click", () => {
-      o(/* @__PURE__ */ n(i, { items: l }));
+      o(/* @__PURE__ */ n(i, { items: s }));
       const r = t.getByRole("button", { name: /open menu/i });
-      c.click(r), c.click(r), e(r).toHaveAttribute("aria-expanded", "false");
+      u.click(r), u.click(r), e(r).toHaveAttribute("aria-expanded", "false");
     }), a("toggle has aria-controls pointing to main-menu", () => {
-      o(/* @__PURE__ */ n(i, { items: l })), e(
+      o(/* @__PURE__ */ n(i, { items: s })), e(
         t.getByRole("button", { name: /open menu/i })
       ).toHaveAttribute("aria-controls", "main-menu");
     }), a("aria-label changes to 'Close menu' when menu is open", () => {
-      o(/* @__PURE__ */ n(i, { items: l }));
+      o(/* @__PURE__ */ n(i, { items: s }));
       const r = t.getByRole("button", { name: /open menu/i });
-      c.click(r), e(
+      u.click(r), e(
         t.getByRole("button", { name: /close menu/i })
       ).toBeInTheDocument();
     });
-  }), s("Search button", () => {
+  }), c("Search button", () => {
     a("does not render search button when showSearch=false", () => {
       o(/* @__PURE__ */ n(i, { showSearch: !1 })), e(
         t.queryByRole("button", { name: /search/i })
       ).not.toBeInTheDocument();
     }), a("renders search button in mobile bar when showSearch=true and on mobile", () => {
-      k(), o(/* @__PURE__ */ n(i, { showSearch: !0, items: l })), e(
+      f(), o(/* @__PURE__ */ n(i, { showSearch: !0, items: s })), e(
         t.getByRole("button", { name: /search/i })
       ).toBeInTheDocument();
     }), a("renders search button in nav when showSearch=true and on desktop", () => {
-      d(), o(/* @__PURE__ */ n(i, { showSearch: !0, items: l })), e(
+      p(), o(/* @__PURE__ */ n(i, { showSearch: !0, items: s })), e(
         t.getByRole("button", { name: /search/i })
       ).toBeInTheDocument();
     });
-  }), s("Custom styling", () => {
+  }), c("Custom styling", () => {
     a("applies custom className", () => {
       o(/* @__PURE__ */ n(i, { className: "my-navbar" })), e(t.getByRole("banner")).toHaveClass("my-navbar");
     }), a("preserves base navbar class alongside custom className", () => {
@@ -256,7 +316,7 @@ s("Navbar", () => {
       const r = t.getByRole("banner");
       e(r.style.borderBottom).toBe("2px solid red");
     });
-  }), s("Accessibility", () => {
+  }), c("Accessibility", () => {
     a("header has banner landmark role", () => {
       o(/* @__PURE__ */ n(i, {})), e(t.getByRole("banner")).toBeInTheDocument();
     }), a("header has aria-label='Site header'", () => {
@@ -265,28 +325,28 @@ s("Navbar", () => {
         "Site header"
       );
     }), a("primary nav has id=main-menu", () => {
-      const { container: r } = o(/* @__PURE__ */ n(i, { items: l }));
+      const { container: r } = o(/* @__PURE__ */ n(i, { items: s }));
       e(r.querySelector("#main-menu")).toBeInTheDocument();
     }), a("primary nav has aria-label='Primary navigation'", () => {
-      o(/* @__PURE__ */ n(i, { items: l })), e(
+      o(/* @__PURE__ */ n(i, { items: s })), e(
         t.getByRole("navigation", { name: "Primary navigation" })
       ).toBeInTheDocument();
     }), a("decorative icons are aria-hidden", () => {
-      o(/* @__PURE__ */ n(i, { items: l })), e(
+      o(/* @__PURE__ */ n(i, { items: s })), e(
         document.querySelectorAll("[aria-hidden='true']").length
       ).toBeGreaterThan(0);
     }), a("external link icons are aria-hidden", () => {
-      o(/* @__PURE__ */ n(i, { items: l }));
-      const u = t.getByText("External").querySelector("[aria-hidden='true']");
-      e(u).toBeInTheDocument();
+      o(/* @__PURE__ */ n(i, { items: s }));
+      const l = t.getByText("External").querySelector("[aria-hidden='true']");
+      e(l).toBeInTheDocument();
     });
-  }), s("Props forwarding", () => {
+  }), c("Props forwarding", () => {
     a("forwards data attributes to header", () => {
       o(/* @__PURE__ */ n(i, { "data-testid": "my-navbar" })), e(t.getByTestId("my-navbar")).toBeInTheDocument();
     });
-  }), s("Advanced navigation (groups)", () => {
+  }), c("Advanced navigation (groups)", () => {
     T(() => {
-      d();
+      p();
     }), a("renders group titles", () => {
       o(/* @__PURE__ */ n(i, { groups: g, navigationType: "advanced" })), e(t.getByText("Solutions")).toBeInTheDocument();
     }), a("group toggle button has aria-haspopup=true", () => {
@@ -307,7 +367,7 @@ s("Navbar", () => {
     }), a("mouseenter on group wrapper opens the mega-menu (aria-expanded=true)", () => {
       o(/* @__PURE__ */ n(i, { groups: g, navigationType: "advanced" }));
       const r = t.getByRole("button", { name: /solutions/i });
-      c.mouseEnter(r.closest(".linkWrapper")), e(r).toHaveAttribute("aria-expanded", "true");
+      u.mouseEnter(r.closest(".linkWrapper")), e(r).toHaveAttribute("aria-expanded", "true");
     }), a("renders primary items inside the mega-menu", () => {
       o(/* @__PURE__ */ n(i, { groups: g, navigationType: "advanced" })), e(t.getByText("Enterprise")).toBeInTheDocument(), e(t.getByText("Startup")).toBeInTheDocument();
     }), a("primary items with href are rendered as links", () => {
@@ -317,18 +377,18 @@ s("Navbar", () => {
     }), a("renders secondary items", () => {
       o(/* @__PURE__ */ n(i, { groups: g, navigationType: "advanced" })), e(t.getByText("Case Studies")).toBeInTheDocument();
     }), a("hovering a primary item with sublinks reveals column 2 children", () => {
-      o(/* @__PURE__ */ n(i, { groups: g, navigationType: "advanced" })), c.mouseEnter(t.getByText("Enterprise").closest("a")), e(t.getByText("SSO")).toBeInTheDocument(), e(t.getByText("Security")).toBeInTheDocument();
+      o(/* @__PURE__ */ n(i, { groups: g, navigationType: "advanced" })), u.mouseEnter(t.getByText("Enterprise").closest("a")), e(t.getByText("SSO")).toBeInTheDocument(), e(t.getByText("Security")).toBeInTheDocument();
     }), a("column 2 disappears after hovering a primary item without sublinks", () => {
-      o(/* @__PURE__ */ n(i, { groups: g, navigationType: "advanced" })), c.mouseEnter(t.getByText("Enterprise").closest("a")), e(t.getByText("SSO")).toBeInTheDocument(), c.mouseEnter(t.getByText("Startup").closest("a")), e(t.queryByText("SSO")).not.toBeInTheDocument();
+      o(/* @__PURE__ */ n(i, { groups: g, navigationType: "advanced" })), u.mouseEnter(t.getByText("Enterprise").closest("a")), e(t.getByText("SSO")).toBeInTheDocument(), u.mouseEnter(t.getByText("Startup").closest("a")), e(t.queryByText("SSO")).not.toBeInTheDocument();
     }), a("mouseleave on submenu panel closes the mega-menu", () => {
       const { container: r } = o(
         /* @__PURE__ */ n(i, { groups: g, navigationType: "advanced" })
-      ), u = t.getByRole("button", { name: /solutions/i }), m = u.closest(".linkWrapper"), h = r.querySelector(
+      ), l = t.getByRole("button", { name: /solutions/i }), m = l.closest(".linkWrapper"), h = r.querySelector(
         "[aria-label='Solutions submenu']"
       );
-      c.mouseEnter(m), e(u).toHaveAttribute("aria-expanded", "true"), c.mouseLeave(h), e(u).toHaveAttribute("aria-expanded", "false");
+      u.mouseEnter(m), e(l).toHaveAttribute("aria-expanded", "true"), u.mouseLeave(h), e(l).toHaveAttribute("aria-expanded", "false");
     }), a("primary item click calls onClick and closes dropdown", () => {
-      const r = y.fn();
+      const r = d.fn();
       o(/* @__PURE__ */ n(i, { groups: [
         {
           _key: "g1",
@@ -337,10 +397,10 @@ s("Navbar", () => {
             { _key: "item1", label: "Clickable", href: "/dest", onClick: r }
           ]
         }
-      ], navigationType: "advanced" })), c.click(t.getByText("Clickable").closest("a")), e(r).toHaveBeenCalledOnce();
+      ], navigationType: "advanced" })), u.click(t.getByText("Clickable").closest("a")), e(r).toHaveBeenCalledOnce();
     });
-  }), s("Spotlight card", () => {
-    const u = [
+  }), c("Spotlight card", () => {
+    const l = [
       {
         _key: "spot",
         title: "Spotlight Group",
@@ -361,16 +421,16 @@ s("Navbar", () => {
       }
     ];
     a("renders the spotlight CTA button", () => {
-      d(), o(/* @__PURE__ */ n(i, { groups: u, navigationType: "advanced" })), e(
+      p(), o(/* @__PURE__ */ n(i, { groups: l, navigationType: "advanced" })), e(
         t.getByRole("link", { name: /learn more/i })
       ).toBeInTheDocument();
     }), a("spotlight CTA resolves internal href correctly", () => {
-      d(), o(/* @__PURE__ */ n(i, { groups: u, navigationType: "advanced" })), e(t.getByRole("link", { name: /learn more/i })).toHaveAttribute(
+      p(), o(/* @__PURE__ */ n(i, { groups: l, navigationType: "advanced" })), e(t.getByRole("link", { name: /learn more/i })).toHaveAttribute(
         "href",
         "/new-feature"
       );
     }), a("spotlight CTA resolves external href correctly", () => {
-      d(), o(/* @__PURE__ */ n(i, { groups: [
+      p(), o(/* @__PURE__ */ n(i, { groups: [
         {
           _key: "g",
           title: "Ext Group",
@@ -387,10 +447,10 @@ s("Navbar", () => {
           }
         }
       ], navigationType: "advanced" }));
-      const b = t.getByRole("link", { name: /visit/i });
-      e(b).toHaveAttribute("href", "https://example.com"), e(b).toHaveAttribute("target", "_blank");
+      const B = t.getByRole("link", { name: /visit/i });
+      e(B).toHaveAttribute("href", "https://example.com"), e(B).toHaveAttribute("target", "_blank");
     }), a("renders spotlight image when provided", () => {
-      d(), o(/* @__PURE__ */ n(i, { groups: [
+      p(), o(/* @__PURE__ */ n(i, { groups: [
         {
           _key: "g",
           title: "Img Group",
@@ -419,7 +479,7 @@ s("Navbar", () => {
       const h = t.getByAltText("Demo image");
       e(h).toBeInTheDocument(), e(h).toHaveAttribute("src", "/m.jpg");
     }), a("renders nothing when callToAction is absent", () => {
-      d();
+      p();
       const m = [
         {
           _key: "g",
@@ -432,10 +492,10 @@ s("Navbar", () => {
         () => o(/* @__PURE__ */ n(i, { groups: m, navigationType: "advanced" }))
       ).not.toThrow();
     });
-  }), s("renderText prop", () => {
+  }), c("renderText prop", () => {
     a("calls renderText for spotlight title when provided", () => {
-      d();
-      const r = y.fn(
+      p();
+      const r = d.fn(
         (m) => typeof m == "string" ? /* @__PURE__ */ n("span", { children: m }) : null
       );
       o(