arcjet · qw-in · Apr 7, 2026 · Apr 6, 2026
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -90,11 +90,10 @@ trunk check
    - Install required dependencies:
 
      ```sh
-     npm install @fontsource-variable/figtree @fontsource/ibm-plex-mono @oddbird/css-anchor-positioning
+     npm install @fontsource-variable/figtree @fontsource/ibm-plex-mono
      ```
 
    - Import `styles.css` using your framework’s standard method.
-   - Conditionally load the [`@oddbird/css-anchor-positioning` polyfill](https://github.com/oddbird/css-anchor-positioning?tab=readme-ov-file#getting-started).
 
 3. **Match the HTML structure**
    - Follow the general HTML structure used by existing examples to stay consistent.

diff --git a/examples/astro/package-lock.json b/examples/astro/package-lock.json
diff --git a/examples/astro/package.json b/examples/astro/package.json
@@ -4,7 +4,6 @@
     "@astrojs/node": "9.5.4",
     "@fontsource-variable/figtree": "5.2.10",
     "@fontsource/ibm-plex-mono": "5.2.7",
-    "@oddbird/css-anchor-positioning": "0.9.0",
     "astro": "5.18.1"
   },
   "devDependencies": {

diff --git a/examples/astro/src/layouts/Main.astro b/examples/astro/src/layouts/Main.astro
@@ -24,13 +24,6 @@ import "../styles/styles.css";
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
     <title>Arcjet Astro example app</title>
-    <script>
-      // Polyfill Anchor Positioning
-      // https://github.com/oddbird/css-anchor-positioning?tab=readme-ov-file#getting-started
-      if (!("anchorName" in document.documentElement.style)) {
-        await import("@oddbird/css-anchor-positioning");
-      }
-    </script>
   </head>
   <body class="layout">
     <header class="header">

diff --git a/examples/astro/src/styles/styles.css b/examples/astro/src/styles/styles.css
@@ -205,7 +205,6 @@
     line-height: 1.75rem;
     padding: 0;
 
-    /* Explicit anchor-name required for polyfill */
     anchor-name: --navigation-popover-anchor;
 
     &:hover {

diff --git a/examples/nextjs-bot-protection/styles/styles.css b/examples/nextjs-bot-protection/styles/styles.css
@@ -205,7 +205,6 @@
     line-height: 1.75rem;
     padding: 0;
 
-    /* Explicit anchor-name required for polyfill */
     anchor-name: --navigation-popover-anchor;
 
     &:hover {

diff --git a/examples/nextjs-fly/components/PopoverTarget.tsx b/examples/nextjs-fly/components/PopoverTarget.tsx
@@ -2,23 +2,6 @@
 
 import { type ComponentProps, useEffect, useRef } from "react";
 
-const POLYFILL_APPLIED: unique symbol = Symbol.for(
-  "@oddbird/css-anchor-positioning",
-);
-
-declare global {
-  interface Window {
-    [POLYFILL_APPLIED]?: boolean;
-  }
-}
-
-async function polyfillAnchorPositioning() {
-  const { default: polyfill } = await import(
-    "@oddbird/css-anchor-positioning/fn"
-  );
-  await polyfill(true);
-}
-
 type Props = {
   id: string;
   closeAtWidthPx: number;
@@ -47,24 +30,5 @@ export function PopoverTarget({ closeAtWidthPx, ...props }: Props) {
     };
   }, [closeAtWidthPx]);
 
-  useEffect(() => {
-    if (typeof window === "undefined") {
-      return;
-    }
-
-    // https://github.com/oddbird/css-anchor-positioning?tab=readme-ov-file#getting-started
-    if (
-      !window[POLYFILL_APPLIED] &&
-      !("anchorName" in document.documentElement.style)
-    ) {
-      polyfillAnchorPositioning().catch((error: unknown) => {
-        console.error(
-          "Failed to load @oddbird/css-anchor-positioning polyfill:",
-          error,
-        );
-      });
-    }
-  }, []);
-
   return <nav ref={popover} popover="auto" {...props} />;
 }
diff --git a/examples/nextjs-fly/package-lock.json b/examples/nextjs-fly/package-lock.json
diff --git a/examples/nextjs-fly/package.json b/examples/nextjs-fly/package.json
@@ -33,7 +33,6 @@
     "@fontsource/ibm-plex-mono": "5.2.7",
     "@hookform/resolvers": "5.2.2",
     "@nosecone/next": "1.3.0",
-    "@oddbird/css-anchor-positioning": "0.9.0",
     "next": "16.2.1",
     "next-themes": "0.4.6",
     "react": "19.2.4",

diff --git a/examples/nextjs-fly/styles/styles.css b/examples/nextjs-fly/styles/styles.css
@@ -205,7 +205,6 @@
     line-height: 1.75rem;
     padding: 0;
 
-    /* Explicit anchor-name required for polyfill */
     anchor-name: --navigation-popover-anchor;
 
     &:hover {

diff --git a/examples/nextjs-form/styles/styles.css b/examples/nextjs-form/styles/styles.css
@@ -205,7 +205,6 @@
     line-height: 1.75rem;
     padding: 0;
 
-    /* Explicit anchor-name required for polyfill */
     anchor-name: --navigation-popover-anchor;
 
     &:hover {

diff --git a/examples/nextjs-server-action/styles/styles.css b/examples/nextjs-server-action/styles/styles.css
@@ -205,7 +205,6 @@
     line-height: 1.75rem;
     padding: 0;
 
-    /* Explicit anchor-name required for polyfill */
     anchor-name: --navigation-popover-anchor;
 
     &:hover {