@pnx-mixtape/mxds 0.1.0-rc.5 → 0.1.0-rc.6

package/dist/build/side-navigation.css

@@ -1 +1 @@
-@layer popover-polyfill,design-system.defaults,design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-side-nav__parent{border-block-end:var(--line-width,2px) solid var(--line-colour,currentcolor);& a{color:inherit;padding:var(--item-spacing,var(--spacing-xxs));font-weight:var(--font-weight-bold);text-decoration-line:none;display:block;&:hover{text-decoration-line:underline}}}.mx-side-nav{--outline-offset:-1px;& ul li{position:relative;&:has([aria-current=page],.is-active)>a{font-weight:var(--font-weight-bold)}& a{color:inherit;border-block-end:var(--line-width,1px) solid var(--line-colour,var(--colour-border));padding-block:var(--item-spacing,var(--spacing-xxs));padding-inline:var(--indent,var(--spacing-xxs)) var(--item-spacing,var(--spacing-xxs));display:block}}& .mx-nav__level-2>li>a{--indent:var(--spacing-s);@media (width>=720px){--indent:var(--spacing-m)}}& .mx-nav__level-3>li>a{--indent:var(--spacing-m);@media (width>=720px){--indent:var(--spacing-l)}}& :is([aria-current=page],.is-active>a){background-color:var(--nav-active-background,var(--background,var(--colour-background-alt)));color:var(--nav-active-foreground,inherit)}& .mx-nav__toggle{display:none}}}
+@layer popover-polyfill,design-system.defaults,design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-side-nav__parent{border-block-end:var(--line-width,2px) solid var(--line-colour,currentcolor);& a{color:inherit;padding:var(--item-spacing,var(--spacing-xxs));font-weight:var(--font-weight-bold);text-decoration-line:none;display:block;&:hover{text-decoration-line:underline}}}.mx-side-nav{--outline-offset:-1px;& ul li{position:relative;&:has([aria-current=page],.is-active)>a{font-weight:var(--font-weight-bold)}& a{color:inherit;border-block-end:var(--line-width,1px) solid var(--line-colour,var(--colour-border));padding-block:var(--item-spacing,var(--spacing-xxs));padding-inline:var(--indent,var(--spacing-xxs)) var(--item-spacing,var(--spacing-xxs));display:block}}& .mx-nav__level-2>li>a{--indent:var(--spacing-s);@media (width>=720px){--indent:var(--spacing-m)}}& .mx-nav__level-3>li>a{--indent:var(--spacing-m);@media (width>=720px){--indent:var(--spacing-l)}}& :is([aria-current=page],.is-active>a){background-color:var(--nav-active-background,var(--background,var(--colour-background-alt)));color:var(--nav-active-foreground,inherit)}&:not(.mx-nav--collapsible) .mx-nav__toggle{display:none}}}

package/dist/build/sidebar.css

@@ -1 +1 @@
-@layer popover-polyfill,design-system.defaults,design-system.atoms,design-system.layout,design-system.utilities,design-system.components;@layer design-system.layouts{.mx-grid--sidebar{&:where(:not(:has(>aside))){grid-column:narrow}&:where(:has(>aside)){flex-flow:var(--sidebar-direction,column) wrap;gap:var(--sidebar-gap,var(--gap));justify-content:space-between;display:flex;@media (width>=720px){--sidebar-direction:row}&>aside{flex-grow:1;align-content:start;@media (width>=720px){max-inline-size:var(--sidebar-width,24ch)}}&>section{min-inline-size:var(--content-min,50%);max-inline-size:var(--container-max-width,76ch);flex-grow:999;flex-basis:0;& .mx-grid{--grid-min:18ch}}&.mx-grid--sidebar-rev{@media (width>=720px){--sidebar-direction:row-reverse}}&.mx-grid--sidebar-rev-lg{@media (width>=946px){--sidebar-direction:row-reverse}}}}}
+@layer popover-polyfill,design-system.defaults,design-system.atoms,design-system.layout,design-system.utilities,design-system.components;@layer design-system.layouts{.mx-grid--sidebar{&:where(:not(:has(>aside))){grid-column:narrow}&:where(:has(>aside)){flex-flow:var(--sidebar-direction,column) wrap;gap:var(--sidebar-gap,var(--gap));justify-content:space-between;align-items:start;display:flex;@media (width>=720px){--sidebar-direction:row}&>aside{inline-size:100%;border-block-start:var(--line-width,6px) solid var(--line-colour,var(--colour-primary));flex-grow:1;align-content:start;padding-block-start:var(--line-gap,var(--gap));@media (width>=720px){max-inline-size:var(--sidebar-width,24ch);border-block-start:unset;padding-block-start:unset}}&>section{min-inline-size:var(--content-min,50%);inline-size:100%;max-inline-size:var(--container-max-width,76ch);flex-grow:999;flex-basis:0;& .mx-grid{--grid-min:18ch}}&.mx-grid--sidebar-rev{@media (width>=720px){--sidebar-direction:row-reverse}}&.mx-grid--sidebar-rev-lg{@media (width>=946px){--sidebar-direction:row-reverse}}}}}

package/dist/build/sticky.entry.js

@@ -1 +1 @@
-import "./chunks/Sticky-DoVndENm.js";
+import "./chunks/Sticky-C1H8MNqK.js";

package/dist/build/tabs.entry.js

@@ -1 +1 @@
-import "./chunks/Tabs-BDlxCDNh.js";
+import "./chunks/Tabs-BJD3kABL.js";

package/dist/build/translate.entry.js

@@ -1 +1 @@
-import "./chunks/Translate-bmM38j6z.js";
+import "./chunks/Translate-yAgySwet.js";

package/dist/types/Component/Navigation/Elements/Navigation.d.ts

@@ -17,17 +17,16 @@ export default class Navigation extends HTMLElement {
     keyboard: Keyboard;
     subNavs?: Map<string, SubNavType>;
     flyout?: boolean;
-    edgeCheck: boolean;
+    openActive: boolean;
     mq: string;
-    iO?: IntersectionObserver;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleDisclosure: ({ detail }: CustomEvent<DisclosureWidgetEvent>) => void;
     handleCloseAny: () => void;
+    handleOpenActive: () => void;
     handleFlyout: (event: MouseEvent) => void;
     handleBreakpoint: ({ matches }: MediaQueryList | MediaQueryListEvent) => void;
-    handleEdgeCheck(): void;
     get links(): NodeListOf<HTMLAnchorElement> | null;
     get lists(): NodeListOf<HTMLUListElement> | null;
     get breakpoint(): MediaQueryList;

package/dist/types/Component/Navigation/Elements/Navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../../../src/Component/Navigation/Elements/Navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,QAAQ,EAER,gBAAgB,EAChB,qBAAqB,EACtB,MAAM,4BAA4B,CAAA;AAEnC,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,WAAW,CAAA;IACjB,OAAO,EAAE,iBAAiB,CAAA;IAC1B,IAAI,EAAE,iBAAiB,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,MAAM,CAAC,EAAE,gBAAgB,CAAA;IACzB,UAAU,CAAC,EAAE,gBAAgB,CAAA;CAC9B,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,WAAW;IACjD,UAAU,EAAE,gBAAgB,CAAA;IAC5B,UAAU,EAAE,eAAe,CAAA;IAC3B,QAAQ,EAAE,QAAQ,CAAA;IAClB,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;IACjC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,EAAG,OAAO,CAAA;IACnB,EAAE,EAAG,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,oBAAoB,CAAA;IAEzB,cAKC;IAED,iBAAiB,IAAI,IAAI,CA0CxB;IAED,oBAAoB,IAAI,IAAI,CAI3B;IAED,gBAAgB,eAAgB,WAAW,CAAC,qBAAqB,CAAC,KAAG,IAAI,CASxE;IAED,cAAc,QAAO,IAAI,CAKxB;IAED,YAAY,UAAW,UAAU,KAAG,IAAI,CAWvC;IAED,gBAAgB,gBAAiB,cAAc,GAAG,mBAAmB,KAAG,IAAI,CAU3E;IAED,eAAe,SAad;IAED,IAAI,KAAK,IAAI,UAAU,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAMhD;IAED,IAAI,KAAK,IAAI,UAAU,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAE/C;IAED,IAAI,UAAU,IAAI,cAAc,CAE/B;CACF;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,UAAU,CAAA;KACrB;CACF"}
+{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../../../src/Component/Navigation/Elements/Navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,QAAQ,EAER,gBAAgB,EAChB,qBAAqB,EACtB,MAAM,4BAA4B,CAAA;AAEnC,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,WAAW,CAAA;IACjB,OAAO,EAAE,iBAAiB,CAAA;IAC1B,IAAI,EAAE,iBAAiB,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,MAAM,CAAC,EAAE,gBAAgB,CAAA;IACzB,UAAU,CAAC,EAAE,gBAAgB,CAAA;CAC9B,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,WAAW;IACjD,UAAU,EAAE,gBAAgB,CAAA;IAC5B,UAAU,EAAE,eAAe,CAAA;IAC3B,QAAQ,EAAE,QAAQ,CAAA;IAClB,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;IACjC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,EAAG,OAAO,CAAA;IACpB,EAAE,EAAG,MAAM,CAAA;IAEX,cAIC;IAED,iBAAiB,IAAI,IAAI,CA6CxB;IAED,oBAAoB,IAAI,IAAI,CAG3B;IAED,gBAAgB,eAAgB,WAAW,CAAC,qBAAqB,CAAC,KAAG,IAAI,CASxE;IAED,cAAc,QAAO,IAAI,CAKxB;IAED,gBAAgB,QAAO,IAAI,CAU1B;IAED,YAAY,UAAW,UAAU,KAAG,IAAI,CAWvC;IAED,gBAAgB,gBAAiB,cAAc,GAAG,mBAAmB,KAAG,IAAI,CAS3E;IAED,IAAI,KAAK,IAAI,UAAU,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAMhD;IAED,IAAI,KAAK,IAAI,UAAU,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAE/C;IAED,IAAI,UAAU,IAAI,cAAc,CAE/B;CACF;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,UAAU,CAAA;KACrB;CACF"}

package/dist/types/Component/SideNavigation/Components/SideNavigationTree.d.ts

@@ -1,9 +1,9 @@
-import { JSX } from "react";
+import { JSX, ComponentPropsWithoutRef } from "react";
 import { MenuTree } from "@pnx-mixtape/ids-shape";
-type SideNavigationTreeProps = {
+type SideNavigationTreeProps = ComponentPropsWithoutRef<"ul"> & {
     items: MenuTree[];
     level?: number;
 };
-declare const SideNavigationTree: ({ items, level }: SideNavigationTreeProps) => JSX.Element;
+declare const SideNavigationTree: ({ items, level, ...props }: SideNavigationTreeProps) => JSX.Element;
 export default SideNavigationTree;
 //# sourceMappingURL=SideNavigationTree.d.ts.map

package/dist/types/Component/SideNavigation/Components/SideNavigationTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigationTree.d.ts","sourceRoot":"","sources":["../../../../../src/Component/SideNavigation/Components/SideNavigationTree.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAGjD,KAAK,uBAAuB,GAAG;IAC7B,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,QAAA,MAAM,kBAAkB,qBAA0B,uBAAuB,KAAG,GAAG,CAAC,OA2B/E,CAAA;eACc,kBAAkB"}
+{"version":3,"file":"SideNavigationTree.d.ts","sourceRoot":"","sources":["../../../../../src/Component/SideNavigation/Components/SideNavigationTree.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,wBAAwB,EAAqB,MAAM,OAAO,CAAA;AAExE,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAIjD,KAAK,uBAAuB,GAAG,wBAAwB,CAAC,IAAI,CAAC,GAAG;IAC9D,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AA2DD,QAAA,MAAM,kBAAkB,+BAIrB,uBAAuB,KAAG,GAAG,CAAC,OAQhC,CAAA;eACc,kBAAkB"}

package/dist/types/Component/SideNavigation/SideNavigation.d.ts

@@ -3,8 +3,10 @@ type SideNavigationProps = PropsWithChildren & {
     parent?: ReactNode;
     title?: string;
     id?: string;
+    collapsible?: boolean;
     className?: string;
 };
-declare const SideNavigation: ({ children, parent, title, id, className, }: SideNavigationProps) => JSX.Element;
+export declare const SideNavigationContext: import("react").Context<boolean>;
+declare const SideNavigation: ({ children, parent, title, id, collapsible, className, }: SideNavigationProps) => JSX.Element;
 export default SideNavigation;
 //# sourceMappingURL=SideNavigation.d.ts.map

package/dist/types/Component/SideNavigation/SideNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigation.d.ts","sourceRoot":"","sources":["../../../../src/Component/SideNavigation/SideNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,iBAAiB,EAAS,MAAM,OAAO,CAAA;AAGhE,KAAK,mBAAmB,GAAG,iBAAiB,GAAG;IAC7C,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,cAAc,gDAMjB,mBAAmB,KAAG,GAAG,CAAC,OAe5B,CAAA;eAEc,cAAc"}
+{"version":3,"file":"SideNavigation.d.ts","sourceRoot":"","sources":["../../../../src/Component/SideNavigation/SideNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAA;AAG/E,KAAK,mBAAmB,GAAG,iBAAiB,GAAG;IAC7C,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAGD,eAAO,MAAM,qBAAqB,kCAAgC,CAAA;AAElE,QAAA,MAAM,cAAc,6DAOjB,mBAAmB,KAAG,GAAG,CAAC,OAoB5B,CAAA;eAEc,cAAc"}

package/dist/types/tokens.d.ts

@@ -42,6 +42,7 @@ declare const _default: {
         contentCard: string;
         collapsedCard: string;
         dropMenu: string;
+        sidebar: string;
     };
     colour: {
         primary: {

package/dist/types/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/tokens.js"],"names":[],"mappings":"AACA,eAAO,MAAM,MAAM;IACjB,IAAI;QACF,KAAK;QACL,IAAI;QACJ,GAAG;QACH,EAAE;QACF,CAAC;QACD,CAAC;QACD,CAAC;QACD,EAAE;QACF,GAAG;QACH,IAAI;QACJ,KAAK;QACL,EAAE;QACF,GAAG;QACH,IAAI;;IAEN,UAAU;QACR,WAAW;QACX,WAAW;QACX,UAAU;QACV,UAAU;QACV,aAAa;QACb,eAAe;QACf,YAAY;QACZ,WAAW;;IAEb,MAAM;QACJ,OAAO;QACP,MAAM;;CAET,CAAA;;IAGC,UAAU;QACR,GAAG;QACH,EAAE;QACF,CAAC;QACD,CAAC;QACD,CAAC;QACD,EAAE;QACF,SAAS;QACT,WAAW;QACX,aAAa;QACb,QAAQ;;IAEV,MAAM;QACJ,OAAO;YACL,MAAM;YACN,MAAM;;QAER,MAAM;YACJ,MAAM;YACN,MAAM;;QAER,IAAI;YACF,EAAE;YACF,EAAE;YACF,KAAK;YACL,KAAK;YACL,MAAM;YACN,IAAI;YACJ,MAAM;;QAER,OAAO;YACL,EAAE;YACF,EAAE;YACF,KAAK;YACL,KAAK;YACL,MAAM;YACN,IAAI;YACJ,MAAM;;QAER,IAAI;QACJ,OAAO;QACP,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,MAAM;QACN,UAAU;YACR,IAAI;YACJ,OAAO;YACP,EAAE;;QAEJ,MAAM;YACJ,IAAI;YACJ,IAAI;;QAEN,IAAI;YACF,UAAU;YACV,KAAK;YACL,MAAM;YACN,IAAI;;;IAGR,IAAI;QACF,OAAO;YACL,KAAK;YACL,IAAI;YACJ,GAAG;YACH,EAAE;YACF,CAAC;YACD,CAAC;YACD,CAAC;YACD,EAAE;YACF,GAAG;YACH,IAAI;YACJ,KAAK;YACL,EAAE;YACF,GAAG;YACH,IAAI;;QAEN,GAAG;YACD,CAAC;YACD,CAAC;YACD,CAAC;YACD,EAAE;;QAEJ,SAAS;YACP,IAAI;YACJ,KAAK;YACL,OAAO;YACP,MAAM;YACN,SAAS;YACT,SAAS;;;IAGb,OAAO;QACL,OAAO;YACL,KAAK;YACL,KAAK;YACL,MAAM;;QAER,MAAM;YACJ,CAAC;YACD,CAAC;YACD,KAAK;;QAEP,MAAM;YACJ,MAAM;YACN,IAAI;;QAEN,KAAK"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/tokens.js"],"names":[],"mappings":"AACA,eAAO,MAAM,MAAM;IACjB,IAAI;QACF,KAAK;QACL,IAAI;QACJ,GAAG;QACH,EAAE;QACF,CAAC;QACD,CAAC;QACD,CAAC;QACD,EAAE;QACF,GAAG;QACH,IAAI;QACJ,KAAK;QACL,EAAE;QACF,GAAG;QACH,IAAI;;IAEN,UAAU;QACR,WAAW;QACX,WAAW;QACX,UAAU;QACV,UAAU;QACV,aAAa;QACb,eAAe;QACf,YAAY;QACZ,WAAW;;IAEb,MAAM;QACJ,OAAO;QACP,MAAM;;CAET,CAAA;;IAGC,UAAU;QACR,GAAG;QACH,EAAE;QACF,CAAC;QACD,CAAC;QACD,CAAC;QACD,EAAE;QACF,SAAS;QACT,WAAW;QACX,aAAa;QACb,QAAQ;QACR,OAAO;;IAET,MAAM;QACJ,OAAO;YACL,MAAM;YACN,MAAM;;QAER,MAAM;YACJ,MAAM;YACN,MAAM;;QAER,IAAI;YACF,EAAE;YACF,EAAE;YACF,KAAK;YACL,KAAK;YACL,MAAM;YACN,IAAI;YACJ,MAAM;;QAER,OAAO;YACL,EAAE;YACF,EAAE;YACF,KAAK;YACL,KAAK;YACL,MAAM;YACN,IAAI;YACJ,MAAM;;QAER,IAAI;QACJ,OAAO;QACP,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,MAAM;QACN,UAAU;YACR,IAAI;YACJ,OAAO;YACP,EAAE;;QAEJ,MAAM;YACJ,IAAI;YACJ,IAAI;;QAEN,IAAI;YACF,UAAU;YACV,KAAK;YACL,MAAM;YACN,IAAI;;;IAGR,IAAI;QACF,OAAO;YACL,KAAK;YACL,IAAI;YACJ,GAAG;YACH,EAAE;YACF,CAAC;YACD,CAAC;YACD,CAAC;YACD,EAAE;YACF,GAAG;YACH,IAAI;YACJ,KAAK;YACL,EAAE;YACF,GAAG;YACH,IAAI;;QAEN,GAAG;YACD,CAAC;YACD,CAAC;YACD,CAAC;YACD,EAAE;;QAEJ,SAAS;YACP,IAAI;YACJ,KAAK;YACL,OAAO;YACP,MAAM;YACN,SAAS;YACT,SAAS;;;IAGb,OAAO;QACL,OAAO;YACL,KAAK;YACL,KAAK;YACL,MAAM;;QAER,MAAM;YACJ,CAAC;YACD,CAAC;YACD,KAAK;;QAEP,MAAM;YACJ,MAAM;YACN,IAAI;;QAEN,KAAK"}

package/docs/CSSGuidelines.md

@@ -278,6 +278,8 @@ Import custom media in every CSS file that uses them:
 @media (--global-nav-down)   /* < 720px */
 @media (--collapse-card-up)  /* >= 400px - Card collapse */
 @media (--collapse-card-down) /* < 400px */
+@media (--sidebar-up)     /* >= 720px - Sidebar breakpoint */
+@media (--sidebar-down)   /* < 720px */
 
 /* Interaction */
 @media (--touch)  /* Touch devices (no hover) */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnx-mixtape/mxds",
   "description": "The Mixtape Design System",
-  "version": "0.1.0-rc.5",
+  "version": "0.1.0-rc.6",
   "license": "MIT",
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
@@ -37,8 +37,8 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^26.0.0",
     "@vitejs/plugin-react": "^6.0.2",
-    "@vitest/browser-playwright": "4.1.11",
-    "@vitest/coverage-v8": "4.1.11",
+    "@vitest/browser-playwright": "4.1.12",
+    "@vitest/coverage-v8": "4.1.12",
     "chromatic": "^18.0.1",
     "concurrently": "^10.0.3",
     "cz-conventional-changelog": "^3.3.0",
@@ -46,7 +46,7 @@
     "drupal-twig-extensions": "1.0.0-beta.5",
     "jsdom": "^30.0.0",
     "lightningcss": "^1.32.0",
-    "oxfmt": "^0.72.0",
+    "oxfmt": "^0.74.0",
     "oxlint": "^1.71.0",
     "playwright": "^1.61.0",
     "postcss": "^8.5.15",
@@ -63,7 +63,7 @@
     "typescript": "^7.0.2",
     "vite": "^8.2.2",
     "vite-plugin-twig-drupal": "^1.7.0",
-    "vitest": "4.1.11"
+    "vitest": "4.1.12"
   },
   "config": {
     "commitizen": {

package/src/Atom/Link/_links.css

@@ -28,6 +28,7 @@
     &::after {
       content: "";
       display: inline-block;
+      flex-shrink: 0;
       mask-image: url("../images/external-link.svg");
       mask-repeat: no-repeat;
       mask-size: contain;

package/src/Component/Navigation/Elements/Navigation.ts

@@ -25,18 +25,18 @@ export default class Navigation extends HTMLElement {
   keyboard: Keyboard
   subNavs?: Map<string, SubNavType>
   flyout?: boolean
-  edgeCheck!: boolean
+  openActive!: boolean
   mq!: string
-  iO?: IntersectionObserver
 
   constructor() {
     super()
     this.internals_ = this.attachInternals()
     this.controller = new AbortController()
-    this.flyout = this.hasAttribute("flyout")
   }
 
   connectedCallback(): void {
+    this.flyout = this.hasAttribute("flyout")
+    this.openActive = this.hasAttribute("openActive")
     const { signal }: AbortController = this.controller
 
     // Add keyboard navigation events.
@@ -69,21 +69,21 @@ export default class Navigation extends HTMLElement {
       }
     })
 
-    this.addEventListener("disclosure-toggle", this.handleDisclosure)
+    if (this.openActive && this.subNavs.size > 0) this.handleOpenActive()
 
-    if (!this.flyout) return
-    this.edgeCheck = this.hasAttribute("edgeCheck")
-    this.mq = this.getAttribute("mq") || "(min-width: 720px)"
-    this.handleBreakpoint(this.breakpoint)
-    this.breakpoint.addEventListener("change", this.handleBreakpoint, {
-      signal,
-    })
+    if (this.flyout) {
+      this.mq = this.getAttribute("mq") || "(min-width: 720px)"
+      this.handleBreakpoint(this.breakpoint)
+      this.breakpoint.addEventListener("change", this.handleBreakpoint, {
+        signal,
+      })
+      this.addEventListener("disclosure-toggle", this.handleDisclosure)
+    }
   }
 
   disconnectedCallback(): void {
     this.controller.abort()
     this.subNavs?.forEach((subNav: SubNavType): void => subNav.widget.detach())
-    this.iO?.disconnect()
   }
 
   handleDisclosure = ({ detail }: CustomEvent<DisclosureWidgetEvent>): void => {
@@ -104,6 +104,18 @@ export default class Navigation extends HTMLElement {
     })
   }
 
+  handleOpenActive = (): void => {
+    this.subNavs?.forEach(({ widget, list, link }: SubNavType): void => {
+      if (!widget || widget.isOpen) return
+      if (
+        !link.hasAttribute("aria-current") &&
+        !list.querySelector("[aria-current=page], .is-active")
+      )
+        return
+      widget.handleToggle()
+    })
+  }
+
   handleFlyout = (event: MouseEvent): void => {
     const target = event.target as HTMLElement
     const parent: HTMLLIElement = target.closest("li")
@@ -122,32 +134,16 @@ export default class Navigation extends HTMLElement {
     if (matches) {
       this.addEventListener("mouseover", this.handleFlyout, { signal })
       this.addEventListener("mouseleave", this.handleCloseAny, { signal })
-      if (this.edgeCheck) this.handleEdgeCheck()
     } else {
       this.removeEventListener("mouseover", this.handleFlyout)
       this.removeEventListener("mouseleave", this.handleCloseAny)
     }
   }
 
-  handleEdgeCheck() {
-    const windowInnerWidth: number = window.innerWidth
-    this.iO = new IntersectionObserver((entries, obs) => {
-      entries.forEach(({ boundingClientRect, target }) => {
-        if (windowInnerWidth < boundingClientRect.right) target.classList.add("mx-nav--reverse")
-        obs.unobserve(target)
-      })
-    })
-    this.subNavs?.forEach(({ list }: SubNavType): void => {
-      this.iO.observe(list)
-      const nestedLists: NodeListOf<HTMLUListElement> = list.querySelectorAll("ul")
-      nestedLists?.forEach(nestedList => this.iO.observe(nestedList))
-    })
-  }
-
   get links(): NodeListOf<HTMLAnchorElement> | null {
     const links: NodeListOf<HTMLAnchorElement> | null = this.querySelectorAll("a")
     if (!links.length) {
-      throw new Error(`${this.localName} must links`)
+      throw new Error(`${this.localName} must contain links`)
     }
     return links
   }

package/src/Component/Navigation/README.md

@@ -170,15 +170,17 @@ Behind the scenes, each top-level item with children is rendered by `DropdownLev
 </mx-nav>
 ```
 
-The `<mx-nav>` Web Component wires up keyboard navigation, hover flyouts (when the `flyout` attribute is set), edge detection (when `edgeCheck` is set), and `inert`/`aria-expanded` toggling on sub-menus.
+The `<mx-nav>` Web Component wires up keyboard navigation, hover flyouts (when the `flyout` attribute is set) and `inert`/`aria-expanded` toggling on sub-menus.
 
 **`<mx-nav>` attributes:**
 
-| Attribute   | Description                                                          |
-| ----------- | -------------------------------------------------------------------- |
-| `flyout`    | Opens sub-menus on hover at or above `mq`                            |
-| `edgeCheck` | Adds `mx-nav--reverse` to sub-menus that would overflow the viewport |
-| `mq`        | Media query for hover behaviour (default: `"(min-width: 720px)"`)    |
+| Attribute    | Description                                                                                       |
+| ------------ | ------------------------------------------------------------------------------------------------- |
+| `flyout`     | Opens sub-menus on hover at or above `mq`                                                         |
+| `openActive` | Opens sub-menus whose parent link or descendants are `aria-current="page"` / `.is-active` on load |
+| `mq`         | Media query for hover behaviour (default: `"(min-width: 720px)"`)                                 |
+
+**Sub-menu positioning:** at `--global-nav-up`, dropdown and mega sub-menus use CSS anchor positioning — no JS. Each `li` with a sub-menu is its own anchor (`anchor-name` + `anchor-scope: --mx-nav-item`), and the sub-menu is `position: fixed` with `position-try-fallbacks: flip-inline`, so it flips to the other side when it would overflow the viewport. Level-2 chevrons always point inline-end, even when the sub-menu has flipped — `@container anchored(fallback: flip-inline)` could fix that, but Lightning CSS can't parse it yet.
 
 ---
 
@@ -210,7 +212,7 @@ Two templates are provided. `navigation.twig` is a thin wrapper that sets modifi
 | ------------- | ----------------------------------- | --------------------- | ------------------------- |
 | `collapsible` | `mx-nav--collapsible`               | yes                   | —                         |
 | `dropdown`    | `mx-nav--dropdown`                  | yes                   | `flyout`                  |
-| `mega`        | `mx-nav--dropdown mx-nav--mega-nav` | yes                   | `edgeCheck`               |
+| `mega`        | `mx-nav--dropdown mx-nav--mega-nav` | yes                   | —                         |
 | `footer`      | `mx-nav--footer`                    | no                    | sub-lists are not `inert` |
 
 **`MenuItem` shape** (consumed by `menu.twig`):
@@ -234,8 +236,7 @@ Two templates are provided. `navigation.twig` is a thin wrapper that sets modifi
 | `mx-nav--dropdown`                            | React `Dropdown` / Twig `type: 'dropdown'` | Horizontal top level, absolute-positioned level-2 panels                                                     |
 | `mx-nav--mega-nav`                            | Twig `type: 'mega'`                        | Extends `--dropdown` for a third level positioned to the side of level 2                                     |
 | `mx-nav--footer`                              | Twig `type: 'footer'`                      | Used by Footer layout; sub-lists stay visible (not `inert`)                                                  |
-| `mx-nav--reverse`                             | `<mx-nav edgeCheck>` JS                    | Flips sub-menu alignment when it would overflow the viewport                                                 |
-| `mx-nav--open`                                | `<mx-nav>` JS                              | Added to `<li>` while its sub-menu is open                                                                   |
+| `mx-nav--open`                                | `<mx-nav flyout>` JS                       | Added to `<li>` while its sub-menu is open (flyout navs only — chevron rotation keys off `aria-expanded`)    |
 | `mx-nav__level-1` / `__level-2` / `__level-3` | Structural                                 | Sub-list nesting level                                                                                       |
 | `mx-nav__has-subnav`                          | Structural                                 | Applied to any `<li>` that contains a child `<ul>`                                                           |
 | `mx-nav__toggle`                              | Structural                                 | The chevron button that opens a sub-menu                                                                     |
@@ -248,7 +249,7 @@ Two templates are provided. `navigation.twig` is a thin wrapper that sets modifi
 - The outer `<nav>` receives an `aria-label` from the `title` prop — always provide a meaningful label so screen-reader users can distinguish multiple navs on a page (e.g. "Primary navigation", "Footer links").
 - Sub-menu toggle buttons expose `aria-expanded` (true/false) and `aria-controls` pointing to the `id` of their `<ul>`.
 - Sub-lists that are closed use the `inert` attribute — removing them from the tab order and from assistive tech — so no additional ARIA is needed on the list itself.
-- The `<mx-nav>` Web Component attaches keyboard handling via the shared `Keyboard` utility: arrow keys move between links, `Escape` closes open sub-menus.
+- The `<mx-nav>` Web Component attaches keyboard handling via the shared `Keyboard` utility: arrow keys move between links. `Escape` closes open sub-menus only on `flyout` navs (dropdown) — collapsible and mega navs close via their toggle button.
 - `DropdownLevel` (React) handles these keys on the toggle button itself: `Escape`/`ArrowUp` close; `ArrowDown`/`Enter`/`Space` open.
 - The chevron button uses `mx-icon--only` — its accessible name comes from the text "Sub-navigation" inside the button. Never rely on the chevron rotation alone to convey state.
 - Current-page items should carry `aria-current="page"`; collapsible navigation styles this with a bold weight and an accent background.

package/src/Component/Navigation/__snapshots__/Navigation.stories.ts.snap

@@ -15,7 +15,7 @@ exports[`Collapsible 1`] = `
                   <a href="#" id="unique-2">
             What we do
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-0">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="false" aria-controls="unique-0">Sub-navigation</button>
               <ul class="mx-nav__level-2" inert="" id="unique-0" aria-labelledby="unique-1">
           <li>
                   <a href="#">
@@ -26,7 +26,7 @@ exports[`Collapsible 1`] = `
                   <a href="#" id="unique-3">
             Who we are
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-2">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="false" aria-controls="unique-2">Sub-navigation</button>
               <ul class="mx-nav__level-3" inert="" id="unique-1" aria-labelledby="unique-3">
           <li>
                   <a href="#">
@@ -91,7 +91,7 @@ exports[`Dropdown 1`] = `
                   <a href="#" id="unique-1">
             What we do
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-0">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="false" aria-controls="unique-0">Sub-navigation</button>
               <ul class="mx-nav__level-2" id="unique-0" aria-labelledby="unique-1" inert="">
           <li>
                   <a href="#">
@@ -136,7 +136,7 @@ exports[`Dropdown 1`] = `
 exports[`Mega 1`] = `
 "    
 
-<mx-nav edgecheck="">
+<mx-nav>
     <nav class="mx-nav mx-nav--dropdown mx-nav--mega-nav" aria-label="Links" id="links-story">
         <ul class="mx-nav__level-1">
           <li>
@@ -148,13 +148,13 @@ exports[`Mega 1`] = `
                   <a href="#" id="unique-3">
             About
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-0">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="false" aria-controls="unique-0">Sub-navigation</button>
               <ul class="mx-nav__level-2" inert="" id="unique-0" aria-labelledby="unique-1">
           <li class="mx-nav__has-subnav">
                   <a href="#" aria-current="page" id="unique-4">
             Who
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-2">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="false" aria-controls="unique-2">Sub-navigation</button>
               <ul class="mx-nav__level-3" inert="" id="unique-1" aria-labelledby="unique-3">
           <li>
                   <a href="#" aria-current="page">
@@ -191,7 +191,7 @@ exports[`Mega 1`] = `
                   <a href="#" id="unique-5">
             Contact
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-4">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="false" aria-controls="unique-4">Sub-navigation</button>
               <ul class="mx-nav__level-2" inert="" id="unique-2" aria-labelledby="unique-5">
           <li>
                   <a href="#" aria-current="page">
@@ -259,7 +259,7 @@ exports[`Screen Reader Announcements 1`] = `
                   <a href="#" id="unique-1">
             What we do
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-0">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="false" aria-controls="unique-0">Sub-navigation</button>
               <ul class="mx-nav__level-2" id="unique-0" aria-labelledby="unique-1" inert="">
           <li>
                   <a href="#">

package/src/Component/Navigation/_navigation-dropdown.css

@@ -20,6 +20,10 @@
       &:is(.mx-nav__has-subnav, :has(> ul)) {
         position: relative;
 
+        /* Each sub-menu anchors to its own parent item. */
+        anchor-scope: --mx-nav-item;
+        anchor-name: --mx-nav-item;
+
         & > a {
           --toggle-gap: var(--spacing-l);
         }
@@ -90,7 +94,11 @@
       margin: 0;
 
       @media (--global-nav-up) {
-        position: absolute;
+        /* Fixed so fallbacks flip against the viewport, not the parent item. */
+        position: fixed;
+        position-anchor: --mx-nav-item;
+        position-area: block-end span-inline-end;
+        position-try-fallbacks: flip-inline;
         inline-size: var(--dropdown-width, 270px);
         border-radius: var(--border-radius);
         background-color: var(
@@ -113,16 +121,6 @@
       }
     }
 
-    & .mx-nav--reverse .nav__level-2 {
-      @media (--global-nav-up) {
-        inset-inline: auto 0;
-
-        & .mx-nav__toggle::before {
-          transform: rotate(90deg);
-        }
-      }
-    }
-
     & .mx-nav__separator {
       border-block-start: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
     }

package/src/Component/Navigation/_navigation-mega.css

@@ -17,11 +17,12 @@
       inline-size: 100%;
 
       @media (--global-nav-up) {
-        position: absolute;
-        inset-inline-start: var(--dropdown-width, 270px);
-        inset-block-start: 0;
+        position: fixed;
+        position-anchor: --mx-nav-item;
+        position-area: span-block-end inline-end;
+        position-try-fallbacks: flip-inline;
         inline-size: var(--dropdown-width, 270px);
-        min-block-size: 100%;
+        min-block-size: anchor-size(block);
         padding-inline-start: 0;
         border-block-start: 0;
         border-radius: 0 var(--border-radius) var(--border-radius) 0;
@@ -37,12 +38,5 @@
         }
       }
     }
-
-    & .mx-nav--reverse .mx-nav__level-2 ul {
-      @media (--global-nav-up) {
-        inset-inline-start: calc(var(--dropdown-width, 270px) * -1);
-        border-radius: var(--border-radius) 0 0 var(--border-radius);
-      }
-    }
   }
 }

package/src/Component/Navigation/_navigation.css

@@ -45,11 +45,13 @@
     inset-block-start: var(--toggle-top, 12px);
     inset-inline-end: 0;
     cursor: pointer;
-  }
 
-  .mx-nav--open {
-    & > .mx-nav__toggle::before {
+    &[aria-expanded="true"]::before {
       transform: rotate(180deg);
     }
   }
+
+  mx-nav:not(:defined) .mx-nav__toggle {
+    display: none;
+  }
 }

package/src/Component/Navigation/menu.twig

@@ -23,7 +23,7 @@
           {{ item.link.title }}
         {% endif %}
         {% if item.items is not empty %}
-          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">Sub-navigation</button>
+          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button">Sub-navigation</button>
           {{ nav.menutree(item.items, level + 1, setInert, baseClass) }}
         {% endif %}
       </li>

package/src/Component/Navigation/navigation.twig

@@ -14,7 +14,6 @@
 {% if type == "mega" %}
   {# Horizontal menu with 3 levels deep, no hover flyout. #}
   {% set needsJs = true %}
-  {% set componentAttributes = componentAttributes.addAttribute("edgeCheck") %}
   {% set modifiers = ['dropdown', 'mega-nav'] %}
 {% endif %}
 {% if type == "footer" %}

package/src/Component/SideNavigation/Components/SideNavigationTree.tsx

@@ -1,37 +1,81 @@
-import { JSX } from "react"
+import { JSX, ComponentPropsWithoutRef, useContext, useId } from "react"
+import { useDisclosureState } from "react-stately"
 import { MenuTree } from "@pnx-mixtape/ids-shape"
 import Link from "../../../Atom/Link/Link"
+import { SideNavigationContext } from "../SideNavigation"
 
-type SideNavigationTreeProps = {
+type SideNavigationTreeProps = ComponentPropsWithoutRef<"ul"> & {
   items: MenuTree[]
   level?: number
 }
 
-const SideNavigationTree = ({ items, level = 0 }: SideNavigationTreeProps): JSX.Element => (
-  <ul className={`mx-nav__level-${level + 1}`}>
+type SideNavigationItemProps = {
+  item: MenuTree
+  level: number
+}
+
+// True when this item, or any descendant, is the current page.
+const hasCurrent = ({ link, items }: MenuTree): boolean =>
+  Boolean(link.current) || Boolean(items?.some(hasCurrent))
+
+const SideNavigationItem = ({ item, level }: SideNavigationItemProps): JSX.Element => {
+  const collapsible = useContext(SideNavigationContext)
+  const { isExpanded, toggle } = useDisclosureState({ defaultExpanded: hasCurrent(item) })
+  const listId = useId()
+  const labelId = useId()
+  const hasItems = item.items && item.items.length > 0
+
+  return (
+    <li className={hasItems ? "mx-nav__has-subnav" : undefined}>
+      {item.link.href ? (
+        <Link
+          to={item.link.href}
+          id={hasItems && collapsible ? labelId : undefined}
+          aria-current={item.link.current ? "page" : undefined}
+        >
+          {item.link.title}
+        </Link>
+      ) : (
+        item.link.title
+      )}
+      {hasItems && (
+        <>
+          <button
+            className="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
+            type="button"
+            {...(collapsible && {
+              "aria-expanded": isExpanded,
+              "aria-controls": listId,
+              onClick: toggle,
+            })}
+          >
+            Sub-navigation
+          </button>
+          <SideNavigationTree
+            items={item.items}
+            level={level + 1}
+            {...(collapsible && {
+              id: listId,
+              "aria-labelledby": item.link.href ? labelId : undefined,
+              inert: !isExpanded,
+            })}
+          />
+        </>
+      )}
+    </li>
+  )
+}
+
+const SideNavigationTree = ({
+  items,
+  level = 0,
+  ...props
+}: SideNavigationTreeProps): JSX.Element => (
+  <ul className={`mx-nav__level-${level + 1}`} {...props}>
     {items.map((item, i) => (
       // Menu items have no stable id; index is the only available key.
       // oxlint-disable-next-line react/no-array-index-key
-      <li key={i} className={item.items?.length ? "mx-nav__has-subnav" : undefined}>
-        {item.link.href ? (
-          <Link to={item.link.href} aria-current={item.link.current ? "page" : undefined}>
-            {item.link.title}
-          </Link>
-        ) : (
-          item.link.title
-        )}
-        {item.items && item.items.length > 0 && (
-          <>
-            <button
-              className="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
-              type="button"
-            >
-              Sub-navigation
-            </button>
-            <SideNavigationTree items={item.items} level={level + 1} />
-          </>
-        )}
-      </li>
+      <SideNavigationItem key={i} item={item} level={level} />
     ))}
   </ul>
 )