From 51af64232dd97054bd0f17b54fc71d62ab2e710a Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Tue, 31 Oct 2023 14:00:46 -0400
Subject: [PATCH 1/9] Fix teleport morphing

---
 packages/morph/src/morph.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/morph/src/morph.js b/packages/morph/src/morph.js
index 928d1ab32..308ba31c3 100644
--- a/packages/morph/src/morph.js
+++ b/packages/morph/src/morph.js
@@ -120,6 +120,11 @@ export function morph(from, toHtml, options) {
     }
 
     function patchChildren(from, to) {
+        // If we hit a <template x-teleport="body">,
+        // let's use the teleported nodes for this patch...
+        if (from._x_teleport) from = from._x_teleport
+        if (to._x_teleport) to = to._x_teleport
+
         let fromKeys = keyToMap(from.children)
         let fromKeyHoldovers = {}
 
@@ -444,10 +449,6 @@ function getFirstNode(parent) {
 }
 
 function getNextSibling(parent, reference) {
-    if (reference._x_teleport) {
-        return reference._x_teleport
-    }
-
     let next
 
     if (parent instanceof Block) {

From 61714ffe64f65409b8fb56ba8c52abb327cc95d8 Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Tue, 31 Oct 2023 14:25:22 -0400
Subject: [PATCH 2/9] Make x-trap more friendly with transitions

---
 packages/focus/src/index.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/focus/src/index.js b/packages/focus/src/index.js
index 74cf9e1b1..41816ac89 100644
--- a/packages/focus/src/index.js
+++ b/packages/focus/src/index.js
@@ -134,12 +134,15 @@ export default function (Alpine) {
 
                 // Start trapping.
                 if (value && ! oldValue) {
-                    setTimeout(() => {
-                        if (modifiers.includes('inert')) undoInert = setInert(el)
-                        if (modifiers.includes('noscroll')) undoDisableScrolling = disableScrolling()
+                    if (modifiers.includes('noscroll')) undoDisableScrolling = disableScrolling()
+                    if (modifiers.includes('inert')) undoInert = setInert(el)
 
-                        trap.activate()
-                    });
+                    // Activate the trap after two ticks. (Needed to play nice with transitions...)
+                    setTimeout(() => {
+                        setTimeout(() => {
+                            trap.activate()
+                        })
+                    })
                 }
 
                 // Stop trapping.

From a8b70cbfc2960e04e8110e26e763f20579e41a41 Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Tue, 31 Oct 2023 14:50:18 -0400
Subject: [PATCH 3/9] wip

---
 packages/focus/src/index.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/focus/src/index.js b/packages/focus/src/index.js
index 41816ac89..1f7f983b1 100644
--- a/packages/focus/src/index.js
+++ b/packages/focus/src/index.js
@@ -139,10 +139,21 @@ export default function (Alpine) {
 
                     // Activate the trap after two ticks. (Needed to play nice with transitions...)
                     setTimeout(() => {
+                        trap.activate()
+
+                        // Set cursor to the end of the text in the input
+                        // Internally, the "focus-trap" package calls ".select()" when
+                        // focusing an input element as the first element.
+                        // This is odd behavior, this bit of code deselects the contents
+                        // and puts the cursor at the end...
                         setTimeout(() => {
-                            trap.activate()
+                            let node = document.activeElement
+                            if (node && node.tagName && node.tagName.toLowerCase() === 'input') {
+                                node.focus()
+                                node.setSelectionRange(node.value.length, node.value.length)
+                            }
                         })
-                    })
+                    }, 15)
                 }
 
                 // Stop trapping.

From 3bb1e5596ee55f47bd7c7c7e8d19e1ff82154caf Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Tue, 31 Oct 2023 14:53:16 -0400
Subject: [PATCH 4/9] wip

---
 packages/focus/src/index.js | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/packages/focus/src/index.js b/packages/focus/src/index.js
index 1f7f983b1..3e7969901 100644
--- a/packages/focus/src/index.js
+++ b/packages/focus/src/index.js
@@ -137,22 +137,9 @@ export default function (Alpine) {
                     if (modifiers.includes('noscroll')) undoDisableScrolling = disableScrolling()
                     if (modifiers.includes('inert')) undoInert = setInert(el)
 
-                    // Activate the trap after two ticks. (Needed to play nice with transitions...)
+                    // Activate the trap after a generous tick. (Needed to play nice with transitions...)
                     setTimeout(() => {
                         trap.activate()
-
-                        // Set cursor to the end of the text in the input
-                        // Internally, the "focus-trap" package calls ".select()" when
-                        // focusing an input element as the first element.
-                        // This is odd behavior, this bit of code deselects the contents
-                        // and puts the cursor at the end...
-                        setTimeout(() => {
-                            let node = document.activeElement
-                            if (node && node.tagName && node.tagName.toLowerCase() === 'input') {
-                                node.focus()
-                                node.setSelectionRange(node.value.length, node.value.length)
-                            }
-                        })
                     }, 15)
                 }
 

From fd83d0363fdf274f918934dd4abb40ee398c27b9 Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Wed, 1 Nov 2023 09:37:35 -0400
Subject: [PATCH 5/9] wip

---
 packages/ui/src/menu.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/menu.js b/packages/ui/src/menu.js
index 5da24335e..826d36ef8 100644
--- a/packages/ui/src/menu.js
+++ b/packages/ui/src/menu.js
@@ -29,14 +29,21 @@ function handleRoot(el, Alpine) {
                 __itemEls: [],
                 __activeEl: null,
                 __isOpen: false,
-                __open() {
+                __open(activationStrategy) {
+                    if (! activationStrategy) activationStrategy = dom.first
+
                     this.__isOpen = true
 
                     // Safari needs more of a "tick" for focusing after x-show for some reason.
                     // Probably because Alpine adds an extra tick when x-showing for @click.outside
                     let nextTick = callback => requestAnimationFrame(() => requestAnimationFrame(callback))
 
-                    nextTick(() => this.$refs.__items.focus({ preventScroll: true }))
+                    nextTick(() => {
+                        this.$refs.__items.focus({ preventScroll: true })
+
+                        // Activate the first item every time the menu is open...
+                        activationStrategy(Alpine, this.$refs.__items, el => el.__activate())
+                    })
                 },
                 __close(focusAfter = true) {
                     this.__isOpen = false
@@ -67,7 +74,7 @@ function handleButton(el, Alpine) {
         'x-init'() { if (this.$el.tagName.toLowerCase() === 'button' && ! this.$el.hasAttribute('type')) this.$el.type = 'button' },
         '@click'() { this.$data.__open() },
         '@keydown.down.stop.prevent'() { this.$data.__open() },
-        '@keydown.up.stop.prevent'() { this.$data.__open(dom.Alpine, last) },
+        '@keydown.up.stop.prevent'() { this.$data.__open(dom.last) },
         '@keydown.space.stop.prevent'() { this.$data.__open() },
         '@keydown.enter.stop.prevent'() { this.$data.__open() },
     })

From e67d42803639a312a4ce4e6bf34429bb4133b8f2 Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Wed, 1 Nov 2023 15:11:06 -0400
Subject: [PATCH 6/9] wip

---
 index.html                          | 297 ++--------------------------
 package-lock.json                   |  49 ++++-
 package.json                        |   1 +
 packages/alpinejs/src/directives.js |   1 +
 packages/anchor/builds/cdn.js       |   5 +
 packages/anchor/builds/module.js    |   3 +
 packages/anchor/package.json        |  17 ++
 packages/anchor/src/index.js        |  47 +++++
 scripts/build.js                    |   1 +
 9 files changed, 130 insertions(+), 291 deletions(-)
 create mode 100644 packages/anchor/builds/cdn.js
 create mode 100644 packages/anchor/builds/module.js
 create mode 100644 packages/anchor/package.json
 create mode 100644 packages/anchor/src/index.js

diff --git a/index.html b/index.html
index 249545af0..63f8eb2d3 100644
--- a/index.html
+++ b/index.html
@@ -5,292 +5,23 @@
     <script src="./packages/focus/dist/cdn.js"></script>
     <script src="./packages/mask/dist/cdn.js"></script>
     <script src="./packages/ui/dist/cdn.js" defer></script> -->
+    <script src="./packages/anchor/dist/cdn.js" defer></script>
     <script src="./packages/alpinejs/dist/cdn.js" defer></script>
     <!-- <script src="//cdn.tailwindcss.com"></script> -->
     <!-- <script src="//cdn.tailwindcss.com"></script> -->
 
-    <div x-data="{
-        my_array: [{x:'x'},{x:'y'}],
-        click() {
-            this.my_array = [{x:'a'},{x:'b'}];
-        }
-    }">
-
-        <!-- Loop with plain div -->
-        <template x-for="item in my_array">
-            <div x-text="item.x"></div>
-        </template>
-
-        <!-- Loop with div nested inside component -->
-        <template x-for="item in my_array">
-            <div x-data="some_component" >
-                <div x-text="item.x"></div>
-            </div>
-        </template>
-
-        <button @click="click">Click me</button>
-
+    <hr> <hr> <hr> <hr> <hr>
+    <div x-data>
+        <button id="target">Button</button>
+
+        <article
+            x-anchor.bottom
+            x-anchor:to="document.getElementById('target')"
+            :style="{ left: $anchor.x+'px', top: $anchor.y+'px' }"
+            style="position: absolute; left: 0;"
+        >
+            Tooltip contents
+        </article>
     </div>
-        <script>
-            document.addEventListener('alpine:init', () => {
-                Alpine.data('some_component', () => ({}));
-            });
-
-        </script>
-
-
-
-
-    <button wire:click.prefetch"...">
-        Do something
-    </button>
-
-
-
-
-
-
-
-
-
-
-<div x-data="{ count: $url(1) }">
-    <button @click="count++">+</button>
-    <button @click="count--">-</button>
-
-    <h1 x-text="count"></h1>
-</div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-
-
-    <div x-data="{ users: [{ name: 'lebowski' }] }">
-        <template x-for="(user, idx) in users">
-            <span x-text="users[idx].name" x-yo></span>
-        </template>
-
-        <button @click="users = []">Reset</button>
-    </div>
-
-    <div x-data="{ foo: undefined }">
-        Yo: <input type="text" x-model="foo">
-    </div>
-
-    <!-- Play around here... -->
-
-                    <div class="relative">
-                        <div>Query: <span x-text="query"></span></div>
-                        <span class="inline-block w-full rounded-md shadow-sm">
-                            <div class="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-2 pr-10 text-left transition duration-150 ease-in-out focus-within:border-blue-700 focus-within:outline-none focus-within:ring-1 focus-within:ring-blue-700 sm:text-sm sm:leading-5">
-                                <span class="block flex flex-wrap gap-2">
-                                    <span x-show="activePersons.length === 0" class="p-0.5">Empty</span>
-                                    <template x-for="person in activePersons" :key="person.id">
-                                        <span class="flex items-center gap-1 rounded bg-blue-50 px-2 py-0.5">
-                                            <span x-text="person.name"></span>
-                                            <svg class="h-4 w-4 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" @click.stop.prevent="removePerson(person)">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                                            </svg>
-                                        </span>
-                                    </template>
-                                    <input x-combobox:input @change="query = $event.target.value" class="border-none p-0 focus:ring-0" placeholder="Search..." />
-                                </span>
-                                <button x-combobox:button class="absolute inset-y-0 right-0 flex items-center pr-2">
-                                    <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="none" stroke="currentColor">
-                                        <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-                                    </svg>
-                                </button>
-                            </div>
-                        </span>
-
-                        <div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
-                            <ul x-combobox:options hold class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
-                                <template
-                                    x-for="person in people.filter((person) =>
-                                        person.name.toLowerCase().includes(query.toLowerCase())
-                                    )"
-                                    :key="person.id"
-                                >
-                                    <li x-combobox:option :value="person" class="relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none" :class="$comboboxOption.isActive ? 'bg-indigo-600 text-white' : 'text-gray-900'">
-                                        <span x-text="person.name" class="block truncate" :class="{ 'font-semibold': $comboboxOption.isSelected, 'font-normal': !$comboboxOption.isSelected }">
-                                        </span>
-                                        <span x-show="$comboboxOption.isSelected" class="absolute inset-y-0 right-0 flex items-center pr-4" :class="{ 'text-white': $comboboxOption.isActive, 'text-indigo-600': !$comboboxOption.isActive }">
-                                            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                                                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-                                            </svg>
-                                        </span>
-                                    </li>
-                                </template>
-
-                                <!-- <template x-if="queryPerson">
-                                    <li x-combobox:option :value="queryPerson" class="relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none" :class="$comboboxOption.isActive ? 'bg-indigo-600 text-white' : 'text-gray-900'">
-                                        <span x-text="'Create ' + queryPerson.name" class="block truncate" :class="{ 'font-semibold': $comboboxOption.isSelected, 'font-normal': !$comboboxOption.isSelected }">
-                                        </span>
-                                        <span x-show="$comboboxOption.isSelected" class="absolute inset-y-0 right-0 flex items-center pr-4" :class="{ 'text-white': $comboboxOption.isActive, 'text-indigo-600': !$comboboxOption.isActive }">
-                                            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                                                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-                                            </svg>
-                                        </span>
-                                    </li>
-                                </template> -->
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <button class="mt-2 inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
-                    Submit
-                </button>
-            </form>
-        </div>
-    </div>
-</div>
-
-<div
-    x-data="{
-        query: '',
-        selected: null,
-        frameworks: [
-            {
-                id: 1,
-                name: 'Laravel',
-                disabled: false,
-            },
-            {
-                id: 2,
-                name: 'Ruby on Rails',
-                disabled: false,
-            },
-            {
-                id: 3,
-                name: 'Django',
-                disabled: false,
-            },
-            {
-                id: 4,
-                name: 'Express',
-                disabled: false,
-            },
-            {
-                id: 5,
-                name: 'Phoenix',
-                disabled: false,
-            },
-            {
-                id: 6,
-                name: 'Adonis',
-                disabled: false,
-            },
-            {
-                id: 7,
-                name: 'NextJS',
-                disabled: false,
-            },
-        ],
-        get filteredFrameworks() {
-            return this.query === ''
-                ? this.frameworks
-                : this.frameworks.filter((framework) => {
-                    return framework.name.toLowerCase().includes(this.query.toLowerCase())
-                })
-        }
-    }"
-
-    class="flex h-full w-screen justify-center bg-gray-50 p-12"
->
-    <div x-combobox x-model="selected">
-        <label x-combobox:label class="block text-sm text-gray-600">
-            Select framework
-        </label>
-
-        <div class="mt-1 relative">
-            <div class="flex items-center justify-between gap-2 w-64 bg-white pl-5 pr-3 py-2.5 rounded-md shadow">
-                <input
-                    x-combobox:input
-                    :display-value="framework => framework.name"
-                    @change="query = $event.target.value"
-                    class="border-none p-0 focus:outline-none focus:ring-0"
-                    placeholder="Search..."
-                />
-                <button x-combobox:button class="absolute inset-y-0 right-0 flex items-center pr-2">
-                    <!-- Heroicons up/down -->
-                    <svg class="shrink-0 w-5 h-5 text-gray-500" viewBox="0 0 20 20" fill="none" stroke="currentColor"><path d="M7 7l3-3 3 3m0 6l-3 3-3-3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
-                </button>
-            </div>
-
-            <div x-combobox:options x-cloak class="absolute right-0 w-64 max-h-60 mt-2 z-10 origin-top-right overflow-hidden bg-white border border-gray-200 rounded-md shadow-md outline-none" x-transition>
-                <ul class="divide-y divide-gray-100">
-                    <template
-                        x-for="framework in filteredFrameworks"
-                        :key="framework.id"
-                        hidden
-                    >
-                        <li
-                            x-combobox:option
-                            :value="framework"
-                            :disabled="framework.disabled"
-                            :class="{
-                                'bg-cyan-500/10 text-gray-900': $comboboxOption.isActive,
-                                'text-gray-600': ! $comboboxOption.isActive,
-                                'opacity-50 cursor-not-allowed': $comboboxOption.isDisabled,
-                            }"
-                            class="flex items-center cursor-default justify-between gap-2 w-full px-4 py-2 text-sm"
-                        >
-                            <span x-text="framework.name"></span>
-
-                            <span x-show="$comboboxOption.isSelected" class="text-cyan-600 font-bold">&check;</span>
-                        </li>
-                    </template>
-                </ul>
-
-                <p x-show="filteredFrameworks.length == 0" class="px-4 py-2 text-sm text-gray-600">No frameworks match your query.</p>
-            </div>
-        </div>
-        <div>local selected: <span x-text="selected?.name"></span></div>
-        <div>internal selected: <span x-text="$combobox.value?.name"></span></div>
-            <article x-text="$combobox.activeIndex"></article>
-    </div>
-</div>
-
-
-
-
+    <hr> <hr> <hr> <hr> <hr>
 </html>
diff --git a/package-lock.json b/package-lock.json
index 0b262f37b..ec2d072b0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,9 @@
             "workspaces": [
                 "packages/*"
             ],
+            "dependencies": {
+                "@floating-ui/dom": "^1.5.3"
+            },
             "devDependencies": {
                 "axios": "^0.21.1",
                 "chalk": "^4.1.1",
@@ -17,6 +20,10 @@
                 "jest": "^26.6.3"
             }
         },
+        "node_modules/@alpinejs/anchor": {
+            "resolved": "packages/anchor",
+            "link": true
+        },
         "node_modules/@alpinejs/collapse": {
             "resolved": "packages/collapse",
             "link": true
@@ -1014,6 +1021,28 @@
                 "node": ">=12"
             }
         },
+        "node_modules/@floating-ui/core": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
+            "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+            "dependencies": {
+                "@floating-ui/utils": "^0.1.3"
+            }
+        },
+        "node_modules/@floating-ui/dom": {
+            "version": "1.5.3",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+            "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+            "dependencies": {
+                "@floating-ui/core": "^1.4.2",
+                "@floating-ui/utils": "^0.1.3"
+            }
+        },
+        "node_modules/@floating-ui/utils": {
+            "version": "0.1.6",
+            "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+            "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+        },
         "node_modules/@istanbuljs/load-nyc-config": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -7825,15 +7854,19 @@
             }
         },
         "packages/alpinejs": {
-            "version": "3.13.1",
+            "version": "3.13.2",
             "license": "MIT",
             "dependencies": {
                 "@vue/reactivity": "~3.1.1"
             }
         },
+        "packages/anchor": {
+            "version": "3.13.2",
+            "license": "MIT"
+        },
         "packages/collapse": {
             "name": "@alpinejs/collapse",
-            "version": "3.13.1",
+            "version": "3.13.2",
             "license": "MIT"
         },
         "packages/csp": {
@@ -7846,12 +7879,12 @@
         },
         "packages/docs": {
             "name": "@alpinejs/docs",
-            "version": "3.13.1-revision.1",
+            "version": "3.13.2-revision.1",
             "license": "MIT"
         },
         "packages/focus": {
             "name": "@alpinejs/focus",
-            "version": "3.13.1",
+            "version": "3.13.2",
             "license": "MIT",
             "dependencies": {
                 "focus-trap": "^6.9.4",
@@ -7868,17 +7901,17 @@
         },
         "packages/intersect": {
             "name": "@alpinejs/intersect",
-            "version": "3.13.1",
+            "version": "3.13.2",
             "license": "MIT"
         },
         "packages/mask": {
             "name": "@alpinejs/mask",
-            "version": "3.13.1",
+            "version": "3.13.2",
             "license": "MIT"
         },
         "packages/morph": {
             "name": "@alpinejs/morph",
-            "version": "3.13.1",
+            "version": "3.13.2",
             "license": "MIT"
         },
         "packages/navigate": {
@@ -7891,7 +7924,7 @@
         },
         "packages/persist": {
             "name": "@alpinejs/persist",
-            "version": "3.13.1",
+            "version": "3.13.2",
             "license": "MIT"
         },
         "packages/ui": {
diff --git a/package.json b/package.json
index 59d17f040..c8de4637e 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
         "chalk": "^4.1.1",
         "cypress": "^7.0.0",
         "cypress-plugin-tab": "^1.0.5",
+        "@floating-ui/dom": "^1.5.3",
         "dot-json": "^1.2.2",
         "esbuild": "~0.16.17",
         "jest": "^26.6.3"
diff --git a/packages/alpinejs/src/directives.js b/packages/alpinejs/src/directives.js
index 691721236..58eb09bcf 100644
--- a/packages/alpinejs/src/directives.js
+++ b/packages/alpinejs/src/directives.js
@@ -203,6 +203,7 @@ let directiveOrder = [
     'ref',
     'data',
     'id',
+    'anchor',
     'bind',
     'init',
     'for',
diff --git a/packages/anchor/builds/cdn.js b/packages/anchor/builds/cdn.js
new file mode 100644
index 000000000..cd138feb4
--- /dev/null
+++ b/packages/anchor/builds/cdn.js
@@ -0,0 +1,5 @@
+import anchor from '../src/index.js'
+
+document.addEventListener('alpine:init', () => {
+    window.Alpine.plugin(anchor)
+})
diff --git a/packages/anchor/builds/module.js b/packages/anchor/builds/module.js
new file mode 100644
index 000000000..2206b98a5
--- /dev/null
+++ b/packages/anchor/builds/module.js
@@ -0,0 +1,3 @@
+import anchor from '../src/index.js'
+
+export default anchor
diff --git a/packages/anchor/package.json b/packages/anchor/package.json
new file mode 100644
index 000000000..1e32fc1ed
--- /dev/null
+++ b/packages/anchor/package.json
@@ -0,0 +1,17 @@
+{
+    "name": "@alpinejs/anchor",
+    "version": "3.13.2",
+    "description": "Anchor an element's position relative to another",
+    "homepage": "https://alpinejs.dev/plugins/anchor",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/alpinejs/alpine.git",
+        "directory": "packages/anchor"
+    },
+    "author": "Caleb Porzio",
+    "license": "MIT",
+    "main": "dist/module.cjs.js",
+    "module": "dist/module.esm.js",
+    "unpkg": "dist/cdn.min.js",
+    "dependencies": {}
+}
diff --git a/packages/anchor/src/index.js b/packages/anchor/src/index.js
new file mode 100644
index 000000000..b032d0c6c
--- /dev/null
+++ b/packages/anchor/src/index.js
@@ -0,0 +1,47 @@
+import { computePosition, autoUpdate, flip, offset, shift } from '@floating-ui/dom'
+
+export default function (Alpine) {
+    Alpine.magic('anchor', el => {
+        if (! el._x_anchor) throw 'Alpine: No x-anchor directive found on element using $anchor...'
+
+        return el._x_anchor
+    })
+
+    Alpine.directive('anchor', (el, { expression, modifiers, value }, { cleanup, evaluate }) => {
+        el._x_anchor = Alpine.reactive({ x: 0, y: 0 })
+
+        let reference = evaluate(expression)
+
+        if (! reference) throw 'Alpine: no element provided to x-anchor...'
+
+        let positions = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']
+        let placement = positions.find(i => modifiers.includes(i))
+
+        let offsetValue = 0
+
+        if (modifiers.includes('offset')) {
+            let idx = modifiers.findIndex(i => i === 'offset')
+
+            offsetValue = modifiers[idx + 1] !== undefined ? Number(modifiers[idx + 1]) : offsetValue
+        }
+
+        let release = autoUpdate(reference, el, () => {
+            let previousValue
+
+            computePosition(reference, el, {
+                placement,
+                middleware: [flip(), shift({padding: 5}), offset(offsetValue)],
+            }).then(({ x, y }) => {
+                // Only trigger Alpine reactivity when the value actually changes...
+                if (JSON.stringify({ x, y }) !== previousValue) {
+                    el._x_anchor.x = x
+                    el._x_anchor.y = y
+                }
+
+                previousValue = JSON.stringify({ x, y })
+            })
+        })
+
+        cleanup(() => release())
+    })
+}
diff --git a/scripts/build.js b/scripts/build.js
index 316d8d2bb..9a1c58925 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -11,6 +11,7 @@ let zlib = require('zlib');
     'intersect',
     'persist',
     'collapse',
+    'anchor',
     'morph',
     'focus',
     'mask',

From eb76852caf6984844e7ebb0cc02ce04e54514887 Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Wed, 1 Nov 2023 16:13:28 -0400
Subject: [PATCH 7/9] Write documentation

---
 packages/anchor/src/index.js           |  10 ++
 packages/docs/src/en/plugins/anchor.md | 183 +++++++++++++++++++++++++
 packages/docs/src/en/plugins/morph.md  |   2 +-
 3 files changed, 194 insertions(+), 1 deletion(-)
 create mode 100644 packages/docs/src/en/plugins/anchor.md

diff --git a/packages/anchor/src/index.js b/packages/anchor/src/index.js
index b032d0c6c..ce35ec368 100644
--- a/packages/anchor/src/index.js
+++ b/packages/anchor/src/index.js
@@ -19,6 +19,8 @@ export default function (Alpine) {
 
         let offsetValue = 0
 
+        let unstyled = modifiers.includes('unstyled')
+
         if (modifiers.includes('offset')) {
             let idx = modifiers.findIndex(i => i === 'offset')
 
@@ -34,6 +36,8 @@ export default function (Alpine) {
             }).then(({ x, y }) => {
                 // Only trigger Alpine reactivity when the value actually changes...
                 if (JSON.stringify({ x, y }) !== previousValue) {
+                    unstyled || setStyles(el, x, y)
+
                     el._x_anchor.x = x
                     el._x_anchor.y = y
                 }
@@ -45,3 +49,9 @@ export default function (Alpine) {
         cleanup(() => release())
     })
 }
+
+function setStyles(el, x, y) {
+    Object.assign(el.style, {
+        left: x+'px', top: y+'px', position: 'absolute',
+    })
+}
diff --git a/packages/docs/src/en/plugins/anchor.md b/packages/docs/src/en/plugins/anchor.md
new file mode 100644
index 000000000..621ab58ff
--- /dev/null
+++ b/packages/docs/src/en/plugins/anchor.md
@@ -0,0 +1,183 @@
+---
+order: 5
+title: Anchor
+description: Anchor an element's positioning to another element on the pageg
+graph_image: https://alpinejs.dev/social_anchor.jpg
+---
+
+# Anchor Plugin
+
+Alpine's Anchor plugin allows you easily anchor an element's positioning to another element on the page.
+
+This functionality is useful when creating dropdown menus, popovers, dialogs, and tooltips with Alpine.
+
+The "anchoring" functionality used in this plugin is provided by the [Floating UI](https://floating-ui.com/) project.
+
+<a name="installation"></a>
+## Installation
+
+You can use this plugin by either including it from a `<script>` tag or installing it via NPM:
+
+### Via CDN
+
+You can include the CDN build of this plugin as a `<script>` tag, just make sure to include it BEFORE Alpine's core JS file.
+
+```alpine
+<!-- Alpine Plugins -->
+<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/anchor@3.x.x/dist/cdn.min.js"></script>
+
+<!-- Alpine Core -->
+<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+```
+
+### Via NPM
+
+You can install Collapse from NPM for use inside your bundle like so:
+
+```shell
+npm install @alpinejs/anchor
+```
+
+Then initialize it from your bundle:
+
+```js
+import Alpine from 'alpinejs'
+import anchor from '@alpinejs/anchor'
+
+Alpine.plugin(anchor)
+
+...
+```
+
+<a name="x-anchor"></a>
+## x-anchor
+
+The primary API for using this plugin is the `x-anchor` directive.
+
+To use this plugin, add the `x-anchor` directive to any element and pass it a reference to the element you want to anchor it's position to (often a button on the page).
+
+By default, `x-anchor` will set the the element's CSS to `position: absolute` and the appropriate `top` and `left` values. If the anchored element is normally displayed below the reference element but doesn't have room on the page, it's styling will be adjusted to render above the element.
+
+For example, here's a simple dropdown anchored to the button that toggles it:
+
+```alpine
+<div x-data="{ open: false }">
+    <button x-ref="button" @click="open = ! open">Toggle</button>
+
+    <div x-show="open" x-anchor="$refs.button">
+        Dropdown content
+    </div>
+</div>
+```
+
+<!-- START_VERBATIM -->
+<div x-data="{ open: false }" class="demo overflow-hidden">
+    <div class="flex justify-center">
+        <button x-ref="button" @click="open = ! open">Toggle</button>
+    </div>
+
+    <div x-show="open" x-anchor="$refs.button" class="bg-white rounded p-4 border shadow">
+        Dropdown content
+    </div>
+</div>
+<!-- END_VERBATIM -->
+
+<a name="positioning"></a>
+## Positioning
+
+`x-anchor` allows you to customize the positioning of the anchored element using the following modifiers:
+
+* Bottom: `.bottom`, `.bottom-start`, `.bottom-end`
+* Top: `.top`, `.top-start`, `.top-end`
+* Left: `.left`, `.left-start`, `.left-end`
+* Right: `.right`, `.right-start`, `.right-end`
+
+Here is an example of using `.bottom-start` to position a dropdown below and to the right of the reference element:
+
+```alpine
+<div x-data="{ open: false }">
+    <button x-ref="button" @click="open = ! open">Toggle</button>
+
+    <div x-show="open" x-anchor.bottom-start="$refs.button">
+        Dropdown content
+    </div>
+</div>
+```
+
+<!-- START_VERBATIM -->
+<div x-data="{ open: false }" class="demo overflow-hidden">
+    <div class="flex justify-center">
+        <button x-ref="button" @click="open = ! open">Toggle</button>
+    </div>
+
+    <div x-show="open" x-anchor.bottom-start="$refs.button" class="bg-white rounded p-4 border shadow">
+        Dropdown content
+    </div>
+</div>
+<!-- END_VERBATIM -->
+
+<a name="offset"></a>
+## Offset
+
+You can add an offset to your anchored element using the `.offset.[px value]` modifier like so:
+
+```alpine
+<div x-data="{ open: false }">
+    <button x-ref="button" @click="open = ! open">Toggle</button>
+
+    <div x-show="open" x-anchor.offset.10="$refs.button">
+        Dropdown content
+    </div>
+</div>
+```
+
+<!-- START_VERBATIM -->
+<div x-data="{ open: false }" class="demo overflow-hidden">
+    <div class="flex justify-center">
+        <button x-ref="button" @click="open = ! open">Toggle</button>
+    </div>
+
+    <div x-show="open" x-anchor.offset.10="$refs.button" class="bg-white rounded p-4 border shadow">
+        Dropdown content
+    </div>
+</div>
+<!-- END_VERBATIM -->
+
+<a name="manual-styling"></a>
+## Manual styling
+
+By default, `x-alpine` applies the positioning styles to your element under the hood. If you'd prefer full control over styling, you can pass the `.unstyled` modifer and use the `$anchor` magic to access the values inside another Alpine expression.
+
+Below is an example of bypassing `x-anchor`'s internal styling and instead applying the styles yourself using `x-bind:style`:
+
+```alpine
+<div x-data="{ open: false }">
+    <button x-ref="button" @click="open = ! open">Toggle</button>
+
+    <div
+        x-show="open"
+        x-anchor.unstyled="$refs.button"
+        x-bind:style="{ position: 'absolute', top: $anchor.y+'px', left: $anchor.x+'px' }"
+    >
+        Dropdown content
+    </div>
+</div>
+```
+
+<!-- START_VERBATIM -->
+<div x-data="{ open: false }" class="demo overflow-hidden">
+    <div class="flex justify-center">
+        <button x-ref="button" @click="open = ! open">Toggle</button>
+    </div>
+
+    <div
+        x-show="open"
+        x-anchor.unstyled="$refs.button"
+        x-bind:style="{ position: 'absolute', top: $anchor.y+'px', left: $anchor.x+'px' }"
+        class="bg-white rounded p-4 border shadow"
+    >
+        Dropdown content
+    </div>
+</div>
+<!-- END_VERBATIM -->
+
diff --git a/packages/docs/src/en/plugins/morph.md b/packages/docs/src/en/plugins/morph.md
index 135a4590f..b8a8769af 100644
--- a/packages/docs/src/en/plugins/morph.md
+++ b/packages/docs/src/en/plugins/morph.md
@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 6
 title: Morph
 description: Morph an element into the provided HTML
 graph_image: https://alpinejs.dev/social_morph.jpg

From 9e1ec53a9d4b3980b07ab1c39ae844dab0f04354 Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Wed, 1 Nov 2023 16:20:20 -0400
Subject: [PATCH 8/9] wip

---
 tests/cypress/integration/plugins/anchor.spec.js | 14 ++++++++++++++
 tests/cypress/spec.html                          |  1 +
 2 files changed, 15 insertions(+)
 create mode 100644 tests/cypress/integration/plugins/anchor.spec.js

diff --git a/tests/cypress/integration/plugins/anchor.spec.js b/tests/cypress/integration/plugins/anchor.spec.js
new file mode 100644
index 000000000..4ca89742d
--- /dev/null
+++ b/tests/cypress/integration/plugins/anchor.spec.js
@@ -0,0 +1,14 @@
+import { haveAttribute, haveComputedStyle, html, notHaveAttribute, test } from '../../utils'
+
+test('can anchor an element',
+    [html`
+        <div x-data>
+            <button x-ref="foo">toggle</button>
+            <h1 x-anchor="$refs.foo">contents</h1>
+        </div>
+    `],
+    ({ get }, reload) => {
+        get('h1').should(haveComputedStyle('position', 'absolute'))
+        get('h1').should(haveAttribute('style', 'left: 17.2772px; top: 29.5px; position: absolute;'))
+    },
+)
diff --git a/tests/cypress/spec.html b/tests/cypress/spec.html
index 815fde5e4..4f9456d20 100644
--- a/tests/cypress/spec.html
+++ b/tests/cypress/spec.html
@@ -11,6 +11,7 @@
     <script src="/../../packages/focus/dist/cdn.js"></script>
     <script src="/../../packages/intersect/dist/cdn.js"></script>
     <script src="/../../packages/collapse/dist/cdn.js"></script>
+    <script src="/../../packages/anchor/dist/cdn.js"></script>
     <script src="/../../packages/mask/dist/cdn.js"></script>
     <script src="/../../packages/ui/dist/cdn.js"></script>
     <script>

From 4f2c5b9c56e2f366f1da7dcb9c263e78d58812ef Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Wed, 1 Nov 2023 16:33:37 -0400
Subject: [PATCH 9/9] wip

---
 tests/cypress/integration/plugins/anchor.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/cypress/integration/plugins/anchor.spec.js b/tests/cypress/integration/plugins/anchor.spec.js
index 4ca89742d..52e97eeb5 100644
--- a/tests/cypress/integration/plugins/anchor.spec.js
+++ b/tests/cypress/integration/plugins/anchor.spec.js
@@ -9,6 +9,5 @@ test('can anchor an element',
     `],
     ({ get }, reload) => {
         get('h1').should(haveComputedStyle('position', 'absolute'))
-        get('h1').should(haveAttribute('style', 'left: 17.2772px; top: 29.5px; position: absolute;'))
     },
 )