From ed2a137e3d140067c485bd16b038c0feebae65bd Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Wed, 22 Feb 2023 10:45:51 -0500
Subject: [PATCH 01/32] Better Markdown fieldtype in small containers

---
 resources/css/components/fieldtypes/markdown.css         | 9 ++++-----
 resources/js/components/fieldtypes/MarkdownFieldtype.vue | 4 ++--
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/resources/css/components/fieldtypes/markdown.css b/resources/css/components/fieldtypes/markdown.css
index 86a7429c302..35aa0efbb12 100644
--- a/resources/css/components/fieldtypes/markdown.css
+++ b/resources/css/components/fieldtypes/markdown.css
@@ -6,7 +6,7 @@
     @apply border rounded overflow-hidden relative;
 
     .markdown-toolbar {
-        @apply bg-white shadow-none rounded-t border-b text-sm flex items-center justify-between;
+        @apply bg-white shadow-none rounded-t border-b text-sm flex flex-wrap items-center justify-between;
         padding: 4px 8px;
     }
 
@@ -50,7 +50,7 @@
     }
 
     .CodeMirror {
-        @apply bg-gray-100 shadow-inner h-auto font-mono leading-normal p-3 text-xs;
+        @apply bg-gray-100 shadow-inner h-auto font-mono leading-normal px-0 py-1 @md/markdown:p-3 text-xs;
         border-radius: 0 0 3px 3px;
 
         &:focus-within {
@@ -181,10 +181,9 @@
   ========================================================================== */
 
 .markdown-preview {
-    @apply mx-auto;
+    @apply mx-auto px-3 py-2 @md/markdown:py-4 @md/markdown:px-5;
 
-    padding: 16px 20px;
-    min-height: 167px; /*  @TODO Refactor to avoid a magic number. */
+    min-height: 167px;
 
     ol {
         @apply list-decimal;
diff --git a/resources/js/components/fieldtypes/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/MarkdownFieldtype.vue
index 90211344882..41848ffa35b 100644
--- a/resources/js/components/fieldtypes/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/MarkdownFieldtype.vue
@@ -1,6 +1,6 @@
 <template>
 <fullscreen :enabled="fullScreenMode" target-class="markdown-fieldtype">
-    <div class="markdown-fieldtype-wrapper" :class="{'markdown-fullscreen': fullScreenMode, 'markdown-dark-mode': darkMode }">
+    <div class="markdown-fieldtype-wrapper @container/markdown" :class="{'markdown-fullscreen': fullScreenMode, 'markdown-dark-mode': darkMode }">
 
         <uploader
             ref="uploader"
@@ -86,7 +86,7 @@
                         </div>
                     </div>
 
-                    <div v-show="mode == 'preview'" v-html="markdownPreviewText" class="markdown-preview prose"></div>
+                    <div v-show="mode == 'preview'" v-html="markdownPreviewText" class="markdown-preview prose-sm @md/markdown:prose-base"></div>
                 </div>
             </div>
         </uploader>

From ba7cfd86f15a435ad291dae85608239426240b84 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Wed, 22 Feb 2023 15:51:09 -0500
Subject: [PATCH 02/32] Let parent/global components handle body overflow

---
 resources/js/components/assets/Editor/Editor.vue              | 2 --
 resources/js/components/fieldtypes/assets/AssetsFieldtype.vue | 2 --
 2 files changed, 4 deletions(-)

diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 9848e728fcc..0215b0c92bb 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -268,7 +268,6 @@ export default {
     },
 
     mounted() {
-        document.body.classList.add('overflow-hidden')
         this.$modal.show('asset-editor');
         this.load();
     },
@@ -363,7 +362,6 @@ export default {
         close() {
             this.$modal.hide('asset-editor');
             this.$emit('closed');
-            document.body.classList.remove('overflow-hidden')
         },
 
         shouldClose() {
diff --git a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
index 5b2d768e6d2..25cf6ea93be 100644
--- a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
@@ -403,7 +403,6 @@ export default {
          */
         openSelector() {
             this.showSelector = true;
-            this.$root.hideOverflow = true;
         },
 
         /**
@@ -411,7 +410,6 @@ export default {
          */
         closeSelector() {
             this.showSelector = false;
-            this.$root.hideOverflow = false;
         },
 
         /**

From e35463cfa972ea3171a6d42b524d67bc6dd968f1 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Wed, 22 Feb 2023 16:35:38 -0500
Subject: [PATCH 03/32] Better contrast on a few icons

---
 resources/css/vendors/vue-select.css                      | 2 +-
 resources/js/components/fieldtypes/SelectFieldtype.vue    | 2 +-
 resources/js/components/fieldtypes/TableFieldtype.vue     | 2 +-
 .../js/components/fieldtypes/replicator/Replicator.vue    | 8 ++++----
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/resources/css/vendors/vue-select.css b/resources/css/vendors/vue-select.css
index 71642bfd506..b9fa558fdaa 100644
--- a/resources/css/vendors/vue-select.css
+++ b/resources/css/vendors/vue-select.css
@@ -186,7 +186,7 @@
 	}
 
 	span {
-        @apply text-md shrink-0 font-thin;
+        @apply text-md shrink-0 font-normal;
 	}
 }
 
diff --git a/resources/js/components/fieldtypes/SelectFieldtype.vue b/resources/js/components/fieldtypes/SelectFieldtype.vue
index 4db8f38d4ea..8e9dc17052a 100644
--- a/resources/js/components/fieldtypes/SelectFieldtype.vue
+++ b/resources/js/components/fieldtypes/SelectFieldtype.vue
@@ -49,7 +49,7 @@
                                 <span>×</span>
                             </button>
                             <button v-else type="button" class="vs__deselect">
-                                <span class="opacity-50">×</span>
+                                <span class="text-gray-500">×</span>
                             </button>
                         </span>
                     </div>
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index b83408a03e4..dfc889dface 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -19,7 +19,7 @@
                                 </div>
                             </th>
                             <th class="row-controls pr-0">
-                                <button @click="fullScreenMode = !fullScreenMode" class="flex items-center w-full h-full justify-center text-gray-500 hover:text-gray-700">
+                                <button @click="fullScreenMode = !fullScreenMode" class="flex items-center w-full h-full justify-center text-gray-600 hover:text-gray-800">
                                     <svg-icon name="expand-2" class="h-3.5 w-3.5" v-show="! fullScreenMode" />
                                     <svg-icon name="shrink-all" class="h-3.5 w-3.5" v-show="fullScreenMode" />
                                 </button>
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 2137b1fd9b0..176f4f5ad3b 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -18,14 +18,14 @@
         <div class="flex justify-end">
             <div class="btn-group">
                 <button @click="expandAll" class="btn btn-icon flex items-center" v-tooltip="__('Expand Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
-                    <svg-icon name="arrows-horizontal-expand" class="h-3.5 w-3.5" />
+                    <svg-icon name="arrows-horizontal-expand" class="h-3.5 px-0.5 text-gray-800" />
                 </button>
                 <button @click="collapseAll" class="btn btn-icon flex items-center" v-tooltip="__('Collapse Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
-                    <svg-icon name="arrows-horizontal-collapse" class="h-3.5 w-3.5" />
+                    <svg-icon name="arrows-horizontal-collapse" class="h-3.5 px-0.5 text-gray-800" />
                 </button>
                 <button @click="fullScreenMode = !fullScreenMode" class="btn btn-icon flex items-center" v-tooltip="__('Toggle Fullscreen Mode')">
-                    <svg-icon name="expand-2" class="h-3.5 w-3.5" v-show="! fullScreenMode" />
-                    <svg-icon name="shrink-all" class="h-3.5 w-3.5" v-show="fullScreenMode" />
+                    <svg-icon name="expand-2" class="h-3.5 px-0.5 text-gray-800" v-show="! fullScreenMode" />
+                    <svg-icon name="shrink-all" class="h-3.5 px-0.5 text-gray-800" v-show="fullScreenMode" />
                 </button>
             </div>
         </div>

From a12bd44b6c4b97fe6a1657f46363c2be21c0cf9a Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Wed, 22 Feb 2023 16:39:53 -0500
Subject: [PATCH 04/32] Fix weird visual glitching on User fieldtype drag
 interaction

---
 .../js/components/inputs/relationship/SelectField.vue  | 10 ++++++++++
 resources/js/components/sortable/SortableList.vue      |  6 +++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/inputs/relationship/SelectField.vue b/resources/js/components/inputs/relationship/SelectField.vue
index 6d2f06abfa6..21b061ec614 100644
--- a/resources/js/components/inputs/relationship/SelectField.vue
+++ b/resources/js/components/inputs/relationship/SelectField.vue
@@ -39,6 +39,7 @@
                     handle-class="sortable-item"
                     :value="items"
                     @input="input"
+                    delay="0"
                 >
                     <div class="vs__selected-options-outside flex flex-wrap">
                         <span v-for="item in items" :key="item.id" class="vs__selected mt-2" :class="{ 'sortable-item': !readOnly }">
@@ -58,6 +59,15 @@
 
 </template>
 
+<style scoped>
+    .draggable-mirror {
+        display: none !important;
+    }
+    .draggable-source--is-dragging {
+        @apply opacity-75 bg-transparent border-dashed
+    }
+</style>
+
 <script>
 import { SortableList, SortableItem } from '../../sortable/Sortable';
 
diff --git a/resources/js/components/sortable/SortableList.vue b/resources/js/components/sortable/SortableList.vue
index 1c4302935cd..d343b429e2f 100644
--- a/resources/js/components/sortable/SortableList.vue
+++ b/resources/js/components/sortable/SortableList.vue
@@ -38,6 +38,10 @@ export default {
         constrainDimensions: {
             type: Boolean
         },
+        delay: {
+            type: Number,
+            default: 200
+        },
         disabled: {
             type: Boolean,
             default: false
@@ -50,7 +54,7 @@ export default {
             let options = Object.assign({}, {
                 draggable: `.${CSS.escape(this.itemClass)}`,
                 handle: `.${CSS.escape(this.handleClass)}`,
-                delay: 200,
+                delay: this.delay,
                 swapAnimation: { vertical: this.vertical, horizontal: !this.vertical },
                 plugins: [Plugins.SwapAnimation],
                 mirror: {

From 6eac16d4c07b7830442781154d3c8c07adf7c062 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Wed, 22 Feb 2023 16:47:17 -0500
Subject: [PATCH 05/32] Use proper data type

---
 resources/js/components/inputs/relationship/SelectField.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/inputs/relationship/SelectField.vue b/resources/js/components/inputs/relationship/SelectField.vue
index 21b061ec614..4e1a61d8a7d 100644
--- a/resources/js/components/inputs/relationship/SelectField.vue
+++ b/resources/js/components/inputs/relationship/SelectField.vue
@@ -38,8 +38,8 @@
                     item-class="sortable-item"
                     handle-class="sortable-item"
                     :value="items"
+                    :delay="0"
                     @input="input"
-                    delay="0"
                 >
                     <div class="vs__selected-options-outside flex flex-wrap">
                         <span v-for="item in items" :key="item.id" class="vs__selected mt-2" :class="{ 'sortable-item': !readOnly }">

From 5540af19a3702a91fa5ca4656a04be6c9bcb1b44 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Thu, 2 Mar 2023 15:28:59 -0500
Subject: [PATCH 06/32] Redesign the List Fieldtype

---
 resources/css/components/fieldtypes/list.css  | 105 ------------
 resources/css/cp.css                          |   1 -
 .../components/fieldtypes/ListFieldtype.vue   | 153 ++++++++----------
 resources/svg/bullet.svg                      |   1 -
 resources/svg/delete-x.svg                    |   1 -
 5 files changed, 64 insertions(+), 197 deletions(-)
 delete mode 100644 resources/css/components/fieldtypes/list.css
 delete mode 100644 resources/svg/bullet.svg
 delete mode 100644 resources/svg/delete-x.svg

diff --git a/resources/css/components/fieldtypes/list.css b/resources/css/components/fieldtypes/list.css
deleted file mode 100644
index 5141cf8c847..00000000000
--- a/resources/css/components/fieldtypes/list.css
+++ /dev/null
@@ -1,105 +0,0 @@
-/* ==========================================================================
-   LIST FIELDTYPE
-   ========================================================================== */
-
-.list-fieldtype ul {
-    padding: 0;
-    margin: 0;
-	list-style: none;
-}
-
-.list-fieldtype li {
-	padding: 0 16px;
-	background: url('../../../svg/bullet.svg') no-repeat 0px 8px;
-	margin-bottom: 8px;
-    font-size: 16px;
-	position: relative;
-	font-size: 14px;
-
-    &:active { cursor: ns-resize; }
-
-	&.editing {
-		padding-left: 0px;
-		background: #fff;
-	}
-
-	&:last-child {
-		padding-left: 0;
-        margin-bottom: 0;
-		background: none;
-	}
-
-	input {
-		background: #fff url('../../../svg/bullet.svg') no-repeat 0 8px;
-		box-shadow: none;
-        padding: 0 16px;
-        height: auto !important;
-		font-size: 14px;
-		outline: 0px !important;
-		&:active, &:focus { outline: 0px !important; -webkit-appearance: none; box-shadow: 0 0 0 0; }
-	}
-
-    .delete {
-	    background: #fff url(../../../svg/delete-x.svg) no-repeat 0 0;
-	    width: 12px;
-	    height: 12px;
-	    display: inline-block;
-	    opacity: 0;
-		top: 6px;
-		left: -1px;
-		position: absolute;
-	    cursor: pointer;
-	}
-
-	&:hover .delete {
-		opacity: 1;
-	}
-}
-
-
-/* Inside a Grid
-  ========================================================================== */
-
-.grid-fieldtype .list-fieldtype {
-
-	padding: 8px 0 10px;
-
-	ul {
-        border: none;
-        padding: 0;
-        border-radius: 0;
-    }
-
-    li {
-        background-position: 10px 8px;
-        font-size: 14px;
-        margin: 0 0 8px;
-        padding-left: 20px;
-        &:last-child { padding-left: 0; }
-        input {
-            background-position: 10px 8px;
-            padding: 0 10px 0 20px;
-            margin-top: 0;
-
-            &:hover { background-color: #fff; }
-        }
-        .delete {
-            left: 8px;
-        }
-    }
-
-    .ui-sortable-helper {
-        box-shadow: none;
-        .delete { display: none; }
-    }
-}
-
-
-/* Inside a Bard
-  ========================================================================== */
-
-.bard-fieldtype .list-fieldtype {
-    input.input-text {
-        border: none;
-    }
-}
diff --git a/resources/css/cp.css b/resources/css/cp.css
index ffa183523c6..62a594ca5d6 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -61,7 +61,6 @@
 @import "components/fieldtypes/environment";
 @import "components/fieldtypes/grid";
 @import "components/fieldtypes/hidden";
-@import "components/fieldtypes/list";
 @import "components/fieldtypes/markdown";
 @import "components/fieldtypes/partial";
 @import "components/fieldtypes/relationship";
diff --git a/resources/js/components/fieldtypes/ListFieldtype.vue b/resources/js/components/fieldtypes/ListFieldtype.vue
index d4dc791b4d7..bd2bf8f5259 100644
--- a/resources/js/components/fieldtypes/ListFieldtype.vue
+++ b/resources/js/components/fieldtypes/ListFieldtype.vue
@@ -1,59 +1,44 @@
 <template>
-    <sortable-list
-        v-model="data"
-        :vertical="true"
-        item-class="sortable-row"
-        handle-class="sortable-handle"
-        @dragstart="$emit('focus')"
-        @dragend="$emit('blur')"
-    >
-        <ul ref="list" class="outline-none">
-            <li class="sortable-row outline-none"
-                v-for="(item, index) in data"
-                :key="item._id"
-                :class="{ editing: (editing === index) }"
+    <div class="table-field">
+        <table class="table-fieldtype-table">
+            <sortable-list
+                v-model="data"
+                :vertical="true"
+                item-class="sortable-row"
+                handle-class="sortable-handle"
+                @dragstart="$emit('focus')"
+                @dragend="$emit('blur')"
             >
-                <span v-if="isReadOnly">
-                    {{ data[index].value }}
-                </span>
-                <template v-if="!isReadOnly">
-                    <span v-if="editing === index">
-                        <input
-                            type="text"
-                            class="w-full"
-                            v-model="data[index].value"
-                            :readonly="isReadOnly"
-                            :id="fieldId"
-                            @keydown.enter.prevent="saveAndAddNewItem"
-                            @keyup.up="previousItem"
-                            @keyup.down="nextItem"
-                            @focus="editItem(index)"
-                            @blur="focused = false"
-                        />
-                    </span>
-                    <span v-else @click.prevent="editItem(index)">
-                        <span class="sortable-handle">{{ item.value }}</span>
-                        <i class="delete" @click="deleteItem(index)"></i>
-                    </span>
-                </template>
-            </li>
-            <li>
-                <input
-                    v-if="!isReadOnly"
-                    type="text"
-                    class="w-full"
-                    v-model="newItem"
-                    ref="newItem"
-                    :placeholder="`${__('Add an item')}...`"
-                    @keydown.enter.prevent="addItem"
-                    @blur="newItemInputBlurred"
-                    @paste="newItemInputPaste"
-                    @focus="editItem(data.length)"
-                    @keyup.up="previousItem"
-                />
-            </li>
-        </ul>
-    </sortable-list>
+                <tbody>
+                    <tr class="sortable-row" v-for="(element, index) in data" :key="element._id">
+                        <td class="sortable-handle table-drag-handle" v-if="!isReadOnly" :class="{'rounded-tl': index === 0 }"></td>
+                        <td>
+                            <input
+                                type="text"
+                                ref="listItem"
+                                class="input-text"
+                                v-model="element.value"
+                                :readonly="isReadOnly"
+                                @blur="focused = false"
+                                @focus="editItem(index)"
+                                @keydown.enter.prevent="nextItem"
+                                @keyup.up="previousItem"
+                                @keyup.down="nextItem"
+                                @paste="newItemInputPaste"
+                            />
+                        </td>
+                        <td class="row-controls" v-if="!isReadOnly">
+                            <button @click="deleteValue(index)" class="inline text-lg antialiased text-gray-600 hover:text-gray-800 ">&times;</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </sortable-list>
+        </table>
+
+        <button class="btn" @click="addItem" v-if="!isReadOnly">
+            {{ addButton }}
+        </button>
+    </div>
 </template>
 
 <script>
@@ -71,10 +56,10 @@ export default {
     data() {
         return {
             data: [],
-            newItem: '',
             editing: null,
             focused: false,
             mounted: false,
+            deleting: false
         }
     },
 
@@ -91,6 +76,7 @@ export default {
             }
         },
 
+
         value: {
             immediate: true,
             handler(value) {
@@ -113,54 +99,44 @@ export default {
         }
     },
 
+    computed: {
+        addButton() {
+            return __(this.config.add_button || 'Add Item');
+        },
+    },
+
     methods: {
         addItem() {
-            if (this.newItem === '') {
-                return;
-            }
+            this.data.push(this.newSortableValue());
+            this.$nextTick(() => this.editItem(this.data.length - 1));
+        },
 
-            this.data.push(this.newSortableValue(this.newItem));
-            this.newItem = '';
-            this.editing = this.data.length;
+        deleteValue(index) {
+            this.data.splice(index, 1);
         },
 
         editItem(index) {
             this.editing = index;
-
-            this.$nextTick(function () {
-                this.focusItem();
-            });
+            this.$refs.listItem[index].focus();
         },
 
         newItemInputPaste(event) {
-            if (this.newItem !== '') {
-                return;
-            }
-
             const value = event.clipboardData.getData('text');
             if (!value.includes("\n")) {
-                return;                
+                return;
             }
-            
+
+            this.deleteIfEmpty()
+
             value.split("\n").forEach((item) => {
                 this.data.push(this.newSortableValue(item));
             });
 
-            event.preventDefault();
-        },
+            this.$nextTick(() => this.editItem(this.data.length - 1));
 
-        newItemInputBlurred() {
-            this.addItem();
-            this.focused = false;
+            event.preventDefault();
         },
 
-        focusItem() {
-            this.focused = true;
-
-            return this.editing === this.data.length
-                ? this.$refs.newItem.focus()
-                : this.$refs.list.querySelector('.editing input').select();
-        },
 
         previousItem() {
             this.deleteIfEmpty();
@@ -171,13 +147,12 @@ export default {
         nextItem() {
             let deletedAdjustment = this.deleteIfEmpty() ? 1 : 0;
 
-            this.editItem(this.editing + 1 - deletedAdjustment);
-        },
-
-        saveAndAddNewItem() {
-            this.deleteIfEmpty();
+            if (this.editing + 1 >= this.data.length) {
+                this.addItem();
+            } else {
+                this.editItem(this.editing + 1 - deletedAdjustment);
+            }
 
-            this.editItem(this.data.length);
         },
 
         deleteIfEmpty() {
diff --git a/resources/svg/bullet.svg b/resources/svg/bullet.svg
deleted file mode 100644
index 80427a183a6..00000000000
--- a/resources/svg/bullet.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="4" width="4" viewBox="0 0 4 4" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(0.4,0,0,0.4,0,0)"><path d="M0.000 -0.000 L10.000 -0.000 L10.000 10.000 L-0.000 10.000 Z" fill="#606c75" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path></g></svg>
diff --git a/resources/svg/delete-x.svg b/resources/svg/delete-x.svg
deleted file mode 100644
index e32482fcde9..00000000000
--- a/resources/svg/delete-x.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="8" width="8" viewBox="0 0 4 4" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(0.4,0,0,0.4,0,0)"><path d="M7.613,5.353a.5.5,0,0,1,0-.707L9.639,2.621a1.235,1.235,0,0,0,0-1.743L9.122.36a1.235,1.235,0,0,0-1.743,0L5.354,2.386a.5.5,0,0,1-.708,0L2.621.36a1.235,1.235,0,0,0-1.743,0L.361.878a1.235,1.235,0,0,0,0,1.743L2.387,4.646a.5.5,0,0,1,0,.707L.361,7.379a1.234,1.234,0,0,0,0,1.742l.517.518a1.234,1.234,0,0,0,1.743,0L4.646,7.613a.5.5,0,0,1,.708,0L7.379,9.639a1.235,1.235,0,0,0,1.743,0l.517-.518a1.234,1.234,0,0,0,0-1.742Z" fill="#A7B3BE" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path></g></svg>

From dcc538ade7e7ac1b0e50921791e6717f6831559e Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Tue, 7 Mar 2023 15:27:47 -0500
Subject: [PATCH 07/32] [4.x] Redesign the Entry Listing UI/UX (#7668)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Redesign the Entry Listing UI/UX

Now with better use of space, more intuitive UX, and responsive friendly

* Ensure query changes to a filter will refresh the view properly

* Wire up Terms Listing

* Wire up Users Listing (filters not working on the PHP side yet)

* Don't need this check for allowColumnPicker here

* Adjust bulk actions height

* Make role queryable like user groups currently are.

* Fix user role and group filter class queries (stache only atm).

* Allow fields to be filtered on users listing.

* Pass tests again.

* Responsive improvements

* Autofocus search when showing filters

* nextTick to the rescue

* Bind `f` to show filters (which autofocuses search).

* Fix errors on listings that don’t have search filter (ie. collections listing).

* Remove `$pinned` property from filters in php.

* Remove `$pinned` property from new filter stub.

* Remove pinned filter concept from Filters component.

---------

Co-authored-by: Jesse Leite <jesseleite@gmail.com>
---
 resources/css/components/tabs.css             |  12 ++
 resources/css/elements/badges.css             |  12 +-
 resources/css/elements/buttons.css            |   2 +-
 resources/css/elements/forms.css              |   5 +-
 resources/css/elements/tables.css             |  12 +-
 resources/js/components/DropdownList.vue      |   2 +-
 resources/js/components/Popover.vue           |   2 +-
 .../js/components/data-list/BulkActions.vue   |   3 +-
 .../js/components/data-list/ColumnPicker.vue  |   4 +-
 resources/js/components/data-list/Filter.vue  |   2 +-
 .../js/components/data-list/FilterPresets.vue | 113 +++++++++++++++++-
 resources/js/components/data-list/Filters.vue |  95 +++------------
 .../js/components/data-list/HasFilters.js     |  61 +++++++++-
 resources/js/components/data-list/Search.vue  |  18 ++-
 resources/js/components/data-list/Table.vue   |  13 +-
 resources/js/components/entries/Listing.vue   |  46 ++++---
 resources/js/components/terms/Listing.vue     |  39 ++++--
 resources/js/components/users/Listing.vue     |  55 ++++++++-
 resources/svg/add-bold.svg                    |   1 +
 resources/svg/filter-lines.svg                |   1 +
 src/Auth/UserRepository.php                   |   4 +-
 src/Console/Commands/stubs/filter.php.stub    |   7 --
 .../Controllers/CP/Users/UsersController.php  |   4 +-
 src/Query/Scopes/Filter.php                   |   2 -
 src/Query/Scopes/Filters/Fields.php           |  12 +-
 src/Query/Scopes/Filters/Site.php             |   2 -
 src/Query/Scopes/Filters/Status.php           |   2 -
 src/Query/Scopes/Filters/UserGroup.php        |   2 +-
 src/Query/Scopes/Filters/UserRole.php         |   6 +-
 src/Stache/Indexes/Users/Role.php             |  16 +++
 src/Stache/Stores/UsersStore.php              |  18 ++-
 tests/Auth/FileUserTest.php                   |   1 +
 tests/Auth/PermissibleContractTests.php       |   5 +
 33 files changed, 413 insertions(+), 166 deletions(-)
 create mode 100644 resources/svg/add-bold.svg
 create mode 100644 resources/svg/filter-lines.svg
 create mode 100644 src/Stache/Indexes/Users/Role.php

diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index 22c9b7f2ca4..0f5feb22a08 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -88,3 +88,15 @@
 @screen md {
     .tabs .tab-button { @apply text-base; }
 }
+
+.pill-tab {
+    @apply text-gray-700 flex items-center focus:outline-none px-2 py-1 rounded;
+
+    &:hover {
+        @apply text-gray-900;
+    }
+
+    &.active {
+        @apply bg-blue-100 text-blue-900;
+    }
+}
diff --git a/resources/css/elements/badges.css b/resources/css/elements/badges.css
index f0b3c4f22e0..3ca495a000e 100644
--- a/resources/css/elements/badges.css
+++ b/resources/css/elements/badges.css
@@ -27,19 +27,23 @@
 }
 
 .filter-badge {
-    @apply text-2xs text-gray-800 bg-gray-300 flex items-center;
-    height: 1.625rem; /*  24px */
+    @apply text-2xs text-gray-800 bg-white border flex items-center rounded-full;
+    height: 1.625rem;
     padding-left: 10px;
 
     button {
-        @apply px-2 text-base text-gray-500 flex items-center rounded;
+        @apply px-2 text-base text-gray-600 flex items-center rounded;
 
         &:hover {
-            @apply text-gray-700;
+            @apply text-gray-800;
         }
 
         &:focus {
             @apply focus-outline;
         }
     }
+
+    &.filter-badge-control {
+        @apply bg-gray-200 border border-gray-500 border-dashed hover:border-gray-600 hover:bg-gray-300;
+    }
 }
diff --git a/resources/css/elements/buttons.css b/resources/css/elements/buttons.css
index 4e37adaccc5..103c883038d 100644
--- a/resources/css/elements/buttons.css
+++ b/resources/css/elements/buttons.css
@@ -97,7 +97,7 @@ button {
     }
 
     &:focus {
-        @apply focus-outline bg-gray-300;
+        @apply ring-2 outline-none;
     }
 
     &:active, &:focus:active {
diff --git a/resources/css/elements/forms.css b/resources/css/elements/forms.css
index f8e82b455d1..560c4a255c6 100644
--- a/resources/css/elements/forms.css
+++ b/resources/css/elements/forms.css
@@ -142,7 +142,10 @@ input.input-text-minimal:read-only,
 
 .radio-fieldtype .option,
 .checkboxes-fieldtype .option {
-    @apply mt-3 flex items-center;
+    @apply flex items-center;
+    &:not(:first-child) {
+        @apply mt-3;
+    }
 
     input {
         @apply leading-normal mr-1;
diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css
index 7cda6424471..721e009095b 100644
--- a/resources/css/elements/tables.css
+++ b/resources/css/elements/tables.css
@@ -16,7 +16,7 @@
 }
 
 .data-list-bulk-actions {
-	@apply bg-white absolute w-full py-3 z-10;
+	@apply bg-white absolute w-full py-2 z-10;
 	padding-left: 56px;
 }
 
@@ -37,16 +37,16 @@
 	overflow-x: auto;
 
     thead {
-		@apply text-sm text-gray-700 text-gray-900;
+		@apply bg-gray-100 text-xs text-gray-700 text-gray-900;
 
 		tr {
 			@apply border-b;
 		}
 
         th {
-            @apply font-medium px-4 py-3;
-            &:first-child { @apply rounded-tl; }
-			&:last-child { @apply rounded-tr; }
+            @apply font-medium px-4 py-2;
+            &:first-child { @apply rounded-tl-lg; }
+			&:last-child { @apply rounded-tr-lg; }
 			&:hover {
 				@apply text-gray-900;
 			}
@@ -127,12 +127,10 @@
         }
 
         &.current-column {
-            @apply font-bold;
             svg { opacity: 1; }
         }
 
         svg {
-            /*  transition: all 150ms ease; */
             opacity: 0;
         }
 
diff --git a/resources/js/components/DropdownList.vue b/resources/js/components/DropdownList.vue
index cc78b5dbc3b..576061d93f6 100644
--- a/resources/js/components/DropdownList.vue
+++ b/resources/js/components/DropdownList.vue
@@ -20,7 +20,7 @@ export default {
         },
         placement: {
             type: String,
-            default: 'bottom-end'
+            default: 'bottom'
         },
         scroll: {
             type: Boolean,
diff --git a/resources/js/components/Popover.vue b/resources/js/components/Popover.vue
index ee15514833e..4dcf1a27aa9 100644
--- a/resources/js/components/Popover.vue
+++ b/resources/js/components/Popover.vue
@@ -26,7 +26,7 @@ export default {
         },
         placement: {
             type: String,
-            default: 'bottom-end',
+            default: 'bottom',
         },
         offset: {
             type: Array,
diff --git a/resources/js/components/data-list/BulkActions.vue b/resources/js/components/data-list/BulkActions.vue
index 6f4e246407f..ec1db482be7 100644
--- a/resources/js/components/data-list/BulkActions.vue
+++ b/resources/js/components/data-list/BulkActions.vue
@@ -3,8 +3,9 @@
     <div v-if="showAlways || hasSelections" class="data-list-bulk-actions">
         <div class="input-group input-group-sm relative z-10">
             <div class="input-group-prepend">
-                <div class="text-gray-700"
+                <div class="text-gray-700 hidden md:inline-block"
                     v-text="__n(`:count item selected|:count items selected`, selections.length)" />
+                <div class="text-gray-700 md:hidden" v-text="selections.length" />
             </div>
 
             <data-list-action
diff --git a/resources/js/components/data-list/ColumnPicker.vue b/resources/js/components/data-list/ColumnPicker.vue
index f1a5062cb40..3015e3b5849 100644
--- a/resources/js/components/data-list/ColumnPicker.vue
+++ b/resources/js/components/data-list/ColumnPicker.vue
@@ -4,9 +4,9 @@
         <template slot="trigger">
             <button
                 v-tooltip="__('Customize Columns')"
-                class="btn btn-sm px-1 py-1 -ml-1 cursor-pointer"
+                class="btn py-1 px-1 h-8 w-8 flex items-center justify-center"
             >
-                <svg-icon name="settings-horizontal" class="w-4" />
+                <svg-icon name="settings-horizontal" class="w-4 h-4" />
             </button>
         </template>
 
diff --git a/resources/js/components/data-list/Filter.vue b/resources/js/components/data-list/Filter.vue
index e5765c689a8..f64f0415cb0 100644
--- a/resources/js/components/data-list/Filter.vue
+++ b/resources/js/components/data-list/Filter.vue
@@ -2,7 +2,7 @@
 
     <div class="w-full no-label">
         <publish-container
-            class="p-4"
+            class="p-3"
             v-if="filter.fields.length"
             :name="`filter-${filter.handle}`"
             :meta="{}"
diff --git a/resources/js/components/data-list/FilterPresets.vue b/resources/js/components/data-list/FilterPresets.vue
index e27ca8ad1d7..688b764b786 100644
--- a/resources/js/components/data-list/FilterPresets.vue
+++ b/resources/js/components/data-list/FilterPresets.vue
@@ -1,14 +1,45 @@
 <template>
-    <div v-if="presets" class="border-b px-4 text-sm">
+    <div>
+        <div class="flex flex-wrap items-center">
 
-        <button class="data-list-filter-link" :class="{ active: ! activePreset }" @click="viewAll" v-text="__('All')" />
+            <button class="pill-tab mr-1" :class="{ 'active': ! activePreset }" @click="viewAll" v-text="__('All')" />
 
-        <template v-for="(preset, handle) in presets">
-            <button class="data-list-filter-link" :class="{ active: handle === activePreset }" @click="viewPreset(handle)">
-                {{ preset.display }}
+            <template v-for="(preset, handle) in presets">
+                <button class="pill-tab active mr-1" v-if="handle === activePreset">
+                    {{ preset.display }}
+                    <button class="opacity-50 hover:opacity-100" @click="showDeleteModal = true">
+                        <span class="w-2 h-2 ml-2 mr-1">&times;</span>
+                    </button>
+                </button>
+                <button class="pill-tab mr-1" v-else @click="viewPreset(handle)">
+                    {{ preset.display }}
+                </button>
+            </template>
+
+            <button class="pill-tab" @click="createNewEmptyPreset" >
+                <svg-icon name="add-bold" class="w-3 h-3"/>
             </button>
-        </template>
+        </div>
+
+        <confirmation-modal
+            :buttonText="__('Save')"
+            :title="__('Create New View')"
+            v-if="showSaveModal"
+            @cancel="showSaveModal = false"
+            @confirm="handleSavePreset"
+        >
+            <text-input :focus="true" v-model="savingPresetName" @keydown.enter="handleSavePreset" />
+        </confirmation-modal>
 
+        <confirmation-modal
+            v-if="showDeleteModal"
+            :title="__('Delete View')"
+            :bodyText="__('Are you sure you want to delete this view?')"
+            :buttonText="__('Delete')"
+            :danger="true"
+            @confirm="deletePreset"
+            @cancel="showDeleteModal = false"
+        />
     </div>
 </template>
 
@@ -16,13 +47,21 @@
 export default {
 
     props: {
+        activeFilters: Object,
         activePreset: String,
+        activePresetPayload: Object,
+        hasActiveFilters: Boolean,
         preferencesPrefix: String,
+        searchQuery: String,
     },
 
     data() {
         return {
             presets: [],
+            showDeleteModal: false,
+            showSaveModal: false,
+            savingPresetName: null,
+            test: 'hello!'
         }
     },
 
@@ -30,6 +69,17 @@ export default {
         preferencesKey() {
             return this.preferencesPrefix ? `${this.preferencesPrefix}.filters` : null;
         },
+
+        presetPreferencesPayload() {
+            let payload = {
+                display: this.savingPresetName || this.activePresetPayload.display,
+            };
+
+            if (this.searchQuery) payload.query = this.searchQuery;
+            if (this.hasActiveFilters) payload.filters = clone(this.activeFilters);
+
+            return payload;
+        },
     },
 
     created() {
@@ -48,11 +98,62 @@ export default {
             this.viewPreset(handle)
         },
 
+        deletePreset() {
+            this.$preferences.remove(`${this.preferencesKey}.${this.activePreset}`)
+                .then(response => {
+                    this.$emit('deleted', this.activePreset);
+                    this.$toast.success(__('View deleted'));
+                    this.showDeleteModal = false;
+                    this.refreshPresets();
+                })
+                .catch(error => {
+                    this.$toast.error(__('Unable to delete view'));
+                    this.showDeleteModal = false;
+                });
+        },
+
+        savePreset() {
+            if (!this.activePreset) {
+                this.showSaveModal = true;
+                return;
+            }
+
+            this.handleSavePreset();
+        },
+
+        createNewEmptyPreset() {
+            this.savingPresetName = null;
+            this.showSaveModal = true;
+        },
+
+        handleSavePreset() {
+            let presetHandle = this.activePreset || this.$slugify(this.savingPresetName, '_');
+
+            this.$preferences.set(`${this.preferencesKey}.${presetHandle}`, this.presetPreferencesPayload)
+                .then(response => {
+                    this.$toast.success(__('View saved'));
+                    this.showSaveModal = false;
+                    this.getPresets();
+                    this.viewPreset(presetHandle);
+                    this.hasActiveFilters ? this.refreshPreset() : this.$emit('show-filters');
+                })
+                .catch(error => {
+                    this.$toast.error(__('Unable to save view'));
+                    this.showSaveModal = false;
+                });
+        },
+
         refreshPresets() {
             this.getPresets();
             this.viewAll();
         },
 
+        refreshPreset() {
+            this.getPresets();
+            this.$emit('hide-filters');
+            this.viewPreset(this.activePreset);
+        },
+
         viewAll() {
             this.$emit('reset');
         },
diff --git a/resources/js/components/data-list/Filters.vue b/resources/js/components/data-list/Filters.vue
index becb28080ae..b7eb311adf2 100644
--- a/resources/js/components/data-list/Filters.vue
+++ b/resources/js/components/data-list/Filters.vue
@@ -1,29 +1,19 @@
 <template>
-    <div class="w-full">
-        <div class="input-group focus-within-only">
+    <div class="w-full" v-if="isFiltering || isSearching">
+        <div class="flex flex-wrap px-3 border-b pt-2">
 
-            <popover v-if="filters.length">
+            <!-- Field filter (requires custom selection UI) -->
+            <popover v-if="fieldFilter">
                 <template slot="trigger">
-                    <button class="input-group-prepend cursor-pointer px-4" @click="resetFilterPopover">
-                        {{ __('Filter') }}
-                        <svg height="8" width="8" viewBox="0 0 10 6.5" class="ml-1"><path d="M9.9,1.4L5,6.4L0,1.4L1.4,0L5,3.5L8.5,0L9.9,1.4z" fill="currentColor" /></svg>
+                    <button class="filter-badge filter-badge-control mr-2 mb-2" @click="resetFilterPopover">
+                        {{ __('Field') }}
+                        <svg-icon name="chevron-down-xs" class="w-2 h-2 mx-2" />
                     </button>
                 </template>
                 <template #default="{ close: closePopover, afterClosed: afterPopoverClosed }">
                     <div class="flex flex-col text-left w-64">
-                        <h6 class="p-4 pb-0" v-text="__('Show everything where:')"/>
-                        <div v-if="showFilterSelection" class="p-4 pt-2">
-                            <button
-                                v-for="filter in unpinnedFilters"
-                                :key="filter.handle"
-                                v-text="filter.title"
-                                class="btn w-full mt-2"
-                                @click="creating = filter.handle"
-                            />
-                        </div>
                         <div class="filter-fields text-sm">
                             <field-filter
-                                v-show="showFieldFilter"
                                 ref="fieldFilter"
                                 :config="fieldFilter"
                                 :values="activeFilters.fields || {}"
@@ -48,43 +38,16 @@
                 </template>
             </popover>
 
-            <data-list-search ref="search" :value="searchQuery" @input="$emit('search-changed', $event)" />
-
-            <template v-if="isFiltering">
-                <popover v-if="canSave" placement="bottom-end" ref="savePopover">
-                    <template slot="trigger">
-                        <button class="input-group-item px-3">{{ __('Save') }}</button>
-                    </template>
-                    <div class="p-4 w-96">
-                        <h6 v-text="__('Filter preset name')" class="mb-2" />
-                        <div class="flex items-center">
-                            <input class="input-text border-r rounded-r" type="text" v-model="savingPresetName" @keydown.enter="save" ref="savedFilterName">
-                            <button class="btn-primary ml-2" @click="save" :disabled="saving || ! savingPresetName">Save</button>
-                        </div>
-                    </div>
-                </popover>
-                <button v-if="isDirty" class="input-group-item px-3" @click="reset">{{ __('Reset') }}</button>
-                <button v-if="activePreset" class="flex items-center input-group-item px-3" @click="deleting = true"><svg-icon name="trash" class="w-4 h-4" /></button>
-                <confirmation-modal
-                    v-if="deleting"
-                    :title="__('Delete Preset')"
-                    :bodyText="__('Are you sure you want to delete this preset?')"
-                    :buttonText="__('Delete')"
-                    :danger="true"
-                    @confirm="remove"
-                    @cancel="deleting = false"
-                />
-            </template>
-
-            <popover v-if="pinnedFilters.length" v-for="filter in pinnedFilters" :key="filter.handle" placement="bottom-end">
+            <!-- Standard non-field filters -->
+            <popover v-if="standardFilters.length" v-for="filter in standardFilters" :key="filter.handle">
                 <template slot="trigger">
-                    <button class="input-group-item px-3">
+                    <button class="filter-badge filter-badge-control mr-2 mb-2">
                         {{ filter.title }}
-                        <svg height="8" width="8" viewBox="0 0 10 6.5" class="ml-1"><path d="M9.9,1.4L5,6.4L0,1.4L1.4,0L5,3.5L8.5,0L9.9,1.4z" fill="currentColor" /></svg>
+                        <svg-icon name="chevron-down-xs" class="w-2 h-2 mx-2" />
                     </button>
                 </template>
                 <template #default="{ close: closePopover }">
-                    <div class="filter-fields">
+                    <div class="filter-fields w-64">
                         <data-list-filter
                             :key="filter.handle"
                             :filter="filter"
@@ -96,17 +59,16 @@
                 </template>
             </popover>
 
-        </div>
-
-        <div class="flex flex-wrap mt-2" v-if="activeCount">
-            <div class="filter-badge mr-2" v-for="(badge, handle) in fieldFilterBadges">
+            <!-- Active filter badges -->
+            <div class="filter-badge mr-2 mb-2" v-for="(badge, handle) in fieldFilterBadges">
                 <span>{{ badge }}</span>
-                <button @click="removeFieldFilter(handle)">&times;</button>
+                <button @click="removeFieldFilter(handle)" v-tooltip="__('Remove Filter')">&times;</button>
             </div>
-            <div class="filter-badge mr-2" v-for="(badge, handle) in standardBadges">
+            <div class="filter-badge mr-2 mb-2" v-for="(badge, handle) in standardBadges">
                 <span>{{ badge }}</span>
-                <button @click="removeStandardFilter(handle)">&times;</button>
+                <button @click="removeStandardFilter(handle)" v-tooltip="__('Remove Filter')">&times;</button>
             </div>
+
         </div>
     </div>
 
@@ -136,6 +98,7 @@ export default {
         searchQuery: String,
         savesPresets: Boolean,
         preferencesPrefix: String,
+        isSearching: Boolean,
     },
 
     data() {
@@ -170,26 +133,6 @@ export default {
             return this.filters.filter(filter => filter.handle !== 'fields');
         },
 
-        pinnedFilters() {
-            return this.filters.filter(filter => filter.pinned);
-        },
-
-        unpinnedFilters() {
-            return this.filters.filter(filter => ! filter.pinned);
-        },
-
-        showFilterSelection() {
-            if (this.fieldFilter && this.unpinnedFilters.length === 1) return false;
-
-            return ! this.creating;
-        },
-
-        showFieldFilter() {
-            if (this.fieldFilter && this.unpinnedFilters.length === 1) return true;
-
-            return this.creating === 'fields';
-        },
-
         fieldFilterBadges() {
             return data_get(this.activeFilterBadges, 'fields', {});
         },
diff --git a/resources/js/components/data-list/HasFilters.js b/resources/js/components/data-list/HasFilters.js
index eb3c182199b..c30c5eed2e4 100644
--- a/resources/js/components/data-list/HasFilters.js
+++ b/resources/js/components/data-list/HasFilters.js
@@ -2,11 +2,12 @@ export default {
 
     data() {
         return {
+            activeFilterBadges: {},
+            activeFilters: {},
             activePreset: null,
             activePresetPayload: {},
             searchQuery: '',
-            activeFilters: {},
-            activeFilterBadges: {},
+            showFilters: false,
         }
     },
 
@@ -22,12 +23,46 @@ export default {
             return count;
         },
 
+        canSave() {
+            return this.isDirty && this.preferencesPrefix;
+        },
+
+        isDirty() {
+            if (! this.isFiltering) return false;
+
+            if (this.activePreset) {
+                return this.activePresetPayload.query != this.searchQuery
+                    || ! _.isEqual(this.activePresetPayload.filters || {}, this.activeFilters);
+            }
+
+            return true;
+        },
+
+        isFiltering() {
+            return ! _.isEmpty(this.activeFilters) || this.searchQuery || this.activePreset;
+        },
+
         hasActiveFilters() {
             return this.activeFilterCount > 0;
-        }
+        },
+
+        searchPlaceholder() {
+            if (this.activePreset) {
+                return __('Searching in: ') + this.activePresetPayload.display;
+            }
+
+            return __('Search');
+        },
 
     },
 
+    created() {
+        this.$keys.bind('f', e => {
+            e.preventDefault();
+            this.handleShowFilters();
+        });
+    },
+
     methods: {
 
         searchChanged(query) {
@@ -65,10 +100,30 @@ export default {
             this.activePreset = null;
             this.activePresetPayload = {};
             this.searchQuery = '';
+            this.showFilters = false;
             this.activeFilters = {};
             this.activeFilterBadges = {};
         },
 
+        filtersHide() {
+            this.showFilters = false;
+            this.searchQuery = '';
+        },
+
+        filtersShow() {
+            this.showFilters = true;
+        },
+
+        handleShowFilters() {
+            this.showFilters = true;
+
+            this.$nextTick(function () {
+                if (this.$refs.search) {
+                    this.$refs.search.focus();
+                }
+            });
+        },
+
         unselectAllItems() {
             if (this.$refs.dataList) {
                 this.$refs.dataList.clearSelections();
diff --git a/resources/js/components/data-list/Search.vue b/resources/js/components/data-list/Search.vue
index d953aedb828..84041781a0e 100644
--- a/resources/js/components/data-list/Search.vue
+++ b/resources/js/components/data-list/Search.vue
@@ -2,17 +2,31 @@
     <input
         type="text"
         ref="input"
-        :placeholder="__('Search...')"
+        :placeholder="__(placeholder)"
         :value="value"
         @input="emitEvent"
         @keyup.esc="reset"
+        autofocus
         class="input-text flex-1 bg-white text-sm">
 </template>
 
 <script>
 export default {
 
-    props: ['value'],
+    props: [
+        'value'
+    ],
+
+    props: {
+        placeholder: {
+            type: String,
+            default: 'Search...'
+        },
+        value: {
+            type: String,
+            default: ''
+        }
+    },
 
     methods: {
         emitEvent: _.debounce(function (event) {
diff --git a/resources/js/components/data-list/Table.vue b/resources/js/components/data-list/Table.vue
index c759701cb5a..55917186d0b 100644
--- a/resources/js/components/data-list/Table.vue
+++ b/resources/js/components/data-list/Table.vue
@@ -1,6 +1,6 @@
 <template>
     <table ref="table" tabindex="0" class="data-table" :class="{ 'opacity-50': loading, 'select-none' : shifting }" @keydown.shift="shiftDown" @keyup="clearShift">
-        <thead v-if="allowBulkActions || allowColumnPicker || visibleColumns.length > 1">
+        <thead v-if="allowBulkActions || visibleColumns.length > 1">
             <tr>
                 <th class="checkbox-column" v-if="allowBulkActions || reorderable">
                     <data-list-toggle-all ref="toggleAll" v-if="allowBulkActions && !singleSelect" />
@@ -25,9 +25,7 @@
                     <template v-if="type === 'entries'">{{ __('Collection') }}</template>
                     <template v-if="type === 'terms'">{{ __('Taxonomy') }}</template>
                 </th>
-                <th class="actions-column">
-                    <data-list-column-picker :preferences-key="columnPreferencesKey" v-if="allowColumnPicker" />
-                </th>
+                <th class="actions-column" />
             </tr>
         </thead>
         <sortable-list
@@ -124,13 +122,6 @@ export default {
             type: Boolean,
             default: false
         },
-        allowColumnPicker: {
-            type: Boolean,
-            default: false
-        },
-        columnPreferencesKey: {
-            type: String,
-        },
         type: {
             type: String
         },
diff --git a/resources/js/components/entries/Listing.vue b/resources/js/components/entries/Listing.vue
index 8ea523d365d..0e4de7b851e 100644
--- a/resources/js/components/entries/Listing.vue
+++ b/resources/js/components/entries/Listing.vue
@@ -17,16 +17,37 @@
         >
             <div slot-scope="{ hasSelections }">
                 <div class="card p-0 relative">
-                    <data-list-filter-presets
-                        v-if="!reordering"
-                        ref="presets"
-                        :active-preset="activePreset"
-                        :preferences-prefix="preferencesPrefix"
-                        @selected="selectPreset"
-                        @reset="filtersReset"
-                    />
-                    <div class="data-list-header" v-if="!reordering">
+                    <div class="flex items-center justify-between p-2 text-sm border-b">
+
+                        <data-list-search class="h-8" v-if="showFilters" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
+
+                        <data-list-filter-presets
+                            ref="presets"
+                            v-show="!reordering && ! showFilters"
+                            :active-preset="activePreset"
+                            :active-preset-payload="activePresetPayload"
+                            :active-filters="activeFilters"
+                            :has-active-filters="hasActiveFilters"
+                            :preferences-prefix="preferencesPrefix"
+                            :search-query="searchQuery"
+                            @selected="selectPreset"
+                            @reset="filtersReset"
+                            @hide-filters="filtersHide"
+                            @show-filters="filtersShow"
+                        />
+                        <div class="flex ml-2 space-x-2">
+                            <button class="btn py-1 px-2 h-8" v-text="__('Cancel')" v-show="showFilters" @click="filtersHide" />
+                            <button class="btn py-1 px-2 h-8" v-text="__('Save')" v-show="showFilters && isDirty" @click="$refs.presets.savePreset()" />
+                            <button class="btn flex items-center py-1 px-2 h-8 w-12" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls')">
+                                <svg-icon name="search" class="w-4 h-4" />
+                                <svg-icon name="filter-lines" class="w-4 h-4" />
+                            </button>
+                            <data-list-column-picker :preferences-key="preferencesKey('columns')" />
+                        </div>
+                    </div>
+                    <div v-show="!reordering && showFilters">
                         <data-list-filters
+                            ref="filters"
                             :filters="filters"
                             :active-preset="activePreset"
                             :active-preset-payload="activePresetPayload"
@@ -34,6 +55,7 @@
                             :active-filter-badges="activeFilterBadges"
                             :active-count="activeFilterCount"
                             :search-query="searchQuery"
+                            :is-searching="showFilters"
                             :saves-presets="true"
                             :preferences-prefix="preferencesPrefix"
                             @filter-changed="filterChanged"
@@ -61,8 +83,6 @@
                         :reorderable="reordering"
                         :sortable="!reordering"
                         :toggle-selection-on-row-click="true"
-                        :allow-column-picker="true"
-                        :column-preferences-key="preferencesKey('columns')"
                         @sorted="sorted"
                         @reordered="reordered"
                     >
@@ -76,7 +96,7 @@
                             <span class="font-mono text-2xs">{{ entry.slug }}</span>
                         </template>
                         <template slot="actions" slot-scope="{ row: entry, index }">
-                            <dropdown-list>
+                            <dropdown-list placement="bottom-start">
                                 <dropdown-item :text="__('View')" :external-link="entry.permalink" v-if="entry.viewable && entry.permalink" />
                                 <dropdown-item :text="__('Edit')" :redirect="entry.edit_url" v-if="entry.editable" />
                                 <div class="divider" v-if="entry.actions.length" />
@@ -101,7 +121,6 @@
                 />
             </div>
         </data-list>
-
     </div>
 </template>
 
@@ -215,7 +234,6 @@ export default {
                     this.$toast.error(__('Something went wrong'));
                 });
         },
-
     }
 
 }
diff --git a/resources/js/components/terms/Listing.vue b/resources/js/components/terms/Listing.vue
index 9e7c55e541e..bb18f09dcc9 100644
--- a/resources/js/components/terms/Listing.vue
+++ b/resources/js/components/terms/Listing.vue
@@ -17,15 +17,37 @@
         >
             <div slot-scope="{ hasSelections }">
                 <div class="card p-0 relative">
-                    <data-list-filter-presets
-                        ref="presets"
-                        :active-preset="activePreset"
-                        :preferences-prefix="preferencesPrefix"
-                        @selected="selectPreset"
-                        @reset="filtersReset"
-                    />
-                    <div class="data-list-header">
+                    <div class="flex items-center justify-between p-2 text-sm border-b">
+
+                        <data-list-search class="h-8" v-if="showFilters" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
+
+                        <data-list-filter-presets
+                            ref="presets"
+                            v-show="! showFilters"
+                            :active-preset="activePreset"
+                            :active-preset-payload="activePresetPayload"
+                            :active-filters="activeFilters"
+                            :has-active-filters="hasActiveFilters"
+                            :preferences-prefix="preferencesPrefix"
+                            :search-query="searchQuery"
+                            @selected="selectPreset"
+                            @reset="filtersReset"
+                            @hide-filters="filtersHide"
+                            @show-filters="filtersShow"
+                        />
+                        <div class="flex ml-2 space-x-2">
+                            <button class="btn py-1 px-2 h-8" v-text="__('Cancel')" v-show="showFilters" @click="filtersHide" />
+                            <button class="btn py-1 px-2 h-8" v-text="__('Save')" v-show="showFilters && isDirty" @click="$refs.presets.savePreset()" />
+                            <button class="btn flex items-center py-1 px-2 h-8" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls')">
+                                <svg-icon name="search" class="w-4 h-4" />
+                                <svg-icon name="filter-lines" class="w-4 h-4" />
+                            </button>
+                            <data-list-column-picker :preferences-key="preferencesKey('columns')" />
+                        </div>
+                    </div>
+                    <div v-show="showFilters">
                         <data-list-filters
+                            ref="filters"
                             :filters="filters"
                             :active-preset="activePreset"
                             :active-preset-payload="activePresetPayload"
@@ -33,6 +55,7 @@
                             :active-filter-badges="activeFilterBadges"
                             :active-count="activeFilterCount"
                             :search-query="searchQuery"
+                            :is-searching="showFilters"
                             :saves-presets="true"
                             :preferences-prefix="preferencesPrefix"
                             @filter-changed="filterChanged"
diff --git a/resources/js/components/users/Listing.vue b/resources/js/components/users/Listing.vue
index 98494f60642..2a494997364 100644
--- a/resources/js/components/users/Listing.vue
+++ b/resources/js/components/users/Listing.vue
@@ -1,4 +1,4 @@
-    <template>
+<template>
     <div>
 
         <div v-if="initializing" class="card loading">
@@ -8,16 +8,63 @@
         <data-list
             v-if="!initializing"
             ref="dataList"
-            :columns="columns"
             :rows="items"
+            :columns="columns"
             :sort="false"
             :sort-column="sortColumn"
             :sort-direction="sortDirection"
         >
             <div slot-scope="{ hasSelections }">
                 <div class="card p-0 relative">
-                    <div class="data-list-header">
-                        <data-list-search v-model="searchQuery" />
+                    <div class="flex items-center justify-between p-2 text-sm border-b">
+
+                        <data-list-search class="h-8" v-if="showFilters" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
+
+                        <data-list-filter-presets
+                            ref="presets"
+                            v-show="! showFilters"
+                            :active-preset="activePreset"
+                            :active-preset-payload="activePresetPayload"
+                            :active-filters="activeFilters"
+                            :has-active-filters="hasActiveFilters"
+                            :preferences-prefix="preferencesPrefix"
+                            :search-query="searchQuery"
+                            @selected="selectPreset"
+                            @reset="filtersReset"
+                            @hide-filters="filtersHide"
+                            @show-filters="filtersShow"
+                        />
+                        <div class="flex ml-2 space-x-2">
+                            <button class="btn py-1 px-2 h-8" v-text="__('Cancel')" v-show="showFilters" @click="filtersHide" />
+                            <button class="btn py-1 px-2 h-8" v-text="__('Save')" v-show="showFilters && isDirty" @click="$refs.presets.savePreset()" />
+                            <button class="btn flex items-center py-1 px-2 h-8" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls')">
+                                <svg-icon name="search" class="w-4 h-4" />
+                                <svg-icon name="filter-lines" class="w-4 h-4" />
+                            </button>
+                            <data-list-column-picker :preferences-key="preferencesKey('columns')" />
+                        </div>
+                    </div>
+
+                   <div v-show="showFilters">
+                        <data-list-filters
+                            ref="filters"
+                            :filters="filters"
+                            :active-preset="activePreset"
+                            :active-preset-payload="activePresetPayload"
+                            :active-filters="activeFilters"
+                            :active-filter-badges="activeFilterBadges"
+                            :active-count="activeFilterCount"
+                            :search-query="searchQuery"
+                            :is-searching="showFilters"
+                            :saves-presets="true"
+                            :preferences-prefix="preferencesPrefix"
+                            @filter-changed="filterChanged"
+                            @search-changed="searchChanged"
+                            @saved="$refs.presets.setPreset($event)"
+                            @deleted="$refs.presets.refreshPresets()"
+                            @restore-preset="$refs.presets.viewPreset($event)"
+                            @reset="filtersReset"
+                        />
                     </div>
 
                     <div v-show="items.length === 0" class="p-6 text-center text-gray-500" v-text="__('No results')" />
diff --git a/resources/svg/add-bold.svg b/resources/svg/add-bold.svg
new file mode 100644
index 00000000000..e80b757a94e
--- /dev/null
+++ b/resources/svg/add-bold.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" d="M7 1V13"></path><path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" d="M13 7L1 7"></path></svg>
diff --git a/resources/svg/filter-lines.svg b/resources/svg/filter-lines.svg
new file mode 100644
index 00000000000..fd038eba0e3
--- /dev/null
+++ b/resources/svg/filter-lines.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.51001 12.2115H9.48992"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.18237 8.73718H10.8177"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.89697 5.26282H12.1031"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M0.80957 1.78848H13.1904"></path></svg>
\ No newline at end of file
diff --git a/src/Auth/UserRepository.php b/src/Auth/UserRepository.php
index 5262f7db0bd..2f09ba0c5b7 100644
--- a/src/Auth/UserRepository.php
+++ b/src/Auth/UserRepository.php
@@ -64,8 +64,8 @@ public function blueprint()
         $blueprint->ensureField('email', ['type' => 'text', 'input_type' => 'email', 'display' => 'Email Address', 'listable' => true]);
 
         if (Statamic::pro()) {
-            $blueprint->ensureField('roles', ['type' => 'user_roles', 'mode' => 'select', 'width' => 50, 'listable' => true]);
-            $blueprint->ensureField('groups', ['type' => 'user_groups', 'mode' => 'select', 'width' => 50, 'listable' => true]);
+            $blueprint->ensureField('roles', ['type' => 'user_roles', 'mode' => 'select', 'width' => 50, 'listable' => true, 'filterable' => false]);
+            $blueprint->ensureField('groups', ['type' => 'user_groups', 'mode' => 'select', 'width' => 50, 'listable' => true, 'filterable' => false]);
         } else {
             $blueprint->removeField('roles');
             $blueprint->removeField('groups');
diff --git a/src/Console/Commands/stubs/filter.php.stub b/src/Console/Commands/stubs/filter.php.stub
index c8c669807fa..170767bfc3d 100644
--- a/src/Console/Commands/stubs/filter.php.stub
+++ b/src/Console/Commands/stubs/filter.php.stub
@@ -6,13 +6,6 @@ use Statamic\Query\Scopes\Filter;
 
 class DummyClass extends Filter
 {
-    /**
-     * Pin the filter.
-     *
-     * @var bool
-     */
-    public $pinned = false;
-
     /**
      * Define the filter's title.
      *
diff --git a/src/Http/Controllers/CP/Users/UsersController.php b/src/Http/Controllers/CP/Users/UsersController.php
index 53edab1d588..e5d8180b634 100644
--- a/src/Http/Controllers/CP/Users/UsersController.php
+++ b/src/Http/Controllers/CP/Users/UsersController.php
@@ -69,7 +69,9 @@ protected function json($request)
             ? UserGroup::find($request->group)->queryUsers()
             : $this->indexQuery();
 
-        $activeFilterBadges = $this->queryFilters($query, $request->filters);
+        $activeFilterBadges = $this->queryFilters($query, $request->filters, [
+            'blueprints' => ['user'],
+        ]);
 
         $users = $query
             ->orderBy(request('sort', 'email'), request('order', 'asc'))
diff --git a/src/Query/Scopes/Filter.php b/src/Query/Scopes/Filter.php
index 4a3c685861d..0d50d997918 100644
--- a/src/Query/Scopes/Filter.php
+++ b/src/Query/Scopes/Filter.php
@@ -11,7 +11,6 @@ abstract class Filter extends Scope implements Arrayable
     use HasTitle, HasFields;
 
     protected $context = [];
-    protected $pinned = false;
 
     public function visibleTo($key)
     {
@@ -59,7 +58,6 @@ public function toArray()
             'handle' => $this->handle(),
             'title' => $this->title(),
             'extra' => $this->extra(),
-            'pinned' => $this->pinned(),
             'auto_apply' => $this->autoApply(),
             'fields' => $this->fields()->toPublishArray(),
             'meta' => $this->fields()->meta(),
diff --git a/src/Query/Scopes/Filters/Fields.php b/src/Query/Scopes/Filters/Fields.php
index 69aa3fd22b0..3de57154fcd 100644
--- a/src/Query/Scopes/Filters/Fields.php
+++ b/src/Query/Scopes/Filters/Fields.php
@@ -2,8 +2,10 @@
 
 namespace Statamic\Query\Scopes\Filters;
 
+use Statamic\Facades\Blueprint;
 use Statamic\Facades\Collection;
 use Statamic\Facades\Taxonomy;
+use Statamic\Facades\User;
 use Statamic\Query\Scopes\Filter;
 use Statamic\Support\Arr;
 
@@ -59,7 +61,7 @@ public function badge($values)
 
     public function visibleTo($key)
     {
-        return in_array($key, ['entries', 'entries-fieldtype', 'terms']);
+        return in_array($key, ['entries', 'entries-fieldtype', 'terms', 'users']);
     }
 
     protected function getFields()
@@ -87,6 +89,14 @@ protected function getBlueprints()
             });
         }
 
+        if (isset($this->context['blueprints'])) {
+            return collect($this->context['blueprints'])->map(function ($handle) {
+                return $handle === 'user'
+                    ? User::blueprint()
+                    : Blueprint::find($handle);
+            });
+        }
+
         return collect();
     }
 }
diff --git a/src/Query/Scopes/Filters/Site.php b/src/Query/Scopes/Filters/Site.php
index 5e5ad092108..ceb3368517c 100644
--- a/src/Query/Scopes/Filters/Site.php
+++ b/src/Query/Scopes/Filters/Site.php
@@ -7,8 +7,6 @@
 
 class Site extends Filter
 {
-    protected $pinned = true;
-
     public static function title()
     {
         return __('Site');
diff --git a/src/Query/Scopes/Filters/Status.php b/src/Query/Scopes/Filters/Status.php
index d0ab3c540aa..ff0688d8ddb 100644
--- a/src/Query/Scopes/Filters/Status.php
+++ b/src/Query/Scopes/Filters/Status.php
@@ -7,8 +7,6 @@
 
 class Status extends Filter
 {
-    public $pinned = true;
-
     public static function title()
     {
         return __('Status');
diff --git a/src/Query/Scopes/Filters/UserGroup.php b/src/Query/Scopes/Filters/UserGroup.php
index 2f5de3edcd4..360b34c1d1d 100644
--- a/src/Query/Scopes/Filters/UserGroup.php
+++ b/src/Query/Scopes/Filters/UserGroup.php
@@ -25,7 +25,7 @@ public function fieldItems()
 
     public function apply($query, $values)
     {
-        $query->where('group', $values['group']);
+        $query->where('groups/'.$values['group'], true);
     }
 
     public function badge($values)
diff --git a/src/Query/Scopes/Filters/UserRole.php b/src/Query/Scopes/Filters/UserRole.php
index 653cde5b5bb..71a3a77a490 100644
--- a/src/Query/Scopes/Filters/UserRole.php
+++ b/src/Query/Scopes/Filters/UserRole.php
@@ -25,7 +25,11 @@ public function fieldItems()
 
     public function apply($query, $values)
     {
-        $query->where('role', $values['role']);
+        if ($values['role'] === 'super') {
+            $query->where('super', true);
+        } else {
+            $query->where('roles/'.$values['role'], true);
+        }
     }
 
     public function badge($values)
diff --git a/src/Stache/Indexes/Users/Role.php b/src/Stache/Indexes/Users/Role.php
new file mode 100644
index 00000000000..1fe813b3a46
--- /dev/null
+++ b/src/Stache/Indexes/Users/Role.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace Statamic\Stache\Indexes\Users;
+
+use Statamic\Stache\Indexes\Value;
+use Statamic\Support\Str;
+
+class Role extends Value
+{
+    public function getItemValue($item)
+    {
+        $role = Str::after($this->name(), 'roles/');
+
+        return $item->hasRole($role);
+    }
+}
diff --git a/src/Stache/Stores/UsersStore.php b/src/Stache/Stores/UsersStore.php
index fad18ba261c..e0c563f8dd6 100644
--- a/src/Stache/Stores/UsersStore.php
+++ b/src/Stache/Stores/UsersStore.php
@@ -2,20 +2,30 @@
 
 namespace Statamic\Stache\Stores;
 
+use Statamic\Facades\Role as UserRole;
 use Statamic\Facades\User;
 use Statamic\Facades\UserGroup;
 use Statamic\Facades\YAML;
 use Statamic\Stache\Indexes\Users\Group;
+use Statamic\Stache\Indexes\Users\Role;
 
 class UsersStore extends BasicStore
 {
     protected function storeIndexes()
     {
-        return UserGroup::all()->mapWithKeys(function ($group) {
+        $groups = UserGroup::all()->mapWithKeys(function ($group) {
             return ['groups/'.$group->handle() => Group::class];
-        })
-        ->push('email')
-        ->all();
+        });
+
+        $roles = UserRole::all()->mapWithKeys(function ($role) {
+            return ['roles/'.$role->handle() => Role::class];
+        });
+
+        return collect()
+            ->merge($groups)
+            ->merge($roles)
+            ->push('email')
+            ->all();
     }
 
     protected $groups = [];
diff --git a/tests/Auth/FileUserTest.php b/tests/Auth/FileUserTest.php
index 2f42f84d34e..2fe2893628b 100644
--- a/tests/Auth/FileUserTest.php
+++ b/tests/Auth/FileUserTest.php
@@ -101,6 +101,7 @@ public function it_gets_permissions_from_a_cache()
 
         Role::shouldReceive('find')->with('direct')->andReturn($directRole);
         UserGroup::shouldReceive('find')->with('usergroup')->andReturn($userGroup);
+        Role::shouldReceive('all')->andReturn(collect([$directRole]));     // the stache calls this when getting a user. unrelated to test.
         UserGroup::shouldReceive('all')->andReturn(collect([$userGroup])); // the stache calls this when getting a user. unrelated to test.
 
         $user = $this->createPermissible()
diff --git a/tests/Auth/PermissibleContractTests.php b/tests/Auth/PermissibleContractTests.php
index aa4be51a76d..d0352cf13c5 100644
--- a/tests/Auth/PermissibleContractTests.php
+++ b/tests/Auth/PermissibleContractTests.php
@@ -51,6 +51,7 @@ public function handle(string $handle = null)
         RoleAPI::shouldReceive('find')->with('c')->andReturn($roleC);
         RoleAPI::shouldReceive('find')->with('d')->andReturn($roleD);
         RoleAPI::shouldReceive('find')->with('unknown')->andReturnNull();
+        RoleAPI::shouldReceive('all')->andReturn(collect([$roleA, $roleB, $roleC, $roleD])); // the stache calls this when getting a user. unrelated to test.
 
         $user = $this->createPermissible();
         $this->assertInstanceOf(Collection::class, $user->roles());
@@ -108,6 +109,7 @@ public function handle(string $handle = null)
 
         RoleAPI::shouldReceive('find')->with('b')->andReturn($roleB);
         RoleAPI::shouldReceive('find')->with('c')->andReturn($roleC);
+        RoleAPI::shouldReceive('all')->andReturn(collect([$roleA, $roleB, $roleC, $roleD])); // the stache calls this when getting a user. unrelated to test.
 
         $user = $this->createPermissible()->assignRole([$roleA, $roleB, $roleC, $roleD]);
 
@@ -138,6 +140,7 @@ public function handle(string $handle = null)
         };
 
         RoleAPI::shouldReceive('find')->with('a')->andReturn($roleA);
+        RoleAPI::shouldReceive('all')->andReturn(collect([$roleA])); // the stache calls this when getting a user. unrelated to test.
 
         $user = $this->createPermissible();
 
@@ -172,6 +175,7 @@ public function it_gets_and_checks_permissions()
 
         RoleAPI::shouldReceive('find')->with('direct')->andReturn($directRole);
         UserGroupAPI::shouldReceive('find')->with('usergroup')->andReturn($userGroup);
+        RoleAPI::shouldReceive('all')->andReturn(collect([$directRole]));     // the stache calls this when getting a user. unrelated to test.
         UserGroupAPI::shouldReceive('all')->andReturn(collect([$userGroup])); // the stache calls this when getting a user. unrelated to test.
 
         $nonSuperUser = $this->createPermissible()
@@ -255,6 +259,7 @@ public function permissions($permissions = null)
         RoleAPI::shouldReceive('find')->with('nonsuperrole')->andReturn($nonSuperRole);
         UserGroupAPI::shouldReceive('find')->with('supergroup')->andReturn($superGroup);
         UserGroupAPI::shouldReceive('find')->with('nonsupergroup')->andReturn($nonSuperGroup);
+        RoleAPI::shouldReceive('all')->andReturn(collect([$superRole, $nonSuperRole]));        // the stache calls this when getting a user. unrelated to test.
         UserGroupAPI::shouldReceive('all')->andReturn(collect([$superGroup, $nonSuperGroup])); // the stache calls this when getting a user. unrelated to test.
 
         $superUserThroughRole = $this->createPermissible()->assignRole($superRole)->save();

From 41c85f8ac13444d17011a789b52c68a192a8d406 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Tue, 7 Mar 2023 15:28:42 -0500
Subject: [PATCH 08/32] Ensure you can delete a select option

---
 resources/js/components/inputs/relationship/SelectField.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/inputs/relationship/SelectField.vue b/resources/js/components/inputs/relationship/SelectField.vue
index 4e1a61d8a7d..6906a232eaa 100644
--- a/resources/js/components/inputs/relationship/SelectField.vue
+++ b/resources/js/components/inputs/relationship/SelectField.vue
@@ -38,7 +38,7 @@
                     item-class="sortable-item"
                     handle-class="sortable-item"
                     :value="items"
-                    :delay="0"
+                    :delay="75"
                     @input="input"
                 >
                     <div class="vs__selected-options-outside flex flex-wrap">

From 5314bfb7d1346642dffa90f410daae9a664c80d3 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Thu, 9 Mar 2023 16:56:55 -0500
Subject: [PATCH 09/32] [4.x] Way Better Listings (DataTables) (#7676)

* Make Status its own column

Co-Authored-By: Jason Varga <jason@pixelfear.com>

* Greatly improve the data-tables UI in every way

- titles will wrap to 2 lines max, will show the status dot if there's no status field shown
- relationship fields have a new little badge style and will truncate to each on one line
- content fields get smaller text and wrap to 2 lines max
- new status column
- title fields have a reasonable min-width set because they're important
- title fields will still show the status dot if the status column isn't visible
- date fields will no longer wrap to two lines
- wide tables will scroll horizontally instead of overflow, keeping the checkbox and actions columns in view at all times

* Refresh the ColumnPicker UI

* Apply fixes from StyleCI

---------

Co-authored-by: Jason Varga <jason@pixelfear.com>
Co-authored-by: StyleCI Bot <bot@styleci.io>
---
 package-lock.json                             |  10 ++
 package.json                                  |   1 +
 resources/css/components/column-picker.css    |  11 +-
 resources/css/components/popover.css          |  35 ++--
 resources/css/elements/tables.css             | 155 ++++++++++++++----
 resources/js/components/DropdownList.vue      |   9 +-
 resources/js/components/Popover.vue           |  21 ++-
 .../js/components/collections/Listing.vue     |   4 +-
 .../js/components/data-list/ColumnPicker.vue  |  35 ++--
 resources/js/components/data-list/Filters.vue |   4 +-
 resources/js/components/data-list/Table.vue   |  23 ++-
 .../js/components/data-list/ToggleAll.vue     |   2 +-
 resources/js/components/entries/Listing.vue   | 109 +++++++-----
 .../RelationshipIndexFieldtype.vue            |  14 +-
 .../js/components/taxonomies/Listing.vue      |   2 +-
 resources/js/components/terms/Listing.vue     |   4 +-
 resources/js/components/users/Listing.vue     |   2 +-
 resources/lang/en/messages.php                |   3 +
 .../CP/Collections/CollectionsController.php  |   5 +
 src/Http/Resources/CP/Entries/Entries.php     |   9 +
 src/Http/Resources/CP/Entries/ListedEntry.php |  11 +-
 tailwind.config.js                            |   5 +
 22 files changed, 328 insertions(+), 146 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 88ec712a068..53e5993d735 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -85,6 +85,7 @@
         "@babel/preset-env": "^7.20.2",
         "@rollup/plugin-inject": "^5.0.3",
         "@tailwindcss/container-queries": "^0.1.0",
+        "@tailwindcss/line-clamp": "^0.4.2",
         "@tailwindcss/typography": "^0.5.9",
         "@vitejs/plugin-vue2": "^2.2.0",
         "autoprefixer": "^10.4.0",
@@ -4053,6 +4054,15 @@
         "tailwindcss": ">=3.2.0"
       }
     },
+    "node_modules/@tailwindcss/line-clamp": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz",
+      "integrity": "sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==",
+      "dev": true,
+      "peerDependencies": {
+        "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
+      }
+    },
     "node_modules/@tailwindcss/typography": {
       "version": "0.5.9",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz",
diff --git a/package.json b/package.json
index 8cec9155431..5ba57538251 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "@babel/preset-env": "^7.20.2",
     "@rollup/plugin-inject": "^5.0.3",
     "@tailwindcss/container-queries": "^0.1.0",
+    "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.9",
     "@vitejs/plugin-vue2": "^2.2.0",
     "autoprefixer": "^10.4.0",
diff --git a/resources/css/components/column-picker.css b/resources/css/components/column-picker.css
index 7f1061743d8..e7828b6d122 100644
--- a/resources/css/components/column-picker.css
+++ b/resources/css/components/column-picker.css
@@ -3,17 +3,10 @@
 }
 
 .column-picker-item {
-    @apply bg-white text-sm outline-none flex items-center rounded select-none;
-    padding: 4px 8px;
-    margin: -1px 0;
+    @apply text-sm outline-none flex items-center select-none h-full;
 
     &.sortable {
-        cursor: grab;
-
-        label {
-            cursor: grab;
-        }
-
+        @apply rounded bg-white border;
         &:hover  {
             @apply bg-gray-200;
         }
diff --git a/resources/css/components/popover.css b/resources/css/components/popover.css
index d17c12772f0..9fb3c471052 100644
--- a/resources/css/components/popover.css
+++ b/resources/css/components/popover.css
@@ -34,11 +34,27 @@
     position: relative;
 }
 
+/*  When open */
+.popover-open {
+    .popover {
+        pointer-events: auto;
+        visibility: visible;
+    }
+
+    .popover-content {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    .rotating-dots {
+        transform: rotate(90deg);
+    }
+}
+
 /*  Supporting elements */
 .rotating-dots {
     @apply relative cursor-pointer;
     transition: .12s ease-out;
-    /*  top: 1px; */
 }
 
 .rotating-dots-button {
@@ -54,20 +70,3 @@
         @apply focus-outline;
     }
 }
-
-/*  When open */
-.popover-open {
-    .popover {
-        pointer-events: auto;
-        visibility: visible;
-    }
-
-    .popover-content {
-        transform: scale(1);
-        opacity: 1;
-    }
-
-    .rotating-dots {
-        transform: rotate(90deg);
-    }
-}
diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css
index 721e009095b..a625df7aa78 100644
--- a/resources/css/elements/tables.css
+++ b/resources/css/elements/tables.css
@@ -44,49 +44,49 @@
 		}
 
         th {
-            @apply font-medium px-4 py-2;
+            @apply font-medium px-4 py-3 whitespace-nowrap;
             &:first-child { @apply rounded-tl-lg; }
 			&:last-child { @apply rounded-tr-lg; }
 			&:hover {
 				@apply text-gray-900;
 			}
 		}
+        th.handle-column {
+            @apply p-0 w-4;
+        }
 		.type-column {
 			text-align: right;
 		}
-		.actions-column {
-			@apply p-0 pr-4 text-right;
-			width: 24px;
-		}
 	}
 
     tbody {
 		outline: none;
         tr {
-			@apply border-b text-sm;
+			@apply border-b border-gray-400 text-sm;
 
 			&.row-selected {
 				@apply bg-gray-200;
 			}
 
 			&:first-child {
-				td:first-child {
-				    @apply rounded-tl;
+				td:first-child, th:first-child {
+				    @apply rounded-tl-md;
 				}
 
-				td:last-child {
-				    @apply rounded-tr;
+				td:last-child, th:last-child {
+				    @apply rounded-tr-md;
 				}
 			}
 
 			&:last-child {
 				@apply border-none;
-				td:first-child {
-				    @apply rounded-bl;
+
+                td:first-child, th:first-child {
+				    @apply rounded-bl-md;
 				}
 
-				td:last-child {
-				    @apply rounded-br;
+				td:last-child, th:last-child {
+				    @apply rounded-br-md;
 				}
 			}
 
@@ -99,25 +99,19 @@
             }
 
             td {
-                @apply py-2 px-4 break-words;
+                @apply py-2 px-4 break-words ;
+            }
+
+            td.table-drag-handle {
+                @apply w-1 border-r h-full py-2 px-0;
             }
 		}
-		.type-column {
+
+        .type-column {
 			text-align: right;
 		}
-		.actions-column {
-			@apply p-0 text-right;
-			width: 24px;
-			.rotating-dots-button {
-				margin-right: 18px;
-			}
-		}
     }
 
-    .checkbox-column {
-		@apply w-4 pr-0 relative z-10;
-		padding-left: 20px;
-    }
 
     .sortable-column {
         @apply cursor-pointer select-none;
@@ -148,11 +142,67 @@
     }
 }
 
-@screen md {
+/* Sticky Meta Columns */
+.data-table {
+    thead th.checkbox-column {
+        @apply p-0 pr-2 z-10 sticky -left-px;
+        background-image: linear-gradient(to right, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+        width: 45px;
+        min-width: 45px;
+    }
+
+    thead th.actions-column {
+        @apply p-0 pl-2 text-right sticky z-1 -right-px;
+        background-image: linear-gradient(to left, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+        width: 45px;
+        min-width: 45px;
+    }
+
+    tbody th.checkbox-column {
+        @apply z-1 px-3 sticky -left-px;
+        background-image: linear-gradient(to right, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
+    }
+
+    tbody th.actions-column {
+        @apply p-0 pl-4 text-right sticky -right-px z-1;
+        background-image: linear-gradient(to left, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
+        min-width: 45px;
+        width: 45px;
+    }
+
+    tbody tr.row-selected .checkbox-column {
+        background-image: linear-gradient(to left, theme(colors.gray.200) 70%, theme(colors.gray.200 / 0%) 100%);
+    }
+
+    tbody tr.row-selected .actions-column {
+        background-image: linear-gradient(to right, theme(colors.gray.200) 70%, theme(colors.gray.200 / 0%) 100%);
+    }
+
+    tbody tr:hover .checkbox-column {
+        background-image: linear-gradient(to right, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+    }
+
+    tbody tr:hover .actions-column {
+        background-image: linear-gradient(to left, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+    }
+}
+
+/* .data-table[data-size="sm"] {
+    thead th.checkbox-column,
+    thead th.actions-column,
+    tbody th.checkbox-column,
+    tbody th.actions-column {
+        position: static !important;
+        background: none !important;
+    }
+} */
+
+
+/* @screen md {
 	.data-table {
 		@apply w-full table;
 	}
-}
+} */
 
 .data-list-header ~ .data-table {
     thead th {
@@ -259,3 +309,50 @@ table.control {
         padding-left: 30px;
     }
 }
+
+
+/* Index Fields
+  ========================================================================== */
+
+.bard-index-field,
+.code-index-field,
+.markdown-index-field,
+.text-index-field,
+.textarea-index-field {
+    @apply line-clamp-2 text-xs;
+}
+
+.title-index-field {
+    @apply line-clamp-2;
+    min-width: 10vw;
+}
+
+.relationship-index-field {
+    min-width: 10vw;
+    .relationship-index-field-item {
+        @apply rounded bg-gray-100 border px-1 flex items-center text-2xs;
+        a {
+            @apply line-clamp-1;
+        }
+    }
+}
+
+.date-index-field {
+    @apply whitespace-nowrap text-gray-800;
+}
+
+.slug-index-field {
+    @apply line-clamp-2 font-mono text-2xs;
+}
+
+.status-index-field {
+    @apply inline-block text-xs bg-gray-300 text-gray-800 shrink rounded-full px-2 py-0.5 text-center justify-center;
+
+    &.status-published:not(.status-private) {
+        @apply text-lime-900 bg-lime-200 ;
+    }
+
+    &.status-scheduled {
+        @apply text-amber-900 bg-amber-200;
+    }
+}
diff --git a/resources/js/components/DropdownList.vue b/resources/js/components/DropdownList.vue
index 576061d93f6..6fd4b0e2786 100644
--- a/resources/js/components/DropdownList.vue
+++ b/resources/js/components/DropdownList.vue
@@ -1,5 +1,5 @@
 <template>
-    <popover class="dropdown-list" :disabled="disabled" :placement="placement" :scroll="scroll" :autoclose="autoclose">
+    <popover class="dropdown-list" :disabled="disabled" :placement="placement" :scroll="scroll" :autoclose="autoclose" :strategy="strategy">
         <template #trigger>
             <slot name="trigger">
                 <button class="rotating-dots-button" :aria-label="__('Open Dropdown')">
@@ -20,7 +20,7 @@ export default {
         },
         placement: {
             type: String,
-            default: 'bottom'
+            default: 'bottom-end'
         },
         scroll: {
             type: Boolean,
@@ -30,6 +30,11 @@ export default {
             type: Boolean,
             default: false
         }
+    },
+    computed: {
+        strategy() {
+            return this.scroll ? 'fixed' : 'absolute';
+        }
     }
 }
 </script>
diff --git a/resources/js/components/Popover.vue b/resources/js/components/Popover.vue
index 4dcf1a27aa9..75205771507 100644
--- a/resources/js/components/Popover.vue
+++ b/resources/js/components/Popover.vue
@@ -20,26 +20,30 @@ export default {
     mixins: [ clickaway ],
 
     props: {
-        disabled: {
+        autoclose: {
             type: Boolean,
             default: false
         },
-        placement: {
-            type: String,
-            default: 'bottom',
+        disabled: {
+            type: Boolean,
+            default: false
         },
         offset: {
             type: Array,
             default: () => [0, 10]
         },
+        placement: {
+            type: String,
+            default: 'bottom-end',
+        },
         scroll: {
             type: Boolean,
             default: false
         },
-        autoclose: {
-            type: Boolean,
-            default: false
-        }
+        strategy: {
+            type: String,
+            default: 'absolute'
+        },
     },
 
     data() {
@@ -63,6 +67,7 @@ export default {
         bindPopper() {
             this.popper = createPopper(this.$refs.trigger, this.$refs.popover, {
                 placement: this.placement,
+                strategy: this.strategy,
                 modifiers: [
                     {
                         name: 'offset',
diff --git a/resources/js/components/collections/Listing.vue b/resources/js/components/collections/Listing.vue
index ab2f45da8a2..265933f1a9b 100644
--- a/resources/js/components/collections/Listing.vue
+++ b/resources/js/components/collections/Listing.vue
@@ -1,12 +1,12 @@
 <template>
     <data-list ref="dataList" :columns="columns" :rows="rows">
-        <div class="card p-0" slot-scope="{ filteredRows: rows }">
+        <div class="card overflow-hidden p-0" slot-scope="{ filteredRows: rows }">
             <data-list-table :rows="rows">
                 <template slot="cell-title" slot-scope="{ row: collection }">
                     <a :href="collection.entries_url">{{ collection.title }}</a>
                 </template>
                 <template slot="actions" slot-scope="{ row: collection, index }">
-                    <dropdown-list>
+                    <dropdown-list scroll placement="left-start">
                         <dropdown-item :text="__('View')" :redirect="collection.entries_url" />
                         <dropdown-item v-if="collection.url" :text="__('Visit URL')" :external-link="collection.url"  />
                         <dropdown-item v-if="collection.editable" :text="__('Edit Collection')" :redirect="collection.edit_url" />
diff --git a/resources/js/components/data-list/ColumnPicker.vue b/resources/js/components/data-list/ColumnPicker.vue
index 3015e3b5849..dd37ad9fc3a 100644
--- a/resources/js/components/data-list/ColumnPicker.vue
+++ b/resources/js/components/data-list/ColumnPicker.vue
@@ -1,5 +1,5 @@
 <template>
-    <popover ref="popover">
+    <popover ref="popover" scroll strategy="fixed">
 
         <template slot="trigger">
             <button
@@ -10,32 +10,35 @@
             </button>
         </template>
 
-        <div class="column-picker">
+        <div class="column-picker rounded-t-md bg-gray-100 w-64">
+            <header v-text="__('Displayed Columns')" class="border-b px-2 py-2 text-sm bg-white rounded-t-md font-medium"/>
             <sortable-list
                 v-model="selectedColumns"
                 :vertical="true"
-                item-class="column-picker-item"
-                handle-class="column-picker-item"
+                item-class="item"
+                handle-class="item"
                 append-to=".popover-content"
             >
-                <div class="outline-none text-left px-2 py-2">
-                    <h6 v-text="__('Displayed Columns')" class="p-2"/>
-                    <div class="column-picker-item sortable" v-for="column in selectedColumns" :key="column.field">
-                        <label>
+                <div class="flex flex-col space-y-1 px-2 p-3 select-none">
+                    <div class="item sortable cursor-grab" v-for="column in selectedColumns" :key="column.field">
+                        <div class="item-move py-1">&nbsp;</div>
+                        <div class="flex flex-1 ml-2 items-center p-0">
                             <input type="checkbox" class="mr-2" v-model="column.visible" @change="columnToggled(column)" :disabled="selectedColumns.length === 1" />
                             {{ column.label }}
-                        </label>
+                        </div>
                     </div>
                 </div>
             </sortable-list>
 
-            <div v-if="hiddenColumns.length" class="outline-none text-left px-2 pb-2">
-                <h6 v-text="__('Available Columns')" class="px-2 pb-2"/>
-                <div class="column-picker-item" v-for="column in hiddenColumns" :key="column.field">
-                    <label class="cursor-pointer">
-                        <input type="checkbox" class="mr-2" v-model="column.visible" @change="columnToggled(column) "/>
-                        {{ column.label }}
-                    </label>
+            <div v-if="hiddenColumns.length" class="outline-none text-left">
+                <header v-text="__('Available Columns')" class="border-y px-2 py-2 text-sm bg-white font-medium"/>
+                <div class="flex flex-col space-y-1 py-2 px-3 select-none">
+                    <div class="column-picker-item" v-for="column in hiddenColumns" :key="column.field">
+                        <label class="flex items-center cursor-pointer">
+                            <input type="checkbox" class="mr-2" v-model="column.visible" @change="columnToggled(column) "/>
+                            {{ column.label }}
+                        </label>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/resources/js/components/data-list/Filters.vue b/resources/js/components/data-list/Filters.vue
index b7eb311adf2..a56697e61d3 100644
--- a/resources/js/components/data-list/Filters.vue
+++ b/resources/js/components/data-list/Filters.vue
@@ -3,7 +3,7 @@
         <div class="flex flex-wrap px-3 border-b pt-2">
 
             <!-- Field filter (requires custom selection UI) -->
-            <popover v-if="fieldFilter">
+            <popover v-if="fieldFilter" scroll strategy="fixed">
                 <template slot="trigger">
                     <button class="filter-badge filter-badge-control mr-2 mb-2" @click="resetFilterPopover">
                         {{ __('Field') }}
@@ -39,7 +39,7 @@
             </popover>
 
             <!-- Standard non-field filters -->
-            <popover v-if="standardFilters.length" v-for="filter in standardFilters" :key="filter.handle">
+            <popover v-if="standardFilters.length" v-for="filter in standardFilters" :key="filter.handle" scroll strategy="fixed">
                 <template slot="trigger">
                     <button class="filter-badge filter-badge-control mr-2 mb-2">
                         {{ filter.title }}
diff --git a/resources/js/components/data-list/Table.vue b/resources/js/components/data-list/Table.vue
index 55917186d0b..ff90ff81bdc 100644
--- a/resources/js/components/data-list/Table.vue
+++ b/resources/js/components/data-list/Table.vue
@@ -1,8 +1,8 @@
 <template>
-    <table ref="table" tabindex="0" class="data-table" :class="{ 'opacity-50': loading, 'select-none' : shifting }" @keydown.shift="shiftDown" @keyup="clearShift">
+    <table :data-size="relativeColumnsSize" ref="table" tabindex="0" class="data-table" :class="{ 'select-none' : shifting }" @keydown.shift="shiftDown" @keyup="clearShift">
         <thead v-if="allowBulkActions || visibleColumns.length > 1">
             <tr>
-                <th class="checkbox-column" v-if="allowBulkActions || reorderable">
+                <th :class="{'checkbox-column': ! reorderable, 'handle-column': reorderable}" v-if="allowBulkActions || reorderable">
                     <data-list-toggle-all ref="toggleAll" v-if="allowBulkActions && !singleSelect" />
                 </th>
                 <th
@@ -14,10 +14,11 @@
                         'cursor-not-allowed': !sortable,
                         'text-right pr-8': column.numeric,
                     }"
+                    class="group"
                     @click.prevent="changeSortColumn(column.field)"
                 >
                     <span v-text="column.label" />
-                    <svg v-if="sharedState.sortColumn === column.field" :class="sharedState.sortDirection" height="8" width="8" viewBox="0 0 10 6.5" class="ml-1">
+                    <svg :class="[sharedState.sortDirection, {'opacity-100 pointer-events-none': sharedState.sortColumn === column.field}]" height="8" width="8" viewBox="0 0 10 6.5" class="ml-1 opacity-0 group-hover:opacity-100">
                         <path d="M9.9,1.4L5,6.4L0,1.4L1.4,0L5,3.5L8.5,0L9.9,1.4z" fill="currentColor"/>
                     </svg>
                 </th>
@@ -39,7 +40,7 @@
             <slot name="tbody-start" />
             <tr v-for="(row, index) in rows" :key="row.id" class="sortable-row outline-none" :class="{'row-selected': sharedState.selections.includes(row.id)}">
                 <td class="table-drag-handle" v-if="reorderable"></td>
-                <td class="checkbox-column" v-if="allowBulkActions && !reorderable">
+                <th class="checkbox-column" v-if="allowBulkActions && !reorderable">
                     <input
                         v-if="!reorderable"
                         type="checkbox"
@@ -49,7 +50,7 @@
                         :id="`checkbox-${row.id}`"
                         @click="checkboxClicked(row, index, $event)"
                     />
-                </td>
+                </th>
                 <td v-for="column in visibleColumns" :key="column.field" @click="rowClicked(row, index, $event)" :width="column.width" :class="{'text-right pr-8': column.numeric}">
                     <slot
                         :name="`cell-${column.field}`"
@@ -69,14 +70,14 @@
                         <template v-if="type === 'terms'">{{ row.taxonomy.title }}</template>
                     </span>
                 </td>
-                <td class="actions-column">
+                <th class="actions-column">
                     <slot
                         name="actions"
                         :row="row"
                         :index="actualIndex(row)"
                         :display-index="index"
                     ></slot>
-                </td>
+                </th>
             </tr>
         </tbody>
         </sortable-list>
@@ -144,6 +145,14 @@ export default {
             return this.sharedState.selections.length === this.sharedState.maxSelections;
         },
 
+        relativeColumnsSize() {
+            if (this.visibleColumns.length <= 4) return 'sm';
+            if (this.visibleColumns.length <= 8) return 'md';
+            if (this.visibleColumns.length >= 12) return 'lx';
+
+            return 'xl';
+        },
+
         singleSelect() {
             return this.sharedState.maxSelections === 1;
         },
diff --git a/resources/js/components/data-list/ToggleAll.vue b/resources/js/components/data-list/ToggleAll.vue
index 3fe97a95c75..0cbf17ec09d 100644
--- a/resources/js/components/data-list/ToggleAll.vue
+++ b/resources/js/components/data-list/ToggleAll.vue
@@ -1,5 +1,5 @@
 <template>
-    <label for="checkerOfAllBoxes" class="btn btn-sm px-1.5 flex items-center justify-center -ml-1.5 relative -left-px cursor-pointer">
+    <label for="checkerOfAllBoxes" class="flex items-center justify-center relative cursor-pointer">
         <input type="checkbox" @change="toggle" :checked="anyItemsChecked" id="checkerOfAllBoxes" class="relative top-0">
     </label>
 </template>
diff --git a/resources/js/components/entries/Listing.vue b/resources/js/components/entries/Listing.vue
index 0e4de7b851e..3235cf5d37a 100644
--- a/resources/js/components/entries/Listing.vue
+++ b/resources/js/components/entries/Listing.vue
@@ -1,6 +1,5 @@
 <template>
     <div>
-
         <div v-if="initializing" class="card loading">
             <loading-graphic />
         </div>
@@ -16,14 +15,14 @@
             @visible-columns-updated="visibleColumns = $event"
         >
             <div slot-scope="{ hasSelections }">
-                <div class="card p-0 relative">
+                <div class="card overflow-hidden p-0 relative">
                     <div class="flex items-center justify-between p-2 text-sm border-b">
 
                         <data-list-search class="h-8" v-if="showFilters" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
 
                         <data-list-filter-presets
                             ref="presets"
-                            v-show="!reordering && ! showFilters"
+                            v-show="! showFilters"
                             :active-preset="activePreset"
                             :active-preset-payload="activePresetPayload"
                             :active-filters="activeFilters"
@@ -75,41 +74,45 @@
                         @started="actionStarted"
                         @completed="actionCompleted"
                     />
-
-                    <data-list-table
-                        v-show="items.length"
-                        :allow-bulk-actions="!reordering"
-                        :loading="loading"
-                        :reorderable="reordering"
-                        :sortable="!reordering"
-                        :toggle-selection-on-row-click="true"
-                        @sorted="sorted"
-                        @reordered="reordered"
-                    >
-                        <template slot="cell-title" slot-scope="{ row: entry }">
-                            <div class="flex items-center">
-                                <div class="little-dot mr-2" :class="getStatusClass(entry)" />
-                                <a :href="entry.edit_url" @click.stop>{{ entry.title }}</a>
-                            </div>
-                        </template>
-                        <template slot="cell-slug" slot-scope="{ row: entry }">
-                            <span class="font-mono text-2xs">{{ entry.slug }}</span>
-                        </template>
-                        <template slot="actions" slot-scope="{ row: entry, index }">
-                            <dropdown-list placement="bottom-start">
-                                <dropdown-item :text="__('View')" :external-link="entry.permalink" v-if="entry.viewable && entry.permalink" />
-                                <dropdown-item :text="__('Edit')" :redirect="entry.edit_url" v-if="entry.editable" />
-                                <div class="divider" v-if="entry.actions.length" />
-                                <data-list-inline-actions
-                                    :item="entry.id"
-                                    :url="actionUrl"
-                                    :actions="entry.actions"
-                                    @started="actionStarted"
-                                    @completed="actionCompleted"
-                                />
-                            </dropdown-list>
-                        </template>
-                    </data-list-table>
+                    <div class="overflow-x-auto overflow-y-hidden">
+                        <data-list-table
+                            v-show="items.length"
+                            :allow-bulk-actions="!reordering"
+                            :loading="loading"
+                            :reorderable="reordering"
+                            :sortable="!reordering"
+                            :toggle-selection-on-row-click="true"
+                            @sorted="sorted"
+                            @reordered="reordered"
+                        >
+                            <template slot="cell-title" slot-scope="{ row: entry }">
+                                <div class="title-index-field">
+                                    <div class="little-dot mr-2" v-tooltip="getStatusLabel(entry)" :class="getStatusClass(entry)" v-if="! columnShowing('status')" />
+                                    <a :href="entry.edit_url" @click.stop>{{ entry.title }}</a>
+                                </div>
+                            </template>
+                            <template slot="cell-status" slot-scope="{ row: entry }">
+                                <div class="status-index-field select-none" v-tooltip="getStatusTooltip(entry)" :class="`status-${entry.status}`" v-text="getStatusLabel(entry)" />
+                            </template>
+                            <template slot="cell-slug" slot-scope="{ row: entry }">
+                                <div class="slug-index-field" :title="entry.slug">{{ entry.slug }}</div>
+                            </template>
+                            <template slot="actions" slot-scope="{ row: entry, index }">
+                                <dropdown-list placement="left-start" scroll>
+                                    <dropdown-item :text="__('View')" :external-link="entry.permalink" v-if="entry.viewable && entry.permalink" />
+                                    <dropdown-item :text="__('Edit')" :redirect="entry.edit_url" v-if="entry.editable" />
+                                    <div class="divider" v-if="entry.actions.length" />
+                                    <data-list-inline-actions
+                                        :item="entry.id"
+                                        :url="actionUrl"
+                                        :actions="entry.actions"
+                                        @started="actionStarted"
+                                        @completed="actionCompleted"
+                                    />
+                                </dropdown-list>
+                            </template>
+                        </data-list-table>
+                    </div>
                 </div>
                 <data-list-pagination
                     class="mt-6"
@@ -186,12 +189,36 @@ export default {
             if (entry.published && entry.private) {
                 return 'bg-transparent border border-gray-600';
             } else if (entry.published) {
-                return 'bg-green';
+                return 'bg-lime-600';
             } else {
                 return 'bg-gray-400';
             }
         },
 
+        getStatusLabel(entry) {
+            if (entry.status === 'published') {
+                return __('Published');
+            } else if (entry.status === 'scheduled') {
+                return __('Scheduled');
+            } else if (entry.status === 'expired') {
+                return __('Expired');
+            } else if (entry.status === 'draft') {
+                return __('Draft');
+            }
+        },
+
+        getStatusTooltip(entry) {
+            if (entry.status === 'published') {
+                return __('messages.status_published_with_date', {date: entry.date})
+            } else if (entry.status === 'scheduled') {
+                return __('messages.status_scheduled_with_date', {date: entry.date})
+            } else if (entry.status === 'expired') {
+                return __('messages.status_expired_with_date', {date: entry.date})
+            } else if (entry.status === 'draft') {
+                return __('Draft');
+            }
+        },
+
         reorder() {
             this.filtersReset();
 
@@ -208,6 +235,10 @@ export default {
             this.request();
         },
 
+        columnShowing(column) {
+            return this.visibleColumns.find(c => c.field === column);
+        },
+
         reordered(items) {
             this.items = items;
         },
diff --git a/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue b/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
index 2fb13efa5f1..e99d073e51c 100644
--- a/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
+++ b/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
@@ -1,15 +1,17 @@
 <template>
 
-    <div class="text-2xs">
+    <div class="flex flex-wrap">
         <div
             v-for="(item, i) in value"
             :key="item.id"
-            class="flex items-center"
-            :class="{ 'mb-2': i < value.length-1 }"
+            class="relationship-index-field-item"
+            :class="{ 'mb-1.5': i < value.length-1 }"
         >
-            <div v-if="item.published && item.published !== null"
-                class="little-dot mr-2" :class="[item.published ? 'bg-green' : 'bg-gray-400']" />
-            <a :href="item.edit_url">{{ item.title }}</a>
+            <div class="flex items-center shrink">
+                <div v-if="item.published && item.published !== null"
+                    class="little-dot h-1 w-1 mr-1" :class="[item.published ? 'bg-green' : 'bg-gray-400']" />
+                <a :href="item.edit_url" :title="item.title" v-text="item.title" />
+            </div>
         </div>
     </div>
 
diff --git a/resources/js/components/taxonomies/Listing.vue b/resources/js/components/taxonomies/Listing.vue
index 391c6c95541..746f666d319 100644
--- a/resources/js/components/taxonomies/Listing.vue
+++ b/resources/js/components/taxonomies/Listing.vue
@@ -6,7 +6,7 @@
                     <a :href="taxonomy.terms_url">{{ taxonomy.title }}</a>
                 </template>
                 <template slot="actions" slot-scope="{ row: taxonomy, index }">
-                    <dropdown-list>
+                    <dropdown-list placement="left-start" scroll>
                         <dropdown-item :text="__('Edit')" :redirect="taxonomy.edit_url" />
                         <dropdown-item :text="__('Edit Blueprints')" :redirect="taxonomy.blueprints_url" />
                         <dropdown-item
diff --git a/resources/js/components/terms/Listing.vue b/resources/js/components/terms/Listing.vue
index bb18f09dcc9..ebb56860dcd 100644
--- a/resources/js/components/terms/Listing.vue
+++ b/resources/js/components/terms/Listing.vue
@@ -16,7 +16,7 @@
             @visible-columns-updated="visibleColumns = $event"
         >
             <div slot-scope="{ hasSelections }">
-                <div class="card p-0 relative">
+                <div class="card overflow-hidden p-0 relative">
                     <div class="flex items-center justify-between p-2 text-sm border-b">
 
                         <data-list-search class="h-8" v-if="showFilters" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
@@ -93,7 +93,7 @@
                             <span class="font-mono text-2xs">{{ term.slug }}</span>
                         </template>
                         <template slot="actions" slot-scope="{ row: term, index }">
-                            <dropdown-list>
+                            <dropdown-list placement="left-start" scroll>
                                 <dropdown-item :text="__('View')" :redirect="term.permalink" />
                                 <dropdown-item :text="__('Edit')" :redirect="term.edit_url" />
                                 <div class="divider" />
diff --git a/resources/js/components/users/Listing.vue b/resources/js/components/users/Listing.vue
index 2a494997364..1097068abd3 100644
--- a/resources/js/components/users/Listing.vue
+++ b/resources/js/components/users/Listing.vue
@@ -97,7 +97,7 @@
                             <span v-for="group in (groups || [])" class="badge-pill-sm mr-1">{{ group.title }}</span>
                         </template>
                         <template slot="actions" slot-scope="{ row: user, index }">
-                            <dropdown-list>
+                            <dropdown-list placement="left-start" scroll>
                                 <dropdown-item :text="__('Edit')" :redirect="user.edit_url" v-if="user.editable" />
                                 <dropdown-item :text="__('View')" :redirect="user.edit_url" v-else />
                                 <data-list-inline-actions
diff --git a/resources/lang/en/messages.php b/resources/lang/en/messages.php
index 62a62bbc62d..764c60a2caa 100644
--- a/resources/lang/en/messages.php
+++ b/resources/lang/en/messages.php
@@ -185,6 +185,9 @@
     'session_expiry_logged_out_for_inactivity' => 'You have been logged out because you\'ve been inactive for a while.',
     'session_expiry_logging_out_in_seconds' => 'You have been inactive for a while and will be logged out in :seconds seconds. Click to extend your session.',
     'session_expiry_new_window' => 'Opens in a new window. Come back once you\'ve logged in.',
+    'status_expired_with_date' => 'Expired on :date',
+    'status_published_with_date' => 'Published on :date',
+    'status_scheduled_with_date' => 'Scheduled to be published on :date',
     'show_slugs_instructions' => 'Whether to display slugs in the tree view.',
     'tab_sections_instructions' => 'The fields in each section will be grouped together into tabs. Create new fields, reuse existing fields, or import entire groups of fields from existing fieldsets.',
     'taxonomies_blueprints_instructions' => 'Terms in this taxonomy may use any of these blueprints.',
diff --git a/src/Http/Controllers/CP/Collections/CollectionsController.php b/src/Http/Controllers/CP/Collections/CollectionsController.php
index 041bca2e396..4c94b6a1fa9 100644
--- a/src/Http/Controllers/CP/Collections/CollectionsController.php
+++ b/src/Http/Controllers/CP/Collections/CollectionsController.php
@@ -75,6 +75,11 @@ public function show(Request $request, $collection)
 
         $columns = $blueprint
             ->columns()
+            ->prepend(Column::make('status')
+                ->listable(true)
+                ->visible(true)
+                ->defaultVisibility(true)
+                ->sortable(false), 'status')
             ->setPreferred("collections.{$collection->handle()}.columns")
             ->rejectUnlisted()
             ->values();
diff --git a/src/Http/Resources/CP/Entries/Entries.php b/src/Http/Resources/CP/Entries/Entries.php
index c0fd9e4a01e..2f15f40024d 100644
--- a/src/Http/Resources/CP/Entries/Entries.php
+++ b/src/Http/Resources/CP/Entries/Entries.php
@@ -3,6 +3,7 @@
 namespace Statamic\Http\Resources\CP\Entries;
 
 use Illuminate\Http\Resources\Json\ResourceCollection;
+use Statamic\CP\Column;
 use Statamic\Http\Resources\CP\Concerns\HasRequestedColumns;
 
 class Entries extends ResourceCollection
@@ -31,6 +32,14 @@ private function setColumns()
     {
         $columns = $this->blueprint->columns();
 
+        $status = Column::make('status')
+            ->listable(true)
+            ->visible(true)
+            ->defaultVisibility(true)
+            ->sortable(false);
+
+        $columns->prepend($status, 'status');
+
         if ($key = $this->columnPreferenceKey) {
             $columns->setPreferred($key);
         }
diff --git a/src/Http/Resources/CP/Entries/ListedEntry.php b/src/Http/Resources/CP/Entries/ListedEntry.php
index a63f83e2549..cd1a30fd5a3 100644
--- a/src/Http/Resources/CP/Entries/ListedEntry.php
+++ b/src/Http/Resources/CP/Entries/ListedEntry.php
@@ -33,6 +33,7 @@ public function toArray($request)
         return [
             'id' => $entry->id(),
             'published' => $entry->published(),
+            'status' => $entry->status(),
             'private' => $entry->private(),
             'date' => $this->when($collection->dated(), function () {
                 return $this->resource->date()->inPreferredFormat();
@@ -60,9 +61,13 @@ protected function values($extra = [])
                 $value = $extra[$key] ?? $this->resource->value($key);
             }
 
-            $value = $this->blueprint
-                ->field($key)
-                ->setValue($value)
+            $field = $this->blueprint->field($key);
+
+            if (! $field) {
+                return [$key => $value];
+            }
+
+            $value = $field->setValue($value)
                 ->setParent($this->resource)
                 ->preProcessIndex()
                 ->value();
diff --git a/tailwind.config.js b/tailwind.config.js
index b18b28034cc..edbd7fc7fcd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -69,6 +69,8 @@ module.exports = {
                 DEFAULT: '#fbfab0',
                 dark: '#e8dc1e',
             },
+            lime: colors.green,
+            amber: colors.amber,
         },
         screens: {
             'sm': '576px',
@@ -152,6 +154,8 @@ module.exports = {
                 240: '60rem',
             },
             zIndex: {
+                1: '1',
+                2: '2',
                 5: '5',
                 200: '200',
                 top: '1001',
@@ -162,6 +166,7 @@ module.exports = {
     },
     plugins: [
         require('@tailwindcss/container-queries'),
+        require('@tailwindcss/line-clamp'),
         require('@tailwindcss/typography'),
     ],
     important: true,

From 7674fd7d68485511983ec6f3242105f27691348f Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Thu, 9 Mar 2023 17:01:13 -0500
Subject: [PATCH 10/32] Show (F) shortcut on Show Filter Controls tooltip

---
 resources/js/components/entries/Listing.vue | 2 +-
 resources/js/components/terms/Listing.vue   | 2 +-
 resources/js/components/users/Listing.vue   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/entries/Listing.vue b/resources/js/components/entries/Listing.vue
index 3235cf5d37a..8dc7a10ff98 100644
--- a/resources/js/components/entries/Listing.vue
+++ b/resources/js/components/entries/Listing.vue
@@ -37,7 +37,7 @@
                         <div class="flex ml-2 space-x-2">
                             <button class="btn py-1 px-2 h-8" v-text="__('Cancel')" v-show="showFilters" @click="filtersHide" />
                             <button class="btn py-1 px-2 h-8" v-text="__('Save')" v-show="showFilters && isDirty" @click="$refs.presets.savePreset()" />
-                            <button class="btn flex items-center py-1 px-2 h-8 w-12" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls')">
+                            <button class="btn flex items-center py-1 px-2 h-8 w-12" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls (F)')">
                                 <svg-icon name="search" class="w-4 h-4" />
                                 <svg-icon name="filter-lines" class="w-4 h-4" />
                             </button>
diff --git a/resources/js/components/terms/Listing.vue b/resources/js/components/terms/Listing.vue
index ebb56860dcd..51a5dd4dad2 100644
--- a/resources/js/components/terms/Listing.vue
+++ b/resources/js/components/terms/Listing.vue
@@ -38,7 +38,7 @@
                         <div class="flex ml-2 space-x-2">
                             <button class="btn py-1 px-2 h-8" v-text="__('Cancel')" v-show="showFilters" @click="filtersHide" />
                             <button class="btn py-1 px-2 h-8" v-text="__('Save')" v-show="showFilters && isDirty" @click="$refs.presets.savePreset()" />
-                            <button class="btn flex items-center py-1 px-2 h-8" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls')">
+                            <button class="btn flex items-center py-1 px-2 h-8" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls (F)')">
                                 <svg-icon name="search" class="w-4 h-4" />
                                 <svg-icon name="filter-lines" class="w-4 h-4" />
                             </button>
diff --git a/resources/js/components/users/Listing.vue b/resources/js/components/users/Listing.vue
index 1097068abd3..0e3b447975d 100644
--- a/resources/js/components/users/Listing.vue
+++ b/resources/js/components/users/Listing.vue
@@ -37,7 +37,7 @@
                         <div class="flex ml-2 space-x-2">
                             <button class="btn py-1 px-2 h-8" v-text="__('Cancel')" v-show="showFilters" @click="filtersHide" />
                             <button class="btn py-1 px-2 h-8" v-text="__('Save')" v-show="showFilters && isDirty" @click="$refs.presets.savePreset()" />
-                            <button class="btn flex items-center py-1 px-2 h-8" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls')">
+                            <button class="btn flex items-center py-1 px-2 h-8" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls (F)')">
                                 <svg-icon name="search" class="w-4 h-4" />
                                 <svg-icon name="filter-lines" class="w-4 h-4" />
                             </button>

From 3369f8a7e2138c52881790529c9cf8a052310b13 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Sat, 11 Mar 2023 17:26:14 -0500
Subject: [PATCH 11/32] Refresh Green with Tailwind Green

---
 resources/css/components/metrics.css          |    2 +-
 resources/css/components/notifications.css    |    2 +-
 resources/css/components/revisions.css        |    4 +-
 resources/css/components/toggle.css           |    4 +-
 resources/css/elements/icons.css              |   22 +-
 resources/css/elements/tables.css             |   11 +-
 resources/js/components/FavoriteCreator.vue   |    2 +-
 .../js/components/blueprints/Listing.vue      |    2 +-
 resources/js/components/entries/Listing.vue   |    2 +-
 .../js/components/entries/PublishForm.vue     | 1356 ++++++++---------
 resources/js/components/entries/Widget.vue    |    2 +-
 .../components/fieldtypes/SelectFieldtype.vue |    2 +-
 .../fieldtypes/ToggleIndexFieldtype.vue       |    2 +-
 .../RelationshipIndexFieldtype.vue            |    2 +-
 .../inputs/relationship/Selector.vue          |    2 +-
 resources/js/components/structures/Branch.vue |    2 +-
 resources/js/components/terms/PublishForm.vue |    8 +-
 resources/js/components/users/Listing.vue     |   12 +-
 resources/views/blueprints/index.blade.php    |    4 +-
 resources/views/licensing.blade.php           |    8 +-
 resources/views/playground.blade.php          |    8 +-
 resources/views/updater/index.blade.php       |    4 +-
 resources/views/widgets/updater.blade.php     |    2 +-
 tailwind.config.js                            |    7 +-
 24 files changed, 730 insertions(+), 742 deletions(-)

diff --git a/resources/css/components/metrics.css b/resources/css/components/metrics.css
index 42db7bc1c8b..0229d7739f3 100644
--- a/resources/css/components/metrics.css
+++ b/resources/css/components/metrics.css
@@ -26,7 +26,7 @@
     }
     &.dark { }
     &.blue { @apply bg-blue; }
-    &.green { @apply bg-green; }
+    &.green { @apply bg-green-600; }
     &.red { @apply bg-red; }
 }
 
diff --git a/resources/css/components/notifications.css b/resources/css/components/notifications.css
index 37fc2933e34..73b84f9ecc2 100644
--- a/resources/css/components/notifications.css
+++ b/resources/css/components/notifications.css
@@ -21,7 +21,7 @@
     }
 
     &.success i {
-        @apply bg-green-light;
+        @apply bg-green-400 text-green-700;
     }
 
     &.error i {
diff --git a/resources/css/components/revisions.css b/resources/css/components/revisions.css
index d9c1c6f5f9e..731a5ac57ca 100644
--- a/resources/css/components/revisions.css
+++ b/resources/css/components/revisions.css
@@ -37,7 +37,7 @@
     @apply uppercase text-4xs ml-2 text-white rounded-sm;
     height: 16px;
 
-    &.publish { @apply bg-green-light; }
+    &.publish { @apply bg-green-600; }
     &.revision,
     &.restore { @apply text-gray-700; }
     &.unpublish { @apply bg-red; }
@@ -49,7 +49,7 @@
 }
 
 .revision-item.status-published {
-    .revision-item-bullet { @apply bg-green; }
+    .revision-item-bullet { @apply bg-green-600; }
 }
 
 .revision-item.status-working-copy {
diff --git a/resources/css/components/toggle.css b/resources/css/components/toggle.css
index 96ec0d5394f..6794f672b09 100644
--- a/resources/css/components/toggle.css
+++ b/resources/css/components/toggle.css
@@ -68,13 +68,13 @@
 }
 
 .toggle-container.on {
-    @apply bg-green-light border-green;
+    @apply bg-green-500 border-green-600;
     .toggle-slider {
         width: 44px;
     }
 
     .toggle-knob:focus {
-        box-shadow: 0 0 10px rgba(#64BD63, .7);
+        box-shadow: 0 0 10px theme(colors.green.500/70);
     }
 }
 
diff --git a/resources/css/elements/icons.css b/resources/css/elements/icons.css
index 4afa4d6b83f..93feb8b0458 100644
--- a/resources/css/elements/icons.css
+++ b/resources/css/elements/icons.css
@@ -21,31 +21,11 @@ svg {
 	width: 7px;
     flex-shrink: 0;
 
-    &.published { @apply bg-green-light }
+    &.published { @apply bg-green-600 }
     &.draft, &.expired { @apply bg-gray-600 }
     &.scheduled, &.hollow { @apply bg-transparent border border-gray-600 }
 }
 
-.icon-status-draft {
-	@apply bg-gray-700;
-}
-
-.icon-status-hidden {
-    @apply border border-gray-700;
-}
-
-.icon-status-live {
-	@apply bg-green;
-}
-
-.icon-status-error {
-	@apply bg-red;
-}
-
-.icon-status-warning {
-    @apply bg-yellow-dark;
-}
-
 .icon-header-avatar {
     height: 32px;
     width: 32px;
diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css
index 7d82ba8790f..d4ab8f1c1ea 100644
--- a/resources/css/elements/tables.css
+++ b/resources/css/elements/tables.css
@@ -345,10 +345,19 @@ table.control {
     @apply inline-block text-xs bg-gray-300 text-gray-800 shrink rounded-full px-2 py-0.5 text-center justify-center;
 
     &.status-published:not(.status-private) {
-        @apply text-lime-900 bg-lime-200 ;
+        @apply text-green-900 bg-green-200 ;
     }
 
     &.status-scheduled {
         @apply text-amber-900 bg-amber-200;
     }
 }
+
+.role-index-field, .groups-index-field {
+    @apply flex flex-wrap -mb-1.5;
+
+    .role-index-field-item,
+    .groups-index-field-item {
+        @apply rounded bg-gray-100 border px-1 inline-block text-2xs line-clamp-1 mb-1;
+    }
+}
diff --git a/resources/js/components/FavoriteCreator.vue b/resources/js/components/FavoriteCreator.vue
index 7210ec0b4c4..49e1a95c05a 100644
--- a/resources/js/components/FavoriteCreator.vue
+++ b/resources/js/components/FavoriteCreator.vue
@@ -17,7 +17,7 @@
         </popover>
         <div v-else>
             <button @click="remove" class="h-6 w-6 block outline-none p-1 text-gray hover:text-gray-800" v-tooltip="__('Unpin from Favorites')" :aria-label="__('Unpin from Favorites')">
-                <svg-icon name="pin" class="text-green"></svg-icon>
+                <svg-icon name="pin" class="text-green-600"></svg-icon>
             </button>
         </div>
     </div>
diff --git a/resources/js/components/blueprints/Listing.vue b/resources/js/components/blueprints/Listing.vue
index 0c03bff7881..730ea0d44a2 100644
--- a/resources/js/components/blueprints/Listing.vue
+++ b/resources/js/components/blueprints/Listing.vue
@@ -7,7 +7,7 @@
             >
                 <template slot="cell-title" slot-scope="{ row: blueprint }">
                     <div class="flex items-center">
-                        <div class="little-dot mr-2" :class="[blueprint.hidden ? 'hollow' : 'bg-green']" />
+                        <div class="little-dot mr-2" :class="[blueprint.hidden ? 'hollow' : 'bg-green-600']" />
                         <a :href="blueprint.edit_url">{{ blueprint.title }}</a>
                     </div>
                 </template>
diff --git a/resources/js/components/entries/Listing.vue b/resources/js/components/entries/Listing.vue
index 8dc7a10ff98..993400c7eb7 100644
--- a/resources/js/components/entries/Listing.vue
+++ b/resources/js/components/entries/Listing.vue
@@ -189,7 +189,7 @@ export default {
             if (entry.published && entry.private) {
                 return 'bg-transparent border border-gray-600';
             } else if (entry.published) {
-                return 'bg-lime-600';
+                return 'bg-green-600';
             } else {
                 return 'bg-gray-400';
             }
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index 9198f1d5c35..a3b4b75e2db 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -1,280 +1,280 @@
 <template>
 
-    <div>
-        <breadcrumb v-if="breadcrumbs" :url="breadcrumbs[1].url" :title="breadcrumbs[1].text" />
-
-        <div class="flex items-center mb-6">
-            <h1 class="flex-1">
-                <div class="flex items-center">
-                    <span v-if="! isCreating" class="little-dot mr-2" :class="activeLocalization.status" v-tooltip="activeLocalization.status" />
-                    <span v-html="$options.filters.striptags(title)" />
-                </div>
-            </h1>
-
-            <dropdown-list class="mr-4" v-if="canEditBlueprint">
-                <dropdown-item :text="__('Edit Blueprint')" :redirect="actions.editBlueprint" />
-            </dropdown-list>
-
-            <div class="pt-px text-2xs text-gray-600 flex mr-4" v-if="readOnly">
-                <svg-icon name="lock" class="w-4 mr-1 -mt-1" /> {{ __('Read Only') }}
+<div>
+    <breadcrumb v-if="breadcrumbs" :url="breadcrumbs[1].url" :title="breadcrumbs[1].text" />
+
+    <div class="flex items-center mb-6">
+        <h1 class="flex-1">
+            <div class="flex items-center">
+                <span v-if="! isCreating" class="little-dot mr-2" :class="activeLocalization.status" v-tooltip="activeLocalization.status" />
+                <span v-html="$options.filters.striptags(title)" />
             </div>
+        </h1>
 
-            <div class="hidden md:flex items-center">
+        <dropdown-list class="mr-4" v-if="canEditBlueprint">
+            <dropdown-item :text="__('Edit Blueprint')" :redirect="actions.editBlueprint" />
+        </dropdown-list>
 
-                <save-button-options
-                    v-if="!readOnly"
-                    :show-options="!revisionsEnabled && !isInline"
-                    :button-class="saveButtonClass"
-                    :preferences-prefix="preferencesPrefix"
-                >
-                    <button
-                        :class="saveButtonClass"
-                        :disabled="!canSave"
-                        @click.prevent="save"
-                        v-text="saveText"
-                    />
-                </save-button-options>
+        <div class="pt-px text-2xs text-gray-600 flex mr-4" v-if="readOnly">
+            <svg-icon name="lock" class="w-4 mr-1 -mt-1" /> {{ __('Read Only') }}
+        </div>
+
+        <div class="hidden md:flex items-center">
 
+            <save-button-options
+                v-if="!readOnly"
+                :show-options="!revisionsEnabled && !isInline"
+                :button-class="saveButtonClass"
+                :preferences-prefix="preferencesPrefix"
+            >
                 <button
-                    v-if="revisionsEnabled && !isCreating"
-                    class="ml-4 btn-primary flex items-center"
-                    :disabled="!canPublish"
-                    @click="confirmingPublish = true">
-                    <span>{{ __('Publish') }}…</span>
-                </button>
-            </div>
+                    :class="saveButtonClass"
+                    :disabled="!canSave"
+                    @click.prevent="save"
+                    v-text="saveText"
+                />
+            </save-button-options>
 
-            <slot name="action-buttons-right" />
+            <button
+                v-if="revisionsEnabled && !isCreating"
+                class="ml-4 btn-primary flex items-center"
+                :disabled="!canPublish"
+                @click="confirmingPublish = true">
+                <span>{{ __('Publish') }}…</span>
+            </button>
         </div>
 
-        <publish-container
-            v-if="fieldset"
-            ref="container"
+        <slot name="action-buttons-right" />
+    </div>
+
+    <publish-container
+        v-if="fieldset"
+        ref="container"
+        :name="publishContainer"
+        :blueprint="fieldset"
+        :values="values"
+        :reference="initialReference"
+        :meta="meta"
+        :errors="errors"
+        :site="site"
+        :localized-fields="localizedFields"
+        :is-root="isRoot"
+        :track-dirty-state="trackDirtyState"
+        @updated="values = $event"
+    >
+        <live-preview
+            slot-scope="{ container, components, setFieldMeta }"
             :name="publishContainer"
-            :blueprint="fieldset"
+            :url="livePreviewUrl"
+            :previewing="isPreviewing"
+            :targets="previewTargets"
             :values="values"
-            :reference="initialReference"
-            :meta="meta"
-            :errors="errors"
-            :site="site"
-            :localized-fields="localizedFields"
-            :is-root="isRoot"
-            :track-dirty-state="trackDirtyState"
-            @updated="values = $event"
+            :blueprint="fieldset.handle"
+            @opened-via-keyboard="openLivePreview"
+            @closed="closeLivePreview"
         >
-            <live-preview
-                slot-scope="{ container, components, setFieldMeta }"
-                :name="publishContainer"
-                :url="livePreviewUrl"
-                :previewing="isPreviewing"
-                :targets="previewTargets"
-                :values="values"
-                :blueprint="fieldset.handle"
-                @opened-via-keyboard="openLivePreview"
-                @closed="closeLivePreview"
-            >
 
-                <div>
-                    <component
-                        v-for="component in components"
-                        :key="component.id"
-                        :is="component.name"
-                        :container="container"
-                        v-bind="component.props"
-                        v-on="component.events"
-                    />
-
-                    <transition name="live-preview-sections-drop">
-                        <publish-sections
-                            v-show="sectionsVisible"
-                            :read-only="readOnly"
-                            :syncable="hasOrigin"
-                            :can-toggle-labels="true"
-                            @updated="setFieldValue"
-                            @meta-updated="setFieldMeta"
-                            @synced="syncField"
-                            @desynced="desyncField"
-                            @focus="container.$emit('focus', $event)"
-                            @blur="container.$emit('blur', $event)"
-                        >
-                            <template #actions="{ shouldShowSidebar }">
-
-                                <div v-if="collectionHasRoutes" :class="{ 'hi': !shouldShowSidebar }">
-
-                                    <div class="p-4 flex items-center -mx-2">
-                                        <button
-                                            class="flex items-center justify-center btn-flat w-full mx-2 px-2"
-                                            v-if="isBase && livePreviewUrl"
-                                            @click="openLivePreview">
-                                            <svg-icon name="synchronize" class="h-4 w-4 mr-2" />
-                                            <span>{{ __('Live Preview') }}</span>
-                                        </button>
-                                        <a
-                                            class="flex items-center justify-center btn-flat w-full mx-2 px-2"
-                                            v-if="permalink"
-                                            :href="permalink"
-                                            target="_blank">
-                                            <svg-icon name="external-link" class="w-4 h-4 mr-2" />
-                                            <span>{{ __('Visit URL') }}</span>
-                                        </a>
-                                    </div>
+            <div>
+                <component
+                    v-for="component in components"
+                    :key="component.id"
+                    :is="component.name"
+                    :container="container"
+                    v-bind="component.props"
+                    v-on="component.events"
+                />
+
+                <transition name="live-preview-sections-drop">
+                    <publish-sections
+                        v-show="sectionsVisible"
+                        :read-only="readOnly"
+                        :syncable="hasOrigin"
+                        :can-toggle-labels="true"
+                        @updated="setFieldValue"
+                        @meta-updated="setFieldMeta"
+                        @synced="syncField"
+                        @desynced="desyncField"
+                        @focus="container.$emit('focus', $event)"
+                        @blur="container.$emit('blur', $event)"
+                    >
+                        <template #actions="{ shouldShowSidebar }">
+
+                            <div v-if="collectionHasRoutes" :class="{ 'hi': !shouldShowSidebar }">
+
+                                <div class="p-4 flex items-center -mx-2">
+                                    <button
+                                        class="flex items-center justify-center btn-flat w-full mx-2 px-2"
+                                        v-if="isBase && livePreviewUrl"
+                                        @click="openLivePreview">
+                                        <svg-icon name="synchronize" class="h-4 w-4 mr-2" />
+                                        <span>{{ __('Live Preview') }}</span>
+                                    </button>
+                                    <a
+                                        class="flex items-center justify-center btn-flat w-full mx-2 px-2"
+                                        v-if="permalink"
+                                        :href="permalink"
+                                        target="_blank">
+                                        <svg-icon name="external-link" class="w-4 h-4 mr-2" />
+                                        <span>{{ __('Visit URL') }}</span>
+                                    </a>
                                 </div>
-
-                                <div class="flex items-center border-t justify-between px-4 py-2" v-if="!revisionsEnabled">
-                                    <label v-text="__('Published')" class="publish-field-label font-medium" />
-                                    <toggle-input :value="published" :read-only="!canManagePublishState" @input="setFieldValue('published', $event)" />
+                            </div>
+
+                            <div class="flex items-center border-t justify-between px-4 py-2" v-if="!revisionsEnabled">
+                                <label v-text="__('Published')" class="publish-field-label font-medium" />
+                                <toggle-input :value="published" :read-only="!canManagePublishState" @input="setFieldValue('published', $event)" />
+                            </div>
+
+                            <div class="border-t p-4" v-if="revisionsEnabled && !isCreating">
+                                <label class="publish-field-label font-medium mb-2" v-text="__('Revisions')"/>
+                                <div class="mb-1 flex items-center" v-if="published">
+                                    <span class="text-green-600 w-6 text-center">&check;</span>
+                                    <span class="text-2xs" v-text="__('Entry has a published version')"></span>
                                 </div>
-
-                                <div class="border-t p-4" v-if="revisionsEnabled && !isCreating">
-                                    <label class="publish-field-label font-medium mb-2" v-text="__('Revisions')"/>
-                                    <div class="mb-1 flex items-center" v-if="published">
-                                        <span class="text-green w-6 text-center">&check;</span>
-                                        <span class="text-2xs" v-text="__('Entry has a published version')"></span>
-                                    </div>
-                                    <div class="mb-1 flex items-center" v-else>
-                                        <span class="text-orange w-6 text-center">!</span>
-                                        <span class="text-2xs" v-text="__('Entry has not been published')"></span>
-                                    </div>
-                                    <div class="mb-1 flex items-center" v-if="!isWorkingCopy && published">
-                                        <span class="text-green w-6 text-center">&check;</span>
-                                        <span class="text-2xs" v-text="__('This is the published version')"></span>
-                                    </div>
-                                    <div class="mb-1 flex items-center" v-if="isDirty">
-                                        <span class="text-orange w-6 text-center">!</span>
-                                        <span class="text-2xs" v-text="__('Unsaved changes')"></span>
-                                    </div>
-                                    <button
-                                            class="flex items-center justify-center mt-4 btn-flat px-2 w-full"
-                                            v-if="!isCreating && revisionsEnabled"
-                                            @click="showRevisionHistory = true">
-                                            <svg-icon name="history" class="h-4 w-4 mr-2" />
-                                            <span>{{ __('View History') }}</span>
-                                        </button>
+                                <div class="mb-1 flex items-center" v-else>
+                                    <span class="text-orange w-6 text-center">!</span>
+                                    <span class="text-2xs" v-text="__('Entry has not been published')"></span>
                                 </div>
-
-                                <div class="p-4 border-t" v-if="localizations.length > 1">
-                                    <label class="publish-field-label font-medium mb-2" v-text="__('Sites')" />
-                                    <div
-                                        v-for="option in localizations"
-                                        :key="option.handle"
-                                        class="text-sm flex items-center -mx-4 px-4 py-2 cursor-pointer"
-                                        :class="option.active ? 'bg-blue-100' : 'hover:bg-gray-200'"
-                                        @click="localizationSelected(option)"
-                                    >
-                                        <div class="flex-1 flex items-center" :class="{ 'line-through': !option.exists }">
-                                            <span class="little-dot mr-2" :class="{
-                                                'bg-green': option.published,
-                                                'bg-gray-500': !option.published,
-                                                'bg-red': !option.exists
-                                            }" />
-                                            {{ option.name }}
-                                            <loading-graphic
-                                                :size="14"
-                                                text=""
-                                                class="ml-2"
-                                                v-if="localizing && localizing.handle === option.handle" />
-                                        </div>
-                                        <div class="badge-sm bg-orange" v-if="option.origin" v-text="__('Origin')" />
-                                        <div class="badge-sm bg-blue" v-if="option.active" v-text="__('Active')" />
-                                        <div class="badge-sm bg-purple" v-if="option.root && !option.origin && !option.active" v-text="__('Root')" />
+                                <div class="mb-1 flex items-center" v-if="!isWorkingCopy && published">
+                                    <span class="text-green-600 w-6 text-center">&check;</span>
+                                    <span class="text-2xs" v-text="__('This is the published version')"></span>
+                                </div>
+                                <div class="mb-1 flex items-center" v-if="isDirty">
+                                    <span class="text-orange w-6 text-center">!</span>
+                                    <span class="text-2xs" v-text="__('Unsaved changes')"></span>
+                                </div>
+                                <button
+                                        class="flex items-center justify-center mt-4 btn-flat px-2 w-full"
+                                        v-if="!isCreating && revisionsEnabled"
+                                        @click="showRevisionHistory = true">
+                                        <svg-icon name="history" class="h-4 w-4 mr-2" />
+                                        <span>{{ __('View History') }}</span>
+                                    </button>
+                            </div>
+
+                            <div class="p-4 border-t" v-if="localizations.length > 1">
+                                <label class="publish-field-label font-medium mb-2" v-text="__('Sites')" />
+                                <div
+                                    v-for="option in localizations"
+                                    :key="option.handle"
+                                    class="text-sm flex items-center -mx-4 px-4 py-2 cursor-pointer"
+                                    :class="option.active ? 'bg-blue-100' : 'hover:bg-gray-200'"
+                                    @click="localizationSelected(option)"
+                                >
+                                    <div class="flex-1 flex items-center" :class="{ 'line-through': !option.exists }">
+                                        <span class="little-dot mr-2" :class="{
+                                            'bg-green-600': option.published,
+                                            'bg-gray-500': !option.published,
+                                            'bg-red': !option.exists
+                                        }" />
+                                        {{ option.name }}
+                                        <loading-graphic
+                                            :size="14"
+                                            text=""
+                                            class="ml-2"
+                                            v-if="localizing && localizing.handle === option.handle" />
                                     </div>
+                                    <div class="badge-sm bg-orange" v-if="option.origin" v-text="__('Origin')" />
+                                    <div class="badge-sm bg-blue" v-if="option.active" v-text="__('Active')" />
+                                    <div class="badge-sm bg-purple" v-if="option.root && !option.origin && !option.active" v-text="__('Root')" />
                                 </div>
+                            </div>
 
-                            </template>
-                        </publish-sections>
-                    </transition>
-                </div>
-                <template v-slot:buttons>
-                   <button
-                        v-if="!readOnly"
-                        class="ml-4"
-                        :class="{
-                            'btn': revisionsEnabled,
-                            'btn-primary': isCreating || !revisionsEnabled,
-                        }"
-                        :disabled="!canSave"
-                        @click.prevent="save"
-                        v-text="saveText">
-                    </button>
-
-                    <button
-                        v-if="revisionsEnabled && !isCreating"
-                        class="ml-4 btn-primary flex items-center"
-                        :disabled="!canPublish"
-                        @click="confirmingPublish = true">
-                        <span v-text="__('Publish')" />
-                        <svg-icon name="chevron-down-xs" class="ml-2 w-2" />
-                    </button>
-                </template>
-            </live-preview>
-        </publish-container>
-
-        <div class="md:hidden mt-6 flex items-center">
-            <button
-                v-if="!readOnly"
-                class="btn-lg"
-                :class="{
-                    'btn-primary w-full': ! revisionsEnabled,
-                    'btn w-1/2 mr-4': revisionsEnabled,
-                }"
-                :disabled="!canSave"
-                @click.prevent="save"
-                v-text="__(revisionsEnabled ? 'Save Changes' : 'Save')" />
+                        </template>
+                    </publish-sections>
+                </transition>
+            </div>
+            <template v-slot:buttons>
+                <button
+                    v-if="!readOnly"
+                    class="ml-4"
+                    :class="{
+                        'btn': revisionsEnabled,
+                        'btn-primary': isCreating || !revisionsEnabled,
+                    }"
+                    :disabled="!canSave"
+                    @click.prevent="save"
+                    v-text="saveText">
+                </button>
 
-            <button
-                v-if="revisionsEnabled"
-                class="ml-2 btn btn-lg justify-center btn-primary flex items-center w-1/2"
-                :disabled="!canPublish"
-                @click="confirmingPublish = true">
-                <span v-text="__('Publish')" />
-                <svg-icon name="chevron-down-xs" class="ml-2 w-2" />
-            </button>
-        </div>
+                <button
+                    v-if="revisionsEnabled && !isCreating"
+                    class="ml-4 btn-primary flex items-center"
+                    :disabled="!canPublish"
+                    @click="confirmingPublish = true">
+                    <span v-text="__('Publish')" />
+                    <svg-icon name="chevron-down-xs" class="ml-2 w-2" />
+                </button>
+            </template>
+        </live-preview>
+    </publish-container>
+
+    <div class="md:hidden mt-6 flex items-center">
+        <button
+            v-if="!readOnly"
+            class="btn-lg"
+            :class="{
+                'btn-primary w-full': ! revisionsEnabled,
+                'btn w-1/2 mr-4': revisionsEnabled,
+            }"
+            :disabled="!canSave"
+            @click.prevent="save"
+            v-text="__(revisionsEnabled ? 'Save Changes' : 'Save')" />
+
+        <button
+            v-if="revisionsEnabled"
+            class="ml-2 btn btn-lg justify-center btn-primary flex items-center w-1/2"
+            :disabled="!canPublish"
+            @click="confirmingPublish = true">
+            <span v-text="__('Publish')" />
+            <svg-icon name="chevron-down-xs" class="ml-2 w-2" />
+        </button>
+    </div>
 
-        <stack name="revision-history" v-if="showRevisionHistory" @closed="showRevisionHistory = false" :narrow="true">
-            <revision-history
-                slot-scope="{ close }"
-                :index-url="actions.revisions"
-                :restore-url="actions.restore"
-                :reference="initialReference"
-                @closed="close"
-            />
-        </stack>
-
-        <publish-actions
-            v-if="confirmingPublish"
-            :actions="actions"
-            :published="published"
-            :collection="collectionHandle"
+    <stack name="revision-history" v-if="showRevisionHistory" @closed="showRevisionHistory = false" :narrow="true">
+        <revision-history
+            slot-scope="{ close }"
+            :index-url="actions.revisions"
+            :restore-url="actions.restore"
             :reference="initialReference"
-            :publish-container="publishContainer"
-            :can-manage-publish-state="canManagePublishState"
-            @closed="confirmingPublish = false"
-            @saving="saving = true"
-            @saved="publishActionCompleted"
+            @closed="close"
         />
-
-        <confirmation-modal
-            v-if="selectingOrigin"
-            :title="__('Create Localization')"
-            :buttonText="__('Create')"
-            @cancel="cancelLocalization()"
-            @confirm="createLocalization(localizing)"
-        >
-            <div class="publish-fields">
-                <div class="form-group publish-field field-w-full">
-                    <label v-text="__('Origin')" />
-                    <div class="help-block -mt-2" v-text="__('messages.entry_origin_instructions')"></div>
-                    <select-input
-                        v-model="selectedOrigin"
-                        :options="originOptions"
-                        :placeholder="false"
-                    />
-                </div>
+    </stack>
+
+    <publish-actions
+        v-if="confirmingPublish"
+        :actions="actions"
+        :published="published"
+        :collection="collectionHandle"
+        :reference="initialReference"
+        :publish-container="publishContainer"
+        :can-manage-publish-state="canManagePublishState"
+        @closed="confirmingPublish = false"
+        @saving="saving = true"
+        @saved="publishActionCompleted"
+    />
+
+    <confirmation-modal
+        v-if="selectingOrigin"
+        :title="__('Create Localization')"
+        :buttonText="__('Create')"
+        @cancel="cancelLocalization()"
+        @confirm="createLocalization(localizing)"
+    >
+        <div class="publish-fields">
+            <div class="form-group publish-field field-w-full">
+                <label v-text="__('Origin')" />
+                <div class="help-block -mt-2" v-text="__('messages.entry_origin_instructions')"></div>
+                <select-input
+                    v-model="selectedOrigin"
+                    :options="originOptions"
+                    :placeholder="false"
+                />
             </div>
+        </div>
 
-        </confirmation-modal>
-    </div>
+    </confirmation-modal>
+</div>
 
 </template>
 
@@ -288,506 +288,506 @@ import HasHiddenFields from '../publish/HasHiddenFields';
 
 export default {
 
-    mixins: [
-        HasPreferences,
-        HasHiddenFields,
-    ],
-
-    components: {
-        PublishActions,
-        SaveButtonOptions,
-        RevisionHistory,
-    },
-
-    props: {
-        publishContainer: String,
-        initialReference: String,
-        initialFieldset: Object,
-        initialValues: Object,
-        initialMeta: Object,
-        initialTitle: String,
-        initialLocalizations: Array,
-        initialLocalizedFields: Array,
-        originBehavior: String,
-        initialHasOrigin: Boolean,
-        initialOriginValues: Object,
-        initialOriginMeta: Object,
-        initialSite: String,
-        initialIsWorkingCopy: Boolean,
-        collectionHandle: String,
-        breadcrumbs: Array,
-        initialActions: Object,
-        method: String,
-        isCreating: Boolean,
-        isInline: Boolean,
-        initialReadOnly: Boolean,
-        initialIsRoot: Boolean,
-        initialPermalink: String,
-        revisionsEnabled: Boolean,
-        preloadedAssets: Array,
-        canEditBlueprint: Boolean,
-        canManagePublishState: Boolean,
-        createAnotherUrl: String,
-        listingUrl: String,
-        collectionHasRoutes: Boolean,
-        previewTargets: Array,
-        autosaveInterval: Number,
-    },
-
-    data() {
-        return {
-            actions: this.initialActions,
-            saving: false,
-            localizing: false,
-            trackDirtyState: true,
-            fieldset: this.initialFieldset,
-            title: this.initialTitle,
-            values: _.clone(this.initialValues),
-            meta: _.clone(this.initialMeta),
-            localizations: _.clone(this.initialLocalizations),
-            localizedFields: this.initialLocalizedFields,
-            hasOrigin: this.initialHasOrigin,
-            originValues: this.initialOriginValues || {},
-            originMeta: this.initialOriginMeta || {},
-            site: this.initialSite,
-            selectingOrigin: false,
-            selectedOrigin: null,
-            isWorkingCopy: this.initialIsWorkingCopy,
-            error: null,
-            errors: {},
-            isPreviewing: false,
-            sectionsVisible: true,
-            state: 'new',
-            revisionMessage: null,
-            showRevisionHistory: false,
-            preferencesPrefix: `collections.${this.collectionHandle}`,
-
-            // Whether it was published the last time it was saved.
-            // Successful publish actions (if using revisions) or just saving (if not) will update this.
-            // The current published value is inside the "values" object, and also accessible as a computed.
-            initialPublished: this.initialValues.published,
-
-            confirmingPublish: false,
-            readOnly: this.initialReadOnly,
-            isRoot: this.initialIsRoot,
-            permalink: this.initialPermalink,
-
-            saveKeyBinding: null,
-            quickSaveKeyBinding: null,
-            quickSave: false,
-            isAutosave: false,
-        }
+mixins: [
+    HasPreferences,
+    HasHiddenFields,
+],
+
+components: {
+    PublishActions,
+    SaveButtonOptions,
+    RevisionHistory,
+},
+
+props: {
+    publishContainer: String,
+    initialReference: String,
+    initialFieldset: Object,
+    initialValues: Object,
+    initialMeta: Object,
+    initialTitle: String,
+    initialLocalizations: Array,
+    initialLocalizedFields: Array,
+    originBehavior: String,
+    initialHasOrigin: Boolean,
+    initialOriginValues: Object,
+    initialOriginMeta: Object,
+    initialSite: String,
+    initialIsWorkingCopy: Boolean,
+    collectionHandle: String,
+    breadcrumbs: Array,
+    initialActions: Object,
+    method: String,
+    isCreating: Boolean,
+    isInline: Boolean,
+    initialReadOnly: Boolean,
+    initialIsRoot: Boolean,
+    initialPermalink: String,
+    revisionsEnabled: Boolean,
+    preloadedAssets: Array,
+    canEditBlueprint: Boolean,
+    canManagePublishState: Boolean,
+    createAnotherUrl: String,
+    listingUrl: String,
+    collectionHasRoutes: Boolean,
+    previewTargets: Array,
+    autosaveInterval: Number,
+},
+
+data() {
+    return {
+        actions: this.initialActions,
+        saving: false,
+        localizing: false,
+        trackDirtyState: true,
+        fieldset: this.initialFieldset,
+        title: this.initialTitle,
+        values: _.clone(this.initialValues),
+        meta: _.clone(this.initialMeta),
+        localizations: _.clone(this.initialLocalizations),
+        localizedFields: this.initialLocalizedFields,
+        hasOrigin: this.initialHasOrigin,
+        originValues: this.initialOriginValues || {},
+        originMeta: this.initialOriginMeta || {},
+        site: this.initialSite,
+        selectingOrigin: false,
+        selectedOrigin: null,
+        isWorkingCopy: this.initialIsWorkingCopy,
+        error: null,
+        errors: {},
+        isPreviewing: false,
+        sectionsVisible: true,
+        state: 'new',
+        revisionMessage: null,
+        showRevisionHistory: false,
+        preferencesPrefix: `collections.${this.collectionHandle}`,
+
+        // Whether it was published the last time it was saved.
+        // Successful publish actions (if using revisions) or just saving (if not) will update this.
+        // The current published value is inside the "values" object, and also accessible as a computed.
+        initialPublished: this.initialValues.published,
+
+        confirmingPublish: false,
+        readOnly: this.initialReadOnly,
+        isRoot: this.initialIsRoot,
+        permalink: this.initialPermalink,
+
+        saveKeyBinding: null,
+        quickSaveKeyBinding: null,
+        quickSave: false,
+        isAutosave: false,
+    }
+},
+
+computed: {
+
+    hasErrors() {
+        return this.error || Object.keys(this.errors).length;
     },
 
-    computed: {
+    somethingIsLoading() {
+        return ! this.$progress.isComplete();
+    },
 
-        hasErrors() {
-            return this.error || Object.keys(this.errors).length;
-        },
+    canSave() {
+        return !this.readOnly && !this.somethingIsLoading;
+    },
 
-        somethingIsLoading() {
-            return ! this.$progress.isComplete();
-        },
+    canPublish() {
+        if (!this.revisionsEnabled) return false;
 
-        canSave() {
-            return !this.readOnly && !this.somethingIsLoading;
-        },
+        if (this.readOnly || this.isCreating || this.somethingIsLoading || this.isDirty) return false;
 
-        canPublish() {
-            if (!this.revisionsEnabled) return false;
+        return true;
+    },
 
-            if (this.readOnly || this.isCreating || this.somethingIsLoading || this.isDirty) return false;
+    published() {
+        return this.values.published;
+    },
 
-            return true;
-        },
+    livePreviewUrl() {
+        return _.findWhere(this.localizations, { active: true }).livePreviewUrl;
+    },
 
-        published() {
-            return this.values.published;
-        },
+    isBase() {
+        return this.publishContainer === 'base';
+    },
 
-        livePreviewUrl() {
-            return _.findWhere(this.localizations, { active: true }).livePreviewUrl;
-        },
+    isDirty() {
+        return this.$dirty.has(this.publishContainer);
+    },
 
-        isBase() {
-            return this.publishContainer === 'base';
-        },
+    activeLocalization() {
+        return _.findWhere(this.localizations, { active: true });
+    },
 
-        isDirty() {
-            return this.$dirty.has(this.publishContainer);
-        },
+    saveText() {
+        switch(true) {
+            case this.revisionsEnabled:
+                return __('Save Changes');
+            case this.isUnpublishing:
+                return __('Save & Unpublish');
+            case this.isDraft:
+                return __('Save Draft');
+            default:
+                return __('Save & Publish');
+        }
+    },
 
-        activeLocalization() {
-            return _.findWhere(this.localizations, { active: true });
-        },
+    isUnpublishing() {
+        return this.initialPublished && ! this.published && ! this.isCreating;
+    },
 
-        saveText() {
-            switch(true) {
-                case this.revisionsEnabled:
-                    return __('Save Changes');
-                case this.isUnpublishing:
-                    return __('Save & Unpublish');
-                case this.isDraft:
-                    return __('Save Draft');
-                default:
-                    return __('Save & Publish');
-            }
-        },
+    isDraft() {
+        return ! this.published;
+    },
 
-        isUnpublishing() {
-            return this.initialPublished && ! this.published && ! this.isCreating;
-        },
+    saveButtonClass() {
+        return {
+            'btn': this.revisionsEnabled,
+            'btn-primary': this.isCreating || ! this.revisionsEnabled,
+        };
+    },
 
-        isDraft() {
-            return ! this.published;
-        },
+    afterSaveOption() {
+        return this.getPreference('after_save');
+    },
 
-        saveButtonClass() {
-            return {
-                'btn': this.revisionsEnabled,
-                'btn-primary': this.isCreating || ! this.revisionsEnabled,
-            };
-        },
+    originOptions() {
+        return this.localizations
+            .filter(localization => localization.exists)
+            .map(localization => ({
+                value: localization.handle,
+                label: localization.name,
+            }));
+    },
 
-        afterSaveOption() {
-            return this.getPreference('after_save');
-        },
+},
 
-        originOptions() {
-            return this.localizations
-                .filter(localization => localization.exists)
-                .map(localization => ({
-                    value: localization.handle,
-                    label: localization.name,
-                }));
-        },
+watch: {
 
-    },
+    saving(saving) {
+        this.$progress.loading(`${this.publishContainer}-entry-publish-form`, saving);
+    }
 
-    watch: {
+},
 
-        saving(saving) {
-            this.$progress.loading(`${this.publishContainer}-entry-publish-form`, saving);
-        }
+methods: {
 
+    clearErrors() {
+        this.error = null;
+        this.errors = {};
     },
 
-    methods: {
+    save() {
+        if (! this.canSave) {
+            this.quickSave = false;
+            return;
+        }
 
-        clearErrors() {
-            this.error = null;
-            this.errors = {};
-        },
+        this.saving = true;
+        this.clearErrors();
 
-        save() {
-            if (! this.canSave) {
-                this.quickSave = false;
-                return;
-            }
+        setTimeout(() => this.runBeforeSaveHook(), 151); // 150ms is the debounce time for fieldtype updates
+    },
 
-            this.saving = true;
-            this.clearErrors();
+    runBeforeSaveHook() {
+        Statamic.$hooks.run('entry.saving', {
+            collection: this.collectionHandle,
+            values: this.values,
+            container: this.$refs.container,
+            storeName: this.publishContainer,
+        })
+        .then(this.performSaveRequest)
+        .catch(error => {
+            this.saving = false;
+            this.$toast.error(error || 'Something went wrong');
+        });
+    },
 
-            setTimeout(() => this.runBeforeSaveHook(), 151); // 150ms is the debounce time for fieldtype updates
-        },
+    performSaveRequest() {
+        // Once the hook has completed, we need to make the actual request.
+        // We build the payload here because the before hook may have modified values.
+        const payload = { ...this.visibleValues, ...{
+            _blueprint: this.fieldset.handle,
+            _localized: this.localizedFields,
+        }};
 
-        runBeforeSaveHook() {
-            Statamic.$hooks.run('entry.saving', {
+        this.$axios[this.method](this.actions.save, payload).then(response => {
+            this.saving = false;
+            this.title = response.data.data.title;
+            this.isWorkingCopy = true;
+            if (this.isBase) {
+                document.title = this.title + ' ‹ ' + this.breadcrumbs[1].text + ' ‹ ' + this.breadcrumbs[0].text + ' ‹ Statamic';
+            }
+            if (!this.revisionsEnabled) this.permalink = response.data.data.permalink;
+            if (!this.isCreating && !this.isAutosave) this.$toast.success(__('Saved'));
+            this.$refs.container.saved();
+            this.runAfterSaveHook(response);
+        }).catch(error => this.handleAxiosError(error));
+    },
+
+    runAfterSaveHook(response) {
+        // Once the save request has completed, we want to run the "after" hook.
+        // Devs can do what they need and we'll wait for them, but they can't cancel anything.
+        Statamic.$hooks
+            .run('entry.saved', {
                 collection: this.collectionHandle,
-                values: this.values,
-                container: this.$refs.container,
-                storeName: this.publishContainer,
+                reference: this.initialReference,
+                response
             })
-            .then(this.performSaveRequest)
-            .catch(error => {
-                this.saving = false;
-                this.$toast.error(error || 'Something went wrong');
-            });
-        },
-
-        performSaveRequest() {
-            // Once the hook has completed, we need to make the actual request.
-            // We build the payload here because the before hook may have modified values.
-            const payload = { ...this.visibleValues, ...{
-                _blueprint: this.fieldset.handle,
-                _localized: this.localizedFields,
-            }};
-
-            this.$axios[this.method](this.actions.save, payload).then(response => {
-                this.saving = false;
-                this.title = response.data.data.title;
-                this.isWorkingCopy = true;
-                if (this.isBase) {
-                    document.title = this.title + ' ‹ ' + this.breadcrumbs[1].text + ' ‹ ' + this.breadcrumbs[0].text + ' ‹ Statamic';
+            .then(() => {
+                // If revisions are enabled, just emit event.
+                if (this.revisionsEnabled) {
+                    this.$nextTick(() => this.$emit('saved', response));
+                    return;
                 }
-                if (!this.revisionsEnabled) this.permalink = response.data.data.permalink;
-                if (!this.isCreating && !this.isAutosave) this.$toast.success(__('Saved'));
-                this.$refs.container.saved();
-                this.runAfterSaveHook(response);
-            }).catch(error => this.handleAxiosError(error));
-        },
-
-        runAfterSaveHook(response) {
-            // Once the save request has completed, we want to run the "after" hook.
-            // Devs can do what they need and we'll wait for them, but they can't cancel anything.
-            Statamic.$hooks
-                .run('entry.saved', {
-                    collection: this.collectionHandle,
-                    reference: this.initialReference,
-                    response
-                })
-                .then(() => {
-                    // If revisions are enabled, just emit event.
-                    if (this.revisionsEnabled) {
-                        this.$nextTick(() => this.$emit('saved', response));
-                        return;
-                    }
-
-                    let nextAction = this.quickSave || this.isAutosave ? 'continue_editing' : this.afterSaveOption;
-
-                    // If the user has opted to create another entry, redirect them to create page.
-                    if (!this.isInline && nextAction === 'create_another') {
-                        window.location = this.createAnotherUrl;
-                    }
-
-                    // If the user has opted to go to listing (default/null option), redirect them there.
-                    else if (!this.isInline && nextAction === null) {
-                        window.location = this.listingUrl;
-                    }
-
-                    // Otherwise, leave them on the edit form and emit an event. We need to wait until after
-                    // the hooks are resolved because if this form is being shown in a stack, we only
-                    // want to close it once everything's done.
-                    else {
-                        this.values = this.resetValuesFromResponse(response.data.data.values);
-                        this.initialPublished = response.data.data.published;
-                        this.activeLocalization.published = response.data.data.published;
-                        this.activeLocalization.status = response.data.data.status;
-                        this.$nextTick(() => this.$emit('saved', response));
-                    }
-
-                    this.quickSave = false;
-                    this.isAutosave = false;
-                }).catch(e => console.error(e));
-        },
-
-        confirmPublish() {
-            if (this.canPublish) {
-                this.confirmingPublish = true;
-            }
-        },
 
-        handleAxiosError(e) {
-            this.saving = false;
-            if (e.response && e.response.status === 422) {
-                const { message, errors } = e.response.data;
-                this.error = message;
-                this.errors = errors;
-                this.$toast.error(message);
-            } else if (e.response) {
-                this.$toast.error(e.response.data.message);
-            } else {
-                this.$toast.error(e || 'Something went wrong');
-            }
-        },
+                let nextAction = this.quickSave || this.isAutosave ? 'continue_editing' : this.afterSaveOption;
 
-        localizationSelected(localization) {
-            if (localization.active) return;
+                // If the user has opted to create another entry, redirect them to create page.
+                if (!this.isInline && nextAction === 'create_another') {
+                    window.location = this.createAnotherUrl;
+                }
 
-            if (this.isDirty) {
-                if (! confirm(__('Are you sure? Unsaved changes will be lost.'))) {
-                    return;
+                // If the user has opted to go to listing (default/null option), redirect them there.
+                else if (!this.isInline && nextAction === null) {
+                    window.location = this.listingUrl;
                 }
-            }
 
-            this.$dirty.remove(this.publishContainer);
+                // Otherwise, leave them on the edit form and emit an event. We need to wait until after
+                // the hooks are resolved because if this form is being shown in a stack, we only
+                // want to close it once everything's done.
+                else {
+                    this.values = this.resetValuesFromResponse(response.data.data.values);
+                    this.initialPublished = response.data.data.published;
+                    this.activeLocalization.published = response.data.data.published;
+                    this.activeLocalization.status = response.data.data.status;
+                    this.$nextTick(() => this.$emit('saved', response));
+                }
 
-            this.localizing = localization;
+                this.quickSave = false;
+                this.isAutosave = false;
+            }).catch(e => console.error(e));
+    },
 
-            if (localization.exists) {
-                this.editLocalization(localization);
-            } else if (this.localizations.length > 2 && this.originBehavior === 'select') {
-                this.selectingOrigin = true;
-            } else {
-                this.createLocalization(localization);
-            }
+    confirmPublish() {
+        if (this.canPublish) {
+            this.confirmingPublish = true;
+        }
+    },
 
-            if (this.isBase) {
-                window.history.replaceState({}, '', localization.url);
-            }
-        },
-
-        editLocalization(localization) {
-            return this.$axios.get(localization.url).then(response => {
-                clearTimeout(this.trackDirtyStateTimeout);
-                this.trackDirtyState = false;
-
-                const data = response.data;
-                this.values = data.values;
-                this.originValues = data.originValues;
-                this.originMeta = data.originMeta;
-                this.meta = data.meta;
-                this.localizations = data.localizations;
-                this.localizedFields = data.localizedFields;
-                this.hasOrigin = data.hasOrigin;
-                this.publishUrl = data.actions[this.action];
-                this.collection = data.collection;
-                this.title = data.editing ? data.values.title : this.title;
-                this.actions = data.actions;
-                this.fieldset = data.blueprint;
-                this.isRoot = data.isRoot;
-                this.permalink = data.permalink;
-                this.site = localization.handle;
-                this.localizing = false;
-
-                this.trackDirtyStateTimeout = setTimeout(() => this.trackDirtyState = true, 300); // after any fieldtypes do a debounced update
-            })
-        },
+    handleAxiosError(e) {
+        this.saving = false;
+        if (e.response && e.response.status === 422) {
+            const { message, errors } = e.response.data;
+            this.error = message;
+            this.errors = errors;
+            this.$toast.error(message);
+        } else if (e.response) {
+            this.$toast.error(e.response.data.message);
+        } else {
+            this.$toast.error(e || 'Something went wrong');
+        }
+    },
 
-        createLocalization(localization) {
-            this.selectingOrigin = false;
+    localizationSelected(localization) {
+        if (localization.active) return;
 
-            if (this.isCreating) {
-                this.$nextTick(() => window.location = localization.url);
+        if (this.isDirty) {
+            if (! confirm(__('Are you sure? Unsaved changes will be lost.'))) {
                 return;
             }
+        }
 
-            const originLocalization = this.localizations.find(e => e.handle === this.selectedOrigin);
-            const url = originLocalization.url + '/localize';
-            this.$axios.post(url, { site: localization.handle }).then(response => {
-                this.editLocalization(response.data).then(() => {
-                    this.$events.$emit('localization.created', { store: this.publishContainer });
+        this.$dirty.remove(this.publishContainer);
 
-                    if (this.originValues.published) {
-                        this.setFieldValue('published', true);
-                    }
-                });
-            });
-        },
+        this.localizing = localization;
 
-        cancelLocalization() {
-            this.selectingOrigin = false;
-            this.localizing = false;
-        },
-
-        localizationStatusText(localization) {
-            if (! localization.exists) return 'This entry does not exist for this site.';
-
-            return localization.published
-                ? 'This entry exists in this site, and is published.'
-                : 'This entry exists in this site, but is not published.';
-        },
-
-        openLivePreview() {
-            this.sectionsVisible = false;
-            this.$wait(200)
-                .then(() => {
-                    this.isPreviewing = true;
-                    return this.$wait(300);
-                })
-                .then(() => this.sectionsVisible = true);
-        },
-
-        closeLivePreview() {
-            this.isPreviewing = false;
-            this.sectionsVisible = true;
-        },
-
-        publishActionCompleted({ published, isWorkingCopy, response }) {
-            this.saving = false;
-            if (published !== undefined) {
-                this.$refs.container.setFieldValue('published', published);
-                this.initialPublished = published;
-            }
-            this.$refs.container.saved();
-            this.isWorkingCopy = isWorkingCopy;
-            this.confirmingPublish = false;
-            this.title = response.data.data.title;
-            this.activeLocalization.title = response.data.data.title;
-            this.activeLocalization.published = response.data.data.published;
-            this.activeLocalization.status = response.data.data.status;
-            this.permalink = response.data.data.permalink
-            this.$nextTick(() => this.$emit('saved', response));
-        },
+        if (localization.exists) {
+            this.editLocalization(localization);
+        } else if (this.localizations.length > 2 && this.originBehavior === 'select') {
+            this.selectingOrigin = true;
+        } else {
+            this.createLocalization(localization);
+        }
 
-        setFieldValue(handle, value) {
-            if (this.hasOrigin) this.desyncField(handle);
+        if (this.isBase) {
+            window.history.replaceState({}, '', localization.url);
+        }
+    },
 
-            this.$refs.container.setFieldValue(handle, value);
-        },
+    editLocalization(localization) {
+        return this.$axios.get(localization.url).then(response => {
+            clearTimeout(this.trackDirtyStateTimeout);
+            this.trackDirtyState = false;
+
+            const data = response.data;
+            this.values = data.values;
+            this.originValues = data.originValues;
+            this.originMeta = data.originMeta;
+            this.meta = data.meta;
+            this.localizations = data.localizations;
+            this.localizedFields = data.localizedFields;
+            this.hasOrigin = data.hasOrigin;
+            this.publishUrl = data.actions[this.action];
+            this.collection = data.collection;
+            this.title = data.editing ? data.values.title : this.title;
+            this.actions = data.actions;
+            this.fieldset = data.blueprint;
+            this.isRoot = data.isRoot;
+            this.permalink = data.permalink;
+            this.site = localization.handle;
+            this.localizing = false;
 
-        syncField(handle) {
-            if (! confirm('Are you sure? This field\'s value will be replaced by the value in the original entry.'))
-                return;
+            this.trackDirtyStateTimeout = setTimeout(() => this.trackDirtyState = true, 300); // after any fieldtypes do a debounced update
+        })
+    },
 
-            this.localizedFields = this.localizedFields.filter(field => field !== handle);
-            this.$refs.container.setFieldValue(handle, this.originValues[handle]);
+    createLocalization(localization) {
+        this.selectingOrigin = false;
 
-            // Update the meta for this field. For instance, a relationship field would have its data preloaded into it.
-            // If you sync the field, the preloaded data would be outdated and an ID would show instead of the titles.
-            this.meta[handle] = this.originMeta[handle];
-        },
+        if (this.isCreating) {
+            this.$nextTick(() => window.location = localization.url);
+            return;
+        }
 
-        desyncField(handle) {
-            if (!this.localizedFields.includes(handle))
-                this.localizedFields.push(handle);
+        const originLocalization = this.localizations.find(e => e.handle === this.selectedOrigin);
+        const url = originLocalization.url + '/localize';
+        this.$axios.post(url, { site: localization.handle }).then(response => {
+            this.editLocalization(response.data).then(() => {
+                this.$events.$emit('localization.created', { store: this.publishContainer });
 
-            this.$refs.container.dirty();
-        },
+                if (this.originValues.published) {
+                    this.setFieldValue('published', true);
+                }
+            });
+        });
+    },
 
-        setAutosaveInterval() {
-            const interval = setInterval(() => {
-                if (!this.isDirty) return;
+    cancelLocalization() {
+        this.selectingOrigin = false;
+        this.localizing = false;
+    },
 
-                this.isAutosave = true;
-                this.save();
-            }, this.autosaveInterval);
+    localizationStatusText(localization) {
+        if (! localization.exists) return 'This entry does not exist for this site.';
 
-            this.$store.commit(`publish/${this.publishContainer}/setAutosaveInterval`, interval);
-        }
+        return localization.published
+            ? 'This entry exists in this site, and is published.'
+            : 'This entry exists in this site, but is not published.';
     },
 
-    mounted() {
-        this.saveKeyBinding = this.$keys.bindGlobal(['mod+return'], e => {
-            e.preventDefault();
-            if (this.confirmingPublish) return;
-            this.save();
-        });
-
-        this.quickSaveKeyBinding = this.$keys.bindGlobal(['mod+s'], e => {
-            e.preventDefault();
-            if (this.confirmingPublish) return;
-            this.quickSave = true;
-            this.save();
-        });
+    openLivePreview() {
+        this.sectionsVisible = false;
+        this.$wait(200)
+            .then(() => {
+                this.isPreviewing = true;
+                return this.$wait(300);
+            })
+            .then(() => this.sectionsVisible = true);
+    },
 
-        this.$store.commit(`publish/${this.publishContainer}/setPreloadedAssets`, this.preloadedAssets);
+    closeLivePreview() {
+        this.isPreviewing = false;
+        this.sectionsVisible = true;
+    },
 
-        if (typeof this.autosaveInterval === 'number') {
-            this.setAutosaveInterval();
+    publishActionCompleted({ published, isWorkingCopy, response }) {
+        this.saving = false;
+        if (published !== undefined) {
+            this.$refs.container.setFieldValue('published', published);
+            this.initialPublished = published;
         }
+        this.$refs.container.saved();
+        this.isWorkingCopy = isWorkingCopy;
+        this.confirmingPublish = false;
+        this.title = response.data.data.title;
+        this.activeLocalization.title = response.data.data.title;
+        this.activeLocalization.published = response.data.data.published;
+        this.activeLocalization.status = response.data.data.status;
+        this.permalink = response.data.data.permalink
+        this.$nextTick(() => this.$emit('saved', response));
     },
 
-    created() {
-        window.history.replaceState({}, document.title, document.location.href.replace('created=true', ''));
+    setFieldValue(handle, value) {
+        if (this.hasOrigin) this.desyncField(handle);
 
-        this.selectedOrigin = this.originBehavior === 'active'
-            ? this.localizations.find(l => l.active)?.handle
-            : this.localizations.find(l => l.root)?.handle;
+        this.$refs.container.setFieldValue(handle, value);
     },
 
-    unmounted() {
-        clearTimeout(this.trackDirtyStateTimeout);
+    syncField(handle) {
+        if (! confirm('Are you sure? This field\'s value will be replaced by the value in the original entry.'))
+            return;
+
+        this.localizedFields = this.localizedFields.filter(field => field !== handle);
+        this.$refs.container.setFieldValue(handle, this.originValues[handle]);
+
+        // Update the meta for this field. For instance, a relationship field would have its data preloaded into it.
+        // If you sync the field, the preloaded data would be outdated and an ID would show instead of the titles.
+        this.meta[handle] = this.originMeta[handle];
     },
 
-    beforeDestroy() {
-        this.$store.commit(`publish/${this.publishContainer}/clearAutosaveInterval`);
+    desyncField(handle) {
+        if (!this.localizedFields.includes(handle))
+            this.localizedFields.push(handle);
+
+        this.$refs.container.dirty();
     },
 
-    destroyed() {
-        this.saveKeyBinding.destroy();
-        this.quickSaveKeyBinding.destroy();
+    setAutosaveInterval() {
+        const interval = setInterval(() => {
+            if (!this.isDirty) return;
+
+            this.isAutosave = true;
+            this.save();
+        }, this.autosaveInterval);
+
+        this.$store.commit(`publish/${this.publishContainer}/setAutosaveInterval`, interval);
+    }
+},
+
+mounted() {
+    this.saveKeyBinding = this.$keys.bindGlobal(['mod+return'], e => {
+        e.preventDefault();
+        if (this.confirmingPublish) return;
+        this.save();
+    });
+
+    this.quickSaveKeyBinding = this.$keys.bindGlobal(['mod+s'], e => {
+        e.preventDefault();
+        if (this.confirmingPublish) return;
+        this.quickSave = true;
+        this.save();
+    });
+
+    this.$store.commit(`publish/${this.publishContainer}/setPreloadedAssets`, this.preloadedAssets);
+
+    if (typeof this.autosaveInterval === 'number') {
+        this.setAutosaveInterval();
     }
+},
+
+created() {
+    window.history.replaceState({}, document.title, document.location.href.replace('created=true', ''));
+
+    this.selectedOrigin = this.originBehavior === 'active'
+        ? this.localizations.find(l => l.active)?.handle
+        : this.localizations.find(l => l.root)?.handle;
+},
+
+unmounted() {
+    clearTimeout(this.trackDirtyStateTimeout);
+},
+
+beforeDestroy() {
+    this.$store.commit(`publish/${this.publishContainer}/clearAutosaveInterval`);
+},
+
+destroyed() {
+    this.saveKeyBinding.destroy();
+    this.quickSaveKeyBinding.destroy();
+}
 
 }
 </script>
diff --git a/resources/js/components/entries/Widget.vue b/resources/js/components/entries/Widget.vue
index 6f0529cd58c..057467dec00 100644
--- a/resources/js/components/entries/Widget.vue
+++ b/resources/js/components/entries/Widget.vue
@@ -16,7 +16,7 @@
                 <data-list-table :loading="loading">
                     <template slot="cell-title" slot-scope="{ row: entry }">
                         <div class="flex items-center">
-                            <div class="little-dot mr-2" :class="[entry.published ? 'bg-green' : 'bg-gray-400']" />
+                            <div class="little-dot mr-2" :class="[entry.published ? 'bg-green-600' : 'bg-gray-400']" />
                             <a :href="entry.edit_url">{{ entry.title }}</a>
                         </div>
                     </template>
diff --git a/resources/js/components/fieldtypes/SelectFieldtype.vue b/resources/js/components/fieldtypes/SelectFieldtype.vue
index 8e9dc17052a..5146e450ce5 100644
--- a/resources/js/components/fieldtypes/SelectFieldtype.vue
+++ b/resources/js/components/fieldtypes/SelectFieldtype.vue
@@ -123,7 +123,7 @@ export default {
             if (this.limitExceeded) {
                 return 'text-red';
             } else if (this.limitReached) {
-                return 'text-green';
+                return 'text-green-600';
             }
 
             return 'text-gray';
diff --git a/resources/js/components/fieldtypes/ToggleIndexFieldtype.vue b/resources/js/components/fieldtypes/ToggleIndexFieldtype.vue
index 5b52f03791e..7a0c0bcce9a 100644
--- a/resources/js/components/fieldtypes/ToggleIndexFieldtype.vue
+++ b/resources/js/components/fieldtypes/ToggleIndexFieldtype.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex items-center">
-        <svg-icon name="check" class="w-3 text-green" v-if="this.value" />
+        <svg-icon name="check" class="w-3 text-green-600" v-if="this.value" />
         <svg-icon name="close" class="w-3 text-gray-500" v-if="!this.value" />
     </div>
 </template>
diff --git a/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue b/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
index e99d073e51c..0072b2c7dc6 100644
--- a/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
+++ b/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
@@ -9,7 +9,7 @@
         >
             <div class="flex items-center shrink">
                 <div v-if="item.published && item.published !== null"
-                    class="little-dot h-1 w-1 mr-1" :class="[item.published ? 'bg-green' : 'bg-gray-400']" />
+                    class="little-dot h-1 w-1 mr-1" :class="[item.published ? 'bg-green-600' : 'bg-gray-400']" />
                 <a :href="item.edit_url" :title="item.title" v-text="item.title" />
             </div>
         </div>
diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index b27154906d0..47042f428d8 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -271,7 +271,7 @@ export default {
             if (entry.published && entry.private) {
                 return 'bg-transparent border border-gray-600';
             } else if (entry.published) {
-                return 'bg-green';
+                return 'bg-green-600';
             } else {
                 return 'bg-gray-400';
             }
diff --git a/resources/js/components/structures/Branch.vue b/resources/js/components/structures/Branch.vue
index 5c9cc078190..722516e9c3d 100644
--- a/resources/js/components/structures/Branch.vue
+++ b/resources/js/components/structures/Branch.vue
@@ -112,7 +112,7 @@ export default {
         getStatusClass() {
             switch (this.page.status) {
                 case 'published':
-                    return 'bg-green';
+                    return 'bg-green-600';
                 case 'draft':
                     return 'bg-gray-400';
                 default:
diff --git a/resources/js/components/terms/PublishForm.vue b/resources/js/components/terms/PublishForm.vue
index 944a95dbca6..913e4888792 100644
--- a/resources/js/components/terms/PublishForm.vue
+++ b/resources/js/components/terms/PublishForm.vue
@@ -8,7 +8,7 @@
                 <div class="flex items-center">
                     <span v-if="! isCreating"
                         class="little-dot mr-2"
-                        :class="{ 'bg-green-light': published, 'bg-gray-600': !published }" />
+                        :class="{ 'bg-green-600': published, 'bg-gray-600': !published }" />
                     <span v-html="$options.filters.striptags(title)" />
                 </div>
             </h1>
@@ -130,7 +130,7 @@
                                 <div class="border-t p-4" v-if="revisionsEnabled">
                                     <label class="publish-field-label font-medium mb-2" v-text="__('Revisions')"/>
                                     <div class="mb-1 flex items-center" v-if="published">
-                                        <span class="text-green w-6 text-center">&check;</span>
+                                        <span class="text-green-600 w-6 text-center">&check;</span>
                                         <span class="text-2xs" v-text="__('Entry has a published version')"></span>
                                     </div>
                                     <div class="mb-1 flex items-center" v-else="published">
@@ -146,7 +146,7 @@
                                         <span class="text-2xs" v-text="__('Entry has unpublished changes')"></span>
                                     </div>
                                     <div class="mb-1 flex items-center" v-if="!isWorkingCopy && published">
-                                        <span class="text-green w-6 text-center">&check;</span>
+                                        <span class="text-green-600 w-6 text-center">&check;</span>
                                         <span class="text-2xs" v-text="__('This is the published version')"></span>
                                     </div>
                                     <button
@@ -170,7 +170,7 @@
                                     >
                                         <div class="flex-1 flex items-center" :class="{ 'line-through': !option.exists }">
                                             <span class="little-dot mr-2" :class="{
-                                                'bg-green': option.published,
+                                                'bg-green-600': option.published,
                                                 'bg-gray-500': !option.published,
                                                 'bg-red': !option.exists
                                             }" />
diff --git a/resources/js/components/users/Listing.vue b/resources/js/components/users/Listing.vue
index 0e3b447975d..36f4a958d0e 100644
--- a/resources/js/components/users/Listing.vue
+++ b/resources/js/components/users/Listing.vue
@@ -89,12 +89,16 @@
                             </a>
                         </template>
                         <template slot="cell-roles" slot-scope="{ row: user, value: roles }">
-                            <span v-if="user.super" class="badge-pill-sm mr-1">{{ __('Super Admin') }}</span>
-                            <span v-if="!roles || roles.length === 0" />
-                            <span v-for="role in (roles || [])" class="badge-pill-sm mr-1">{{ role.title }}</span>
+                            <div class="role-index-field">
+                                <div v-if="user.super" class="role-index-field-item mr-1">{{ __('Super Admin') }}</div>
+                                <div v-if="!roles || roles.length === 0" />
+                                <div v-for="(role, i) in (roles || [])" class="role-index-field-item" :class="{ 'mb-1.5': i < roles.length-1 }">{{ role.title }}</div>
+                            </div>
                         </template>
                         <template slot="cell-groups" slot-scope="{ row: user, value: groups }">
-                            <span v-for="group in (groups || [])" class="badge-pill-sm mr-1">{{ group.title }}</span>
+                            <div class="groups-index-field">
+                                <div v-for="group in (groups || [])" class="groups-index-field-item mr-1 mb-1.5">{{ group.title }}</div>
+                            </div>
                         </template>
                         <template slot="actions" slot-scope="{ row: user, index }">
                             <dropdown-list placement="left-start" scroll>
diff --git a/resources/views/blueprints/index.blade.php b/resources/views/blueprints/index.blade.php
index 9823110228a..030706f5b9a 100644
--- a/resources/views/blueprints/index.blade.php
+++ b/resources/views/blueprints/index.blade.php
@@ -38,7 +38,7 @@
                         <td>
                             <div class="flex items-center">
                                 <div class="w-4 h-4 mr-4">@cp_svg('content-writing')</div>
-                                <span class="little-dot {{ $blueprint->hidden() ? 'hollow' : 'bg-green' }} mr-2" v-tooltip="'{{ __($blueprint->hidden() ? 'Hidden': 'Visible') }}'"></span>
+                                <span class="little-dot {{ $blueprint->hidden() ? 'hollow' : 'bg-green-600' }} mr-2" v-tooltip="'{{ __($blueprint->hidden() ? 'Hidden': 'Visible') }}'"></span>
                                 <a href="{{ cp_route('collections.blueprints.edit', [$collection, $blueprint]) }}">{{ $blueprint->title() }}</a>
                             </div>
                         </td>
@@ -62,7 +62,7 @@
                         <td>
                             <div class="flex items-center">
                                 <div class="w-4 h-4 mr-4">@cp_svg('tags')</div>
-                                <span class="little-dot {{ $blueprint->hidden() ? 'hollow' : 'bg-green' }} mr-2" v-tooltip="'{{ __($blueprint->hidden() ? 'Hidden': 'Visible') }}'"></span>
+                                <span class="little-dot {{ $blueprint->hidden() ? 'hollow' : 'bg-green-600' }} mr-2" v-tooltip="'{{ __($blueprint->hidden() ? 'Hidden': 'Visible') }}'"></span>
                                 <a href="{{ cp_route('taxonomies.blueprints.edit', [$taxonomy, $blueprint]) }}">{{ $blueprint->title() }}</a>
                             </div>
                         </td>
diff --git a/resources/views/licensing.blade.php b/resources/views/licensing.blade.php
index 252edb1f8ac..61f21c066a7 100644
--- a/resources/views/licensing.blade.php
+++ b/resources/views/licensing.blade.php
@@ -50,7 +50,7 @@
             <table class="data-table">
                 <tr>
                     <td class="w-64 font-bold">
-                        <span class="little-dot {{ $site->valid() ? 'bg-green' : 'bg-red' }} mr-2"></span>
+                        <span class="little-dot {{ $site->valid() ? 'bg-green-600' : 'bg-red' }} mr-2"></span>
                         {{ $site->key() ?? __('No license key') }}
                     </td>
                     <td class="relative">
@@ -69,7 +69,7 @@
             <table class="data-table">
                 <tr>
                     <td class="w-64 font-bold">
-                        <span class="little-dot {{ $statamic->valid() ? 'bg-green' : 'bg-red' }} mr-2"></span>
+                        <span class="little-dot {{ $statamic->valid() ? 'bg-green-600' : 'bg-red' }} mr-2"></span>
                         Statamic @if ($statamic->pro())<span class="text-pink">Pro</span>@else Free @endif
                     </td>
                     <td>{{ $statamic->version() }}</td>
@@ -87,7 +87,7 @@
                 @foreach ($addons as $addon)
                     <tr>
                         <td class="w-64 mr-2">
-                            <span class="little-dot {{ $addon->valid() ? 'bg-green' : 'bg-red' }} mr-2"></span>
+                            <span class="little-dot {{ $addon->valid() ? 'bg-green-600' : 'bg-red' }} mr-2"></span>
                             <span class="font-bold"><a href="{{ $addon->addon()->marketplaceUrl() }}" class="text-gray hover:text-blue">{{ $addon->name() }}</a></span>
                             @if ($addon->edition())<span class="badge uppercase font-bold text-gray-600">{{ $addon->edition() ?? '' }}</span>@endif
                         </td>
@@ -106,7 +106,7 @@
                 @foreach ($unlistedAddons as $addon)
                     <tr>
                         <td class="w-64 font-bold mr-2">
-                            <span class="little-dot bg-green mr-2"></span>
+                            <span class="little-dot bg-green-600 mr-2"></span>
                             {{ $addon->name() }}
                         </td>
                         <td>{{ $addon->version() }}</td>
diff --git a/resources/views/playground.blade.php b/resources/views/playground.blade.php
index 2c1ecb23ce5..a28916b0bc9 100644
--- a/resources/views/playground.blade.php
+++ b/resources/views/playground.blade.php
@@ -205,7 +205,7 @@
         <h6 class="mb-4">Other Colors (needs simplifying)</h6>
         <div class="flex text-sm text-center">
             <div class="text-black bg-blue p-6 flex-1">Blue</div>
-            <div class="text-black bg-green p-6 flex-1">Green</div>
+            <div class="text-black bg-green-600 p-6 flex-1">Green</div>
             <div class="text-black bg-red p-6 flex-1">Red</div>
             <div class="text-black bg-orange-light border border-orange p-6 m-1 flex-1">Orange</div>
             <div class="text-black bg-yellow border border-yellow-dark p-6 m-1 flex-1">Yellow</div>
@@ -227,7 +227,7 @@
                 </div>
                 <div class="text-4xl mb-4">89</div>
                 <div class="flex items-center ">
-                    <span class="w-4 h-4 text-green mr-2">@cp_svg('performance-increase')</span>
+                    <span class="w-4 h-4 text-green-500 mr-2">@cp_svg('performance-increase')</span>
                     <span class="leading-none text-sm">8.54% Increase</span>
                 </div>
             </div>
@@ -242,7 +242,7 @@
                 </div>
                 <div class="text-4xl mb-4">35</div>
                 <div class="flex items-center ">
-                    <span class="w-4 h-4 text-green mr-2">@cp_svg('performance-increase')</span>
+                    <span class="w-4 h-4 text-green-500 mr-2">@cp_svg('performance-increase')</span>
                     <span class="leading-none text-sm">2.15% Increase</span>
                 </div>
             </div>
@@ -257,7 +257,7 @@
                 </div>
                 <div class="text-4xl mb-4 text-gray-400">251</div>
                 <div class="flex items-center ">
-                    <span class="w-4 h-4 text-green mr-2">@cp_svg('performance-increase')</span>
+                    <span class="w-4 h-4 text-green-500 mr-2">@cp_svg('performance-increase')</span>
                     <span class="leading-none text-gray-400 text-sm">8.54% Increase</span>
                 </div>
             </div>
diff --git a/resources/views/updater/index.blade.php b/resources/views/updater/index.blade.php
index 1d4a4380a98..c8bb19929f2 100644
--- a/resources/views/updater/index.blade.php
+++ b/resources/views/updater/index.blade.php
@@ -34,7 +34,7 @@ class="btn-primary btn-lg">{{ __('Try again') }}</a>
                     <td class="w-64"><a href="{{ route('statamic.cp.updater.product', 'statamic') }}" class="text-blue font-bold">Statamic</a></td>
                     <td>{{ $statamic->currentVersion() }}</td>
                     @if ($count = $statamic->availableUpdatesCount())
-                        <td class="text-right"><span class="badge-sm bg-green btn-sm">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
+                        <td class="text-right"><span class="badge-sm bg-green-600 btn-sm">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
                     @else
                         <td class="text-right">{{ __('Up to date') }}</td>
                     @endif
@@ -52,7 +52,7 @@ class="text-blue font-bold mr-2">{{ $addon -> name() }}</a>
                     <td>{{ $addon -> version() }}</td>
                     @if ($count = $addon->changelog()->availableUpdatesCount())
                     <td class="text-right"><span
-                            class="badge-sm bg-green btn-sm">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
+                            class="badge-sm bg-green-600 btn-sm">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
                     @else
                     <td class="text-right">{{ __('Up to date') }}</td>
                     @endif
diff --git a/resources/views/widgets/updater.blade.php b/resources/views/widgets/updater.blade.php
index 2dd1fcea7ca..4aea9f2181b 100644
--- a/resources/views/widgets/updater.blade.php
+++ b/resources/views/widgets/updater.blade.php
@@ -7,7 +7,7 @@
             <span>{{ __('Updates') }}</span>
         </h2>
         @if ($count)
-            <a href="{{ cp_route('updater') }}" class="badge-sm bg-green text-white">
+            <a href="{{ cp_route('updater') }}" class="badge-sm bg-green-600 text-white">
                 {{ trans_choice('1 update available|:count updates available', $count) }}
             </a>
         @endif
diff --git a/tailwind.config.js b/tailwind.config.js
index edbd7fc7fcd..2d43f5d28ef 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -38,11 +38,6 @@ module.exports = {
                 950: '#141a1f',
                 DEFAULT: '#73808c',
             },
-            green: {
-                dark: '#3A804D',
-                light: '#64BD63',
-                DEFAULT: '#479967',
-            },
             orange: {
                 light: '#fcc062',
                 DEFAULT: '#f5a82f',
@@ -69,7 +64,7 @@ module.exports = {
                 DEFAULT: '#fbfab0',
                 dark: '#e8dc1e',
             },
-            lime: colors.green,
+            green: colors.green,
             amber: colors.amber,
         },
         screens: {

From 77e744a3395e86e9db55736c84041a192e2a8c4e Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 13 Mar 2023 09:58:15 -0400
Subject: [PATCH 12/32] temp color move from red to rose (actually tailwind
 red)

---
 resources/css/components/fieldtypes/bard.css    |  4 ++--
 .../css/components/fieldtypes/replicator.css    |  8 ++++----
 resources/css/components/filters.css            |  2 +-
 resources/css/components/global-header.css      |  4 ++--
 resources/css/components/items.css              |  2 +-
 resources/css/components/metrics.css            |  2 +-
 resources/css/components/notifications.css      |  2 +-
 resources/css/components/publish.css            |  2 +-
 resources/css/components/revisions.css          |  2 +-
 resources/css/components/tabs.css               |  4 ++--
 resources/css/elements/badges.css               |  2 +-
 resources/css/elements/buttons.css              | 17 ++++++++++-------
 resources/css/elements/dropdowns.css            |  4 ++--
 resources/css/elements/forms.css                |  2 +-
 resources/js/components/LengthLimiter.vue       |  2 +-
 resources/js/components/SessionExpiry.vue       |  4 ++--
 resources/js/components/UpdatesBadge.vue        |  2 +-
 resources/js/components/ValidationErrors.vue    |  2 +-
 .../js/components/assets/Editor/Editor.vue      |  4 ++--
 resources/js/components/assets/Upload.vue       |  4 ++--
 resources/js/components/blueprints/Builder.vue  |  6 +++---
 .../DeleteLocalizationConfirmation.vue          |  2 +-
 resources/js/components/data-list/Action.vue    |  2 +-
 .../js/components/data-list/BulkActions.vue     |  2 +-
 .../js/components/entries/PublishActions.vue    |  2 +-
 resources/js/components/entries/PublishForm.vue |  2 +-
 .../js/components/field-conditions/Builder.vue  |  2 +-
 resources/js/components/fieldsets/EditForm.vue  |  2 +-
 .../components/fieldtypes/SelectFieldtype.vue   |  2 +-
 .../js/components/fieldtypes/grid/Cell.vue      |  2 +-
 .../js/components/fieldtypes/grid/Grid.vue      |  4 ++--
 .../components/fieldtypes/replicator/Field.vue  |  2 +-
 resources/js/components/login/LoginModal.vue    |  6 +++---
 resources/js/components/nav/ItemEditor.vue      |  8 ++++----
 resources/js/components/nav/SectionEditor.vue   |  4 ++--
 resources/js/components/publish/Field.vue       |  4 ++--
 resources/js/components/roles/PublishForm.vue   |  2 +-
 .../js/components/terms/PublishActions.vue      |  2 +-
 resources/js/components/terms/PublishForm.vue   |  2 +-
 .../js/components/user-groups/PublishForm.vue   |  4 ++--
 resources/js/components/users/Wizard.vue        |  2 +-
 resources/views/auth/login.blade.php            |  4 ++--
 resources/views/auth/passwords/email.blade.php  |  2 +-
 resources/views/auth/passwords/reset.blade.php  |  4 ++--
 .../views/auth/protect/password.antlers.html    |  2 +-
 .../collections/blueprints/create.blade.php     |  2 +-
 resources/views/licensing.blade.php             | 12 ++++++------
 resources/views/nav/duplicates.blade.php        |  2 +-
 .../views/partials/licensing-alerts.blade.php   |  2 +-
 resources/views/playground.blade.php            |  9 ++++++++-
 resources/views/utilities/email.blade.php       |  2 +-
 resources/views/utilities/search.blade.php      |  2 +-
 tailwind.config.js                              |  1 +
 53 files changed, 97 insertions(+), 86 deletions(-)

diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 737daa8fdf5..675a467127d 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -18,7 +18,7 @@
 }
 
 .bard-editor .bard-invalid {
-    @apply p-2 @lg:px-4 bg-red-lighter text-red text-xs whitespace-nowrap;
+    @apply p-2 @lg:px-4 bg-rose-100 text-rose-500 text-xs whitespace-nowrap;
 }
 
 /*  Modes */
@@ -187,7 +187,7 @@
 }
 
 .bard-set.has-error > .replicator-set-header label {
-    @apply text-red;
+    @apply text-rose-500;
 }
 
 /* The set selection options for each text block
diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css
index 34a8c75d682..8cba34a3461 100644
--- a/resources/css/components/fieldtypes/replicator.css
+++ b/resources/css/components/fieldtypes/replicator.css
@@ -44,9 +44,9 @@
 
     &.invalid {
         .replicator-set-header-inner {
-            @apply bg-red-lighter;
+            @apply bg-rose-100;
             label {
-                @apply text-red;
+                @apply text-rose-500;
             }
         }
     }
@@ -79,11 +79,11 @@
 }
 
 .replicator-set.has-error > .replicator-set-header label {
-    @apply text-red;
+    @apply text-rose-500;
 }
 
 .replicator-set-body > .has-error > label {
-    @apply text-red;
+    @apply text-rose-500;
 }
 
 .replicator-fullscreen {
diff --git a/resources/css/components/filters.css b/resources/css/components/filters.css
index 72a78ed930d..fd5791c909c 100644
--- a/resources/css/components/filters.css
+++ b/resources/css/components/filters.css
@@ -15,7 +15,7 @@
     }
 
     a.active:after {
-        @apply bg-red block;
+        @apply bg-rose-500 block;
         content: "";
         width: 4px;
         height: 4px;
diff --git a/resources/css/components/global-header.css b/resources/css/components/global-header.css
index 11447d5f937..4e1499b6fcf 100644
--- a/resources/css/components/global-header.css
+++ b/resources/css/components/global-header.css
@@ -124,12 +124,12 @@
 
 
 .session-expiry-stripe {
-    @apply px-4 py-2 text-xs top-0 text-center bg-red text-white cursor-pointer w-full outline-none fixed;
+    @apply px-4 py-2 text-xs top-0 text-center bg-rose-500 text-white cursor-pointer w-full outline-none fixed;
     z-index: 999;
     height: 48px;
 
     &:hover {
-        @apply bg-red-dark;
+        @apply bg-rose-700;
     }
 
     &:active, &:focus {
diff --git a/resources/css/components/items.css b/resources/css/components/items.css
index fdcbb17fa0f..478b6407382 100644
--- a/resources/css/components/items.css
+++ b/resources/css/components/items.css
@@ -15,7 +15,7 @@
 
     &.invalid {
         .item-inner {
-            @apply border-red bg-red-lighter text-red;
+            @apply border-rose-300 bg-rose-100 text-rose-500;
         }
     }
 
diff --git a/resources/css/components/metrics.css b/resources/css/components/metrics.css
index 0229d7739f3..8f76ce4e751 100644
--- a/resources/css/components/metrics.css
+++ b/resources/css/components/metrics.css
@@ -27,7 +27,7 @@
     &.dark { }
     &.blue { @apply bg-blue; }
     &.green { @apply bg-green-600; }
-    &.red { @apply bg-red; }
+    &.red { @apply bg-rose-500; }
 }
 
 .metric.simple {
diff --git a/resources/css/components/notifications.css b/resources/css/components/notifications.css
index 73b84f9ecc2..2ecea11b3f8 100644
--- a/resources/css/components/notifications.css
+++ b/resources/css/components/notifications.css
@@ -25,7 +25,7 @@
     }
 
     &.error i {
-        @apply bg-red;
+        @apply bg-rose-500;
     }
 
     &.default i {
diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index 3c8d4e93ae4..c5b6d9b0f39 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -55,7 +55,7 @@ code.parent-url {
     }
 
     .has-error > .field-inner > label {
-        @apply text-red;
+        @apply text-rose-500;
     }
 
     .field-inner {
diff --git a/resources/css/components/revisions.css b/resources/css/components/revisions.css
index 731a5ac57ca..382a8c77b64 100644
--- a/resources/css/components/revisions.css
+++ b/resources/css/components/revisions.css
@@ -40,7 +40,7 @@
     &.publish { @apply bg-green-600; }
     &.revision,
     &.restore { @apply text-gray-700; }
-    &.unpublish { @apply bg-red; }
+    &.unpublish { @apply bg-rose-500; }
 }
 
 .revision-item-note {
diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index 0f5feb22a08..66d36d24668 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -66,10 +66,10 @@
     }
 
     .tab-button.has-error {
-        @apply text-red;
+        @apply text-rose-500;
 
         &.active {
-            box-shadow: theme('colors.red.DEFAULT') 0px 3px inset, rgb(230, 235, 241) -1px 0px inset
+            box-shadow: theme('colors.rose.400') 0px 3px inset, rgb(230, 235, 241) -1px 0px inset
         }
     }
 }
diff --git a/resources/css/elements/badges.css b/resources/css/elements/badges.css
index 3ca495a000e..e30a182da56 100644
--- a/resources/css/elements/badges.css
+++ b/resources/css/elements/badges.css
@@ -16,7 +16,7 @@
 }
 
 .badge-updates {
-    @apply text-3xs not-italic bg-red text-white rounded-full leading-normal;
+    @apply text-3xs not-italic bg-rose-500 text-white rounded-full leading-normal;
     padding: 2px 6px 1px;
 }
 
diff --git a/resources/css/elements/buttons.css b/resources/css/elements/buttons.css
index 103c883038d..4a0bb18a67e 100644
--- a/resources/css/elements/buttons.css
+++ b/resources/css/elements/buttons.css
@@ -72,18 +72,20 @@ button {
 
 /*  Danger/delete button */
 .btn-danger {
-    background: linear-gradient(180deg, #e53e3e, #c53030);
-    border: 1px solid #9b2c2c;
-    box-shadow: inset 0 1px 0 0 #f56565, 0 1px 0 0 rgba(25,30,35,.05), 0 0 0 0 transparent;
-    color: white;
+    @apply text-white bg-gradient-to-b from-rose-500 to-rose-600 border border-rose-600 border-b-rose-900;
+    box-shadow: inset 0 1px 0 0 theme('colors.rose.400'), 0 1px 0 0 rgba(0, 0, 0,.05), 0 0 0 0 transparent;
 
     &:hover:not(:disabled), &:active:not(:disabled) {
-        background: linear-gradient(180deg, #c53030, #9b2c2c);
-        border-color: #742a2a;
+        @apply from-rose-600 to-rose-700 border border-rose-700 border-b-rose-900;
     }
 
     &:disabled {
-        @apply text-red-lighter opacity-75;
+        @apply text-rose-100 opacity-75;
+    }
+
+    &:focus {
+        @apply ring-rose-500 ring-1 ring-offset-1;
+        /* box-shadow: 0 5px 20px theme(colors.rose.400 / 0.5); */
     }
 }
 
@@ -114,6 +116,7 @@ button {
 
 .btn-sm {
     @apply text-2xs;
+    line-height: 0;
     height: 1.625rem; /*  24px */
     padding: 4px 10px;
 }
diff --git a/resources/css/elements/dropdowns.css b/resources/css/elements/dropdowns.css
index 4991420af72..c1b4e5b088a 100644
--- a/resources/css/elements/dropdowns.css
+++ b/resources/css/elements/dropdowns.css
@@ -30,10 +30,10 @@
     }
 
     button.warning, a.warning {
-        @apply text-red;
+        @apply text-rose-500;
 
         &:hover {
-            @apply bg-red text-white;
+            @apply bg-rose-500 text-white;
         }
     }
 
diff --git a/resources/css/elements/forms.css b/resources/css/elements/forms.css
index 560c4a255c6..2893a3c670b 100644
--- a/resources/css/elements/forms.css
+++ b/resources/css/elements/forms.css
@@ -205,7 +205,7 @@ input.input-text-minimal:read-only,
 
 
 label .required {
-    @apply text-red;
+    @apply text-rose-500;
     font-style: normal;
 
     + .localizable-icon {
diff --git a/resources/js/components/LengthLimiter.vue b/resources/js/components/LengthLimiter.vue
index fb8c409234f..232ebc049b6 100644
--- a/resources/js/components/LengthLimiter.vue
+++ b/resources/js/components/LengthLimiter.vue
@@ -16,7 +16,7 @@ export default {
             return (this.value) ? this.value.length : 0
         },
         limitIndicatorColor() {
-            return this.limitReached ? 'text-red' : 'text-gray'
+            return this.limitReached ? 'text-rose-500' : 'text-gray'
         }
     }
 
diff --git a/resources/js/components/SessionExpiry.vue b/resources/js/components/SessionExpiry.vue
index e867944edcb..1fc575d569c 100644
--- a/resources/js/components/SessionExpiry.vue
+++ b/resources/js/components/SessionExpiry.vue
@@ -22,11 +22,11 @@
                 <div class="form-group">
                     <label v-text="__('messages.session_expiry_enter_password')" />
                     <small
-                        class="help-block text-red"
+                        class="help-block text-rose-500"
                         v-if="errors.email"
                         v-text="errors.email[0]" />
                     <small
-                        class="help-block text-red"
+                        class="help-block text-rose-500"
                         v-if="errors.password"
                         v-text="errors.password[0]" />
                     <div class="flex items-center">
diff --git a/resources/js/components/UpdatesBadge.vue b/resources/js/components/UpdatesBadge.vue
index 54fc4ca7a2f..2c9c89dd8c2 100644
--- a/resources/js/components/UpdatesBadge.vue
+++ b/resources/js/components/UpdatesBadge.vue
@@ -1,5 +1,5 @@
 <template>
-    <span v-if="count" class="badge-sm bg-red">
+    <span v-if="count" class="badge-sm bg-rose-500">
         {{ count }}
     </span>
 </template>
diff --git a/resources/js/components/ValidationErrors.vue b/resources/js/components/ValidationErrors.vue
index c7ec280a7a7..a47fbd1d666 100644
--- a/resources/js/components/ValidationErrors.vue
+++ b/resources/js/components/ValidationErrors.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <div v-if="hasErrors" class="bg-red text-white p-4 rounded-md shadow mb-4">
+    <div v-if="hasErrors" class="bg-rose-500 text-white p-4 rounded-md shadow mb-4">
         <p v-for="(error, i) in flattenedErrors" :key="i">{{ error }}</p>
     </div>
 
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 0215b0c92bb..e3c80bf677c 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -60,7 +60,7 @@
                             <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Download') }}</span>
                         </button>
 
-                        <button v-if="allowDeleting && canRunAction('delete')" @click="runAction('delete')" class="flex bg-gray-750 hover:bg-gray-900 hover:text-red-light rounded items-center text-center px-3 py-1.5">
+                        <button v-if="allowDeleting && canRunAction('delete')" @click="runAction('delete')" class="flex bg-gray-750 hover:bg-gray-900 hover:text-rose-400 rounded items-center text-center px-3 py-1.5">
                             <svg-icon name="trash-line" class="h-4" />
                             <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Delete') }}</span>
                         </button>
@@ -127,7 +127,7 @@
                         </div>
 
                         <div class="card p-0">
-                            <div v-if="error" class="bg-red text-white p-4 shadow mb-4" v-text="error" />
+                            <div v-if="error" class="bg-rose-500 text-white p-4 shadow mb-4" v-text="error" />
                             <publish-fields
                                 :fields="fields"
                                 :read-only="readOnly"
diff --git a/resources/js/components/assets/Upload.vue b/resources/js/components/assets/Upload.vue
index 33004081232..680a96f17df 100644
--- a/resources/js/components/assets/Upload.vue
+++ b/resources/js/components/assets/Upload.vue
@@ -1,9 +1,9 @@
 <template>
 
-    <div class="flex items-center my-4" :class="{'text-red': status == 'error'}">
+    <div class="flex items-center my-4" :class="{'text-rose-500': status == 'error'}">
 
         <div class="mx-2 flex items-center">
-            <svg-icon name="micro-warning" class="text-red h-4 w-4" v-if="status === 'error'" />
+            <svg-icon name="micro-warning" class="text-rose-500 h-4 w-4" v-if="status === 'error'" />
             <loading-graphic v-else :inline="true" text="" />
         </div>
 
diff --git a/resources/js/components/blueprints/Builder.vue b/resources/js/components/blueprints/Builder.vue
index 05ef83c09d1..5b61da565c9 100644
--- a/resources/js/components/blueprints/Builder.vue
+++ b/resources/js/components/blueprints/Builder.vue
@@ -14,7 +14,7 @@
                 <label class="block">{{ __('Title') }}</label>
                 <small class="help-block">{{ __('messages.blueprints_title_instructions') }}</small>
                 <div v-if="errors.title">
-                    <small class="help-block text-red" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+                    <small class="help-block text-rose-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
                 </div>
                 <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
             </div>
@@ -23,7 +23,7 @@
                 <label class="block">{{ __('Hidden') }}</label>
                 <small class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</small>
                 <div v-if="errors.hidden">
-                    <small class="help-block text-red" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+                    <small class="help-block text-rose-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
                 </div>
                 <toggle-input name="hidden" v-model="blueprint.hidden" />
             </div>
@@ -33,7 +33,7 @@
             <h2>{{ __('Tab Sections') }}</h2>
             <p class="max-w-lg">{{ __('messages.tab_sections_instructions') }}</p>
             <div v-if="errors.sections">
-                <small class="help-block text-red" v-for="(error, i) in errors.sections" :key="i" v-text="error" />
+                <small class="help-block text-rose-500" v-for="(error, i) in errors.sections" :key="i" v-text="error" />
             </div>
         </div>
 
diff --git a/resources/js/components/collections/DeleteLocalizationConfirmation.vue b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
index 590aeee8f7c..5f1a250bf95 100644
--- a/resources/js/components/collections/DeleteLocalizationConfirmation.vue
+++ b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
@@ -23,7 +23,7 @@
                             </div>
                         </div>
 
-                        <small v-if="error" class="help-block text-red mt-2 mb-0" v-text="__('statamic::validation.required')" />
+                        <small v-if="error" class="help-block text-rose-500 mt-2 mb-0" v-text="__('statamic::validation.required')" />
                     </div>
                 </div>
             </div>
diff --git a/resources/js/components/data-list/Action.vue b/resources/js/components/data-list/Action.vue
index fbf6596b468..6f533805103 100644
--- a/resources/js/components/data-list/Action.vue
+++ b/resources/js/components/data-list/Action.vue
@@ -13,7 +13,7 @@
         >
             <div v-if="confirmationText" v-text="confirmationText" :class="{ 'mb-4': warningText || action.fields.length }" />
 
-            <div v-if="warningText" v-text="warningText" class="text-red" :class="{ 'mb-4': action.fields.length }" />
+            <div v-if="warningText" v-text="warningText" class="text-rose-500" :class="{ 'mb-4': action.fields.length }" />
 
             <publish-container
                 v-if="action.fields.length"
diff --git a/resources/js/components/data-list/BulkActions.vue b/resources/js/components/data-list/BulkActions.vue
index ec1db482be7..aa4251a13f5 100644
--- a/resources/js/components/data-list/BulkActions.vue
+++ b/resources/js/components/data-list/BulkActions.vue
@@ -20,7 +20,7 @@
                 <button
                     slot-scope="{ action, select }"
                     class="input-group-item"
-                    :class="{'text-red': action.dangerous, 'rounded-r': index + 1 === sortedActions.length }"
+                    :class="{'text-rose-500': action.dangerous, 'rounded-r': index + 1 === sortedActions.length }"
                     @click="select"
                     v-text="__(action.title)" />
             </data-list-action>
diff --git a/resources/js/components/entries/PublishActions.vue b/resources/js/components/entries/PublishActions.vue
index 987dce75662..592b6d28494 100644
--- a/resources/js/components/entries/PublishActions.vue
+++ b/resources/js/components/entries/PublishActions.vue
@@ -52,7 +52,7 @@
                         <div class="flex-1" v-text="actionInfoText" />
                     </div>
 
-                    <div class="text-gray text-xs flex mb-6 text-red" v-if="action === 'schedule'">
+                    <div class="text-gray text-xs flex mb-6 text-rose-500" v-if="action === 'schedule'">
                         <div class="pt-px w-4 mr-2">
                             <svg-icon name="info-circle" class="pt-px" />
                         </div>
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index a3b4b75e2db..004f2fe2805 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -165,7 +165,7 @@
                                         <span class="little-dot mr-2" :class="{
                                             'bg-green-600': option.published,
                                             'bg-gray-500': !option.published,
-                                            'bg-red': !option.exists
+                                            'bg-rose-500': !option.exists
                                         }" />
                                         {{ option.name }}
                                         <loading-graphic
diff --git a/resources/js/components/field-conditions/Builder.vue b/resources/js/components/field-conditions/Builder.vue
index 2799832962b..1c26f2d67df 100644
--- a/resources/js/components/field-conditions/Builder.vue
+++ b/resources/js/components/field-conditions/Builder.vue
@@ -57,7 +57,7 @@
                     class="ml-4" />
 
                 <button @click="remove(index)" class="btn-close ml-2 group">
-                    <svg-icon name="trash" class="w-4 h-4 group-hover:text-red" />
+                    <svg-icon name="trash" class="w-4 h-4 group-hover:text-rose-500" />
                 </button>
             </div>
 
diff --git a/resources/js/components/fieldsets/EditForm.vue b/resources/js/components/fieldsets/EditForm.vue
index 8c5a16d06f7..2279f16f744 100644
--- a/resources/js/components/fieldsets/EditForm.vue
+++ b/resources/js/components/fieldsets/EditForm.vue
@@ -16,7 +16,7 @@
                 <label class="block">{{ __('Title') }}</label>
                 <small class="help-block">{{ __('messages.fieldsets_title_instructions') }}</small>
                 <div v-if="errors.title">
-                    <small class="help-block text-red" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+                    <small class="help-block text-rose-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
                 </div>
                 <input type="text" name="title" class="input-text" v-model="fieldset.title" autofocus="autofocus">
             </div>
diff --git a/resources/js/components/fieldtypes/SelectFieldtype.vue b/resources/js/components/fieldtypes/SelectFieldtype.vue
index 5146e450ce5..4f36e1f033f 100644
--- a/resources/js/components/fieldtypes/SelectFieldtype.vue
+++ b/resources/js/components/fieldtypes/SelectFieldtype.vue
@@ -121,7 +121,7 @@ export default {
 
         limitIndicatorColor() {
             if (this.limitExceeded) {
-                return 'text-red';
+                return 'text-rose-500';
             } else if (this.limitReached) {
                 return 'text-green-600';
             }
diff --git a/resources/js/components/fieldtypes/grid/Cell.vue b/resources/js/components/fieldtypes/grid/Cell.vue
index e2e3d0f7897..6b22e417234 100644
--- a/resources/js/components/fieldtypes/grid/Cell.vue
+++ b/resources/js/components/fieldtypes/grid/Cell.vue
@@ -19,7 +19,7 @@
         </div>
 
         <div v-if="hasError">
-            <small class="help-block text-red mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
+            <small class="help-block text-rose-500 mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
         </div>
     </td>
 
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index c4e937edf1c..2f9ffc65664 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -12,10 +12,10 @@
 
         <section :class="{'p-4': fullScreenMode}">
 
-            <small v-if="hasExcessRows" class="help-block text-red">
+            <small v-if="hasExcessRows" class="help-block text-rose-500">
                 {{ __('Max Rows') }}: {{ maxRows }}
             </small>
-            <small v-else-if="hasNotEnoughRows" class="help-block text-red">
+            <small v-else-if="hasNotEnoughRows" class="help-block text-rose-500">
                 {{ __('Min Rows') }}: {{ minRows }}
             </small>
 
diff --git a/resources/js/components/fieldtypes/replicator/Field.vue b/resources/js/components/fieldtypes/replicator/Field.vue
index 0f460c5adcd..a11501611df 100644
--- a/resources/js/components/fieldtypes/replicator/Field.vue
+++ b/resources/js/components/fieldtypes/replicator/Field.vue
@@ -36,7 +36,7 @@
             v-html="instructions" />
 
         <div v-if="hasError">
-            <small class="help-block text-red mt-2" v-for="(error, i) in errors" :key="i" v-text="error" />
+            <small class="help-block text-rose-500 mt-2" v-for="(error, i) in errors" :key="i" v-text="error" />
         </div>
 
     </div>
diff --git a/resources/js/components/login/LoginModal.vue b/resources/js/components/login/LoginModal.vue
index f3ae30d5b87..5ed1af2dfae 100644
--- a/resources/js/components/login/LoginModal.vue
+++ b/resources/js/components/login/LoginModal.vue
@@ -8,10 +8,10 @@
             </template>
             <template slot="body">
                 <div class="mb-4">
-                    <label :class="{ 'text-red': errors.password.length }">{{ __('Password for :username', { username: this.username }) }} <i class="required">*</i></label>
+                    <label :class="{ 'text-rose-500': errors.password.length }">{{ __('Password for :username', { username: this.username }) }} <i class="required">*</i></label>
                     <input type="password" name="password" class="input-text" v-model="password" ref="password" @keydown.enter.prevent="submit" />
-                    <small class="block text-red mt-2" v-if="errors.username.length">{{ errors.username[0] }}</small>
-                    <small class="block text-red mt-2" v-if="errors.password.length">{{ errors.password[0] }}</small>
+                    <small class="block text-rose-500 mt-2" v-if="errors.username.length">{{ errors.username[0] }}</small>
+                    <small class="block text-rose-500 mt-2" v-if="errors.password.length">{{ errors.password[0] }}</small>
                 </div>
             </template>
             <template slot="footer">
diff --git a/resources/js/components/nav/ItemEditor.vue b/resources/js/components/nav/ItemEditor.vue
index 364968f38f8..d154168bcfe 100644
--- a/resources/js/components/nav/ItemEditor.vue
+++ b/resources/js/components/nav/ItemEditor.vue
@@ -17,20 +17,20 @@
 
                 <div class="publish-field mb-8" :class="{ 'has-error': validateDisplay }">
                     <div class="field-inner">
-                        <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-red">*</span></label>
+                        <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-rose-500">*</span></label>
                         <text-input v-model="config.display" :focus="true" />
-                        <div v-if="validateDisplay" class="help-block text-red mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+                        <div v-if="validateDisplay" class="help-block text-rose-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
                     </div>
                 </div>
 
                 <div class="publish-field mb-8" :class="{ 'has-error': validateUrl }">
                     <div class="field-inner">
-                        <label class="text-sm font-medium mb-2">{{ __('URL') }} <span class="text-red">*</span></label>
+                        <label class="text-sm font-medium mb-2">{{ __('URL') }} <span class="text-rose-500">*</span></label>
                         <div class="help-block -mt-2">
                             <p v-text="__('Enter any internal or external URL.')"></p>
                         </div>
                         <text-input v-model="config.url" />
-                        <div v-if="validateUrl" class="help-block text-red mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+                        <div v-if="validateUrl" class="help-block text-rose-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
                     </div>
                 </div>
 
diff --git a/resources/js/components/nav/SectionEditor.vue b/resources/js/components/nav/SectionEditor.vue
index a8ac5fcf421..0eb6377730a 100644
--- a/resources/js/components/nav/SectionEditor.vue
+++ b/resources/js/components/nav/SectionEditor.vue
@@ -17,9 +17,9 @@
 
                 <div class="publish-field mb-8" :class="{ 'has-error': validate }">
                     <div class="field-inner">
-                        <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-red">*</span></label>
+                        <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-rose-500">*</span></label>
                         <text-input v-model="section" :focus="true" />
-                        <div v-if="validate" class="help-block text-red mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+                        <div v-if="validate" class="help-block text-rose-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
                     </div>
                 </div>
 
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 4346852e1bd..daa79a571a9 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -52,7 +52,7 @@
         <loading-graphic v-if="loadingMeta" :size="16" :inline="true" />
 
         <slot name="fieldtype" v-if="!loadingMeta">
-            <div class="text-xs text-red" v-if="!fieldtypeComponentExists">Component <code v-text="fieldtypeComponent"></code> does not exist.</div>
+            <div class="text-xs text-rose-500" v-if="!fieldtypeComponentExists">Component <code v-text="fieldtypeComponent"></code> does not exist.</div>
             <component
                 v-else
                 :is="fieldtypeComponent"
@@ -76,7 +76,7 @@
             v-html="instructions" />
 
         <div v-if="hasError">
-            <small class="help-block text-red mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
+            <small class="help-block text-rose-500 mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
         </div>
     </div>
     </publish-field-meta>
diff --git a/resources/js/components/roles/PublishForm.vue b/resources/js/components/roles/PublishForm.vue
index d13bee557a2..722cf07fcfd 100644
--- a/resources/js/components/roles/PublishForm.vue
+++ b/resources/js/components/roles/PublishForm.vue
@@ -31,7 +31,7 @@
                     v-model="handle"
                 />
 
-                <div class="text-xs text-red p-6 pt-0" v-if="initialHandle && handle != initialHandle">
+                <div class="text-xs text-rose-500 p-6 pt-0" v-if="initialHandle && handle != initialHandle">
                     {{ __('messages.role_change_handle_warning') }}
                 </div>
 
diff --git a/resources/js/components/terms/PublishActions.vue b/resources/js/components/terms/PublishActions.vue
index 919f48af1b1..68602dfce2b 100644
--- a/resources/js/components/terms/PublishActions.vue
+++ b/resources/js/components/terms/PublishActions.vue
@@ -52,7 +52,7 @@
                         <div class="flex-1" v-text="actionInfoText" />
                     </div>
 
-                    <div class="text-gray text-xs flex mb-6 text-red" v-if="action === 'schedule'">
+                    <div class="text-gray text-xs flex mb-6 text-rose-500" v-if="action === 'schedule'">
                         <div class="pt-px w-4 mr-2">
                             <svg-icon name="info-circle" class="pt-px" />
                         </div>
diff --git a/resources/js/components/terms/PublishForm.vue b/resources/js/components/terms/PublishForm.vue
index 913e4888792..e3f9d99c06e 100644
--- a/resources/js/components/terms/PublishForm.vue
+++ b/resources/js/components/terms/PublishForm.vue
@@ -172,7 +172,7 @@
                                             <span class="little-dot mr-2" :class="{
                                                 'bg-green-600': option.published,
                                                 'bg-gray-500': !option.published,
-                                                'bg-red': !option.exists
+                                                'bg-rose-500': !option.exists
                                             }" />
                                             {{ option.name }}
                                             <loading-graphic :size="14" text="" class="ml-2" v-if="localizing === option.handle" />
diff --git a/resources/js/components/user-groups/PublishForm.vue b/resources/js/components/user-groups/PublishForm.vue
index ebf7d4c5be6..0b984b4eb21 100644
--- a/resources/js/components/user-groups/PublishForm.vue
+++ b/resources/js/components/user-groups/PublishForm.vue
@@ -29,7 +29,7 @@
                     v-model="handle"
                 />
 
-                <div class="text-xs text-red p-6 pt-0" v-if="initialHandle && handle != initialHandle">
+                <div class="text-xs text-rose-500 p-6 pt-0" v-if="initialHandle && handle != initialHandle">
                     {{ __('messages.role_change_handle_warning') }}
                 </div>
 
@@ -53,7 +53,7 @@
                                 @input="roles = $event" />
                         </div>
                     </publish-field-meta>
-                    <small class="help-block text-red mt-2 mb-0" v-if="errors.roles" v-text="errors.roles[0]" />
+                    <small class="help-block text-rose-500 mt-2 mb-0" v-if="errors.roles" v-text="errors.roles[0]" />
                 </div>
 
             </div>
diff --git a/resources/js/components/users/Wizard.vue b/resources/js/components/users/Wizard.vue
index c6fa7ff1c38..2539597722f 100644
--- a/resources/js/components/users/Wizard.vue
+++ b/resources/js/components/users/Wizard.vue
@@ -21,7 +21,7 @@
                 <label class="font-bold text-base mb-1" for="email">{{ __('Email Address') }}*</label>
                 <input type="email" v-model="user.email" id="email" class="input-text" required autofocus tabindex="1">
 
-                <div class="text-2xs text-red mt-2 flex items-center" v-if="userExists">
+                <div class="text-2xs text-rose-500 mt-2 flex items-center" v-if="userExists">
                     <svg-icon name="info-circle" class="h-4 w-4 mr-1 flex items-center mb-px"></svg-icon>
                     {{ __('This user already exists.') }}
                 </div>
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 4230c4018c7..f27325b096c 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -39,13 +39,13 @@
             <div class="mb-8">
                 <label class="mb-2" for="input-email">{{ __('Email') }}</label>
                 <input type="text" class="input-text input-text" name="email" value="{{ old('email') }}" autofocus id="input-email">
-                @if ($hasError('email'))<div class="text-red text-xs mt-2">{{ $errors->first('email') }}</div>@endif
+                @if ($hasError('email'))<div class="text-rose-500 text-xs mt-2">{{ $errors->first('email') }}</div>@endif
             </div>
 
             <div class="mb-8">
                 <label class="mb-2" for="input-password">{{ __('Password') }}</label>
                 <input type="password" class="input-text input-text" name="password" id="input-password">
-                @if ($hasError('password'))<div class="text-red text-xs mt-2">{{ $errors->first('password') }}</div>@endif
+                @if ($hasError('password'))<div class="text-rose-500 text-xs mt-2">{{ $errors->first('password') }}</div>@endif
             </div>
             <div class="flex justify-between items-center">
                 <label for="remember-me" class="flex items-center cursor-pointer">
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
index 19c3808efcd..625037503d1 100644
--- a/resources/views/auth/passwords/email.blade.php
+++ b/resources/views/auth/passwords/email.blade.php
@@ -23,7 +23,7 @@
                 <input id="email" type="text" class="input-text input-text" name="email" value="{{ old('email') }}" >
 
                 @error('email', 'user.forgot_password')
-                    <div class="text-red text-xs mt-2">{{ $message }}</div>
+                    <div class="text-rose-500 text-xs mt-2">{{ $message }}</div>
                 @enderror
             </div>
 
diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php
index d45c71e61ea..04ba1ddc7cc 100644
--- a/resources/views/auth/passwords/reset.blade.php
+++ b/resources/views/auth/passwords/reset.blade.php
@@ -21,7 +21,7 @@
                 <input id="email" type="email" class="input-text input-text" name="email" value="{{ $email ?? old('email') }}" autofocus required>
 
                 @error('email')
-                    <div class="text-red text-xs mt-2">{{ $message }}</div>
+                    <div class="text-rose-500 text-xs mt-2">{{ $message }}</div>
                 @enderror
             </div>
 
@@ -31,7 +31,7 @@
                 <input id="password" type="password" class="input-text input-text" name="password" required>
 
                 @error('password')
-                    <div class="text-red text-xs mt-2">{{ $message }}</div>
+                    <div class="text-rose-500 text-xs mt-2">{{ $message }}</div>
                 @enderror
             </div>
 
diff --git a/resources/views/auth/protect/password.antlers.html b/resources/views/auth/protect/password.antlers.html
index 824bef61e5c..2ae51475284 100644
--- a/resources/views/auth/protect/password.antlers.html
+++ b/resources/views/auth/protect/password.antlers.html
@@ -35,7 +35,7 @@ <h2 class="text-xl mt-4 font-normal mb-4">{{ trans key="Protected Page" }}</h2>
 
             {{ get_errors:all bag="passwordProtect" }}
                 {{ messages }}
-                    <div class="mt-6 text-sm text-red-600">{{ message }}</div>
+                    <div class="mt-6 text-sm text-rose-500-600">{{ message }}</div>
                 {{ /messages }}
             {{ /get_errors:all }}
 
diff --git a/resources/views/collections/blueprints/create.blade.php b/resources/views/collections/blueprints/create.blade.php
index 590ab0c104e..40f40d3b28b 100644
--- a/resources/views/collections/blueprints/create.blade.php
+++ b/resources/views/collections/blueprints/create.blade.php
@@ -17,7 +17,7 @@
                     {{ __('statamic::messages.blueprints_title_instructions') }}
                 </div>
                 @if ($errors->has('title'))
-                    <div class="text-red text-xs mt-2">{{ $errors->first('title') }}</div>
+                    <div class="text-rose-500 text-xs mt-2">{{ $errors->first('title') }}</div>
                 @endif
             </div>
         </div>
diff --git a/resources/views/licensing.blade.php b/resources/views/licensing.blade.php
index 61f21c066a7..694fe65fd85 100644
--- a/resources/views/licensing.blade.php
+++ b/resources/views/licensing.blade.php
@@ -50,7 +50,7 @@
             <table class="data-table">
                 <tr>
                     <td class="w-64 font-bold">
-                        <span class="little-dot {{ $site->valid() ? 'bg-green-600' : 'bg-red' }} mr-2"></span>
+                        <span class="little-dot {{ $site->valid() ? 'bg-green-600' : 'bg-rose-500' }} mr-2"></span>
                         {{ $site->key() ?? __('No license key') }}
                     </td>
                     <td class="relative">
@@ -59,7 +59,7 @@
                             <span class="text-2xs">({{ trans_choice('and :count more', $site->additionalDomainCount()) }})</span>
                         @endif
                     </td>
-                    <td class="text-right text-red">{{ $site->invalidReason() }}</td>
+                    <td class="text-right text-rose-500">{{ $site->invalidReason() }}</td>
                 </tr>
             </table>
         </div>
@@ -69,11 +69,11 @@
             <table class="data-table">
                 <tr>
                     <td class="w-64 font-bold">
-                        <span class="little-dot {{ $statamic->valid() ? 'bg-green-600' : 'bg-red' }} mr-2"></span>
+                        <span class="little-dot {{ $statamic->valid() ? 'bg-green-600' : 'bg-rose-500' }} mr-2"></span>
                         Statamic @if ($statamic->pro())<span class="text-pink">Pro</span>@else Free @endif
                     </td>
                     <td>{{ $statamic->version() }}</td>
-                    <td class="text-right text-red">{{ $statamic->invalidReason() }}</td>
+                    <td class="text-right text-rose-500">{{ $statamic->invalidReason() }}</td>
                 </tr>
             </table>
         </div>
@@ -87,12 +87,12 @@
                 @foreach ($addons as $addon)
                     <tr>
                         <td class="w-64 mr-2">
-                            <span class="little-dot {{ $addon->valid() ? 'bg-green-600' : 'bg-red' }} mr-2"></span>
+                            <span class="little-dot {{ $addon->valid() ? 'bg-green-600' : 'bg-rose-500' }} mr-2"></span>
                             <span class="font-bold"><a href="{{ $addon->addon()->marketplaceUrl() }}" class="text-gray hover:text-blue">{{ $addon->name() }}</a></span>
                             @if ($addon->edition())<span class="badge uppercase font-bold text-gray-600">{{ $addon->edition() ?? '' }}</span>@endif
                         </td>
                         <td>{{ $addon->version() }}</td>
-                        <td class="text-right text-red">{{ $addon->invalidReason() }}</td>
+                        <td class="text-right text-rose-500">{{ $addon->invalidReason() }}</td>
                     </tr>
                 @endforeach
             </table>
diff --git a/resources/views/nav/duplicates.blade.php b/resources/views/nav/duplicates.blade.php
index 036fd2b76ce..84105074618 100644
--- a/resources/views/nav/duplicates.blade.php
+++ b/resources/views/nav/duplicates.blade.php
@@ -1,6 +1,6 @@
 <li class="{{ $item->isActive() ? 'current' : '' }}">
     <a href="{{ $item->url() }}">
         <i>{!! $item->icon() !!}</i><span>{{ __($item->name()) }}</span>
-        <span class="badge-sm bg-red ml-2">{{ Statamic\Facades\Stache::duplicates()->count() }}</span>
+        <span class="badge-sm bg-rose-500 ml-2">{{ Statamic\Facades\Stache::duplicates()->count() }}</span>
     </a>
 </li>
diff --git a/resources/views/partials/licensing-alerts.blade.php b/resources/views/partials/licensing-alerts.blade.php
index 66129184972..d8c8a8ab58c 100644
--- a/resources/views/partials/licensing-alerts.blade.php
+++ b/resources/views/partials/licensing-alerts.blade.php
@@ -20,7 +20,7 @@
             <div class="
                 py-3 px-4 text-sm w-full rounded-md
                 @if ($licenses->isOnTestDomain()) bg-gray-800 text-gray-300 @endif
-                @if ($licenses->isOnPublicDomain()) bg-red text-white @endif
+                @if ($licenses->isOnPublicDomain()) bg-rose-500 text-white @endif
             ">
                 @if ($licenses->isOnTestDomain())
                     <div class="flex items-center justify-between">
diff --git a/resources/views/playground.blade.php b/resources/views/playground.blade.php
index a28916b0bc9..0ed88e8dd84 100644
--- a/resources/views/playground.blade.php
+++ b/resources/views/playground.blade.php
@@ -206,13 +206,20 @@
         <div class="flex text-sm text-center">
             <div class="text-black bg-blue p-6 flex-1">Blue</div>
             <div class="text-black bg-green-600 p-6 flex-1">Green</div>
-            <div class="text-black bg-red p-6 flex-1">Red</div>
             <div class="text-black bg-orange-light border border-orange p-6 m-1 flex-1">Orange</div>
             <div class="text-black bg-yellow border border-yellow-dark p-6 m-1 flex-1">Yellow</div>
             <div class="text-black bg-yellow-dark p-6 m-1 flex-1">Yellow Dark</div>
             <div class="text-black bg-pink border border-pink-dark m-1 p-6 flex-1">Pink</div>
             <div class="text-black bg-purple-light border border-purple p-6 flex-1">Purple</div>
         </div>
+
+        <h6 class="my-4">Reds</h6>
+        <div class="flex text-sm text-center space-x-1">
+            <div class="text-black bg-rose-100 border border-rose-200 p-6 flex-1">Red Lighter</div>
+            <div class="text-black bg-rose-400 p-6 flex-1">Red Light</div>
+            <div class="text-black bg-rose-500 p-6 flex-1">Red</div>
+            <div class="text-black bg-rose-700 p-6 flex-1">Red Dark</div>
+        </div>
     </div>
 
     <h2 class="mb-2">Widgets</h2>
diff --git a/resources/views/utilities/email.blade.php b/resources/views/utilities/email.blade.php
index aa78772c3f9..49eb86cb531 100644
--- a/resources/views/utilities/email.blade.php
+++ b/resources/views/utilities/email.blade.php
@@ -20,7 +20,7 @@
                 <button type="submit" class="btn-primary">{{ __('Send Test Email') }}</button>
             </div>
             @if ($errors->has('email'))
-                <p class="mt-2"><small class="help-block text-red">{{ $errors->first('email') }}</small></p>
+                <p class="mt-2"><small class="help-block text-rose-500">{{ $errors->first('email') }}</small></p>
             @endif
         </form>
     </div>
diff --git a/resources/views/utilities/search.blade.php b/resources/views/utilities/search.blade.php
index 3d8c7f6e4a4..53d023f814a 100644
--- a/resources/views/utilities/search.blade.php
+++ b/resources/views/utilities/search.blade.php
@@ -23,7 +23,7 @@
 
     <div class="card p-0">
         @if ($errors->has('indexes'))
-            <p class="p-4"><small class="help-block text-red">{{ $errors->first() }}</small></p>
+            <p class="p-4"><small class="help-block text-rose-500">{{ $errors->first() }}</small></p>
         @endif
 
         <table class="data-table">
diff --git a/tailwind.config.js b/tailwind.config.js
index 2d43f5d28ef..4b76dc35b4c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -66,6 +66,7 @@ module.exports = {
             },
             green: colors.green,
             amber: colors.amber,
+            rose: colors.red,
         },
         screens: {
             'sm': '576px',

From 3e580481286bc2ef52aba25a8f8a541be7d2e77e Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 13 Mar 2023 10:00:49 -0400
Subject: [PATCH 13/32] Rename rose back to red

---
 resources/css/components/fieldtypes/bard.css         |  4 ++--
 resources/css/components/fieldtypes/replicator.css   |  8 ++++----
 resources/css/components/filters.css                 |  2 +-
 resources/css/components/global-header.css           |  4 ++--
 resources/css/components/items.css                   |  2 +-
 resources/css/components/metrics.css                 |  2 +-
 resources/css/components/notifications.css           |  2 +-
 resources/css/components/publish.css                 |  2 +-
 resources/css/components/revisions.css               |  2 +-
 resources/css/components/tabs.css                    |  4 ++--
 resources/css/elements/badges.css                    |  2 +-
 resources/css/elements/buttons.css                   | 12 ++++++------
 resources/css/elements/dropdowns.css                 |  4 ++--
 resources/css/elements/forms.css                     |  2 +-
 resources/js/components/LengthLimiter.vue            |  2 +-
 resources/js/components/SessionExpiry.vue            |  4 ++--
 resources/js/components/UpdatesBadge.vue             |  2 +-
 resources/js/components/ValidationErrors.vue         |  2 +-
 resources/js/components/assets/Editor/Editor.vue     |  4 ++--
 resources/js/components/assets/Upload.vue            |  4 ++--
 resources/js/components/blueprints/Builder.vue       |  6 +++---
 .../collections/DeleteLocalizationConfirmation.vue   |  2 +-
 resources/js/components/data-list/Action.vue         |  2 +-
 resources/js/components/data-list/BulkActions.vue    |  2 +-
 resources/js/components/entries/PublishActions.vue   |  2 +-
 resources/js/components/entries/PublishForm.vue      |  2 +-
 resources/js/components/field-conditions/Builder.vue |  2 +-
 resources/js/components/fieldsets/EditForm.vue       |  2 +-
 .../js/components/fieldtypes/SelectFieldtype.vue     |  2 +-
 resources/js/components/fieldtypes/grid/Cell.vue     |  2 +-
 resources/js/components/fieldtypes/grid/Grid.vue     |  4 ++--
 .../js/components/fieldtypes/replicator/Field.vue    |  2 +-
 resources/js/components/login/LoginModal.vue         |  6 +++---
 resources/js/components/nav/ItemEditor.vue           |  8 ++++----
 resources/js/components/nav/SectionEditor.vue        |  4 ++--
 resources/js/components/publish/Field.vue            |  4 ++--
 resources/js/components/roles/PublishForm.vue        |  2 +-
 resources/js/components/terms/PublishActions.vue     |  2 +-
 resources/js/components/terms/PublishForm.vue        |  2 +-
 resources/js/components/user-groups/PublishForm.vue  |  4 ++--
 resources/js/components/users/Wizard.vue             |  2 +-
 resources/views/auth/login.blade.php                 |  4 ++--
 resources/views/auth/passwords/email.blade.php       |  2 +-
 resources/views/auth/passwords/reset.blade.php       |  4 ++--
 resources/views/auth/protect/password.antlers.html   |  2 +-
 .../views/collections/blueprints/create.blade.php    |  2 +-
 resources/views/licensing.blade.php                  | 12 ++++++------
 resources/views/nav/duplicates.blade.php             |  2 +-
 resources/views/partials/licensing-alerts.blade.php  |  2 +-
 resources/views/playground.blade.php                 |  8 ++++----
 resources/views/utilities/email.blade.php            |  2 +-
 resources/views/utilities/search.blade.php           |  2 +-
 tailwind.config.js                                   | 10 ++--------
 53 files changed, 90 insertions(+), 96 deletions(-)

diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 675a467127d..575df355af0 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -18,7 +18,7 @@
 }
 
 .bard-editor .bard-invalid {
-    @apply p-2 @lg:px-4 bg-rose-100 text-rose-500 text-xs whitespace-nowrap;
+    @apply p-2 @lg:px-4 bg-red-100 text-red-500 text-xs whitespace-nowrap;
 }
 
 /*  Modes */
@@ -187,7 +187,7 @@
 }
 
 .bard-set.has-error > .replicator-set-header label {
-    @apply text-rose-500;
+    @apply text-red-500;
 }
 
 /* The set selection options for each text block
diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css
index 8cba34a3461..216310d53b4 100644
--- a/resources/css/components/fieldtypes/replicator.css
+++ b/resources/css/components/fieldtypes/replicator.css
@@ -44,9 +44,9 @@
 
     &.invalid {
         .replicator-set-header-inner {
-            @apply bg-rose-100;
+            @apply bg-red-100;
             label {
-                @apply text-rose-500;
+                @apply text-red-500;
             }
         }
     }
@@ -79,11 +79,11 @@
 }
 
 .replicator-set.has-error > .replicator-set-header label {
-    @apply text-rose-500;
+    @apply text-red-500;
 }
 
 .replicator-set-body > .has-error > label {
-    @apply text-rose-500;
+    @apply text-red-500;
 }
 
 .replicator-fullscreen {
diff --git a/resources/css/components/filters.css b/resources/css/components/filters.css
index fd5791c909c..30658159474 100644
--- a/resources/css/components/filters.css
+++ b/resources/css/components/filters.css
@@ -15,7 +15,7 @@
     }
 
     a.active:after {
-        @apply bg-rose-500 block;
+        @apply bg-red-500 block;
         content: "";
         width: 4px;
         height: 4px;
diff --git a/resources/css/components/global-header.css b/resources/css/components/global-header.css
index 4e1499b6fcf..b05d74975f8 100644
--- a/resources/css/components/global-header.css
+++ b/resources/css/components/global-header.css
@@ -124,12 +124,12 @@
 
 
 .session-expiry-stripe {
-    @apply px-4 py-2 text-xs top-0 text-center bg-rose-500 text-white cursor-pointer w-full outline-none fixed;
+    @apply px-4 py-2 text-xs top-0 text-center bg-red-500 text-white cursor-pointer w-full outline-none fixed;
     z-index: 999;
     height: 48px;
 
     &:hover {
-        @apply bg-rose-700;
+        @apply bg-red-700;
     }
 
     &:active, &:focus {
diff --git a/resources/css/components/items.css b/resources/css/components/items.css
index 478b6407382..d8b712473f4 100644
--- a/resources/css/components/items.css
+++ b/resources/css/components/items.css
@@ -15,7 +15,7 @@
 
     &.invalid {
         .item-inner {
-            @apply border-rose-300 bg-rose-100 text-rose-500;
+            @apply border-red-300 bg-red-100 text-red-500;
         }
     }
 
diff --git a/resources/css/components/metrics.css b/resources/css/components/metrics.css
index 8f76ce4e751..d71136fc857 100644
--- a/resources/css/components/metrics.css
+++ b/resources/css/components/metrics.css
@@ -27,7 +27,7 @@
     &.dark { }
     &.blue { @apply bg-blue; }
     &.green { @apply bg-green-600; }
-    &.red { @apply bg-rose-500; }
+    &.red { @apply bg-red-500; }
 }
 
 .metric.simple {
diff --git a/resources/css/components/notifications.css b/resources/css/components/notifications.css
index 2ecea11b3f8..3838fb7043f 100644
--- a/resources/css/components/notifications.css
+++ b/resources/css/components/notifications.css
@@ -25,7 +25,7 @@
     }
 
     &.error i {
-        @apply bg-rose-500;
+        @apply bg-red-500;
     }
 
     &.default i {
diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index c5b6d9b0f39..bec4122e484 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -55,7 +55,7 @@ code.parent-url {
     }
 
     .has-error > .field-inner > label {
-        @apply text-rose-500;
+        @apply text-red-500;
     }
 
     .field-inner {
diff --git a/resources/css/components/revisions.css b/resources/css/components/revisions.css
index 382a8c77b64..39ada720f7b 100644
--- a/resources/css/components/revisions.css
+++ b/resources/css/components/revisions.css
@@ -40,7 +40,7 @@
     &.publish { @apply bg-green-600; }
     &.revision,
     &.restore { @apply text-gray-700; }
-    &.unpublish { @apply bg-rose-500; }
+    &.unpublish { @apply bg-red-500; }
 }
 
 .revision-item-note {
diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index 66d36d24668..eb1514da151 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -66,10 +66,10 @@
     }
 
     .tab-button.has-error {
-        @apply text-rose-500;
+        @apply text-red-500;
 
         &.active {
-            box-shadow: theme('colors.rose.400') 0px 3px inset, rgb(230, 235, 241) -1px 0px inset
+            box-shadow: theme('colors.red.400') 0px 3px inset, rgb(230, 235, 241) -1px 0px inset
         }
     }
 }
diff --git a/resources/css/elements/badges.css b/resources/css/elements/badges.css
index e30a182da56..490f1bca1f1 100644
--- a/resources/css/elements/badges.css
+++ b/resources/css/elements/badges.css
@@ -16,7 +16,7 @@
 }
 
 .badge-updates {
-    @apply text-3xs not-italic bg-rose-500 text-white rounded-full leading-normal;
+    @apply text-3xs not-italic bg-red-500 text-white rounded-full leading-normal;
     padding: 2px 6px 1px;
 }
 
diff --git a/resources/css/elements/buttons.css b/resources/css/elements/buttons.css
index 4a0bb18a67e..2760aba104e 100644
--- a/resources/css/elements/buttons.css
+++ b/resources/css/elements/buttons.css
@@ -72,20 +72,20 @@ button {
 
 /*  Danger/delete button */
 .btn-danger {
-    @apply text-white bg-gradient-to-b from-rose-500 to-rose-600 border border-rose-600 border-b-rose-900;
-    box-shadow: inset 0 1px 0 0 theme('colors.rose.400'), 0 1px 0 0 rgba(0, 0, 0,.05), 0 0 0 0 transparent;
+    @apply text-white bg-gradient-to-b from-red-500 to-red-600 border border-red-600 border-b-red-900;
+    box-shadow: inset 0 1px 0 0 theme('colors.red.400'), 0 1px 0 0 rgba(0, 0, 0,.05), 0 0 0 0 transparent;
 
     &:hover:not(:disabled), &:active:not(:disabled) {
-        @apply from-rose-600 to-rose-700 border border-rose-700 border-b-rose-900;
+        @apply from-red-600 to-red-700 border border-red-700 border-b-red-900;
     }
 
     &:disabled {
-        @apply text-rose-100 opacity-75;
+        @apply text-red-100 opacity-75;
     }
 
     &:focus {
-        @apply ring-rose-500 ring-1 ring-offset-1;
-        /* box-shadow: 0 5px 20px theme(colors.rose.400 / 0.5); */
+        @apply ring-red-500 ring-1 ring-offset-1;
+        /* box-shadow: 0 5px 20px theme(colors.red.400 / 0.5); */
     }
 }
 
diff --git a/resources/css/elements/dropdowns.css b/resources/css/elements/dropdowns.css
index c1b4e5b088a..b7bd59899d1 100644
--- a/resources/css/elements/dropdowns.css
+++ b/resources/css/elements/dropdowns.css
@@ -30,10 +30,10 @@
     }
 
     button.warning, a.warning {
-        @apply text-rose-500;
+        @apply text-red-500;
 
         &:hover {
-            @apply bg-rose-500 text-white;
+            @apply bg-red-500 text-white;
         }
     }
 
diff --git a/resources/css/elements/forms.css b/resources/css/elements/forms.css
index 2893a3c670b..97842f7b3f3 100644
--- a/resources/css/elements/forms.css
+++ b/resources/css/elements/forms.css
@@ -205,7 +205,7 @@ input.input-text-minimal:read-only,
 
 
 label .required {
-    @apply text-rose-500;
+    @apply text-red-500;
     font-style: normal;
 
     + .localizable-icon {
diff --git a/resources/js/components/LengthLimiter.vue b/resources/js/components/LengthLimiter.vue
index 232ebc049b6..a93282a8fda 100644
--- a/resources/js/components/LengthLimiter.vue
+++ b/resources/js/components/LengthLimiter.vue
@@ -16,7 +16,7 @@ export default {
             return (this.value) ? this.value.length : 0
         },
         limitIndicatorColor() {
-            return this.limitReached ? 'text-rose-500' : 'text-gray'
+            return this.limitReached ? 'text-red-500' : 'text-gray'
         }
     }
 
diff --git a/resources/js/components/SessionExpiry.vue b/resources/js/components/SessionExpiry.vue
index 1fc575d569c..69456051426 100644
--- a/resources/js/components/SessionExpiry.vue
+++ b/resources/js/components/SessionExpiry.vue
@@ -22,11 +22,11 @@
                 <div class="form-group">
                     <label v-text="__('messages.session_expiry_enter_password')" />
                     <small
-                        class="help-block text-rose-500"
+                        class="help-block text-red-500"
                         v-if="errors.email"
                         v-text="errors.email[0]" />
                     <small
-                        class="help-block text-rose-500"
+                        class="help-block text-red-500"
                         v-if="errors.password"
                         v-text="errors.password[0]" />
                     <div class="flex items-center">
diff --git a/resources/js/components/UpdatesBadge.vue b/resources/js/components/UpdatesBadge.vue
index 2c9c89dd8c2..36f7e3d26ef 100644
--- a/resources/js/components/UpdatesBadge.vue
+++ b/resources/js/components/UpdatesBadge.vue
@@ -1,5 +1,5 @@
 <template>
-    <span v-if="count" class="badge-sm bg-rose-500">
+    <span v-if="count" class="badge-sm bg-red-500">
         {{ count }}
     </span>
 </template>
diff --git a/resources/js/components/ValidationErrors.vue b/resources/js/components/ValidationErrors.vue
index a47fbd1d666..7d8c8ce9c30 100644
--- a/resources/js/components/ValidationErrors.vue
+++ b/resources/js/components/ValidationErrors.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <div v-if="hasErrors" class="bg-rose-500 text-white p-4 rounded-md shadow mb-4">
+    <div v-if="hasErrors" class="bg-red-500 text-white p-4 rounded-md shadow mb-4">
         <p v-for="(error, i) in flattenedErrors" :key="i">{{ error }}</p>
     </div>
 
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index e3c80bf677c..3111540758d 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -60,7 +60,7 @@
                             <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Download') }}</span>
                         </button>
 
-                        <button v-if="allowDeleting && canRunAction('delete')" @click="runAction('delete')" class="flex bg-gray-750 hover:bg-gray-900 hover:text-rose-400 rounded items-center text-center px-3 py-1.5">
+                        <button v-if="allowDeleting && canRunAction('delete')" @click="runAction('delete')" class="flex bg-gray-750 hover:bg-gray-900 hover:text-red-400 rounded items-center text-center px-3 py-1.5">
                             <svg-icon name="trash-line" class="h-4" />
                             <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Delete') }}</span>
                         </button>
@@ -127,7 +127,7 @@
                         </div>
 
                         <div class="card p-0">
-                            <div v-if="error" class="bg-rose-500 text-white p-4 shadow mb-4" v-text="error" />
+                            <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
                             <publish-fields
                                 :fields="fields"
                                 :read-only="readOnly"
diff --git a/resources/js/components/assets/Upload.vue b/resources/js/components/assets/Upload.vue
index 680a96f17df..505cdbad8e4 100644
--- a/resources/js/components/assets/Upload.vue
+++ b/resources/js/components/assets/Upload.vue
@@ -1,9 +1,9 @@
 <template>
 
-    <div class="flex items-center my-4" :class="{'text-rose-500': status == 'error'}">
+    <div class="flex items-center my-4" :class="{'text-red-500': status == 'error'}">
 
         <div class="mx-2 flex items-center">
-            <svg-icon name="micro-warning" class="text-rose-500 h-4 w-4" v-if="status === 'error'" />
+            <svg-icon name="micro-warning" class="text-red-500 h-4 w-4" v-if="status === 'error'" />
             <loading-graphic v-else :inline="true" text="" />
         </div>
 
diff --git a/resources/js/components/blueprints/Builder.vue b/resources/js/components/blueprints/Builder.vue
index 5b61da565c9..20c0ac68aff 100644
--- a/resources/js/components/blueprints/Builder.vue
+++ b/resources/js/components/blueprints/Builder.vue
@@ -14,7 +14,7 @@
                 <label class="block">{{ __('Title') }}</label>
                 <small class="help-block">{{ __('messages.blueprints_title_instructions') }}</small>
                 <div v-if="errors.title">
-                    <small class="help-block text-rose-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+                    <small class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
                 </div>
                 <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
             </div>
@@ -23,7 +23,7 @@
                 <label class="block">{{ __('Hidden') }}</label>
                 <small class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</small>
                 <div v-if="errors.hidden">
-                    <small class="help-block text-rose-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+                    <small class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
                 </div>
                 <toggle-input name="hidden" v-model="blueprint.hidden" />
             </div>
@@ -33,7 +33,7 @@
             <h2>{{ __('Tab Sections') }}</h2>
             <p class="max-w-lg">{{ __('messages.tab_sections_instructions') }}</p>
             <div v-if="errors.sections">
-                <small class="help-block text-rose-500" v-for="(error, i) in errors.sections" :key="i" v-text="error" />
+                <small class="help-block text-red-500" v-for="(error, i) in errors.sections" :key="i" v-text="error" />
             </div>
         </div>
 
diff --git a/resources/js/components/collections/DeleteLocalizationConfirmation.vue b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
index 5f1a250bf95..50c194adc4e 100644
--- a/resources/js/components/collections/DeleteLocalizationConfirmation.vue
+++ b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
@@ -23,7 +23,7 @@
                             </div>
                         </div>
 
-                        <small v-if="error" class="help-block text-rose-500 mt-2 mb-0" v-text="__('statamic::validation.required')" />
+                        <small v-if="error" class="help-block text-red-500 mt-2 mb-0" v-text="__('statamic::validation.required')" />
                     </div>
                 </div>
             </div>
diff --git a/resources/js/components/data-list/Action.vue b/resources/js/components/data-list/Action.vue
index 6f533805103..08db46cf4a6 100644
--- a/resources/js/components/data-list/Action.vue
+++ b/resources/js/components/data-list/Action.vue
@@ -13,7 +13,7 @@
         >
             <div v-if="confirmationText" v-text="confirmationText" :class="{ 'mb-4': warningText || action.fields.length }" />
 
-            <div v-if="warningText" v-text="warningText" class="text-rose-500" :class="{ 'mb-4': action.fields.length }" />
+            <div v-if="warningText" v-text="warningText" class="text-red-500" :class="{ 'mb-4': action.fields.length }" />
 
             <publish-container
                 v-if="action.fields.length"
diff --git a/resources/js/components/data-list/BulkActions.vue b/resources/js/components/data-list/BulkActions.vue
index aa4251a13f5..829e2dac516 100644
--- a/resources/js/components/data-list/BulkActions.vue
+++ b/resources/js/components/data-list/BulkActions.vue
@@ -20,7 +20,7 @@
                 <button
                     slot-scope="{ action, select }"
                     class="input-group-item"
-                    :class="{'text-rose-500': action.dangerous, 'rounded-r': index + 1 === sortedActions.length }"
+                    :class="{'text-red-500': action.dangerous, 'rounded-r': index + 1 === sortedActions.length }"
                     @click="select"
                     v-text="__(action.title)" />
             </data-list-action>
diff --git a/resources/js/components/entries/PublishActions.vue b/resources/js/components/entries/PublishActions.vue
index 592b6d28494..772005a7a8e 100644
--- a/resources/js/components/entries/PublishActions.vue
+++ b/resources/js/components/entries/PublishActions.vue
@@ -52,7 +52,7 @@
                         <div class="flex-1" v-text="actionInfoText" />
                     </div>
 
-                    <div class="text-gray text-xs flex mb-6 text-rose-500" v-if="action === 'schedule'">
+                    <div class="text-gray text-xs flex mb-6 text-red-500" v-if="action === 'schedule'">
                         <div class="pt-px w-4 mr-2">
                             <svg-icon name="info-circle" class="pt-px" />
                         </div>
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index 004f2fe2805..37951f6f44f 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -165,7 +165,7 @@
                                         <span class="little-dot mr-2" :class="{
                                             'bg-green-600': option.published,
                                             'bg-gray-500': !option.published,
-                                            'bg-rose-500': !option.exists
+                                            'bg-red-500': !option.exists
                                         }" />
                                         {{ option.name }}
                                         <loading-graphic
diff --git a/resources/js/components/field-conditions/Builder.vue b/resources/js/components/field-conditions/Builder.vue
index 1c26f2d67df..5a5c44885ac 100644
--- a/resources/js/components/field-conditions/Builder.vue
+++ b/resources/js/components/field-conditions/Builder.vue
@@ -57,7 +57,7 @@
                     class="ml-4" />
 
                 <button @click="remove(index)" class="btn-close ml-2 group">
-                    <svg-icon name="trash" class="w-4 h-4 group-hover:text-rose-500" />
+                    <svg-icon name="trash" class="w-4 h-4 group-hover:text-red-500" />
                 </button>
             </div>
 
diff --git a/resources/js/components/fieldsets/EditForm.vue b/resources/js/components/fieldsets/EditForm.vue
index 2279f16f744..9b173c10747 100644
--- a/resources/js/components/fieldsets/EditForm.vue
+++ b/resources/js/components/fieldsets/EditForm.vue
@@ -16,7 +16,7 @@
                 <label class="block">{{ __('Title') }}</label>
                 <small class="help-block">{{ __('messages.fieldsets_title_instructions') }}</small>
                 <div v-if="errors.title">
-                    <small class="help-block text-rose-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+                    <small class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
                 </div>
                 <input type="text" name="title" class="input-text" v-model="fieldset.title" autofocus="autofocus">
             </div>
diff --git a/resources/js/components/fieldtypes/SelectFieldtype.vue b/resources/js/components/fieldtypes/SelectFieldtype.vue
index 4f36e1f033f..9e215362c89 100644
--- a/resources/js/components/fieldtypes/SelectFieldtype.vue
+++ b/resources/js/components/fieldtypes/SelectFieldtype.vue
@@ -121,7 +121,7 @@ export default {
 
         limitIndicatorColor() {
             if (this.limitExceeded) {
-                return 'text-rose-500';
+                return 'text-red-500';
             } else if (this.limitReached) {
                 return 'text-green-600';
             }
diff --git a/resources/js/components/fieldtypes/grid/Cell.vue b/resources/js/components/fieldtypes/grid/Cell.vue
index 6b22e417234..7194234a73d 100644
--- a/resources/js/components/fieldtypes/grid/Cell.vue
+++ b/resources/js/components/fieldtypes/grid/Cell.vue
@@ -19,7 +19,7 @@
         </div>
 
         <div v-if="hasError">
-            <small class="help-block text-rose-500 mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
+            <small class="help-block text-red-500 mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
         </div>
     </td>
 
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index 2f9ffc65664..876a86bb2ac 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -12,10 +12,10 @@
 
         <section :class="{'p-4': fullScreenMode}">
 
-            <small v-if="hasExcessRows" class="help-block text-rose-500">
+            <small v-if="hasExcessRows" class="help-block text-red-500">
                 {{ __('Max Rows') }}: {{ maxRows }}
             </small>
-            <small v-else-if="hasNotEnoughRows" class="help-block text-rose-500">
+            <small v-else-if="hasNotEnoughRows" class="help-block text-red-500">
                 {{ __('Min Rows') }}: {{ minRows }}
             </small>
 
diff --git a/resources/js/components/fieldtypes/replicator/Field.vue b/resources/js/components/fieldtypes/replicator/Field.vue
index a11501611df..ff788dd39e3 100644
--- a/resources/js/components/fieldtypes/replicator/Field.vue
+++ b/resources/js/components/fieldtypes/replicator/Field.vue
@@ -36,7 +36,7 @@
             v-html="instructions" />
 
         <div v-if="hasError">
-            <small class="help-block text-rose-500 mt-2" v-for="(error, i) in errors" :key="i" v-text="error" />
+            <small class="help-block text-red-500 mt-2" v-for="(error, i) in errors" :key="i" v-text="error" />
         </div>
 
     </div>
diff --git a/resources/js/components/login/LoginModal.vue b/resources/js/components/login/LoginModal.vue
index 5ed1af2dfae..df8b451d05b 100644
--- a/resources/js/components/login/LoginModal.vue
+++ b/resources/js/components/login/LoginModal.vue
@@ -8,10 +8,10 @@
             </template>
             <template slot="body">
                 <div class="mb-4">
-                    <label :class="{ 'text-rose-500': errors.password.length }">{{ __('Password for :username', { username: this.username }) }} <i class="required">*</i></label>
+                    <label :class="{ 'text-red-500': errors.password.length }">{{ __('Password for :username', { username: this.username }) }} <i class="required">*</i></label>
                     <input type="password" name="password" class="input-text" v-model="password" ref="password" @keydown.enter.prevent="submit" />
-                    <small class="block text-rose-500 mt-2" v-if="errors.username.length">{{ errors.username[0] }}</small>
-                    <small class="block text-rose-500 mt-2" v-if="errors.password.length">{{ errors.password[0] }}</small>
+                    <small class="block text-red-500 mt-2" v-if="errors.username.length">{{ errors.username[0] }}</small>
+                    <small class="block text-red-500 mt-2" v-if="errors.password.length">{{ errors.password[0] }}</small>
                 </div>
             </template>
             <template slot="footer">
diff --git a/resources/js/components/nav/ItemEditor.vue b/resources/js/components/nav/ItemEditor.vue
index d154168bcfe..d5bf33c222d 100644
--- a/resources/js/components/nav/ItemEditor.vue
+++ b/resources/js/components/nav/ItemEditor.vue
@@ -17,20 +17,20 @@
 
                 <div class="publish-field mb-8" :class="{ 'has-error': validateDisplay }">
                     <div class="field-inner">
-                        <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-rose-500">*</span></label>
+                        <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-red-500">*</span></label>
                         <text-input v-model="config.display" :focus="true" />
-                        <div v-if="validateDisplay" class="help-block text-rose-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+                        <div v-if="validateDisplay" class="help-block text-red-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
                     </div>
                 </div>
 
                 <div class="publish-field mb-8" :class="{ 'has-error': validateUrl }">
                     <div class="field-inner">
-                        <label class="text-sm font-medium mb-2">{{ __('URL') }} <span class="text-rose-500">*</span></label>
+                        <label class="text-sm font-medium mb-2">{{ __('URL') }} <span class="text-red-500">*</span></label>
                         <div class="help-block -mt-2">
                             <p v-text="__('Enter any internal or external URL.')"></p>
                         </div>
                         <text-input v-model="config.url" />
-                        <div v-if="validateUrl" class="help-block text-rose-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+                        <div v-if="validateUrl" class="help-block text-red-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
                     </div>
                 </div>
 
diff --git a/resources/js/components/nav/SectionEditor.vue b/resources/js/components/nav/SectionEditor.vue
index 0eb6377730a..ca4f626a34a 100644
--- a/resources/js/components/nav/SectionEditor.vue
+++ b/resources/js/components/nav/SectionEditor.vue
@@ -17,9 +17,9 @@
 
                 <div class="publish-field mb-8" :class="{ 'has-error': validate }">
                     <div class="field-inner">
-                        <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-rose-500">*</span></label>
+                        <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-red-500">*</span></label>
                         <text-input v-model="section" :focus="true" />
-                        <div v-if="validate" class="help-block text-rose-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+                        <div v-if="validate" class="help-block text-red-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
                     </div>
                 </div>
 
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index daa79a571a9..28164d265b9 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -52,7 +52,7 @@
         <loading-graphic v-if="loadingMeta" :size="16" :inline="true" />
 
         <slot name="fieldtype" v-if="!loadingMeta">
-            <div class="text-xs text-rose-500" v-if="!fieldtypeComponentExists">Component <code v-text="fieldtypeComponent"></code> does not exist.</div>
+            <div class="text-xs text-red-500" v-if="!fieldtypeComponentExists">Component <code v-text="fieldtypeComponent"></code> does not exist.</div>
             <component
                 v-else
                 :is="fieldtypeComponent"
@@ -76,7 +76,7 @@
             v-html="instructions" />
 
         <div v-if="hasError">
-            <small class="help-block text-rose-500 mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
+            <small class="help-block text-red-500 mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
         </div>
     </div>
     </publish-field-meta>
diff --git a/resources/js/components/roles/PublishForm.vue b/resources/js/components/roles/PublishForm.vue
index 722cf07fcfd..d7ad24cd0d9 100644
--- a/resources/js/components/roles/PublishForm.vue
+++ b/resources/js/components/roles/PublishForm.vue
@@ -31,7 +31,7 @@
                     v-model="handle"
                 />
 
-                <div class="text-xs text-rose-500 p-6 pt-0" v-if="initialHandle && handle != initialHandle">
+                <div class="text-xs text-red-500 p-6 pt-0" v-if="initialHandle && handle != initialHandle">
                     {{ __('messages.role_change_handle_warning') }}
                 </div>
 
diff --git a/resources/js/components/terms/PublishActions.vue b/resources/js/components/terms/PublishActions.vue
index 68602dfce2b..867a7abcce5 100644
--- a/resources/js/components/terms/PublishActions.vue
+++ b/resources/js/components/terms/PublishActions.vue
@@ -52,7 +52,7 @@
                         <div class="flex-1" v-text="actionInfoText" />
                     </div>
 
-                    <div class="text-gray text-xs flex mb-6 text-rose-500" v-if="action === 'schedule'">
+                    <div class="text-gray text-xs flex mb-6 text-red-500" v-if="action === 'schedule'">
                         <div class="pt-px w-4 mr-2">
                             <svg-icon name="info-circle" class="pt-px" />
                         </div>
diff --git a/resources/js/components/terms/PublishForm.vue b/resources/js/components/terms/PublishForm.vue
index e3f9d99c06e..a55294fb09b 100644
--- a/resources/js/components/terms/PublishForm.vue
+++ b/resources/js/components/terms/PublishForm.vue
@@ -172,7 +172,7 @@
                                             <span class="little-dot mr-2" :class="{
                                                 'bg-green-600': option.published,
                                                 'bg-gray-500': !option.published,
-                                                'bg-rose-500': !option.exists
+                                                'bg-red-500': !option.exists
                                             }" />
                                             {{ option.name }}
                                             <loading-graphic :size="14" text="" class="ml-2" v-if="localizing === option.handle" />
diff --git a/resources/js/components/user-groups/PublishForm.vue b/resources/js/components/user-groups/PublishForm.vue
index 0b984b4eb21..7c4f7ef882f 100644
--- a/resources/js/components/user-groups/PublishForm.vue
+++ b/resources/js/components/user-groups/PublishForm.vue
@@ -29,7 +29,7 @@
                     v-model="handle"
                 />
 
-                <div class="text-xs text-rose-500 p-6 pt-0" v-if="initialHandle && handle != initialHandle">
+                <div class="text-xs text-red-500 p-6 pt-0" v-if="initialHandle && handle != initialHandle">
                     {{ __('messages.role_change_handle_warning') }}
                 </div>
 
@@ -53,7 +53,7 @@
                                 @input="roles = $event" />
                         </div>
                     </publish-field-meta>
-                    <small class="help-block text-rose-500 mt-2 mb-0" v-if="errors.roles" v-text="errors.roles[0]" />
+                    <small class="help-block text-red-500 mt-2 mb-0" v-if="errors.roles" v-text="errors.roles[0]" />
                 </div>
 
             </div>
diff --git a/resources/js/components/users/Wizard.vue b/resources/js/components/users/Wizard.vue
index 2539597722f..df3757ab7f4 100644
--- a/resources/js/components/users/Wizard.vue
+++ b/resources/js/components/users/Wizard.vue
@@ -21,7 +21,7 @@
                 <label class="font-bold text-base mb-1" for="email">{{ __('Email Address') }}*</label>
                 <input type="email" v-model="user.email" id="email" class="input-text" required autofocus tabindex="1">
 
-                <div class="text-2xs text-rose-500 mt-2 flex items-center" v-if="userExists">
+                <div class="text-2xs text-red-500 mt-2 flex items-center" v-if="userExists">
                     <svg-icon name="info-circle" class="h-4 w-4 mr-1 flex items-center mb-px"></svg-icon>
                     {{ __('This user already exists.') }}
                 </div>
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index f27325b096c..f6b7e23bfa3 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -39,13 +39,13 @@
             <div class="mb-8">
                 <label class="mb-2" for="input-email">{{ __('Email') }}</label>
                 <input type="text" class="input-text input-text" name="email" value="{{ old('email') }}" autofocus id="input-email">
-                @if ($hasError('email'))<div class="text-rose-500 text-xs mt-2">{{ $errors->first('email') }}</div>@endif
+                @if ($hasError('email'))<div class="text-red-500 text-xs mt-2">{{ $errors->first('email') }}</div>@endif
             </div>
 
             <div class="mb-8">
                 <label class="mb-2" for="input-password">{{ __('Password') }}</label>
                 <input type="password" class="input-text input-text" name="password" id="input-password">
-                @if ($hasError('password'))<div class="text-rose-500 text-xs mt-2">{{ $errors->first('password') }}</div>@endif
+                @if ($hasError('password'))<div class="text-red-500 text-xs mt-2">{{ $errors->first('password') }}</div>@endif
             </div>
             <div class="flex justify-between items-center">
                 <label for="remember-me" class="flex items-center cursor-pointer">
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
index 625037503d1..353ee5016cf 100644
--- a/resources/views/auth/passwords/email.blade.php
+++ b/resources/views/auth/passwords/email.blade.php
@@ -23,7 +23,7 @@
                 <input id="email" type="text" class="input-text input-text" name="email" value="{{ old('email') }}" >
 
                 @error('email', 'user.forgot_password')
-                    <div class="text-rose-500 text-xs mt-2">{{ $message }}</div>
+                    <div class="text-red-500 text-xs mt-2">{{ $message }}</div>
                 @enderror
             </div>
 
diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php
index 04ba1ddc7cc..a34fd5a8692 100644
--- a/resources/views/auth/passwords/reset.blade.php
+++ b/resources/views/auth/passwords/reset.blade.php
@@ -21,7 +21,7 @@
                 <input id="email" type="email" class="input-text input-text" name="email" value="{{ $email ?? old('email') }}" autofocus required>
 
                 @error('email')
-                    <div class="text-rose-500 text-xs mt-2">{{ $message }}</div>
+                    <div class="text-red-500 text-xs mt-2">{{ $message }}</div>
                 @enderror
             </div>
 
@@ -31,7 +31,7 @@
                 <input id="password" type="password" class="input-text input-text" name="password" required>
 
                 @error('password')
-                    <div class="text-rose-500 text-xs mt-2">{{ $message }}</div>
+                    <div class="text-red-500 text-xs mt-2">{{ $message }}</div>
                 @enderror
             </div>
 
diff --git a/resources/views/auth/protect/password.antlers.html b/resources/views/auth/protect/password.antlers.html
index 2ae51475284..d469fb5e489 100644
--- a/resources/views/auth/protect/password.antlers.html
+++ b/resources/views/auth/protect/password.antlers.html
@@ -35,7 +35,7 @@ <h2 class="text-xl mt-4 font-normal mb-4">{{ trans key="Protected Page" }}</h2>
 
             {{ get_errors:all bag="passwordProtect" }}
                 {{ messages }}
-                    <div class="mt-6 text-sm text-rose-500-600">{{ message }}</div>
+                    <div class="mt-6 text-sm text-red-500-600">{{ message }}</div>
                 {{ /messages }}
             {{ /get_errors:all }}
 
diff --git a/resources/views/collections/blueprints/create.blade.php b/resources/views/collections/blueprints/create.blade.php
index 40f40d3b28b..f499ec074d9 100644
--- a/resources/views/collections/blueprints/create.blade.php
+++ b/resources/views/collections/blueprints/create.blade.php
@@ -17,7 +17,7 @@
                     {{ __('statamic::messages.blueprints_title_instructions') }}
                 </div>
                 @if ($errors->has('title'))
-                    <div class="text-rose-500 text-xs mt-2">{{ $errors->first('title') }}</div>
+                    <div class="text-red-500 text-xs mt-2">{{ $errors->first('title') }}</div>
                 @endif
             </div>
         </div>
diff --git a/resources/views/licensing.blade.php b/resources/views/licensing.blade.php
index 694fe65fd85..4f98ead6813 100644
--- a/resources/views/licensing.blade.php
+++ b/resources/views/licensing.blade.php
@@ -50,7 +50,7 @@
             <table class="data-table">
                 <tr>
                     <td class="w-64 font-bold">
-                        <span class="little-dot {{ $site->valid() ? 'bg-green-600' : 'bg-rose-500' }} mr-2"></span>
+                        <span class="little-dot {{ $site->valid() ? 'bg-green-600' : 'bg-red-500' }} mr-2"></span>
                         {{ $site->key() ?? __('No license key') }}
                     </td>
                     <td class="relative">
@@ -59,7 +59,7 @@
                             <span class="text-2xs">({{ trans_choice('and :count more', $site->additionalDomainCount()) }})</span>
                         @endif
                     </td>
-                    <td class="text-right text-rose-500">{{ $site->invalidReason() }}</td>
+                    <td class="text-right text-red-500">{{ $site->invalidReason() }}</td>
                 </tr>
             </table>
         </div>
@@ -69,11 +69,11 @@
             <table class="data-table">
                 <tr>
                     <td class="w-64 font-bold">
-                        <span class="little-dot {{ $statamic->valid() ? 'bg-green-600' : 'bg-rose-500' }} mr-2"></span>
+                        <span class="little-dot {{ $statamic->valid() ? 'bg-green-600' : 'bg-red-500' }} mr-2"></span>
                         Statamic @if ($statamic->pro())<span class="text-pink">Pro</span>@else Free @endif
                     </td>
                     <td>{{ $statamic->version() }}</td>
-                    <td class="text-right text-rose-500">{{ $statamic->invalidReason() }}</td>
+                    <td class="text-right text-red-500">{{ $statamic->invalidReason() }}</td>
                 </tr>
             </table>
         </div>
@@ -87,12 +87,12 @@
                 @foreach ($addons as $addon)
                     <tr>
                         <td class="w-64 mr-2">
-                            <span class="little-dot {{ $addon->valid() ? 'bg-green-600' : 'bg-rose-500' }} mr-2"></span>
+                            <span class="little-dot {{ $addon->valid() ? 'bg-green-600' : 'bg-red-500' }} mr-2"></span>
                             <span class="font-bold"><a href="{{ $addon->addon()->marketplaceUrl() }}" class="text-gray hover:text-blue">{{ $addon->name() }}</a></span>
                             @if ($addon->edition())<span class="badge uppercase font-bold text-gray-600">{{ $addon->edition() ?? '' }}</span>@endif
                         </td>
                         <td>{{ $addon->version() }}</td>
-                        <td class="text-right text-rose-500">{{ $addon->invalidReason() }}</td>
+                        <td class="text-right text-red-500">{{ $addon->invalidReason() }}</td>
                     </tr>
                 @endforeach
             </table>
diff --git a/resources/views/nav/duplicates.blade.php b/resources/views/nav/duplicates.blade.php
index 84105074618..bc753f5ebf3 100644
--- a/resources/views/nav/duplicates.blade.php
+++ b/resources/views/nav/duplicates.blade.php
@@ -1,6 +1,6 @@
 <li class="{{ $item->isActive() ? 'current' : '' }}">
     <a href="{{ $item->url() }}">
         <i>{!! $item->icon() !!}</i><span>{{ __($item->name()) }}</span>
-        <span class="badge-sm bg-rose-500 ml-2">{{ Statamic\Facades\Stache::duplicates()->count() }}</span>
+        <span class="badge-sm bg-red-500 ml-2">{{ Statamic\Facades\Stache::duplicates()->count() }}</span>
     </a>
 </li>
diff --git a/resources/views/partials/licensing-alerts.blade.php b/resources/views/partials/licensing-alerts.blade.php
index d8c8a8ab58c..6a2c45118ec 100644
--- a/resources/views/partials/licensing-alerts.blade.php
+++ b/resources/views/partials/licensing-alerts.blade.php
@@ -20,7 +20,7 @@
             <div class="
                 py-3 px-4 text-sm w-full rounded-md
                 @if ($licenses->isOnTestDomain()) bg-gray-800 text-gray-300 @endif
-                @if ($licenses->isOnPublicDomain()) bg-rose-500 text-white @endif
+                @if ($licenses->isOnPublicDomain()) bg-red-500 text-white @endif
             ">
                 @if ($licenses->isOnTestDomain())
                     <div class="flex items-center justify-between">
diff --git a/resources/views/playground.blade.php b/resources/views/playground.blade.php
index 0ed88e8dd84..c953c4d49c5 100644
--- a/resources/views/playground.blade.php
+++ b/resources/views/playground.blade.php
@@ -215,10 +215,10 @@
 
         <h6 class="my-4">Reds</h6>
         <div class="flex text-sm text-center space-x-1">
-            <div class="text-black bg-rose-100 border border-rose-200 p-6 flex-1">Red Lighter</div>
-            <div class="text-black bg-rose-400 p-6 flex-1">Red Light</div>
-            <div class="text-black bg-rose-500 p-6 flex-1">Red</div>
-            <div class="text-black bg-rose-700 p-6 flex-1">Red Dark</div>
+            <div class="text-black bg-red-100 border border-red-200 p-6 flex-1">Red Lighter</div>
+            <div class="text-black bg-red-400 p-6 flex-1">Red Light</div>
+            <div class="text-black bg-red-500 p-6 flex-1">Red</div>
+            <div class="text-black bg-red-700 p-6 flex-1">Red Dark</div>
         </div>
     </div>
 
diff --git a/resources/views/utilities/email.blade.php b/resources/views/utilities/email.blade.php
index 49eb86cb531..0655b38046b 100644
--- a/resources/views/utilities/email.blade.php
+++ b/resources/views/utilities/email.blade.php
@@ -20,7 +20,7 @@
                 <button type="submit" class="btn-primary">{{ __('Send Test Email') }}</button>
             </div>
             @if ($errors->has('email'))
-                <p class="mt-2"><small class="help-block text-rose-500">{{ $errors->first('email') }}</small></p>
+                <p class="mt-2"><small class="help-block text-red-500">{{ $errors->first('email') }}</small></p>
             @endif
         </form>
     </div>
diff --git a/resources/views/utilities/search.blade.php b/resources/views/utilities/search.blade.php
index 53d023f814a..f4c358fa920 100644
--- a/resources/views/utilities/search.blade.php
+++ b/resources/views/utilities/search.blade.php
@@ -23,7 +23,7 @@
 
     <div class="card p-0">
         @if ($errors->has('indexes'))
-            <p class="p-4"><small class="help-block text-rose-500">{{ $errors->first() }}</small></p>
+            <p class="p-4"><small class="help-block text-red-500">{{ $errors->first() }}</small></p>
         @endif
 
         <table class="data-table">
diff --git a/tailwind.config.js b/tailwind.config.js
index 4b76dc35b4c..da7977428d2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -53,20 +53,14 @@ module.exports = {
                 DEFAULT: '#c471ed',
                 dark: '#a855cd',
             },
-            red: {
-                lighter: '#fce9e9',
-                light: '#ed7c78',
-                DEFAULT: '#e7514b',
-                dark: '#cb4743',
-            },
             yellow: {
                 light: '#ffffe0',
                 DEFAULT: '#fbfab0',
                 dark: '#e8dc1e',
             },
-            green: colors.green,
             amber: colors.amber,
-            rose: colors.red,
+            green: colors.green,
+            red: colors.red,
         },
         screens: {
             'sm': '576px',

From 5c10c4d79dff76db2b5593b0dd5f72dec3865098 Mon Sep 17 00:00:00 2001
From: StyleCI Bot <bot@styleci.io>
Date: Mon, 13 Mar 2023 14:05:22 +0000
Subject: [PATCH 14/32] Apply fixes from StyleCI

---
 src/Assets/Asset.php                             | 16 ++++++++--------
 src/CP/Utilities/CoreUtilities.php               |  1 +
 src/Modifiers/CoreModifiers.php                  |  4 ++--
 src/Query/IteratorBuilder.php                    | 10 +++++-----
 src/Search/Comb/Comb.php                         |  6 +++---
 src/Stache/Query/Builder.php                     | 10 +++++-----
 src/Tags/GetContent.php                          |  2 +-
 .../Language/Analyzers/ConditionPairAnalyzer.php |  2 +-
 src/View/Antlers/Language/Lexer/AntlersLexer.php |  4 ++--
 .../Language/Parser/AntlersNodeParser.php        | 10 +++++-----
 .../Antlers/Language/Parser/DocumentParser.php   |  2 +-
 src/View/Antlers/Language/Parser/PathParser.php  |  6 +++---
 .../Antlers/Language/Runtime/NodeProcessor.php   |  3 +--
 .../Antlers/Language/Runtime/PathDataManager.php |  4 +---
 src/View/Antlers/Parser.php                      |  3 ---
 tests/API/APITest.php                            |  3 +++
 tests/API/CacherTest.php                         |  3 +++
 tests/Antlers/ContainerTest.php                  |  4 ++++
 tests/Antlers/Parser/ParserErrorsTest.php        |  4 ++--
 tests/Antlers/Runtime/InterpolationTest.php      |  2 +-
 tests/Antlers/Runtime/RecursiveNodesTest.php     |  2 +-
 tests/Antlers/Runtime/TemplateTest.php           |  3 +--
 tests/Assets/AssetTest.php                       |  2 ++
 tests/Auth/Eloquent/EloquentUserTest.php         |  2 +-
 tests/Auth/Protect/ProtectionTest.php            |  3 +--
 tests/Auth/UserContractTests.php                 |  1 +
 .../Navigation/NavPreferencesNormalizerTest.php  |  1 +
 tests/Composer/ComposerTest.php                  |  7 +++++++
 tests/Data/AugmentedTest.php                     |  9 +++------
 tests/Data/DataRepositoryTest.php                |  2 ++
 tests/Data/Entries/CollectionTest.php            |  1 +
 tests/Data/Entries/EntryTest.php                 |  2 ++
 tests/Data/Entries/GetDateFromPathTest.php       |  1 +
 tests/Data/Entries/GetSlugFromPathTest.php       |  1 +
 tests/Data/Entries/GetSuffixFromPathTest.php     |  1 +
 tests/Data/Entries/RemoveSuffixFromPathTest.php  |  1 +
 tests/Data/Globals/VariablesTest.php             |  1 +
 tests/Data/Taxonomies/LocalizedTermTest.php      |  1 +
 tests/Data/Taxonomies/TaxonomyTest.php           |  1 +
 tests/Extend/AddonTest.php                       |  1 +
 tests/Facades/PathTest.php                       |  1 +
 tests/Facades/UrlTest.php                        |  2 ++
 .../Collections/UpdateCollectionTreeTest.php     |  1 +
 tests/Feature/Fieldtypes/FilesTest.php           |  1 +
 tests/Feature/GraphQL/AssetContainerTest.php     |  1 +
 tests/Feature/GraphQL/AssetContainersTest.php    |  1 +
 tests/Feature/GraphQL/AssetTest.php              |  1 +
 tests/Feature/GraphQL/AssetsTest.php             |  1 +
 tests/Feature/GraphQL/CollectionTest.php         |  1 +
 tests/Feature/GraphQL/CollectionsTest.php        |  1 +
 tests/Feature/GraphQL/CustomMiddlewareTest.php   |  2 ++
 tests/Feature/GraphQL/CustomQueryTest.php        |  2 ++
 tests/Feature/GraphQL/EntriesTest.php            |  1 +
 tests/Feature/GraphQL/EntryTest.php              |  1 +
 tests/Feature/GraphQL/FormTest.php               |  1 +
 tests/Feature/GraphQL/FormsTest.php              |  1 +
 tests/Feature/GraphQL/GlobalTest.php             |  1 +
 tests/Feature/GraphQL/GlobalsTest.php            |  1 +
 tests/Feature/GraphQL/NavTest.php                |  1 +
 tests/Feature/GraphQL/NavigationsTest.php        |  1 +
 tests/Feature/GraphQL/RequestCacheTest.php       |  2 ++
 tests/Feature/GraphQL/SitesTest.php              |  1 +
 tests/Feature/GraphQL/TaxonomiesTest.php         |  1 +
 tests/Feature/GraphQL/TaxonomyTest.php           |  1 +
 tests/Feature/GraphQL/TermTest.php               |  1 +
 tests/Feature/GraphQL/TermsTest.php              |  1 +
 tests/Feature/GraphQL/UserTest.php               |  1 +
 tests/Feature/GraphQL/UsersTest.php              |  2 ++
 tests/Fields/FieldTest.php                       |  5 +++--
 tests/Fields/FieldsTest.php                      |  1 +
 tests/Fields/FieldsetRepositoryTest.php          |  1 +
 tests/Fields/FieldsetTest.php                    |  1 +
 tests/Fields/FieldtypeTest.php                   |  7 +++----
 tests/Fields/ValueTest.php                       |  1 +
 tests/Fields/ValuesTest.php                      |  2 ++
 tests/Fieldtypes/CodeTest.php                    |  2 ++
 tests/Fieldtypes/EntriesTest.php                 | 12 ++++--------
 tests/Fieldtypes/LabeledValueTests.php           |  1 +
 tests/Fieldtypes/MultipleLabeledValueTests.php   |  1 +
 tests/Fieldtypes/TermsTest.php                   | 16 ++++++----------
 tests/Fieldtypes/TextTest.php                    |  1 +
 tests/Filesystem/FilesystemAdapterTests.php      |  4 ++--
 tests/Forms/EmailTest.php                        |  5 +++++
 tests/Forms/SendEmailsTest.php                   |  1 +
 tests/FrontendTest.php                           |  1 +
 tests/Git/GitProcessTest.php                     |  4 ++++
 tests/Http/Middleware/AddViewPathsTest.php       |  2 ++
 tests/Imaging/GlideImageManipulatorTest.php      |  3 +++
 tests/Imaging/ImageGeneratorTest.php             |  1 +
 tests/Listeners/UpdateAssetReferencesTest.php    |  1 +
 tests/Listeners/UpdateTermReferencesTest.php     |  1 +
 tests/MiscTest.php                               |  1 +
 tests/Modifiers/BackgroundPositionTest.php       |  1 +
 tests/Modifiers/CamelizeTest.php                 |  1 +
 tests/Modifiers/CeilTest.php                     |  1 +
 tests/Modifiers/CollapseWhitespaceTest.php       |  1 +
 tests/Modifiers/CountTest.php                    |  1 +
 tests/Modifiers/DashifyTest.php                  |  1 +
 tests/Modifiers/DecodeTest.php                   |  1 +
 tests/Modifiers/DeslugifyTest.php                |  1 +
 tests/Modifiers/EntitiesTest.php                 |  1 +
 tests/Modifiers/ExtensionTest.php                |  1 +
 tests/Modifiers/FirstTest.php                    |  2 ++
 tests/Modifiers/FloorTest.php                    |  1 +
 tests/Modifiers/HasLowerCaseTest.php             |  1 +
 tests/Modifiers/HasUpperCaseTest.php             |  1 +
 tests/Modifiers/IsAlphaTest.php                  |  1 +
 tests/Modifiers/IsAlphanumericTest.php           |  1 +
 tests/Modifiers/IsArrayTest.php                  |  1 +
 tests/Modifiers/IsEmailTest.php                  |  1 +
 tests/Modifiers/IsEmbeddableTest.php             |  1 +
 tests/Modifiers/IsFutureTest.php                 |  1 +
 tests/Modifiers/IsIterableTest.php               |  1 +
 tests/Modifiers/IsJsonTest.php                   |  1 +
 tests/Modifiers/IsLowercaseTest.php              |  1 +
 tests/Modifiers/IsNumberwangTest.php             |  1 +
 tests/Modifiers/IsNumericTest.php                |  1 +
 tests/Modifiers/IsPastTest.php                   |  1 +
 tests/Modifiers/IsTodayTest.php                  |  1 +
 tests/Modifiers/IsTomorrowTest.php               |  1 +
 tests/Modifiers/IsUppercaseTest.php              |  1 +
 tests/Modifiers/IsUrlTest.php                    |  1 +
 tests/Modifiers/IsWeekdayTest.php                |  1 +
 tests/Modifiers/IsWeekendTest.php                |  1 +
 tests/Modifiers/IsYesterdayTest.php              |  1 +
 tests/Modifiers/KebabTest.php                    |  1 +
 tests/Modifiers/LastTest.php                     |  2 ++
 tests/Modifiers/Nl2brTest.php                    |  1 +
 tests/Modifiers/PluralTest.php                   |  1 +
 tests/Modifiers/ReverseTest.php                  |  2 ++
 tests/Modifiers/SetQueryParamTest.php            |  2 ++
 tests/Modifiers/ShuffleTest.php                  |  2 ++
 tests/Modifiers/SingularTest.php                 |  1 +
 tests/Modifiers/SlugifyTest.php                  |  1 +
 tests/Modifiers/SmartypantsTest.php              |  1 +
 tests/Modifiers/SnakeTest.php                    |  1 +
 tests/Modifiers/SpacelessTest.php                |  1 +
 tests/Modifiers/StrPadBothTest.php               |  1 +
 tests/Modifiers/StrPadLeftTest.php               |  1 +
 tests/Modifiers/StrPadRightTest.php              |  1 +
 tests/Modifiers/StrPadTest.php                   |  1 +
 tests/Modifiers/SumTest.php                      |  1 +
 tests/Query/OrderByTest.php                      |  1 +
 tests/Query/ResolveValueTest.php                 |  2 ++
 tests/Routing/RoutesTest.php                     |  1 +
 tests/Search/CombTest.php                        |  1 +
 tests/StarterKits/ExportTest.php                 |  6 +++---
 tests/StatamicTest.php                           |  7 +++++++
 .../HalfMeasureStaticCachingTest.php             |  1 +
 tests/Support/ArrTest.php                        |  1 +
 tests/Support/DateFormatTest.php                 |  1 +
 tests/Tags/Concerns/RendersFormsTest.php         |  8 ++++++++
 tests/Tags/FluentTagTest.php                     |  1 +
 tests/Tags/Form/FormCreateTest.php               |  2 +-
 tests/Tags/GetErrorsTest.php                     |  3 +++
 tests/Tags/GlideTest.php                         |  3 +++
 tests/Tags/User/PasswordFormTest.php             |  2 +-
 tests/Tags/User/ProfileFormTest.php              |  4 ++--
 tests/Tags/User/RegisterFormTest.php             |  4 ++--
 tests/Tokens/HandleTokenMiddlewareTest.php       |  2 ++
 tests/View/Antlers/ParserTests.php               | 13 +++++--------
 161 files changed, 266 insertions(+), 102 deletions(-)

diff --git a/src/Assets/Asset.php b/src/Assets/Asset.php
index fb4f02734ad..d70ce5fb45a 100644
--- a/src/Assets/Asset.php
+++ b/src/Assets/Asset.php
@@ -42,14 +42,14 @@
 class Asset implements AssetContract, Augmentable, ArrayAccess, Arrayable, ContainsQueryableValues, SearchableContract
 {
     use HasAugmentedInstance, FluentlyGetsAndSets, TracksQueriedColumns,
-    TracksQueriedRelations,
-    Searchable, ContainsData {
-        set as traitSet;
-        get as traitGet;
-        remove as traitRemove;
-        data as traitData;
-        merge as traitMerge;
-    }
+        TracksQueriedRelations,
+        Searchable, ContainsData {
+            set as traitSet;
+            get as traitGet;
+            remove as traitRemove;
+            data as traitData;
+            merge as traitMerge;
+        }
 
     protected $container;
     protected $path;
diff --git a/src/CP/Utilities/CoreUtilities.php b/src/CP/Utilities/CoreUtilities.php
index 0c51043e372..3f284daca15 100644
--- a/src/CP/Utilities/CoreUtilities.php
+++ b/src/CP/Utilities/CoreUtilities.php
@@ -10,6 +10,7 @@
 use Statamic\Http\Controllers\CP\Utilities\PhpInfoController;
 use Statamic\Http\Controllers\CP\Utilities\UpdateSearchController;
 use Statamic\Statamic;
+
 use function Statamic\trans as __;
 
 class CoreUtilities
diff --git a/src/Modifiers/CoreModifiers.php b/src/Modifiers/CoreModifiers.php
index 03f49b1b517..37c6418c2aa 100644
--- a/src/Modifiers/CoreModifiers.php
+++ b/src/Modifiers/CoreModifiers.php
@@ -1113,8 +1113,8 @@ public function isBefore($value, $params, $context)
     public function isBetween($value, $params, $context)
     {
         return $this->carbon($value)->between(
-                $this->carbon($this->getFromContext($context, $params, 0)),
-                $this->carbon($this->getFromContext($context, $params, 1))
+            $this->carbon($this->getFromContext($context, $params, 0)),
+            $this->carbon($this->getFromContext($context, $params, 1))
         );
     }
 
diff --git a/src/Query/IteratorBuilder.php b/src/Query/IteratorBuilder.php
index 67912b2f408..4abebbd5c76 100644
--- a/src/Query/IteratorBuilder.php
+++ b/src/Query/IteratorBuilder.php
@@ -297,23 +297,23 @@ protected function operatorToCarbonMethod($operator)
             case '<>':
             case '!=':
                 $method = 'neq';
-            break;
+                break;
 
             case '>':
                 $method = 'gt';
-            break;
+                break;
 
             case '>=':
                 $method = 'gte';
-            break;
+                break;
 
             case '<':
                 $method = 'lt';
-            break;
+                break;
 
             case '<=':
                 $method = 'lte';
-            break;
+                break;
         }
 
         return $method;
diff --git a/src/Search/Comb/Comb.php b/src/Search/Comb/Comb.php
index 7c7fa2c4b99..9796f5e57b9 100644
--- a/src/Search/Comb/Comb.php
+++ b/src/Search/Comb/Comb.php
@@ -434,7 +434,7 @@ private function prepareData()
                 array_push($output, $record);
             }
 
-            // find categorized data
+        // find categorized data
         } else {
             foreach ($this->haystack as $category => $records) {
                 foreach ($records as $item) {
@@ -870,7 +870,7 @@ private function parseSearchParameters($query)
                 array_push($parts['chunks'], $query);
             }
 
-            // perform a boolean search -- require words, disallow words
+        // perform a boolean search -- require words, disallow words
         } elseif ($this->query_mode === self::QUERY_BOOLEAN) {
             $words = preg_split("/\s+/i", $query);
 
@@ -903,7 +903,7 @@ private function parseSearchParameters($query)
                 array_push($parts['chunks'], $query);
             }
 
-            // search for the entire query as one thing
+        // search for the entire query as one thing
         } else {
             $parts['chunks'] = [strtolower($query)];
         }
diff --git a/src/Stache/Query/Builder.php b/src/Stache/Query/Builder.php
index 40b2629bca1..73e4a449727 100644
--- a/src/Stache/Query/Builder.php
+++ b/src/Stache/Query/Builder.php
@@ -243,23 +243,23 @@ protected function operatorToCarbonMethod($operator)
             case '<>':
             case '!=':
                 $method = 'neq';
-            break;
+                break;
 
             case '>':
                 $method = 'gt';
-            break;
+                break;
 
             case '>=':
                 $method = 'gte';
-            break;
+                break;
 
             case '<':
                 $method = 'lt';
-            break;
+                break;
 
             case '<=':
                 $method = 'lte';
-            break;
+                break;
         }
 
         return $method;
diff --git a/src/Tags/GetContent.php b/src/Tags/GetContent.php
index 7653cfd78e5..b5c4a37ef59 100644
--- a/src/Tags/GetContent.php
+++ b/src/Tags/GetContent.php
@@ -18,7 +18,7 @@ class GetContent extends Tags
     public function wildcard($tag)
     {
         return $this->entries(
-           $this->context->value($tag)
+            $this->context->value($tag)
         );
     }
 
diff --git a/src/View/Antlers/Language/Analyzers/ConditionPairAnalyzer.php b/src/View/Antlers/Language/Analyzers/ConditionPairAnalyzer.php
index a4437cf0d87..817b85c6cc6 100644
--- a/src/View/Antlers/Language/Analyzers/ConditionPairAnalyzer.php
+++ b/src/View/Antlers/Language/Analyzers/ConditionPairAnalyzer.php
@@ -128,7 +128,7 @@ protected static function findClosestStructurePair($nodes, $node, $index)
 
                         if ($subNode->ref == 0 && (($subNode->isClosingTag && $subNode->name->name == 'if') ||
                                 array_key_exists($subNode->name->name, $thisValidPairs)
-                            )) {
+                        )) {
                             $canClose = true;
                         }
 
diff --git a/src/View/Antlers/Language/Lexer/AntlersLexer.php b/src/View/Antlers/Language/Lexer/AntlersLexer.php
index 893096ba5de..2b42d6d6ef6 100644
--- a/src/View/Antlers/Language/Lexer/AntlersLexer.php
+++ b/src/View/Antlers/Language/Lexer/AntlersLexer.php
@@ -678,8 +678,8 @@ public function tokenize(AntlersNode $node, $input)
                 // -
                 if ($this->isParsingModifierName == false && $this->cur == DocumentParser::Punctuation_Minus) {
                     if (ctype_digit($this->next) && (
-                            ctype_digit((string) $this->prev) == false &&
-                            $this->prev != DocumentParser::RightParent) && $this->isRightOfInterpolationRegion() == false) {
+                        ctype_digit((string) $this->prev) == false &&
+                        $this->prev != DocumentParser::RightParent) && $this->isRightOfInterpolationRegion() == false) {
                         $this->currentContent[] = $this->cur;
                         continue;
                     }
diff --git a/src/View/Antlers/Language/Parser/AntlersNodeParser.php b/src/View/Antlers/Language/Parser/AntlersNodeParser.php
index 7d5e010d8db..04abf015ee4 100644
--- a/src/View/Antlers/Language/Parser/AntlersNodeParser.php
+++ b/src/View/Antlers/Language/Parser/AntlersNodeParser.php
@@ -162,8 +162,8 @@ public function parseNode(AntlersNode $node)
 
             if ($hasFoundName == false) {
                 if ($isParsingString == false && (
-                        $this->cur == DocumentParser::String_Terminator_DoubleQuote ||
-                        $this->cur == DocumentParser::String_Terminator_SingleQuote)) {
+                    $this->cur == DocumentParser::String_Terminator_DoubleQuote ||
+                    $this->cur == DocumentParser::String_Terminator_SingleQuote)) {
                     $terminator = $this->cur;
                     $isParsingString = true;
                     $nameContent[] = $this->cur;
@@ -535,9 +535,9 @@ private function getParameters(AntlersNode $node)
             }
 
             if ($hasFoundName && (
-                    ($terminator != null && $current == $terminator) ||
-                    ($terminator == null && ctype_space($current))
-                )) {
+                ($terminator != null && $current == $terminator) ||
+                ($terminator == null && ctype_space($current))
+            )) {
                 $content = implode($currentChars);
                 $hasFoundName = false;
                 $terminator = null;
diff --git a/src/View/Antlers/Language/Parser/DocumentParser.php b/src/View/Antlers/Language/Parser/DocumentParser.php
index c3627ddf1e0..d57b896f13c 100644
--- a/src/View/Antlers/Language/Parser/DocumentParser.php
+++ b/src/View/Antlers/Language/Parser/DocumentParser.php
@@ -122,7 +122,7 @@ public function __construct()
 
     public function getText($start, $end)
     {
-        return StringUtilities::substr($this->content, $start, ($end - $start));
+        return StringUtilities::substr($this->content, $start, $end - $start);
     }
 
     public function setIsInterpolatedParser($isInterpolation)
diff --git a/src/View/Antlers/Language/Parser/PathParser.php b/src/View/Antlers/Language/Parser/PathParser.php
index 147b32826be..c75b1a6ab75 100644
--- a/src/View/Antlers/Language/Parser/PathParser.php
+++ b/src/View/Antlers/Language/Parser/PathParser.php
@@ -354,9 +354,9 @@ private function locateEndOfAccessor()
             }
 
             if ($isParsingString == false && (
-                    $cur == DocumentParser::String_Terminator_SingleQuote ||
-                    $cur == DocumentParser::String_Terminator_DoubleQuote
-                )) {
+                $cur == DocumentParser::String_Terminator_SingleQuote ||
+                $cur == DocumentParser::String_Terminator_DoubleQuote
+            )) {
                 $isParsingString = true;
                 $terminator = $cur;
                 $nestedChars[] = $cur;
diff --git a/src/View/Antlers/Language/Runtime/NodeProcessor.php b/src/View/Antlers/Language/Runtime/NodeProcessor.php
index 8012d528a4a..164197c4bcb 100644
--- a/src/View/Antlers/Language/Runtime/NodeProcessor.php
+++ b/src/View/Antlers/Language/Runtime/NodeProcessor.php
@@ -569,7 +569,6 @@ private function shouldProcessAsTag(AntlersNode $node)
 
         if ($managerResults[0] === true) {
             if ($node->isPaired() && ! $this->isLoopable($resolvedValue)) {
-
                 // Safe to do this since there is no ambiguity here.
                 return $node->isTagNode;
             }
@@ -987,7 +986,7 @@ public function evaluateDeferredVariable(AbstractNode $deferredNode)
     {
         $environment = new Environment();
         $environment->setProcessor($this);
-        $environment->cascade($this->cascade)->setData(($this->getActiveData()));
+        $environment->cascade($this->cascade)->setData($this->getActiveData());
 
         return $environment->evaluate([$deferredNode]);
     }
diff --git a/src/View/Antlers/Language/Runtime/PathDataManager.php b/src/View/Antlers/Language/Runtime/PathDataManager.php
index f6aec6d1a14..e024c9b16a3 100644
--- a/src/View/Antlers/Language/Runtime/PathDataManager.php
+++ b/src/View/Antlers/Language/Runtime/PathDataManager.php
@@ -606,7 +606,6 @@ public function getData(VariableReference $path, $data, $isForArrayIndex = false
                         }
 
                         if (count($path->pathParts) > 1 && $this->isPair == false) {
-
                             // If we have more steps in the path to take, but we are
                             // not a tag pair, we need to reduce anyway so we
                             // can descend further into the nested values.
@@ -630,7 +629,6 @@ public function getData(VariableReference $path, $data, $isForArrayIndex = false
                                 }
 
                                 if (count($path->pathParts) > 1 && $this->isPair == false) {
-
                                     // If we have more steps in the path to take, but we are
                                     // not a tag pair, we need to reduce anyway so we
                                     // can descend further into the nested values.
@@ -1005,7 +1003,7 @@ public static function reduceForAntlers($value, Parser $parser, $data, $isPair =
             if (! $isPair) {
                 $returnValue = $value->antlersValue($parser, $data);
             } else {
-                $returnValue = self::reduce(($value->antlersValue($parser, $data)));
+                $returnValue = self::reduce($value->antlersValue($parser, $data));
             }
             $returnValue = self::guardRuntimeReturnValue($returnValue);
 
diff --git a/src/View/Antlers/Parser.php b/src/View/Antlers/Parser.php
index 8032fdd2aa9..cf72a94cede 100644
--- a/src/View/Antlers/Parser.php
+++ b/src/View/Antlers/Parser.php
@@ -592,12 +592,10 @@ public function parseCallbackTags($text, $data)
 
             // look for tag pairs and (plugin) callbacks
             if ($name != 'content' && ! $replacement) {
-
                 // is the callback a variable in our data set?
                 [$exists, $values] = $this->getVariableExistenceAndValue($name, $data);
 
                 if ($exists) {
-
                     // is this a tag-pair?
                     if ($this->isLoopable($values)) {
                         // yes it is
@@ -761,7 +759,6 @@ public function parseTernaries($text, $data)
 
                 // Regular old ternary
                 } else {
-
                     // Split the tag up
                     $bits = explode('? ', $match[1]);
 
diff --git a/tests/API/APITest.php b/tests/API/APITest.php
index 18bcb897c1e..96f817cc43b 100644
--- a/tests/API/APITest.php
+++ b/tests/API/APITest.php
@@ -25,6 +25,7 @@ public function not_found_responses_are_formatted_with_json()
 
     /**
      * @test
+     *
      * @dataProvider entryNotFoundProvider
      */
     public function it_handles_not_found_entries($url, $requestShouldSucceed)
@@ -280,6 +281,7 @@ public function relationships_are_shallow_augmented()
 
     /**
      * @test
+     *
      * @dataProvider userPasswordFilterProvider
      */
     public function it_doesnt_allow_filtering_users_by_password($filter)
@@ -361,6 +363,7 @@ public function userPasswordFilterProvider()
 
     /**
      * @test
+     *
      * @dataProvider termNotFoundProvider
      */
     public function it_handles_not_found_terms($url, $requestShouldSucceed)
diff --git a/tests/API/CacherTest.php b/tests/API/CacherTest.php
index b742d5bc2e0..ec5b056db7b 100644
--- a/tests/API/CacherTest.php
+++ b/tests/API/CacherTest.php
@@ -62,6 +62,7 @@ public function it_caches_endpoint_using_default_cacher()
 
     /**
      * @test
+     *
      * @dataProvider bypassCacheProvider
      */
     public function it_bypasses_cache_when_using_a_valid_token($endpoint, $headers)
@@ -83,6 +84,7 @@ public function it_bypasses_cache_when_using_a_valid_token($endpoint, $headers)
 
     /**
      * @test
+     *
      * @dataProvider bypassCacheProvider
      */
     public function it_doesnt_bypass_cache_when_using_an_invalid_token($endpoint, $headers)
@@ -115,6 +117,7 @@ public function bypassCacheProvider()
 
     /**
      * @test
+     *
      * @environment-setup setCustomExpiry
      */
     public function it_caches_endpoint_using_configured_expiry()
diff --git a/tests/Antlers/ContainerTest.php b/tests/Antlers/ContainerTest.php
index f701c51cda4..2aba5ffdbb4 100644
--- a/tests/Antlers/ContainerTest.php
+++ b/tests/Antlers/ContainerTest.php
@@ -23,6 +23,7 @@ protected function useRuntimeParser($app)
 
     /**
      * @test
+     *
      * @define-env useRegexParser
      **/
     public function it_resolves_regex_parser_using_contract()
@@ -32,6 +33,7 @@ public function it_resolves_regex_parser_using_contract()
 
     /**
      * @test
+     *
      * @define-env useRuntimeParser
      **/
     public function it_resolves_runtime_parser_using_contract()
@@ -41,6 +43,7 @@ public function it_resolves_runtime_parser_using_contract()
 
     /**
      * @test
+     *
      * @define-env useRegexParser
      **/
     public function it_resolves_regex_parser_using_class()
@@ -50,6 +53,7 @@ public function it_resolves_regex_parser_using_class()
 
     /**
      * @test
+     *
      * @define-env useRuntimeParser
      **/
     public function it_resolves_runtime_parser_using_class()
diff --git a/tests/Antlers/Parser/ParserErrorsTest.php b/tests/Antlers/Parser/ParserErrorsTest.php
index aa7b0e628b0..c6b21838676 100644
--- a/tests/Antlers/Parser/ParserErrorsTest.php
+++ b/tests/Antlers/Parser/ParserErrorsTest.php
@@ -117,7 +117,7 @@ public function test_incorrectly_chained_methods_throws_error_colon_syntax()
             toAtomString()
 }}
 EOT
-);
+        );
     }
 
     public function test_incorrectly_chained_methods_throws_error_dot_syntax()
@@ -148,7 +148,7 @@ public function test_neighboring_strings_throws_parser_error_in_modifiers()
         $this->assertThrowsParserError(<<<'EOT'
 {{ some_value | modifier: "string" "string" }}
 EOT
-);
+        );
     }
 
     public function test_neighboring_numeric_throws_parser_error_in_modifiers()
diff --git a/tests/Antlers/Runtime/InterpolationTest.php b/tests/Antlers/Runtime/InterpolationTest.php
index bcaed4e152c..134a100d0e0 100644
--- a/tests/Antlers/Runtime/InterpolationTest.php
+++ b/tests/Antlers/Runtime/InterpolationTest.php
@@ -32,7 +32,7 @@ public function test_augmented_values_do_not_get_lost_when_inside_nested_partial
             'condition' => true,
         ];
 
-        $this->assertSame('<The Title>', trim(($this->renderString($template, $data, true))));
+        $this->assertSame('<The Title>', trim($this->renderString($template, $data, true)));
     }
 
     public function test_interpolation_inside_dynamic_access()
diff --git a/tests/Antlers/Runtime/RecursiveNodesTest.php b/tests/Antlers/Runtime/RecursiveNodesTest.php
index dd6e34672b2..884d25883ca 100644
--- a/tests/Antlers/Runtime/RecursiveNodesTest.php
+++ b/tests/Antlers/Runtime/RecursiveNodesTest.php
@@ -1024,7 +1024,7 @@ public function test_recursive_node_can_be_root()
     {{ /children }}
 {{ /records }}
 EOT
-);
+        );
 
         // The parseNodes will throw an exception if it fails to parse correctly.
         // We will just assert true is true to shut up the risky assertions warning.
diff --git a/tests/Antlers/Runtime/TemplateTest.php b/tests/Antlers/Runtime/TemplateTest.php
index 94c03fe0a65..27cb51b40de 100644
--- a/tests/Antlers/Runtime/TemplateTest.php
+++ b/tests/Antlers/Runtime/TemplateTest.php
@@ -80,8 +80,7 @@ public function it_doesnt_output_anything_if_object_cannot_be_cast_to_a_string()
                 'line' => 1, 'file' => '',
             ]);
 
-        $object = new class
-        {
+        $object = new class {
         };
 
         $this->assertEquals('', $this->renderString('{{ object }}', compact('object')));
diff --git a/tests/Assets/AssetTest.php b/tests/Assets/AssetTest.php
index d9f4e09188c..048534efcac 100644
--- a/tests/Assets/AssetTest.php
+++ b/tests/Assets/AssetTest.php
@@ -296,6 +296,7 @@ public function it_removes_data_values()
 
     /**
      * @test
+     *
      * @dataProvider reAddRemovedData
      **/
     public function it_doesnt_try_to_re_remove_newly_added_data_from_meta($reAddRemovedData)
@@ -382,6 +383,7 @@ public function augment($value)
 
     /**
      * @test
+     *
      * @dataProvider queryBuilderProvider
      **/
     public function it_has_magic_property_and_methods_for_fields_that_augment_to_query_builders($builder)
diff --git a/tests/Auth/Eloquent/EloquentUserTest.php b/tests/Auth/Eloquent/EloquentUserTest.php
index 3b956397c81..edfde3a2bd6 100644
--- a/tests/Auth/Eloquent/EloquentUserTest.php
+++ b/tests/Auth/Eloquent/EloquentUserTest.php
@@ -98,7 +98,7 @@ public function makeUser()
                 // 'password' => '$2y$10$TKh8H1.PfQx37YgCzwiKb.KjNyWgaHb9cbcoQgdIVFlYg7B77UdFm', // secret
                 'remember_token' => str_random(10),
             ])
-        );
+            );
     }
 
     public function createPermissible()
diff --git a/tests/Auth/Protect/ProtectionTest.php b/tests/Auth/Protect/ProtectionTest.php
index b3339e98ae5..198b259a847 100644
--- a/tests/Auth/Protect/ProtectionTest.php
+++ b/tests/Auth/Protect/ProtectionTest.php
@@ -53,8 +53,7 @@ public function if_the_data_isnt_protectable_it_doesnt_get_a_scheme()
     {
         $this->assertNull($this->protection->scheme());
 
-        $this->protection->setData(new class
-        {
+        $this->protection->setData(new class {
             //
         });
 
diff --git a/tests/Auth/UserContractTests.php b/tests/Auth/UserContractTests.php
index db86657060e..4b635725783 100644
--- a/tests/Auth/UserContractTests.php
+++ b/tests/Auth/UserContractTests.php
@@ -148,6 +148,7 @@ public function additionalDataValues()
 
     /**
      * @test
+     *
      * @dataProvider queryBuilderProvider
      **/
     public function it_has_magic_property_and_methods_for_fields_that_augment_to_query_builders($builder)
diff --git a/tests/CP/Navigation/NavPreferencesNormalizerTest.php b/tests/CP/Navigation/NavPreferencesNormalizerTest.php
index fe4a176bb8d..9d3abf298ab 100644
--- a/tests/CP/Navigation/NavPreferencesNormalizerTest.php
+++ b/tests/CP/Navigation/NavPreferencesNormalizerTest.php
@@ -256,6 +256,7 @@ public function it_doesnt_remove_inherit_action_items_when_actually_reordering()
 
     /**
      * @test
+     *
      * @dataProvider modifiers
      **/
     public function it_defaults_action_to_modify_when_modifying_in_original_section($modifier)
diff --git a/tests/Composer/ComposerTest.php b/tests/Composer/ComposerTest.php
index ada0d140d25..e3df5c1a5e0 100644
--- a/tests/Composer/ComposerTest.php
+++ b/tests/Composer/ComposerTest.php
@@ -46,6 +46,7 @@ public function tearDown(): void
 
     /**
      * @group integration
+     *
      * @test
      */
     public function it_can_list_installed_packages_with_details()
@@ -65,6 +66,7 @@ public function it_can_list_installed_packages_with_details()
 
     /**
      * @group integration
+     *
      * @test
      */
     public function it_can_get_installed_version_of_a_package_directly_from_composer_lock()
@@ -74,6 +76,7 @@ public function it_can_get_installed_version_of_a_package_directly_from_composer
 
     /**
      * @group integration
+     *
      * @test
      */
     public function it_can_check_if_package_is_installed()
@@ -84,6 +87,7 @@ public function it_can_check_if_package_is_installed()
 
     /**
      * @group integration
+     *
      * @test
      */
     public function it_can_get_installed_path_of_a_package()
@@ -101,6 +105,7 @@ public function it_can_get_installed_path_of_a_package()
 
     /**
      * @group integration
+     *
      * @test
      */
     public function it_gracefully_fails_when_lock_file_does_not_exist()
@@ -119,6 +124,7 @@ public function it_gracefully_fails_when_lock_file_does_not_exist()
      *
      * @group integration
      * @group slow
+     *
      * @test
      */
     public function it_can_require_update_downgrade_and_remove_a_package()
@@ -219,6 +225,7 @@ public function it_can_require_update_downgrade_and_remove_a_package()
      *
      * @group integration
      * @group slow
+     *
      * @test
      */
     public function it_can_require_and_remove_multiple_packages_in_one_shot()
diff --git a/tests/Data/AugmentedTest.php b/tests/Data/AugmentedTest.php
index fc5a709b193..35fae7cc870 100644
--- a/tests/Data/AugmentedTest.php
+++ b/tests/Data/AugmentedTest.php
@@ -43,8 +43,7 @@ private function assertNullValue($actual)
     /** @test */
     public function it_gets_a_single_value_by_key()
     {
-        $augmented = new class($this->thing) extends BaseAugmentedThing
-        {
+        $augmented = new class($this->thing) extends BaseAugmentedThing {
             //
         };
 
@@ -55,8 +54,7 @@ public function it_gets_a_single_value_by_key()
     /** @test */
     public function it_can_use_null_as_a_supplement_value()
     {
-        $augmented = new class($this->thing) extends BaseAugmentedThing
-        {
+        $augmented = new class($this->thing) extends BaseAugmentedThing {
             //
         };
 
@@ -78,8 +76,7 @@ public function value($key)
             }
         };
 
-        $augmented = new class($thingWithValueMethod) extends BaseAugmentedThing
-        {
+        $augmented = new class($thingWithValueMethod) extends BaseAugmentedThing {
             //
         };
 
diff --git a/tests/Data/DataRepositoryTest.php b/tests/Data/DataRepositoryTest.php
index 4a93f081df0..abfc51cd761 100644
--- a/tests/Data/DataRepositoryTest.php
+++ b/tests/Data/DataRepositoryTest.php
@@ -113,6 +113,7 @@ public function when_a_repository_key_isnt_provided_it_will_loop_through_reposit
 
     /**
      * @test
+     *
      * @dataProvider findByRequestUrlProvider
      */
     public function it_finds_by_request_url($requestUrl, $entryId)
@@ -127,6 +128,7 @@ public function it_finds_by_request_url($requestUrl, $entryId)
 
     /**
      * @test
+     *
      * @dataProvider findByRequestUrlNoRootSiteProvider
      */
     public function it_finds_by_request_url_with_no_root_site($requestUrl, $entryId)
diff --git a/tests/Data/Entries/CollectionTest.php b/tests/Data/Entries/CollectionTest.php
index cf63570a27f..3a5c889c5d6 100644
--- a/tests/Data/Entries/CollectionTest.php
+++ b/tests/Data/Entries/CollectionTest.php
@@ -713,6 +713,7 @@ public function it_updates_entry_uris_through_the_repository()
 
     /**
      * @test
+     *
      * @dataProvider additionalPreviewTargetProvider
      */
     public function it_gets_and_sets_preview_targets($throughFacade)
diff --git a/tests/Data/Entries/EntryTest.php b/tests/Data/Entries/EntryTest.php
index 7e6e43074d3..beee13d59e4 100644
--- a/tests/Data/Entries/EntryTest.php
+++ b/tests/Data/Entries/EntryTest.php
@@ -204,6 +204,7 @@ public function augment($value)
 
     /**
      * @test
+     *
      * @dataProvider queryBuilderProvider
      **/
     public function it_has_magic_property_and_methods_for_fields_that_augment_to_query_builders($builder)
@@ -1885,6 +1886,7 @@ public function no_page_is_returned_when_the_collection_isnt_using_a_structure()
 
     /**
      * @test
+     *
      * @dataProvider autoGeneratedTitleProvider
      */
     public function it_gets_the_auto_generated_title($format)
diff --git a/tests/Data/Entries/GetDateFromPathTest.php b/tests/Data/Entries/GetDateFromPathTest.php
index 5cb83d8f0a3..ab72d4957bc 100644
--- a/tests/Data/Entries/GetDateFromPathTest.php
+++ b/tests/Data/Entries/GetDateFromPathTest.php
@@ -9,6 +9,7 @@ class GetDateFromPathTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider paths
      **/
     public function it_gets_the_date_from_a_path($expected, $path)
diff --git a/tests/Data/Entries/GetSlugFromPathTest.php b/tests/Data/Entries/GetSlugFromPathTest.php
index fee7b91814d..a329619730e 100644
--- a/tests/Data/Entries/GetSlugFromPathTest.php
+++ b/tests/Data/Entries/GetSlugFromPathTest.php
@@ -9,6 +9,7 @@ class GetSlugFromPathTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider paths
      **/
     public function it_gets_the_slug_from_a_path($expected, $path)
diff --git a/tests/Data/Entries/GetSuffixFromPathTest.php b/tests/Data/Entries/GetSuffixFromPathTest.php
index fb51ed27f5c..2caf61c5328 100644
--- a/tests/Data/Entries/GetSuffixFromPathTest.php
+++ b/tests/Data/Entries/GetSuffixFromPathTest.php
@@ -9,6 +9,7 @@ class GetSuffixFromPathTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider paths
      **/
     public function it_gets_the_suffix_from_a_path($expected, $path)
diff --git a/tests/Data/Entries/RemoveSuffixFromPathTest.php b/tests/Data/Entries/RemoveSuffixFromPathTest.php
index 33adb444691..8b20dafa5a4 100644
--- a/tests/Data/Entries/RemoveSuffixFromPathTest.php
+++ b/tests/Data/Entries/RemoveSuffixFromPathTest.php
@@ -9,6 +9,7 @@ class RemoveSuffixFromPathTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider paths
      **/
     public function it_removes_the_suffix_from_a_path($expected, $path)
diff --git a/tests/Data/Globals/VariablesTest.php b/tests/Data/Globals/VariablesTest.php
index 58b31a8ffda..259e49ba8ba 100644
--- a/tests/Data/Globals/VariablesTest.php
+++ b/tests/Data/Globals/VariablesTest.php
@@ -224,6 +224,7 @@ public function augment($value)
 
     /**
      * @test
+     *
      * @dataProvider queryBuilderProvider
      **/
     public function it_has_magic_property_and_methods_for_fields_that_augment_to_query_builders($builder)
diff --git a/tests/Data/Taxonomies/LocalizedTermTest.php b/tests/Data/Taxonomies/LocalizedTermTest.php
index 092cc489b33..03d693e4b8b 100644
--- a/tests/Data/Taxonomies/LocalizedTermTest.php
+++ b/tests/Data/Taxonomies/LocalizedTermTest.php
@@ -111,6 +111,7 @@ public function augment($value)
 
     /**
      * @test
+     *
      * @dataProvider queryBuilderProvider
      **/
     public function it_has_magic_property_and_methods_for_fields_that_augment_to_query_builders($builder)
diff --git a/tests/Data/Taxonomies/TaxonomyTest.php b/tests/Data/Taxonomies/TaxonomyTest.php
index e9c90b7a24f..2d0fba6eaad 100644
--- a/tests/Data/Taxonomies/TaxonomyTest.php
+++ b/tests/Data/Taxonomies/TaxonomyTest.php
@@ -179,6 +179,7 @@ public function it_is_arrayable()
 
     /**
      * @test
+     *
      * @dataProvider additionalPreviewTargetProvider
      */
     public function it_gets_and_sets_preview_targets($throughFacade)
diff --git a/tests/Extend/AddonTest.php b/tests/Extend/AddonTest.php
index 630713ae819..229cd8ec416 100644
--- a/tests/Extend/AddonTest.php
+++ b/tests/Extend/AddonTest.php
@@ -243,6 +243,7 @@ public function it_gets_the_license()
 
     /**
      * @test
+     *
      * @dataProvider isLatestVersionProvider
      **/
     public function it_checks_if_its_the_latest_version($version, $latest, $isLatest)
diff --git a/tests/Facades/PathTest.php b/tests/Facades/PathTest.php
index c4cadd540ba..1e98a05ff1b 100644
--- a/tests/Facades/PathTest.php
+++ b/tests/Facades/PathTest.php
@@ -15,6 +15,7 @@ public function makes_paths_relative()
 
     /**
      * @test
+     *
      * @dataProvider extensionProvider
      */
     public function it_gets_the_extension($path, $extension)
diff --git a/tests/Facades/UrlTest.php b/tests/Facades/UrlTest.php
index c9ae87d4f5b..ae2ba39e149 100644
--- a/tests/Facades/UrlTest.php
+++ b/tests/Facades/UrlTest.php
@@ -80,6 +80,7 @@ public function testDeterminesExternalUrlWhenUsingRelativeInConfig()
 
     /**
      * @test
+     *
      * @dataProvider ancestorProvider
      **/
     public function it_checks_whether_a_url_is_an_ancestor_of_another($child, $parent, $isAncestor)
@@ -119,6 +120,7 @@ public function ancestorProvider()
 
     /**
      * @test
+     *
      * @dataProvider relativeProvider
      **/
     public function makes_urls_relative($url, $expected)
diff --git a/tests/Feature/Collections/UpdateCollectionTreeTest.php b/tests/Feature/Collections/UpdateCollectionTreeTest.php
index ab801e5ff41..d5a4f03a320 100644
--- a/tests/Feature/Collections/UpdateCollectionTreeTest.php
+++ b/tests/Feature/Collections/UpdateCollectionTreeTest.php
@@ -17,6 +17,7 @@ class UpdateCollectionTreeTest extends TestCase
 
     /**
      * @test
+     *
      * @dataProvider collectionTreeDataProvider
      */
     public function it_updates_the_tree($collectionHandle)
diff --git a/tests/Feature/Fieldtypes/FilesTest.php b/tests/Feature/Fieldtypes/FilesTest.php
index b4075b10f02..8f3996daea5 100644
--- a/tests/Feature/Fieldtypes/FilesTest.php
+++ b/tests/Feature/Fieldtypes/FilesTest.php
@@ -33,6 +33,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @dataProvider uploadProvider
      */
     public function it_uploads_a_file($container, $isImage, $expectedPath, $expectedWidth, $expectedHeight)
diff --git a/tests/Feature/GraphQL/AssetContainerTest.php b/tests/Feature/GraphQL/AssetContainerTest.php
index c3d3a7a9ba1..3a04616823d 100644
--- a/tests/Feature/GraphQL/AssetContainerTest.php
+++ b/tests/Feature/GraphQL/AssetContainerTest.php
@@ -16,6 +16,7 @@ class AssetContainerTest extends TestCase
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/AssetContainersTest.php b/tests/Feature/GraphQL/AssetContainersTest.php
index f02dd9acb9b..065dce79ff5 100644
--- a/tests/Feature/GraphQL/AssetContainersTest.php
+++ b/tests/Feature/GraphQL/AssetContainersTest.php
@@ -16,6 +16,7 @@ class AssetContainersTest extends TestCase
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/AssetTest.php b/tests/Feature/GraphQL/AssetTest.php
index 5d224672168..5fc444d915b 100644
--- a/tests/Feature/GraphQL/AssetTest.php
+++ b/tests/Feature/GraphQL/AssetTest.php
@@ -29,6 +29,7 @@ protected function setUp(): void
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/AssetsTest.php b/tests/Feature/GraphQL/AssetsTest.php
index 43fca422242..06cbdb25083 100644
--- a/tests/Feature/GraphQL/AssetsTest.php
+++ b/tests/Feature/GraphQL/AssetsTest.php
@@ -26,6 +26,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/CollectionTest.php b/tests/Feature/GraphQL/CollectionTest.php
index 582400d351d..05ef821f8ac 100644
--- a/tests/Feature/GraphQL/CollectionTest.php
+++ b/tests/Feature/GraphQL/CollectionTest.php
@@ -22,6 +22,7 @@ class CollectionTest extends TestCase
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/CollectionsTest.php b/tests/Feature/GraphQL/CollectionsTest.php
index 590eb09d467..34962af914c 100644
--- a/tests/Feature/GraphQL/CollectionsTest.php
+++ b/tests/Feature/GraphQL/CollectionsTest.php
@@ -16,6 +16,7 @@ class CollectionsTest extends TestCase
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/CustomMiddlewareTest.php b/tests/Feature/GraphQL/CustomMiddlewareTest.php
index 2ae97421e63..f5ad91a34f9 100644
--- a/tests/Feature/GraphQL/CustomMiddlewareTest.php
+++ b/tests/Feature/GraphQL/CustomMiddlewareTest.php
@@ -25,6 +25,7 @@ public function custom_middleware_does_not_yet_exist()
 
     /**
      * @test
+     *
      * @environment-setup addCustomMiddlewareWithMethod
      **/
     public function a_custom_middleware_can_be_added_to_the_default_schema()
@@ -41,6 +42,7 @@ protected function addCustomMiddlewareWithMethod($app)
 
     /**
      * @test
+     *
      * @environment-setup addCustomMiddlewareThroughConfig
      **/
     public function a_custom_middleware_can_be_added_to_the_default_schema_through_config()
diff --git a/tests/Feature/GraphQL/CustomQueryTest.php b/tests/Feature/GraphQL/CustomQueryTest.php
index df98d6e86cf..b919fa83e3e 100644
--- a/tests/Feature/GraphQL/CustomQueryTest.php
+++ b/tests/Feature/GraphQL/CustomQueryTest.php
@@ -22,6 +22,7 @@ public function custom_query_does_not_yet_exist()
 
     /**
      * @test
+     *
      * @environment-setup addCustomQueryWithMethod
      **/
     public function a_custom_query_can_be_added_to_the_default_schema()
@@ -39,6 +40,7 @@ protected function addCustomQueryWithMethod($app)
 
     /**
      * @test
+     *
      * @environment-setup addCustomQueryThroughConfig
      **/
     public function a_custom_query_can_be_added_to_the_default_schema_through_config()
diff --git a/tests/Feature/GraphQL/EntriesTest.php b/tests/Feature/GraphQL/EntriesTest.php
index 41d2797701d..8e4c1051705 100644
--- a/tests/Feature/GraphQL/EntriesTest.php
+++ b/tests/Feature/GraphQL/EntriesTest.php
@@ -26,6 +26,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/EntryTest.php b/tests/Feature/GraphQL/EntryTest.php
index a9b43232834..83ba02955d2 100644
--- a/tests/Feature/GraphQL/EntryTest.php
+++ b/tests/Feature/GraphQL/EntryTest.php
@@ -31,6 +31,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/FormTest.php b/tests/Feature/GraphQL/FormTest.php
index fa4fc5c3b52..4afad6a69e8 100644
--- a/tests/Feature/GraphQL/FormTest.php
+++ b/tests/Feature/GraphQL/FormTest.php
@@ -27,6 +27,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/FormsTest.php b/tests/Feature/GraphQL/FormsTest.php
index 07d2a9bb4ae..af974433aa0 100644
--- a/tests/Feature/GraphQL/FormsTest.php
+++ b/tests/Feature/GraphQL/FormsTest.php
@@ -23,6 +23,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/GlobalTest.php b/tests/Feature/GraphQL/GlobalTest.php
index f4ce3097761..6e2f41bd193 100644
--- a/tests/Feature/GraphQL/GlobalTest.php
+++ b/tests/Feature/GraphQL/GlobalTest.php
@@ -26,6 +26,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/GlobalsTest.php b/tests/Feature/GraphQL/GlobalsTest.php
index 494acfb9383..4cdb160d43e 100644
--- a/tests/Feature/GraphQL/GlobalsTest.php
+++ b/tests/Feature/GraphQL/GlobalsTest.php
@@ -24,6 +24,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/NavTest.php b/tests/Feature/GraphQL/NavTest.php
index 2547434b10f..b767bf8aeac 100644
--- a/tests/Feature/GraphQL/NavTest.php
+++ b/tests/Feature/GraphQL/NavTest.php
@@ -21,6 +21,7 @@ class NavTest extends TestCase
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/NavigationsTest.php b/tests/Feature/GraphQL/NavigationsTest.php
index 2d406608bf7..766d589913d 100644
--- a/tests/Feature/GraphQL/NavigationsTest.php
+++ b/tests/Feature/GraphQL/NavigationsTest.php
@@ -16,6 +16,7 @@ class NavigationsTest extends TestCase
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/RequestCacheTest.php b/tests/Feature/GraphQL/RequestCacheTest.php
index 5cfbe15d180..29444b89739 100644
--- a/tests/Feature/GraphQL/RequestCacheTest.php
+++ b/tests/Feature/GraphQL/RequestCacheTest.php
@@ -94,6 +94,7 @@ public function it_caches_endpoint_using_configured_expiry()
 
     /**
      * @test
+     *
      * @dataProvider bypassCacheProvider
      */
     public function it_bypasses_cache_when_using_a_valid_token($url, $headers)
@@ -120,6 +121,7 @@ public function it_bypasses_cache_when_using_a_valid_token($url, $headers)
 
     /**
      * @test
+     *
      * @dataProvider bypassCacheProvider
      */
     public function it_doesnt_bypass_cache_when_using_an_invalid_token($url, $headers)
diff --git a/tests/Feature/GraphQL/SitesTest.php b/tests/Feature/GraphQL/SitesTest.php
index e0791ddd1a7..f3fbd9ad8fa 100644
--- a/tests/Feature/GraphQL/SitesTest.php
+++ b/tests/Feature/GraphQL/SitesTest.php
@@ -29,6 +29,7 @@ public function getEnvironmentSetUp($app)
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/TaxonomiesTest.php b/tests/Feature/GraphQL/TaxonomiesTest.php
index 7e0046f25a7..1093642da38 100644
--- a/tests/Feature/GraphQL/TaxonomiesTest.php
+++ b/tests/Feature/GraphQL/TaxonomiesTest.php
@@ -16,6 +16,7 @@ class TaxonomiesTest extends TestCase
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/TaxonomyTest.php b/tests/Feature/GraphQL/TaxonomyTest.php
index cb779ffd42f..2c0f416c3fc 100644
--- a/tests/Feature/GraphQL/TaxonomyTest.php
+++ b/tests/Feature/GraphQL/TaxonomyTest.php
@@ -16,6 +16,7 @@ class TaxonomyTest extends TestCase
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/TermTest.php b/tests/Feature/GraphQL/TermTest.php
index 70e26adb528..c33141d10d3 100644
--- a/tests/Feature/GraphQL/TermTest.php
+++ b/tests/Feature/GraphQL/TermTest.php
@@ -21,6 +21,7 @@ class TermTest extends TestCase
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/TermsTest.php b/tests/Feature/GraphQL/TermsTest.php
index b0337348514..baf13d2d17f 100644
--- a/tests/Feature/GraphQL/TermsTest.php
+++ b/tests/Feature/GraphQL/TermsTest.php
@@ -58,6 +58,7 @@ private function createBlueprints()
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/UserTest.php b/tests/Feature/GraphQL/UserTest.php
index 7a66b74c62c..9e640073be2 100644
--- a/tests/Feature/GraphQL/UserTest.php
+++ b/tests/Feature/GraphQL/UserTest.php
@@ -37,6 +37,7 @@ private function createUsers()
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/UsersTest.php b/tests/Feature/GraphQL/UsersTest.php
index fb6df9dc131..b2da52b45ba 100644
--- a/tests/Feature/GraphQL/UsersTest.php
+++ b/tests/Feature/GraphQL/UsersTest.php
@@ -29,6 +29,7 @@ private function createUsers()
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
@@ -259,6 +260,7 @@ public function it_filters_users_with_multiple_conditions_of_the_same_type()
 
     /**
      * @test
+     *
      * @dataProvider userPasswordFilterProvider
      */
     public function it_doesnt_allow_filtering_users_by_password($filter)
diff --git a/tests/Fields/FieldTest.php b/tests/Fields/FieldTest.php
index dfbd7726eac..e517b1df793 100644
--- a/tests/Fields/FieldTest.php
+++ b/tests/Fields/FieldTest.php
@@ -51,8 +51,7 @@ public function it_determines_if_localizable()
     /** @test */
     public function it_gets_the_fieldtype()
     {
-        $fieldtype = new class extends Fieldtype
-        {
+        $fieldtype = new class extends Fieldtype {
         };
 
         FieldtypeRepository::shouldReceive('find')
@@ -535,6 +534,7 @@ public function shallowAugment($data)
 
     /**
      * @test
+     *
      * @group graphql
      **/
     public function it_gets_the_graphql_type()
@@ -562,6 +562,7 @@ public function toGqlType()
 
     /**
      * @test
+     *
      * @group graphql
      **/
     public function it_makes_the_graphql_type_non_nullable_if_its_required()
diff --git a/tests/Fields/FieldsTest.php b/tests/Fields/FieldsTest.php
index abfbd1ebbb6..7a556cf565c 100644
--- a/tests/Fields/FieldsTest.php
+++ b/tests/Fields/FieldsTest.php
@@ -921,6 +921,7 @@ public function it_validates_properly_against_filled_fields_with_sometimes_rule(
 
     /**
      * @test
+     *
      * @group graphql
      **/
     public function it_gets_the_fields_as_graphql_types()
diff --git a/tests/Fields/FieldsetRepositoryTest.php b/tests/Fields/FieldsetRepositoryTest.php
index 12ab5cb14b6..3f0e5f54cfb 100644
--- a/tests/Fields/FieldsetRepositoryTest.php
+++ b/tests/Fields/FieldsetRepositoryTest.php
@@ -184,6 +184,7 @@ public function it_returns_empty_collection_if_fieldset_directory_doesnt_exist()
 
     /**
      * @test
+     *
      * @dataProvider saveProvider
      */
     public function it_saves_to_disk($handle, $expectedPath)
diff --git a/tests/Fields/FieldsetTest.php b/tests/Fields/FieldsetTest.php
index 7c92f416479..d4ebf3c8cb2 100644
--- a/tests/Fields/FieldsetTest.php
+++ b/tests/Fields/FieldsetTest.php
@@ -46,6 +46,7 @@ public function it_gets_contents()
 
     /**
      * @test
+     *
      * @dataProvider titleProvider
      */
     public function it_gets_the_title($handle, $title, $expectedTitle)
diff --git a/tests/Fields/FieldtypeTest.php b/tests/Fields/FieldtypeTest.php
index 6ddd71ed479..f973d52150f 100644
--- a/tests/Fields/FieldtypeTest.php
+++ b/tests/Fields/FieldtypeTest.php
@@ -329,12 +329,10 @@ public function it_wont_override_previously_appended_config_fields()
     /** @test */
     public function it_will_only_append_config_fields_to_the_intended_fieldtype()
     {
-        $fieldtype = new class extends Fieldtype
-        {
+        $fieldtype = new class extends Fieldtype {
         };
 
-        $fieldtypeWithAppendedConfig = new class extends Fieldtype
-        {
+        $fieldtypeWithAppendedConfig = new class extends Fieldtype {
         };
 
         $fieldtypeWithAppendedConfig::appendConfigField('group', ['type' => 'text']);
@@ -402,6 +400,7 @@ public function it_gets_a_config_value()
 
     /**
      * @test
+     *
      * @group graphql
      **/
     public function it_gets_the_graphql_type_of_string_by_default()
diff --git a/tests/Fields/ValueTest.php b/tests/Fields/ValueTest.php
index 6be31af5ac3..9b1778d927c 100644
--- a/tests/Fields/ValueTest.php
+++ b/tests/Fields/ValueTest.php
@@ -11,6 +11,7 @@ class ValueTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider isRelationshipFieldtypeProvider
      **/
     public function it_gets_whether_its_a_relationship_through_the_fieldtype($isRelationship, $fieldtype)
diff --git a/tests/Fields/ValuesTest.php b/tests/Fields/ValuesTest.php
index 7989241b1d5..9b4cd8b7e86 100644
--- a/tests/Fields/ValuesTest.php
+++ b/tests/Fields/ValuesTest.php
@@ -182,6 +182,7 @@ public function raw_values()
 
     /**
      * @test
+     *
      * @dataProvider queryBuilderProvider
      **/
     public function it_gets_a_query($builder)
@@ -215,6 +216,7 @@ public function it_throws_exception_if_trying_to_get_query_for_missing_field()
 
     /**
      * @test
+     *
      * @dataProvider queryBuilderProvider
      */
     public function completes_a_query($builder)
diff --git a/tests/Fieldtypes/CodeTest.php b/tests/Fieldtypes/CodeTest.php
index 0e2dded4123..aa42236a4a8 100644
--- a/tests/Fieldtypes/CodeTest.php
+++ b/tests/Fieldtypes/CodeTest.php
@@ -10,6 +10,7 @@ class CodeTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider processValues
      **/
     public function it_processes_values($isSelectable, $value, $expected)
@@ -32,6 +33,7 @@ public function processValues()
 
     /**
      * @test
+     *
      * @dataProvider preProcessValues
      **/
     public function it_preprocesses_values($value, $expected)
diff --git a/tests/Fieldtypes/EntriesTest.php b/tests/Fieldtypes/EntriesTest.php
index 567f4e2e018..f23fb9f15d0 100644
--- a/tests/Fieldtypes/EntriesTest.php
+++ b/tests/Fieldtypes/EntriesTest.php
@@ -112,8 +112,7 @@ public function it_localizes_the_augmented_items_to_the_current_sites_locale_whe
     {
         Site::setCurrent('fr');
 
-        $parent = new class
-        {
+        $parent = new class {
             // Class does not implement "Localizable"
         };
 
@@ -132,8 +131,7 @@ public function it_localizes_the_augmented_item_to_the_current_sites_locale_when
     {
         Site::setCurrent('fr');
 
-        $parent = new class
-        {
+        $parent = new class {
             // Class does not implement "Localizable"
         };
 
@@ -253,8 +251,7 @@ public function it_localizes_the_shallow_augmented_items_to_the_current_sites_lo
     {
         Site::setCurrent('fr');
 
-        $parent = new class
-        {
+        $parent = new class {
             // Class does not implement "Localizable"
         };
 
@@ -288,8 +285,7 @@ public function it_localizes_the_shallow_augmented_item_to_the_current_sites_loc
     {
         Site::setCurrent('fr');
 
-        $parent = new class
-        {
+        $parent = new class {
             // Class does not implement "Localizable"
         };
 
diff --git a/tests/Fieldtypes/LabeledValueTests.php b/tests/Fieldtypes/LabeledValueTests.php
index 344f234aad3..91e05d8266e 100644
--- a/tests/Fieldtypes/LabeledValueTests.php
+++ b/tests/Fieldtypes/LabeledValueTests.php
@@ -248,6 +248,7 @@ public function it_augments_to_a_LabeledValue_object_with_boolean_casting_and_a_
 
     /**
      * @test
+     *
      * @dataProvider noOptionsProvider
      **/
     public function it_augments_to_a_LabeledValue_object_with_no_options($options)
diff --git a/tests/Fieldtypes/MultipleLabeledValueTests.php b/tests/Fieldtypes/MultipleLabeledValueTests.php
index 56d38480e54..cce27d59094 100644
--- a/tests/Fieldtypes/MultipleLabeledValueTests.php
+++ b/tests/Fieldtypes/MultipleLabeledValueTests.php
@@ -129,6 +129,7 @@ public function it_augments_multiple_enabled_to_an_array_of_LabeledValue_equival
 
     /**
      * @test
+     *
      * @dataProvider noMultipleOptionsProvider
      */
     public function it_augments_multiple_enabled_to_an_array_of_LabeledValue_equivalents_with_no_options($options)
diff --git a/tests/Fieldtypes/TermsTest.php b/tests/Fieldtypes/TermsTest.php
index 73a71269a89..7816ed4e208 100644
--- a/tests/Fieldtypes/TermsTest.php
+++ b/tests/Fieldtypes/TermsTest.php
@@ -125,8 +125,7 @@ public function it_localizes_the_augmented_items_to_the_current_sites_locale_whe
     {
         Site::setCurrent('fr');
 
-        $parent = new class
-        {
+        $parent = new class {
             // Class does not implement "Localizable"
         };
 
@@ -143,8 +142,7 @@ public function it_localizes_the_augmented_item_to_the_current_sites_locale_when
     {
         Site::setCurrent('fr');
 
-        $parent = new class
-        {
+        $parent = new class {
             // Class does not implement "Localizable"
         };
 
@@ -270,8 +268,7 @@ public function it_localizes_the_shallow_augmented_items_to_the_current_sites_lo
     {
         Site::setCurrent('fr');
 
-        $parent = new class
-        {
+        $parent = new class {
             // Class does not implement "Localizable"
         };
 
@@ -304,8 +301,7 @@ public function it_localizes_the_shallow_augmented_item_to_the_current_sites_loc
     {
         Site::setCurrent('fr');
 
-        $parent = new class
-        {
+        $parent = new class {
             // Class does not implement "Localizable"
         };
 
@@ -336,6 +332,7 @@ public function it_localizes_the_shallow_augmented_item_to_the_current_sites_loc
 
     /**
      * @test
+     *
      * @dataProvider collectionAttachmentProvider
      **/
     public function it_attaches_collection_during_augmentation($expectCollection, $parentIsEntry, $handle, $isRootLevel, $collectionUsesTaxonomy)
@@ -352,8 +349,7 @@ public function it_attaches_collection_during_augmentation($expectCollection, $p
         if ($parentIsEntry) {
             $parent = EntryFactory::id('parent')->collection('blog')->slug('theparent')->locale('fr')->create();
         } else {
-            $parent = new class
-            {
+            $parent = new class {
                 // Class does not implement "Localizable"
             };
         }
diff --git a/tests/Fieldtypes/TextTest.php b/tests/Fieldtypes/TextTest.php
index ddd05d85530..f3a9f8297db 100644
--- a/tests/Fieldtypes/TextTest.php
+++ b/tests/Fieldtypes/TextTest.php
@@ -10,6 +10,7 @@ class TextTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider processValues
      **/
     public function it_processes_values($mode, $values)
diff --git a/tests/Filesystem/FilesystemAdapterTests.php b/tests/Filesystem/FilesystemAdapterTests.php
index 9119302d7d4..0a5e6552999 100644
--- a/tests/Filesystem/FilesystemAdapterTests.php
+++ b/tests/Filesystem/FilesystemAdapterTests.php
@@ -299,14 +299,14 @@ public function gets_files_by_type()
         );
 
         $this->assertArraysHaveSameValues(
-             ['image.jpg', 'image2.jpg', 'docs/photo.jpg'],
+            ['image.jpg', 'image2.jpg', 'docs/photo.jpg'],
             $this->adapter->getFilesByType('/', 'jpg', true)->all()
         );
 
         $files = $this->adapter->getFilesByTypeRecursively('/', 'jpg');
         $this->assertInstanceOf(FileCollection::class, $files);
         $this->assertArraysHaveSameValues(
-             ['image.jpg', 'image2.jpg', 'docs/photo.jpg'],
+            ['image.jpg', 'image2.jpg', 'docs/photo.jpg'],
             $files->all()
         );
     }
diff --git a/tests/Forms/EmailTest.php b/tests/Forms/EmailTest.php
index b3c8dd3bb6a..b942bc9ec7c 100644
--- a/tests/Forms/EmailTest.php
+++ b/tests/Forms/EmailTest.php
@@ -19,6 +19,7 @@ class EmailTest extends TestCase
 
     /**
      * @test
+     *
      * @dataProvider multipleAddressProvider
      */
     public function it_adds_recipient_from_the_config($address, $expected)
@@ -30,6 +31,7 @@ public function it_adds_recipient_from_the_config($address, $expected)
 
     /**
      * @test
+     *
      * @dataProvider singleAddressProvider
      */
     public function it_adds_sender_from_the_config($address, $expected)
@@ -41,6 +43,7 @@ public function it_adds_sender_from_the_config($address, $expected)
 
     /**
      * @test
+     *
      * @dataProvider multipleAddressProvider
      */
     public function it_adds_reply_to_from_the_config($address, $expected)
@@ -52,6 +55,7 @@ public function it_adds_reply_to_from_the_config($address, $expected)
 
     /**
      * @test
+     *
      * @dataProvider multipleAddressProvider
      */
     public function it_adds_cc_from_the_config($address, $expected)
@@ -63,6 +67,7 @@ public function it_adds_cc_from_the_config($address, $expected)
 
     /**
      * @test
+     *
      * @dataProvider multipleAddressProvider
      */
     public function it_adds_bcc_from_the_config($address, $expected)
diff --git a/tests/Forms/SendEmailsTest.php b/tests/Forms/SendEmailsTest.php
index 9719da558b6..4acf0c5323c 100644
--- a/tests/Forms/SendEmailsTest.php
+++ b/tests/Forms/SendEmailsTest.php
@@ -100,6 +100,7 @@ public function it_queues_email_jobs_when_config_contains_single_email()
 
     /**
      * @test
+     *
      * @dataProvider noEmailsProvider
      */
     public function no_email_jobs_are_queued_if_none_are_configured($emailConfig)
diff --git a/tests/FrontendTest.php b/tests/FrontendTest.php
index b4ab5ee2ef9..1535db50978 100644
--- a/tests/FrontendTest.php
+++ b/tests/FrontendTest.php
@@ -767,6 +767,7 @@ public function home_page_is_not_overridden_by_entries_in_another_structured_col
 
     /**
      * @test
+     *
      * @dataProvider redirectProvider
      */
     public function redirect_is_followed($dataValue, $augmentedValue, $expectedStatus, $expectedLocation)
diff --git a/tests/Git/GitProcessTest.php b/tests/Git/GitProcessTest.php
index e49aa3d749b..46127e5312c 100644
--- a/tests/Git/GitProcessTest.php
+++ b/tests/Git/GitProcessTest.php
@@ -36,6 +36,7 @@ public function tearDown(): void
 
     /**
      * @group integration
+     *
      * @test
      */
     public function it_can_get_git_root()
@@ -58,6 +59,7 @@ public function it_can_get_git_root()
 
     /**
      * @group integration
+     *
      * @test
      */
     public function it_can_check_if_folder_is_in_git_repo()
@@ -74,6 +76,7 @@ public function it_can_check_if_folder_is_in_git_repo()
 
     /**
      * @group integration
+     *
      * @test
      */
     public function it_can_get_git_status_of_parent_repo()
@@ -97,6 +100,7 @@ public function it_can_get_git_status_of_parent_repo()
 
     /**
      * @group integration
+     *
      * @test
      */
     public function it_can_get_git_status_of_specific_sub_paths()
diff --git a/tests/Http/Middleware/AddViewPathsTest.php b/tests/Http/Middleware/AddViewPathsTest.php
index b2230e53434..10cd56f502e 100644
--- a/tests/Http/Middleware/AddViewPathsTest.php
+++ b/tests/Http/Middleware/AddViewPathsTest.php
@@ -14,6 +14,7 @@ class AddViewPathsTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider viewPathProvider
      */
     public function adds_view_paths($isAmpEnabled, $requestUrl, $expectedPaths)
@@ -48,6 +49,7 @@ public function adds_view_paths($isAmpEnabled, $requestUrl, $expectedPaths)
 
     /**
      * @test
+     *
      * @dataProvider namespacedViewPathProvider
      */
     public function adds_namespaced_view_paths($requestUrl, $expectedPaths)
diff --git a/tests/Imaging/GlideImageManipulatorTest.php b/tests/Imaging/GlideImageManipulatorTest.php
index 9e12188411c..d4aa8682e0b 100644
--- a/tests/Imaging/GlideImageManipulatorTest.php
+++ b/tests/Imaging/GlideImageManipulatorTest.php
@@ -31,6 +31,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @dataProvider paramProvider
      */
     public function adds_standard_api_params($param)
@@ -41,6 +42,7 @@ public function adds_standard_api_params($param)
 
     /**
      * @test
+     *
      * @dataProvider paramProvider
      */
     public function adds_standard_api_params_using_magic_method($param)
@@ -100,6 +102,7 @@ public function cannot_add_invalid_glide_param_using_magic_method()
 
     /**
      * @test
+     *
      * @dataProvider aliasProvider
      */
     public function testAddsParamsUsingAliases($alias, $value, $expected)
diff --git a/tests/Imaging/ImageGeneratorTest.php b/tests/Imaging/ImageGeneratorTest.php
index e113cb32ef8..0d30adfc60d 100644
--- a/tests/Imaging/ImageGeneratorTest.php
+++ b/tests/Imaging/ImageGeneratorTest.php
@@ -263,6 +263,7 @@ public function the_watermark_disk_is_a_local_adapter_when_a_path_is_provided()
 
     /**
      * @test
+     *
      * @dataProvider guzzleWatermarkProvider
      */
     public function the_watermark_disk_is_a_guzzle_adapter_when_a_url_is_provided($protocol)
diff --git a/tests/Listeners/UpdateAssetReferencesTest.php b/tests/Listeners/UpdateAssetReferencesTest.php
index acbba886dd2..55b19945a7d 100644
--- a/tests/Listeners/UpdateAssetReferencesTest.php
+++ b/tests/Listeners/UpdateAssetReferencesTest.php
@@ -315,6 +315,7 @@ public function it_nullifies_references_when_deleting_an_asset()
 
     /**
      * @test
+     *
      * @environment-setup disableUpdateReferences
      **/
     public function it_can_be_disabled()
diff --git a/tests/Listeners/UpdateTermReferencesTest.php b/tests/Listeners/UpdateTermReferencesTest.php
index 19b64d0edf2..9178bebc6c0 100644
--- a/tests/Listeners/UpdateTermReferencesTest.php
+++ b/tests/Listeners/UpdateTermReferencesTest.php
@@ -292,6 +292,7 @@ public function it_nullifies_references_when_deleting_a_scoped_term()
 
     /**
      * @test
+     *
      * @environment-setup disableUpdateReferences
      **/
     public function it_can_be_disabled()
diff --git a/tests/MiscTest.php b/tests/MiscTest.php
index fe5de10f23c..c84c97982fc 100644
--- a/tests/MiscTest.php
+++ b/tests/MiscTest.php
@@ -15,6 +15,7 @@ class MiscTest extends TestCase
 
     /**
      * @test
+     *
      * @dataProvider localesTagTestProvider
      *
      * @see https://github.com/statamic/cms/issues/4839
diff --git a/tests/Modifiers/BackgroundPositionTest.php b/tests/Modifiers/BackgroundPositionTest.php
index 6cea6621f12..bb9ab7f1e71 100644
--- a/tests/Modifiers/BackgroundPositionTest.php
+++ b/tests/Modifiers/BackgroundPositionTest.php
@@ -24,6 +24,7 @@ public function backgroundPositions(): array
 
     /**
      * @test
+     *
      * @dataProvider backgroundPositions
      */
     public function it_converts_a_focus_point_into_css_compatible_percent_value($expected, $input): void
diff --git a/tests/Modifiers/CamelizeTest.php b/tests/Modifiers/CamelizeTest.php
index 7563920bafa..8b7fdf980bb 100644
--- a/tests/Modifiers/CamelizeTest.php
+++ b/tests/Modifiers/CamelizeTest.php
@@ -20,6 +20,7 @@ public function camelFarm(): array
 
     /**
      * @test
+     *
      * @dataProvider camelFarm
      */
     public function it_camelizes_underscores($expected, $input): void
diff --git a/tests/Modifiers/CeilTest.php b/tests/Modifiers/CeilTest.php
index aa8f7ef8501..80ecefb14fc 100644
--- a/tests/Modifiers/CeilTest.php
+++ b/tests/Modifiers/CeilTest.php
@@ -24,6 +24,7 @@ public function numbersPool(): array
 
     /**
      * @test
+     *
      * @dataProvider numbersPool
      */
     public function it_rounds_a_number_up_to_next_whole_number($expected, $input): void
diff --git a/tests/Modifiers/CollapseWhitespaceTest.php b/tests/Modifiers/CollapseWhitespaceTest.php
index 3cd354b78d7..4a976e76087 100644
--- a/tests/Modifiers/CollapseWhitespaceTest.php
+++ b/tests/Modifiers/CollapseWhitespaceTest.php
@@ -21,6 +21,7 @@ public function stringsWithWeirdWhitespaces(): array
 
     /**
      * @test
+     *
      * @dataProvider stringsWithWeirdWhitespaces
      */
     public function it_collapses_whitespaces($expected, $input): void
diff --git a/tests/Modifiers/CountTest.php b/tests/Modifiers/CountTest.php
index b1bbf2a82b6..01590bd9fd0 100644
--- a/tests/Modifiers/CountTest.php
+++ b/tests/Modifiers/CountTest.php
@@ -19,6 +19,7 @@ public function arraysToCount(): array
 
     /**
      * @test
+     *
      * @dataProvider arraysToCount
      */
     public function it_counts_number_of_items_in_array($expected, $input): void
diff --git a/tests/Modifiers/DashifyTest.php b/tests/Modifiers/DashifyTest.php
index 417a59fd090..9a5ba98d996 100644
--- a/tests/Modifiers/DashifyTest.php
+++ b/tests/Modifiers/DashifyTest.php
@@ -19,6 +19,7 @@ public function undashyThings(): array
 
     /**
      * @test
+     *
      * @dataProvider undashyThings
      */
     public function it_returns_a_lowercase_and_trimmed_string_separated_by_dashes($expected, $input): void
diff --git a/tests/Modifiers/DecodeTest.php b/tests/Modifiers/DecodeTest.php
index e1af7c08221..67a8a3aa954 100644
--- a/tests/Modifiers/DecodeTest.php
+++ b/tests/Modifiers/DecodeTest.php
@@ -16,6 +16,7 @@ public function undecoded(): array
 
     /**
      * @test
+     *
      * @dataProvider undecoded
      */
     public function it_converts_all_html_entities_to_applicable_chars($expected, $input): void
diff --git a/tests/Modifiers/DeslugifyTest.php b/tests/Modifiers/DeslugifyTest.php
index b348dff1164..6e74cb2074c 100644
--- a/tests/Modifiers/DeslugifyTest.php
+++ b/tests/Modifiers/DeslugifyTest.php
@@ -17,6 +17,7 @@ public function slackingSlugs(): array
 
     /**
      * @test
+     *
      * @dataProvider slackingSlugs
      */
     public function it_replaces_all_hyphens_and_underscores_with_spaces($expected, $input): void
diff --git a/tests/Modifiers/EntitiesTest.php b/tests/Modifiers/EntitiesTest.php
index a2bd4207b80..5871414ed6f 100644
--- a/tests/Modifiers/EntitiesTest.php
+++ b/tests/Modifiers/EntitiesTest.php
@@ -16,6 +16,7 @@ public function entityDataProvider(): array
 
     /**
      * @test
+     *
      * @dataProvider entityDataProvider
      */
     public function it_encodes_html_entities($expected, $input): void
diff --git a/tests/Modifiers/ExtensionTest.php b/tests/Modifiers/ExtensionTest.php
index 12502728fa3..59bab4e97ab 100644
--- a/tests/Modifiers/ExtensionTest.php
+++ b/tests/Modifiers/ExtensionTest.php
@@ -19,6 +19,7 @@ public function filenames(): array
 
     /**
      * @test
+     *
      * @dataProvider filenames
      */
     public function it_returns_the_extension_of_filename($expected, $input): void
diff --git a/tests/Modifiers/FirstTest.php b/tests/Modifiers/FirstTest.php
index d9ade6d7bd1..f2b71c487f1 100644
--- a/tests/Modifiers/FirstTest.php
+++ b/tests/Modifiers/FirstTest.php
@@ -9,6 +9,7 @@ class FirstTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider stringProvider
      */
     public function it_gets_the_first_n_characters_of_a_string($arg, $expected)
@@ -26,6 +27,7 @@ public function stringProvider()
 
     /**
      * @test
+     *
      * @dataProvider arrayProvider
      */
     public function it_gets_the_first_value_of_an_array($value, $expected)
diff --git a/tests/Modifiers/FloorTest.php b/tests/Modifiers/FloorTest.php
index aa6771e52e1..a6a737b653e 100644
--- a/tests/Modifiers/FloorTest.php
+++ b/tests/Modifiers/FloorTest.php
@@ -24,6 +24,7 @@ public function numbersPool(): array
 
     /**
      * @test
+     *
      * @dataProvider numbersPool
      */
     public function it_rounds_a_number_down_to_next_whole_number($expected, $input): void
diff --git a/tests/Modifiers/HasLowerCaseTest.php b/tests/Modifiers/HasLowerCaseTest.php
index 6394cde6eae..d23b8dc9046 100644
--- a/tests/Modifiers/HasLowerCaseTest.php
+++ b/tests/Modifiers/HasLowerCaseTest.php
@@ -18,6 +18,7 @@ public function strings(): array
 
     /**
      * @test
+     *
      * @dataProvider strings
      */
     public function it_returns_true_if_the_string_has_lowercase_char_false_if_does_not($expected, $input): void
diff --git a/tests/Modifiers/HasUpperCaseTest.php b/tests/Modifiers/HasUpperCaseTest.php
index 018154883f2..5b5f5a2714e 100644
--- a/tests/Modifiers/HasUpperCaseTest.php
+++ b/tests/Modifiers/HasUpperCaseTest.php
@@ -19,6 +19,7 @@ public function strings(): array
 
     /**
      * @test
+     *
      * @dataProvider strings
      */
     public function it_returns_true_if_the_string_has_uppercase_char_false_if_does_not($expected, $input): void
diff --git a/tests/Modifiers/IsAlphaTest.php b/tests/Modifiers/IsAlphaTest.php
index b0c01ca41b1..69c20a42371 100644
--- a/tests/Modifiers/IsAlphaTest.php
+++ b/tests/Modifiers/IsAlphaTest.php
@@ -21,6 +21,7 @@ public function strings(): array
 
     /**
      * @test
+     *
      * @dataProvider strings
      */
     public function it_returns_true_if_the_string_contains_only_alphabetical_chars($expected, $input): void
diff --git a/tests/Modifiers/IsAlphanumericTest.php b/tests/Modifiers/IsAlphanumericTest.php
index 0c0508610c8..c31a0c5b1ba 100644
--- a/tests/Modifiers/IsAlphanumericTest.php
+++ b/tests/Modifiers/IsAlphanumericTest.php
@@ -21,6 +21,7 @@ public function strings(): array
 
     /**
      * @test
+     *
      * @dataProvider strings
      */
     public function it_returns_true_if_the_string_contains_only_alphanumeric_chars($expected, $input): void
diff --git a/tests/Modifiers/IsArrayTest.php b/tests/Modifiers/IsArrayTest.php
index 954017851ce..8b54011bd56 100644
--- a/tests/Modifiers/IsArrayTest.php
+++ b/tests/Modifiers/IsArrayTest.php
@@ -21,6 +21,7 @@ public function array(): array
 
     /**
      * @test
+     *
      * @dataProvider array
      */
     public function it_returns_true_if_value_is_array($expected, $input): void
diff --git a/tests/Modifiers/IsEmailTest.php b/tests/Modifiers/IsEmailTest.php
index 4645b1ec334..5e6af4239b6 100644
--- a/tests/Modifiers/IsEmailTest.php
+++ b/tests/Modifiers/IsEmailTest.php
@@ -17,6 +17,7 @@ public function emails(): array
 
     /**
      * @test
+     *
      * @dataProvider emails
      */
     public function it_returns_true_if_the_string_is_a_valid_email_address($expected, $input): void
diff --git a/tests/Modifiers/IsEmbeddableTest.php b/tests/Modifiers/IsEmbeddableTest.php
index bb006af32cf..b32975a330b 100644
--- a/tests/Modifiers/IsEmbeddableTest.php
+++ b/tests/Modifiers/IsEmbeddableTest.php
@@ -19,6 +19,7 @@ public function embeddables(): array
 
     /**
      * @test
+     *
      * @dataProvider embeddables
      */
     public function it_checks_if_an_url_is_embeddable($expected, $input): void
diff --git a/tests/Modifiers/IsFutureTest.php b/tests/Modifiers/IsFutureTest.php
index 10bbb4c849f..b150c2f11da 100644
--- a/tests/Modifiers/IsFutureTest.php
+++ b/tests/Modifiers/IsFutureTest.php
@@ -26,6 +26,7 @@ public function dates(): array
 
     /**
      * @test
+     *
      * @dataProvider dates
      */
     public function it_returns_true_if_date_is_future($expected, $input): void
diff --git a/tests/Modifiers/IsIterableTest.php b/tests/Modifiers/IsIterableTest.php
index 32a387da75d..3731177590d 100644
--- a/tests/Modifiers/IsIterableTest.php
+++ b/tests/Modifiers/IsIterableTest.php
@@ -20,6 +20,7 @@ public function iterables(): array
 
     /**
      * @test
+     *
      * @dataProvider iterables
      */
     public function it_returns_true_if_input_is_iterable($expected, $input): void
diff --git a/tests/Modifiers/IsJsonTest.php b/tests/Modifiers/IsJsonTest.php
index 2b0d51338e1..e33284dd325 100644
--- a/tests/Modifiers/IsJsonTest.php
+++ b/tests/Modifiers/IsJsonTest.php
@@ -18,6 +18,7 @@ public function bourneJsonBourne(): array
 
     /**
      * @test
+     *
      * @dataProvider bourneJsonBourne
      */
     public function it_returns_true_if_string_is_valid_json($expected, $input): void
diff --git a/tests/Modifiers/IsLowercaseTest.php b/tests/Modifiers/IsLowercaseTest.php
index fe900c2fe98..4e5abe0c5e0 100644
--- a/tests/Modifiers/IsLowercaseTest.php
+++ b/tests/Modifiers/IsLowercaseTest.php
@@ -20,6 +20,7 @@ public function strings(): array
 
     /**
      * @test
+     *
      * @dataProvider strings
      */
     public function it_returns_true_if_string_has_only_lowercase_chars($expected, $input): void
diff --git a/tests/Modifiers/IsNumberwangTest.php b/tests/Modifiers/IsNumberwangTest.php
index 66e9f557b97..f3754716033 100644
--- a/tests/Modifiers/IsNumberwangTest.php
+++ b/tests/Modifiers/IsNumberwangTest.php
@@ -27,6 +27,7 @@ public function numbers(): array
 
     /**
      * @test
+     *
      * @dataProvider numbers
      */
     public function is_it_or_is_not_numberwang($expected, $input): void
diff --git a/tests/Modifiers/IsNumericTest.php b/tests/Modifiers/IsNumericTest.php
index e952d061257..a80831b4e61 100644
--- a/tests/Modifiers/IsNumericTest.php
+++ b/tests/Modifiers/IsNumericTest.php
@@ -18,6 +18,7 @@ public function numbers(): array
 
     /**
      * @test
+     *
      * @dataProvider numbers
      */
     public function it_returns_true_if_value_is_number_or_numeric_string($expected, $input): void
diff --git a/tests/Modifiers/IsPastTest.php b/tests/Modifiers/IsPastTest.php
index 02c15e95818..881aedd8d59 100644
--- a/tests/Modifiers/IsPastTest.php
+++ b/tests/Modifiers/IsPastTest.php
@@ -26,6 +26,7 @@ public function dates(): array
 
     /**
      * @test
+     *
      * @dataProvider dates
      */
     public function it_returns_true_if_date_is_past($expected, $input): void
diff --git a/tests/Modifiers/IsTodayTest.php b/tests/Modifiers/IsTodayTest.php
index b6fef882a11..0a876583bcc 100644
--- a/tests/Modifiers/IsTodayTest.php
+++ b/tests/Modifiers/IsTodayTest.php
@@ -27,6 +27,7 @@ public function dates(): array
 
     /**
      * @test
+     *
      * @dataProvider dates
      */
     public function it_returns_true_if_date_is_today($expected, $input): void
diff --git a/tests/Modifiers/IsTomorrowTest.php b/tests/Modifiers/IsTomorrowTest.php
index b3a8113ce3e..1264cb530d9 100644
--- a/tests/Modifiers/IsTomorrowTest.php
+++ b/tests/Modifiers/IsTomorrowTest.php
@@ -27,6 +27,7 @@ public function dates(): array
 
     /**
      * @test
+     *
      * @dataProvider dates
      */
     public function it_returns_true_if_date_is_tomorrow($expected, $input): void
diff --git a/tests/Modifiers/IsUppercaseTest.php b/tests/Modifiers/IsUppercaseTest.php
index bd18a2a6723..dfa94c91ff8 100644
--- a/tests/Modifiers/IsUppercaseTest.php
+++ b/tests/Modifiers/IsUppercaseTest.php
@@ -20,6 +20,7 @@ public function strings(): array
 
     /**
      * @test
+     *
      * @dataProvider strings
      */
     public function it_returns_true_if_string_has_only_uppercase_chars($expected, $input): void
diff --git a/tests/Modifiers/IsUrlTest.php b/tests/Modifiers/IsUrlTest.php
index 3233d36d590..04a9a668d4b 100644
--- a/tests/Modifiers/IsUrlTest.php
+++ b/tests/Modifiers/IsUrlTest.php
@@ -21,6 +21,7 @@ public function urls(): array
 
     /**
      * @test
+     *
      * @dataProvider urls()
      */
     public function it_returns_true_if_value_is_valid_url($expected, $input): void
diff --git a/tests/Modifiers/IsWeekdayTest.php b/tests/Modifiers/IsWeekdayTest.php
index 90954bb2470..644ea9e2259 100644
--- a/tests/Modifiers/IsWeekdayTest.php
+++ b/tests/Modifiers/IsWeekdayTest.php
@@ -21,6 +21,7 @@ public function dates(): array
 
     /**
      * @test
+     *
      * @dataProvider dates
      */
     public function it_returns_true_if_date_is_weekday($expected, $input): void
diff --git a/tests/Modifiers/IsWeekendTest.php b/tests/Modifiers/IsWeekendTest.php
index 3f2458c6933..839d4d20288 100644
--- a/tests/Modifiers/IsWeekendTest.php
+++ b/tests/Modifiers/IsWeekendTest.php
@@ -21,6 +21,7 @@ public function dates(): array
 
     /**
      * @test
+     *
      * @dataProvider dates
      */
     public function it_returns_true_if_date_is_weekend($expected, $input): void
diff --git a/tests/Modifiers/IsYesterdayTest.php b/tests/Modifiers/IsYesterdayTest.php
index 17c43243e28..f84d9fa5bc0 100644
--- a/tests/Modifiers/IsYesterdayTest.php
+++ b/tests/Modifiers/IsYesterdayTest.php
@@ -27,6 +27,7 @@ public function dates(): array
 
     /**
      * @test
+     *
      * @dataProvider dates
      */
     public function it_returns_true_if_date_is_yesterday($expected, $input): void
diff --git a/tests/Modifiers/KebabTest.php b/tests/Modifiers/KebabTest.php
index 4b2dbe0773f..eb6122cefa5 100644
--- a/tests/Modifiers/KebabTest.php
+++ b/tests/Modifiers/KebabTest.php
@@ -19,6 +19,7 @@ public function strings(): array
 
     /**
      * @test
+     *
      * @dataProvider strings
      */
     public function it_converts_the_value_to_kebab_case($expected, $input): void
diff --git a/tests/Modifiers/LastTest.php b/tests/Modifiers/LastTest.php
index ee523310409..686c6d9db17 100644
--- a/tests/Modifiers/LastTest.php
+++ b/tests/Modifiers/LastTest.php
@@ -9,6 +9,7 @@ class LastTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider stringProvider
      */
     public function it_gets_the_last_n_characters_of_a_string($arg, $expected)
@@ -27,6 +28,7 @@ public function stringProvider()
 
     /**
      * @test
+     *
      * @dataProvider arrayProvider
      */
     public function it_gets_the_last_value_of_an_array($value, $expected)
diff --git a/tests/Modifiers/Nl2brTest.php b/tests/Modifiers/Nl2brTest.php
index aa9e74a1318..a77ffe41d7b 100644
--- a/tests/Modifiers/Nl2brTest.php
+++ b/tests/Modifiers/Nl2brTest.php
@@ -17,6 +17,7 @@ public function strings(): array
 
     /**
      * @test
+     *
      * @dataProvider strings
      */
     public function it_replaces_linebreaks_with_br_tags($expected, $input): void
diff --git a/tests/Modifiers/PluralTest.php b/tests/Modifiers/PluralTest.php
index e47f43009f6..39425097a46 100644
--- a/tests/Modifiers/PluralTest.php
+++ b/tests/Modifiers/PluralTest.php
@@ -21,6 +21,7 @@ public function shoppingList()
 
     /**
      * @test
+     *
      * @dataProvider shoppingList
      */
     public function it_returns_the_plural_form_of_an_english_word_from_context($expected, $input): void
diff --git a/tests/Modifiers/ReverseTest.php b/tests/Modifiers/ReverseTest.php
index 98fa4e78739..39935e63816 100644
--- a/tests/Modifiers/ReverseTest.php
+++ b/tests/Modifiers/ReverseTest.php
@@ -11,6 +11,7 @@ class ReverseTest extends TestCase
 {
     /**
      * @test
+     *
      * @group array
      */
     public function it_reverses_the_items_of_an_array(): void
@@ -33,6 +34,7 @@ public function it_reverses_the_items_of_an_array(): void
 
     /**
      * @test
+     *
      * @group array
      */
     public function it_reverses_the_items_of_a_collection(): void
diff --git a/tests/Modifiers/SetQueryParamTest.php b/tests/Modifiers/SetQueryParamTest.php
index b11d1254aec..4e6d05fc459 100644
--- a/tests/Modifiers/SetQueryParamTest.php
+++ b/tests/Modifiers/SetQueryParamTest.php
@@ -23,6 +23,7 @@ public function existingQueryParametersProvider()
 
     /**
      * @test
+     *
      * @dataProvider existingQueryParametersProvider
      */
     public function it_updates_an_existing_query_param($expected, $input, array $queryParam = [])
@@ -45,6 +46,7 @@ public function nonExistingQueryParametersProvider()
 
     /**
      * @test
+     *
      * @dataProvider nonExistingQueryParametersProvider
      */
     public function it_adds_a_non_existant_query_param($expected, $input, array $queryParam = [])
diff --git a/tests/Modifiers/ShuffleTest.php b/tests/Modifiers/ShuffleTest.php
index 60f50a7b679..00d52288990 100644
--- a/tests/Modifiers/ShuffleTest.php
+++ b/tests/Modifiers/ShuffleTest.php
@@ -12,6 +12,7 @@ class ShuffleTest extends TestCase
 {
     /**
      * @test
+     *
      * @group array
      */
     public function it_shuffles_the_items_of_an_array(): void
@@ -28,6 +29,7 @@ public function it_shuffles_the_items_of_an_array(): void
 
     /**
      * @test
+     *
      * @group array
      */
     public function it_shuffles_the_items_of_a_collection(): void
diff --git a/tests/Modifiers/SingularTest.php b/tests/Modifiers/SingularTest.php
index 321f02e1da2..cad7d09c6b4 100644
--- a/tests/Modifiers/SingularTest.php
+++ b/tests/Modifiers/SingularTest.php
@@ -18,6 +18,7 @@ public function pluralWords(): array
 
     /**
      * @test
+     *
      * @dataProvider pluralWords
      */
     public function it_returns_the_singular_word_of_an_english_word($expected, $input): void
diff --git a/tests/Modifiers/SlugifyTest.php b/tests/Modifiers/SlugifyTest.php
index 6706a96580d..c65f37f1b8c 100644
--- a/tests/Modifiers/SlugifyTest.php
+++ b/tests/Modifiers/SlugifyTest.php
@@ -16,6 +16,7 @@ public function wordsDontComeEasyToMe(): array
 
     /**
      * @test
+     *
      * @dataProvider wordsDontComeEasyToMe
      */
     public function it_converts_the_string_to_an_url_slug($expected, $input): void
diff --git a/tests/Modifiers/SmartypantsTest.php b/tests/Modifiers/SmartypantsTest.php
index 1b6ccd4a66c..7d1da2e7b01 100644
--- a/tests/Modifiers/SmartypantsTest.php
+++ b/tests/Modifiers/SmartypantsTest.php
@@ -19,6 +19,7 @@ public function dumbChars(): array
 
     /**
      * @test
+     *
      * @dataProvider dumbChars
      */
     public function it_translates_plain_ascii_chars_into_smart_punctuation($expected, $input): void
diff --git a/tests/Modifiers/SnakeTest.php b/tests/Modifiers/SnakeTest.php
index 45de09e5f94..f477e28b559 100644
--- a/tests/Modifiers/SnakeTest.php
+++ b/tests/Modifiers/SnakeTest.php
@@ -17,6 +17,7 @@ public function raidersOfTheLostArk(): array
 
     /**
      * @test
+     *
      * @dataProvider raidersOfTheLostArk
      */
     public function it_converts_a_string_into_snake_case($expected, $input): void
diff --git a/tests/Modifiers/SpacelessTest.php b/tests/Modifiers/SpacelessTest.php
index 842b10bd1c6..46b321bfebb 100644
--- a/tests/Modifiers/SpacelessTest.php
+++ b/tests/Modifiers/SpacelessTest.php
@@ -21,6 +21,7 @@ public function stringsWithSpaces(): array
 
     /**
      * @test
+     *
      * @dataProvider stringsWithSpaces
      */
     public function it_removes_excess_whitespace_and_linebreaks_from_string($expected, $input): void
diff --git a/tests/Modifiers/StrPadBothTest.php b/tests/Modifiers/StrPadBothTest.php
index d0bdff82e59..82bcb04b049 100644
--- a/tests/Modifiers/StrPadBothTest.php
+++ b/tests/Modifiers/StrPadBothTest.php
@@ -18,6 +18,7 @@ public function paddington(): array
 
     /**
      * @test
+     *
      * @dataProvider paddington
      */
     public function it_pads_a_string(string $expected, string $input, array $params): void
diff --git a/tests/Modifiers/StrPadLeftTest.php b/tests/Modifiers/StrPadLeftTest.php
index a43350b1c3b..889537bd176 100644
--- a/tests/Modifiers/StrPadLeftTest.php
+++ b/tests/Modifiers/StrPadLeftTest.php
@@ -18,6 +18,7 @@ public function paddington(): array
 
     /**
      * @test
+     *
      * @dataProvider paddington
      */
     public function it_pads_a_string(string $expected, string $input, array $params): void
diff --git a/tests/Modifiers/StrPadRightTest.php b/tests/Modifiers/StrPadRightTest.php
index f1911f2f59f..90a7cd1182a 100644
--- a/tests/Modifiers/StrPadRightTest.php
+++ b/tests/Modifiers/StrPadRightTest.php
@@ -18,6 +18,7 @@ public function paddington(): array
 
     /**
      * @test
+     *
      * @dataProvider paddington
      */
     public function it_pads_a_string(string $expected, string $input, array $params): void
diff --git a/tests/Modifiers/StrPadTest.php b/tests/Modifiers/StrPadTest.php
index 381b6ed9fa6..d430593a52c 100644
--- a/tests/Modifiers/StrPadTest.php
+++ b/tests/Modifiers/StrPadTest.php
@@ -20,6 +20,7 @@ public function paddington(): array
 
     /**
      * @test
+     *
      * @dataProvider paddington
      */
     public function it_pads_a_string(string $expected, string $input, array $params): void
diff --git a/tests/Modifiers/SumTest.php b/tests/Modifiers/SumTest.php
index 05899580e8e..bc4031641f8 100644
--- a/tests/Modifiers/SumTest.php
+++ b/tests/Modifiers/SumTest.php
@@ -13,6 +13,7 @@ class SumTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider sums
      **/
     public function it_sums($sum, $key, $array)
diff --git a/tests/Query/OrderByTest.php b/tests/Query/OrderByTest.php
index 4d3651b343a..ffc8ff8ac1c 100644
--- a/tests/Query/OrderByTest.php
+++ b/tests/Query/OrderByTest.php
@@ -9,6 +9,7 @@ class OrderByTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider parseProvider
      **/
     public function it_parses_string($string, $sort, $dir)
diff --git a/tests/Query/ResolveValueTest.php b/tests/Query/ResolveValueTest.php
index 3de0465a274..8f1fbbc4fed 100644
--- a/tests/Query/ResolveValueTest.php
+++ b/tests/Query/ResolveValueTest.php
@@ -11,6 +11,7 @@ class ResolveValueTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider resolvesValueProvider
      **/
     public function it_resolves_values($item, $field, $expected)
@@ -57,6 +58,7 @@ public function resolvesValueProvider()
 
     /**
      * @test
+     *
      * @dataProvider delegatesToClassProvider
      **/
     public function it_delegates_resolving_to_the_queryable_class($field, $expected)
diff --git a/tests/Routing/RoutesTest.php b/tests/Routing/RoutesTest.php
index de8f5f0be1e..69e0bba53b5 100644
--- a/tests/Routing/RoutesTest.php
+++ b/tests/Routing/RoutesTest.php
@@ -117,6 +117,7 @@ public function it_renders_a_view_with_custom_layout()
 
     /**
      * @test
+     *
      * @dataProvider undefinedLayoutRouteProvider
      **/
     public function it_renders_a_view_without_a_layout($route)
diff --git a/tests/Search/CombTest.php b/tests/Search/CombTest.php
index 2fab91e863b..c51a0658f6c 100644
--- a/tests/Search/CombTest.php
+++ b/tests/Search/CombTest.php
@@ -10,6 +10,7 @@ class CombTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider searchesProvider
      **/
     public function it_searches($term, $expected)
diff --git a/tests/StarterKits/ExportTest.php b/tests/StarterKits/ExportTest.php
index 07d8d221394..bb9fc072ef7 100644
--- a/tests/StarterKits/ExportTest.php
+++ b/tests/StarterKits/ExportTest.php
@@ -229,7 +229,7 @@ public function it_exports_all_dependencies_from_versionless_array()
 }
 
 EOT
-        , $this->files->get($this->exportPath('composer.json')));
+            , $this->files->get($this->exportPath('composer.json')));
     }
 
     /** @test */
@@ -474,7 +474,7 @@ public function it_exports_basic_composer_json_file()
 }
 
 EOT
-        , $this->files->get($this->exportPath('composer.json')));
+            , $this->files->get($this->exportPath('composer.json')));
     }
 
     /** @test */
@@ -508,7 +508,7 @@ public function it_uses_existing_composer_json_file()
 }
 
 EOT
-        , $this->files->get($this->exportPath('composer.json')));
+            , $this->files->get($this->exportPath('composer.json')));
     }
 
     private function exportPath($path = null)
diff --git a/tests/StatamicTest.php b/tests/StatamicTest.php
index 3c1b3188999..46b0105bbd3 100644
--- a/tests/StatamicTest.php
+++ b/tests/StatamicTest.php
@@ -86,6 +86,7 @@ public function it_appends_time_if_system_date_format_doesnt_have_time_in_it()
 
     /**
      * @test
+     *
      * @dataProvider formatsWithTime
      **/
     public function it_doesnt_append_time_if_system_date_format_already_has_time_in_it($format)
@@ -105,6 +106,7 @@ public function it_appends_time_if_cp_date_format_doesnt_have_time_in_it()
 
     /**
      * @test
+     *
      * @dataProvider formatsWithTime
      **/
     public function it_doesnt_append_time_if_cp_date_format_already_has_time_in_it($format)
@@ -258,7 +260,9 @@ public function assets_with_equal_names_will_be_cached_differently()
 
     /**
      * @test
+     *
      * @define-env customAssetUrl
+     *
      * @dataProvider cpAssetUrlProvider
      */
     public function it_gets_a_cp_asset_url($url, $expected)
@@ -276,7 +280,9 @@ public function cpAssetUrlProvider()
 
     /**
      * @test
+     *
      * @define-env customAssetUrl
+     *
      * @dataProvider vendorPackageAssetUrlProvider
      */
     public function it_gets_the_vendor_package_asset_url($arguments, $expected)
@@ -297,6 +303,7 @@ public function vendorPackageAssetUrlProvider()
 
     /**
      * @test
+     *
      * @define-env useFixtureTranslations
      **/
     public function it_makes_breadcrumbs()
diff --git a/tests/StaticCaching/HalfMeasureStaticCachingTest.php b/tests/StaticCaching/HalfMeasureStaticCachingTest.php
index c52dee61b93..ec9d82f04e4 100644
--- a/tests/StaticCaching/HalfMeasureStaticCachingTest.php
+++ b/tests/StaticCaching/HalfMeasureStaticCachingTest.php
@@ -317,6 +317,7 @@ public function bladeViewPaths($app)
 
     /**
      * @test
+     *
      * @define-env bladeViewPaths
      */
     public function it_can_keep_parts_dynamic_using_blade()
diff --git a/tests/Support/ArrTest.php b/tests/Support/ArrTest.php
index f21afa7a466..01fdce6a452 100644
--- a/tests/Support/ArrTest.php
+++ b/tests/Support/ArrTest.php
@@ -33,6 +33,7 @@ public function it_adds_scope_to_associative_array()
 
     /**
      * @test
+     *
      * @dataProvider multiDimensionalArrayScopeProvider
      */
     public function it_adds_scope_to_multidimensional_array($mapInto)
diff --git a/tests/Support/DateFormatTest.php b/tests/Support/DateFormatTest.php
index 72ada697199..c7ce5ad3093 100644
--- a/tests/Support/DateFormatTest.php
+++ b/tests/Support/DateFormatTest.php
@@ -15,6 +15,7 @@ public function it_has_conversions()
 
     /**
      * @test
+     *
      * @dataProvider formatProvider
      **/
     public function it_converts_from_php_to_iso($php, $iso)
diff --git a/tests/Tags/Concerns/RendersFormsTest.php b/tests/Tags/Concerns/RendersFormsTest.php
index 48aa2cce746..fe61e589da6 100644
--- a/tests/Tags/Concerns/RendersFormsTest.php
+++ b/tests/Tags/Concerns/RendersFormsTest.php
@@ -117,6 +117,7 @@ private function createField($type, $value, $default, $old, $config = [])
 
     /**
      * @test
+     *
      * @dataProvider renderTextProvider
      */
     public function renders_text_fields($value, $default, $old, $expected)
@@ -134,6 +135,7 @@ private function textFieldtypeTest($fieldtype, $value, $default, $old, $expected
 
     /**
      * @test
+     *
      * @dataProvider renderTextProvider
      */
     public function renders_fallback_fields_as_text_fields($value, $default, $old, $expected)
@@ -148,6 +150,7 @@ public function renders_fallback_fields_as_text_fields($value, $default, $old, $
 
     /**
      * @test
+     *
      * @dataProvider renderTextProvider
      */
     public function renders_textarea_fields($value, $default, $old, $expected)
@@ -181,6 +184,7 @@ public function renderTextProvider()
 
     /**
      * @test
+     *
      * @dataProvider renderToggleProvider
      */
     public function renders_toggles($value, $default, $old, $expected)
@@ -236,6 +240,7 @@ public function renderToggleProvider()
 
     /**
      * @test
+     *
      * @dataProvider renderSingleSelectProvider
      */
     public function renders_single_select_fields($value, $default, $old, $expected)
@@ -264,6 +269,7 @@ public function renders_single_select_fields($value, $default, $old, $expected)
 
     /**
      * @test
+     *
      * @dataProvider renderSingleSelectProvider
      */
     public function renders_radio_fields($value, $default, $old, $expected)
@@ -312,6 +318,7 @@ public function renderSingleSelectProvider()
 
     /**
      * @test
+     *
      * @dataProvider renderMultipleSelectProvider
      */
     public function renders_multiple_select_fields($value, $default, $old, $expected)
@@ -344,6 +351,7 @@ public function renders_multiple_select_fields($value, $default, $old, $expected
 
     /**
      * @test
+     *
      * @dataProvider renderMultipleSelectProvider
      */
     public function renders_checkboxes_fields($value, $default, $old, $expected)
diff --git a/tests/Tags/FluentTagTest.php b/tests/Tags/FluentTagTest.php
index e2e1c814d20..0e1757052f4 100644
--- a/tests/Tags/FluentTagTest.php
+++ b/tests/Tags/FluentTagTest.php
@@ -34,6 +34,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @dataProvider fluentTagProvider
      **/
     public function it_handles_params_fluently($usedTag, $expectedTagName, $expectedTag, $expectedTagMethod, $expectedClassMethod)
diff --git a/tests/Tags/Form/FormCreateTest.php b/tests/Tags/Form/FormCreateTest.php
index a7745834b1a..d64adedbe43 100644
--- a/tests/Tags/Form/FormCreateTest.php
+++ b/tests/Tags/Form/FormCreateTest.php
@@ -57,7 +57,7 @@ public function it_renders_form_dynamically_with_fields_array()
     {{ /fields }}
 {{ /form:contact }}
 EOT
-));
+        ));
 
         $this->assertStringContainsString('<label>Full Name</label><input type="text" name="name" value="">', $output);
         $this->assertStringContainsString('<label>Email Address</label><input type="email" name="email" value="" required>', $output);
diff --git a/tests/Tags/GetErrorsTest.php b/tests/Tags/GetErrorsTest.php
index 7f24e855629..483ac0e891f 100644
--- a/tests/Tags/GetErrorsTest.php
+++ b/tests/Tags/GetErrorsTest.php
@@ -16,6 +16,7 @@ private function tag($tag, $data = [])
 
     /**
      * @test
+     *
      * @dataProvider organizedProvider
      */
     public function it_gets_errors_organized_into_fields($params, $bag, $errors, $expected)
@@ -89,6 +90,7 @@ public function organizedProvider()
 
     /**
      * @test
+     *
      * @dataProvider allProvider
      */
     public function it_gets_errors_for_all_fields_together($params, $bag, $errors, $expected)
@@ -153,6 +155,7 @@ public function allProvider()
 
     /**
      * @test
+     *
      * @dataProvider fieldProvider
      */
     public function it_gets_errors_for_a_single_field($params, $bag, $errors, $expected)
diff --git a/tests/Tags/GlideTest.php b/tests/Tags/GlideTest.php
index 6c639ae50bd..ae4dff1b7bc 100644
--- a/tests/Tags/GlideTest.php
+++ b/tests/Tags/GlideTest.php
@@ -11,6 +11,7 @@ class GlideTest extends TestCase
 {
     /**
      * @test
+     *
      * @define-env relativeRouteUrl
      */
     public function it_outputs_a_relative_url_by_default_when_the_glide_route_is_relative()
@@ -24,6 +25,7 @@ public function it_outputs_a_relative_url_by_default_when_the_glide_route_is_rel
 
     /**
      * @test
+     *
      * @define-env absoluteHttpRouteUrl
      */
     public function it_outputs_an_absolute_url_by_default_when_the_glide_route_is_absolute_http()
@@ -37,6 +39,7 @@ public function it_outputs_an_absolute_url_by_default_when_the_glide_route_is_ab
 
     /**
      * @test
+     *
      * @define-env absoluteHttpsRouteUrl
      */
     public function it_outputs_an_absolute_url_by_default_when_the_glide_route_is_absolute_https()
diff --git a/tests/Tags/User/PasswordFormTest.php b/tests/Tags/User/PasswordFormTest.php
index 94074785fee..7d230265257 100644
--- a/tests/Tags/User/PasswordFormTest.php
+++ b/tests/Tags/User/PasswordFormTest.php
@@ -67,7 +67,7 @@ public function it_renders_form_with_fields_array()
     {{ /fields }}
 {{ /user:password_form }}
 EOT
-));
+        ));
 
         preg_match_all('/<label>.+<\/label><input.+>/U', $output, $actual);
 
diff --git a/tests/Tags/User/ProfileFormTest.php b/tests/Tags/User/ProfileFormTest.php
index 6d3ffb50406..70a4e59d938 100644
--- a/tests/Tags/User/ProfileFormTest.php
+++ b/tests/Tags/User/ProfileFormTest.php
@@ -68,7 +68,7 @@ public function it_renders_form_with_fields_array()
     {{ /fields }}
 {{ /user:profile_form }}
 EOT
-));
+        ));
 
         preg_match_all('/<label>.+<\/label><input.+>/U', $output, $actual);
 
@@ -96,7 +96,7 @@ public function it_renders_form_with_fields_array_and_custom_blueprint()
     {{ /fields }}
 {{ /user:profile_form }}
 EOT
-));
+        ));
 
         preg_match_all('/<label>.+<\/label><input.+>/U', $output, $actual);
 
diff --git a/tests/Tags/User/RegisterFormTest.php b/tests/Tags/User/RegisterFormTest.php
index f2040c47bfc..ea373a5354e 100644
--- a/tests/Tags/User/RegisterFormTest.php
+++ b/tests/Tags/User/RegisterFormTest.php
@@ -62,7 +62,7 @@ public function it_renders_form_with_fields_array()
     {{ /fields }}
 {{ /user:register_form }}
 EOT
-));
+        ));
 
         preg_match_all('/<label>.+<\/label><input.+>/U', $output, $actual);
 
@@ -88,7 +88,7 @@ public function it_renders_form_with_fields_array_and_custom_blueprint()
     {{ /fields }}
 {{ /user:register_form }}
 EOT
-));
+        ));
 
         preg_match_all('/<label>.+<\/label><input.+>/U', $output, $actual);
 
diff --git a/tests/Tokens/HandleTokenMiddlewareTest.php b/tests/Tokens/HandleTokenMiddlewareTest.php
index 504154f66bd..506ef9cc25a 100644
--- a/tests/Tokens/HandleTokenMiddlewareTest.php
+++ b/tests/Tokens/HandleTokenMiddlewareTest.php
@@ -23,6 +23,7 @@ private function request($paramToken, $headerToken)
 
     /**
      * @test
+     *
      * @dataProvider validTokenProvider
      **/
     public function it_should_handle_valid_tokens($paramToken, $headerToken)
@@ -55,6 +56,7 @@ public function validTokenProvider()
 
     /**
      * @test
+     *
      * @dataProvider invalidTokenProvider
      **/
     public function it_should_not_handle_invalid_tokens($paramToken, $headerToken)
diff --git a/tests/View/Antlers/ParserTests.php b/tests/View/Antlers/ParserTests.php
index 9b6f3c6177d..e72ac86a97b 100644
--- a/tests/View/Antlers/ParserTests.php
+++ b/tests/View/Antlers/ParserTests.php
@@ -1231,8 +1231,7 @@ public function it_doesnt_output_anything_if_object_cannot_be_cast_to_a_string()
         Log::shouldReceive('debug')->once()
             ->with('Cannot render an object variable as a string: {{ object }}');
 
-        $object = new class
-        {
+        $object = new class {
         };
 
         $this->assertEquals('', $this->renderString('{{ object }}', compact('object')));
@@ -1749,8 +1748,7 @@ public function it_can_reach_into_the_cascade()
             $m->shouldNotReceive('get')->with('augmented');
         });
 
-        $fieldtype = new class extends Fieldtype
-        {
+        $fieldtype = new class extends Fieldtype {
         };
         $augmented = new Value(['drink' => 'la croix'], 'augmented', $fieldtype);
 
@@ -2213,8 +2211,7 @@ public function when_a_loop_is_a_value_object_with_an_empty_array_it_get_parsed_
 after
 EOT;
         $this->assertEquals($expected, $this->renderString($template, [
-            'simple' => new Value([], null, new class extends \Statamic\Fieldtypes\Replicator
-            {
+            'simple' => new Value([], null, new class extends \Statamic\Fieldtypes\Replicator {
             }),
         ]));
     }
@@ -2427,6 +2424,7 @@ public function it_loops_over_values_instances()
 
     /**
      * @test
+     *
      * @dataProvider objectInConditionProvider
      */
     public function it_uses_entries_as_conditions($object)
@@ -2453,8 +2451,7 @@ public function __call($method, $args)
                     return 'foo';
                 }
             }, ],
-            'without __call or __toString' => [new class()
-            {
+            'without __call or __toString' => [new class() {
                 //
             }, ],
         ];

From 1faadaac5b523512c9f36f61afce236c1941e485 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 13 Mar 2023 10:38:30 -0400
Subject: [PATCH 15/32] Give buttons ever slightly more depth

---
 resources/css/elements/buttons.css | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/resources/css/elements/buttons.css b/resources/css/elements/buttons.css
index 2760aba104e..da5eabc3640 100644
--- a/resources/css/elements/buttons.css
+++ b/resources/css/elements/buttons.css
@@ -32,13 +32,14 @@ button {
 /*  Default, non-primary action button */
 .btn, .btn-default {
     @apply text-gray-800 shadow-button;
-
     background: linear-gradient(180deg, #fff, #f9fafb);
-    border: 1px solid #c4cdd6;
+    border: 1px solid #D3DDE7;
+    border-bottom: 1px solid #c4cdd6;
+    box-shadow: inset 0 1px 0 0 #fff, 0 1px 0 0 rgba(0, 0, 0,.05), 0 2px 1px 0 theme(colors.gray.600 / .15), 0 0 0 0 transparent;
 
     &:hover:not(:disabled), &:active:not(:disabled) {
         background: linear-gradient(180deg, #f9fafb, #f4f6f8);
-        border-color: #c4cdd5;
+        border-bottom: 1px solid #BFC7D0;
     }
 
     &.active, &.active:hover {
@@ -54,15 +55,12 @@ button {
 
 /*  Primary action button */
 .btn-primary {
-    @apply text-white;
-    background: linear-gradient(to bottom, theme('colors.blue.500'), theme('colors.blue.600'));
-    border: 1px solid theme('colors.blue.700');
-    box-shadow: inset 0 1px 0 0 theme('colors.blue.400'), 0 1px 0 0 rgba(25,30,35,.05), 0 0 0 0 transparent;
+    @apply text-white bg-gradient-to-b from-blue-500 to-blue-600 border border-blue-700 border-b-blue-800;
+    box-shadow: inset 0 1px 0 0 theme('colors.blue.400'), 0 1px 0 0 rgba(25,30,35,.05), 0 3px 2px -1px theme(colors.blue.900 / .15), 0 0 0 0 transparent;
 
     &:hover:not(:disabled), :active:not(:disabled) {
-        background: linear-gradient(to bottom, theme('colors.blue.600'), theme('colors.blue.700'));
-        border: 1px solid theme('colors.blue.800');
-        box-shadow: inset 0 1px 0 0 theme('colors.blue.500'), 0 1px 0 0 rgba(25,30,35,.05), 0 0 0 0 transparent;
+        @apply from-blue-600 to-blue-700 border-blue-800 border-b-blue-900;
+        box-shadow: inset 0 1px 0 0 theme('colors.blue.500'), 0 1px 0 0 rgba(25,30,35,.05), 0 3px 2px -1px theme(colors.blue.900 / .15), 0 0 0 0 transparent;
     }
 
     &:disabled {
@@ -73,7 +71,7 @@ button {
 /*  Danger/delete button */
 .btn-danger {
     @apply text-white bg-gradient-to-b from-red-500 to-red-600 border border-red-600 border-b-red-900;
-    box-shadow: inset 0 1px 0 0 theme('colors.red.400'), 0 1px 0 0 rgba(0, 0, 0,.05), 0 0 0 0 transparent;
+    box-shadow: inset 0 1px 0 0 theme('colors.red.400'), 0 1px 0 0 rgba(0, 0, 0,.05), 0 3px 2px -1px theme(colors.red.900 / .15), 0 0 0 0 transparent;
 
     &:hover:not(:disabled), &:active:not(:disabled) {
         @apply from-red-600 to-red-700 border border-red-700 border-b-red-900;

From b27bf790d35b6e48932bf39115c806063383739c Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 13 Mar 2023 10:56:55 -0400
Subject: [PATCH 16/32] Add config option to always show Listing Filters

---
 config/cp.php                                       | 12 ++++++++++++
 resources/js/components/data-list/FilterPresets.vue |  2 +-
 resources/js/components/data-list/HasFilters.js     |  3 ++-
 resources/js/components/entries/Listing.vue         | 10 ++++++----
 src/Http/View/Composers/JavascriptComposer.php      |  1 +
 5 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/config/cp.php b/config/cp.php
index 188b7d9f5d5..25a69129658 100644
--- a/config/cp.php
+++ b/config/cp.php
@@ -27,6 +27,18 @@
 
     'start_page' => 'dashboard',
 
+    /*
+    |--------------------------------------------------------------------------
+    | Listing Filters
+    |--------------------------------------------------------------------------
+    |
+    | Whether to always show the filters on listing pages or hide them behind
+    | a toggle button to keep things more simple.
+    |
+    */
+
+    'always_show_filters' => true,
+
     /*
     |--------------------------------------------------------------------------
     | Dashboard Widgets
diff --git a/resources/js/components/data-list/FilterPresets.vue b/resources/js/components/data-list/FilterPresets.vue
index 688b764b786..f045459e440 100644
--- a/resources/js/components/data-list/FilterPresets.vue
+++ b/resources/js/components/data-list/FilterPresets.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="pr-2">
         <div class="flex flex-wrap items-center">
 
             <button class="pill-tab mr-1" :class="{ 'active': ! activePreset }" @click="viewAll" v-text="__('All')" />
diff --git a/resources/js/components/data-list/HasFilters.js b/resources/js/components/data-list/HasFilters.js
index c30c5eed2e4..bc0895395ec 100644
--- a/resources/js/components/data-list/HasFilters.js
+++ b/resources/js/components/data-list/HasFilters.js
@@ -7,7 +7,8 @@ export default {
             activePreset: null,
             activePresetPayload: {},
             searchQuery: '',
-            showFilters: false,
+            showFilters: this.$config.get('alwaysShowFilters'),
+            alwaysShowFilters: this.$config.get('alwaysShowFilters'),
         }
     },
 
diff --git a/resources/js/components/entries/Listing.vue b/resources/js/components/entries/Listing.vue
index 993400c7eb7..3142026c380 100644
--- a/resources/js/components/entries/Listing.vue
+++ b/resources/js/components/entries/Listing.vue
@@ -18,11 +18,9 @@
                 <div class="card overflow-hidden p-0 relative">
                     <div class="flex items-center justify-between p-2 text-sm border-b">
 
-                        <data-list-search class="h-8" v-if="showFilters" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
-
                         <data-list-filter-presets
                             ref="presets"
-                            v-show="! showFilters"
+                            v-show="alwaysShowFilters || ! showFilters"
                             :active-preset="activePreset"
                             :active-preset-payload="activePresetPayload"
                             :active-filters="activeFilters"
@@ -33,9 +31,13 @@
                             @reset="filtersReset"
                             @hide-filters="filtersHide"
                             @show-filters="filtersShow"
+                            class="mr-2"
                         />
+
+                        <data-list-search class="h-8" v-if="showFilters" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
+
                         <div class="flex ml-2 space-x-2">
-                            <button class="btn py-1 px-2 h-8" v-text="__('Cancel')" v-show="showFilters" @click="filtersHide" />
+                            <button class="btn py-1 px-2 h-8" v-text="__('Cancel')" v-show="! alwaysShowFilters && showFilters" @click="filtersHide" />
                             <button class="btn py-1 px-2 h-8" v-text="__('Save')" v-show="showFilters && isDirty" @click="$refs.presets.savePreset()" />
                             <button class="btn flex items-center py-1 px-2 h-8 w-12" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls (F)')">
                                 <svg-icon name="search" class="w-4 h-4" />
diff --git a/src/Http/View/Composers/JavascriptComposer.php b/src/Http/View/Composers/JavascriptComposer.php
index d9113d48943..66f0fe06132 100644
--- a/src/Http/View/Composers/JavascriptComposer.php
+++ b/src/Http/View/Composers/JavascriptComposer.php
@@ -38,6 +38,7 @@ public function compose(View $view)
             'user' => $this->user($user),
             'paginationSize' => config('statamic.cp.pagination_size'),
             'paginationSizeOptions' => config('statamic.cp.pagination_size_options'),
+            'alwaysShowFilters' => config('statamic.cp.always_show_filters'),
             'translationLocale' => app('translator')->locale(),
             'translations' => app('translator')->toJson(),
             'sites' => $this->sites(),

From bec0f24095fd83740cca71e6baa2f9b13cb2acd0 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 13 Mar 2023 11:01:06 -0400
Subject: [PATCH 17/32] Set it to false

---
 config/cp.php                               | 2 +-
 resources/js/components/entries/Listing.vue | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/config/cp.php b/config/cp.php
index 25a69129658..813f68b46d2 100644
--- a/config/cp.php
+++ b/config/cp.php
@@ -37,7 +37,7 @@
     |
     */
 
-    'always_show_filters' => true,
+    'always_show_filters' => false,
 
     /*
     |--------------------------------------------------------------------------
diff --git a/resources/js/components/entries/Listing.vue b/resources/js/components/entries/Listing.vue
index 3142026c380..315fc5fe720 100644
--- a/resources/js/components/entries/Listing.vue
+++ b/resources/js/components/entries/Listing.vue
@@ -31,7 +31,6 @@
                             @reset="filtersReset"
                             @hide-filters="filtersHide"
                             @show-filters="filtersShow"
-                            class="mr-2"
                         />
 
                         <data-list-search class="h-8" v-if="showFilters" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />

From a1a7fa509ea1a045a8fcd0eda17e608501cfaea7 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 13 Mar 2023 12:01:07 -0400
Subject: [PATCH 18/32] Horizontal scroll for asset listing, fix overflow issue
 w/ selected rows

---
 resources/css/elements/tables.css                  |  2 +-
 resources/js/components/assets/Browser/Browser.vue | 12 +++++++-----
 resources/js/components/assets/Editor/Editor.vue   |  2 +-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css
index d4ab8f1c1ea..55abfa8c2f5 100644
--- a/resources/css/elements/tables.css
+++ b/resources/css/elements/tables.css
@@ -160,7 +160,7 @@
     }
 
     tbody th.actions-column {
-        @apply p-0 pl-4 text-right sticky -right-px z-1;
+        @apply p-0 pl-2 text-right sticky -right-px z-1;
         background-image: linear-gradient(to left, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
         min-width: 45px;
         width: 45px;
diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index ad75e15d164..30940c72663 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -44,7 +44,7 @@
                     @selections-updated="(ids) => $emit('selections-updated', ids)"
                 >
                     <div slot-scope="{ filteredRows: rows }" :class="modeClass">
-                        <div class="card p-0" :class="{ 'rounded-tl-none': showContainerTabs, 'select-none' : shifting }">
+                        <div class="card overflow-hidden p-0" :class="{ 'rounded-tl-none': showContainerTabs, 'select-none' : shifting }">
                             <div class="relative w-full">
 
                                 <div class="data-list-header">
@@ -90,6 +90,7 @@
                                 class="-mt-px"
                             />
 
+                            <div class="overflow-x-auto overflow-y-hidden">
                             <data-list-table
                                 v-if="mode === 'table' && ! containerIsEmpty"
                                 :allow-bulk-actions="true"
@@ -121,8 +122,8 @@
                                         <td />
                                         <td />
 
-                                        <td class="actions-column" :colspan="columns.length">
-                                            <dropdown-list v-if="folderActions(folder).length">
+                                        <th class="actions-column" :colspan="columns.length">
+                                            <dropdown-list placement="left-start" scroll v-if="folderActions(folder).length">
                                                 <!-- TODO: Folder edit -->
                                                 <!-- <dropdown-item :text="__('Edit')" @click="editedFolderPath = folder.path" /> -->
 
@@ -143,7 +144,7 @@
                                                 @closed="editedFolderPath = null"
                                                 @updated="folderUpdated(i, $event)"
                                             />
-                                        </td>
+                                        </th>
                                     </tr>
                                 </template>
 
@@ -157,7 +158,7 @@
                                 </template>
 
                                 <template slot="actions" slot-scope="{ row: asset }">
-                                    <dropdown-list>
+                                    <dropdown-list placement="left-start" scroll>
                                         <dropdown-item :text="__(canEdit ? 'Edit' : 'View')" @click="edit(asset.id)" />
                                         <div class="divider" v-if="asset.actions.length" />
                                         <data-list-inline-actions
@@ -171,6 +172,7 @@
                                 </template>
 
                             </data-list-table>
+                            </div>
 
                             <!-- Grid Mode -->
                             <div v-if="mode === 'grid' && ! containerIsEmpty">
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 3111540758d..a466cbd3888 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -120,7 +120,7 @@
 
                     @updated="values = { ...$event, focus: values.focus }"
                 >
-                    <div class="w-full sm:p-4 md:py-0 md:w-1/3 md:grow h1/2 md:h-full overflow-scroll" slot-scope="{ setFieldValue, setFieldMeta }">
+                    <div class="w-full sm:p-4 md:pt-px md:w-1/3 md:grow h-1/2 md:h-full overflow-scroll" slot-scope="{ setFieldValue, setFieldMeta }">
 
                         <div v-if="saving" class="loading">
                             <loading-graphic text="Saving" />

From 1e8e9682d6d7433aee95d939b1f3b15943667a8e Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 13 Mar 2023 12:27:22 -0400
Subject: [PATCH 19/32] Differentiate between new btn-sm and btn-xs (old
 btn-sm)

---
 resources/css/elements/buttons.css          | 5 ++++-
 resources/js/components/entries/Listing.vue | 6 +++---
 resources/js/components/updater/Updater.vue | 2 +-
 resources/views/playground.blade.php        | 8 ++++----
 resources/views/updater/index.blade.php     | 4 ++--
 resources/views/utilities/search.blade.php  | 2 +-
 6 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/resources/css/elements/buttons.css b/resources/css/elements/buttons.css
index da5eabc3640..7593297a17c 100644
--- a/resources/css/elements/buttons.css
+++ b/resources/css/elements/buttons.css
@@ -111,8 +111,11 @@ button {
 
 /* Size Variations
   ========================================================================== */
-
 .btn-sm {
+    @apply py-1 px-2 h-8;
+}
+
+.btn-xs {
     @apply text-2xs;
     line-height: 0;
     height: 1.625rem; /*  24px */
diff --git a/resources/js/components/entries/Listing.vue b/resources/js/components/entries/Listing.vue
index 315fc5fe720..4bcb08fe331 100644
--- a/resources/js/components/entries/Listing.vue
+++ b/resources/js/components/entries/Listing.vue
@@ -36,9 +36,9 @@
                         <data-list-search class="h-8" v-if="showFilters" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
 
                         <div class="flex ml-2 space-x-2">
-                            <button class="btn py-1 px-2 h-8" v-text="__('Cancel')" v-show="! alwaysShowFilters && showFilters" @click="filtersHide" />
-                            <button class="btn py-1 px-2 h-8" v-text="__('Save')" v-show="showFilters && isDirty" @click="$refs.presets.savePreset()" />
-                            <button class="btn flex items-center py-1 px-2 h-8 w-12" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls (F)')">
+                            <button class="btn btn-sm" v-text="__('Cancel')" v-show="! alwaysShowFilters && showFilters" @click="filtersHide" />
+                            <button class="btn btn-sm" v-text="__('Save')" v-show="showFilters && isDirty" @click="$refs.presets.savePreset()" />
+                            <button class="btn flex items-center btn-sm w-12" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls (F)')">
                                 <svg-icon name="search" class="w-4 h-4" />
                                 <svg-icon name="filter-lines" class="w-4 h-4" />
                             </button>
diff --git a/resources/js/components/updater/Updater.vue b/resources/js/components/updater/Updater.vue
index 2ccb8675e2e..90807793b1e 100644
--- a/resources/js/components/updater/Updater.vue
+++ b/resources/js/components/updater/Updater.vue
@@ -28,7 +28,7 @@
                 <h4 v-text="__('messages.addon_has_more_releases_beyond_license_heading')" />
                 <p v-text="__('messages.addon_has_more_releases_beyond_license_body')" />
             </div>
-            <button class="btn btn-sm" v-text="__('View additional releases')" />
+            <button class="btn btn-xs" v-text="__('View additional releases')" />
         </div>
 
         <template v-if="showingUnlicensedReleases">
diff --git a/resources/views/playground.blade.php b/resources/views/playground.blade.php
index c953c4d49c5..bbf9c75e9cf 100644
--- a/resources/views/playground.blade.php
+++ b/resources/views/playground.blade.php
@@ -149,10 +149,10 @@
 
         <h6 class="mb-4">Small</h6>
         <div class="flex">
-            <button class="mr-4 btn btn-sm">Default Button</button>
-            <button class="mr-4 btn-primary btn-sm">Primary Button</button>
-            <button class="mr-4 btn-danger btn-sm">Danger Button</button>
-            <button class="btn-flat btn-sm">Flat Button</button>
+            <button class="mr-4 btn btn-xs">Default Button</button>
+            <button class="mr-4 btn-primary btn-xs">Primary Button</button>
+            <button class="mr-4 btn-danger btn-xs">Danger Button</button>
+            <button class="btn-flat btn-xs">Flat Button</button>
         </div>
     </div>
 
diff --git a/resources/views/updater/index.blade.php b/resources/views/updater/index.blade.php
index c8bb19929f2..d03dbb9b907 100644
--- a/resources/views/updater/index.blade.php
+++ b/resources/views/updater/index.blade.php
@@ -34,7 +34,7 @@ class="btn-primary btn-lg">{{ __('Try again') }}</a>
                     <td class="w-64"><a href="{{ route('statamic.cp.updater.product', 'statamic') }}" class="text-blue font-bold">Statamic</a></td>
                     <td>{{ $statamic->currentVersion() }}</td>
                     @if ($count = $statamic->availableUpdatesCount())
-                        <td class="text-right"><span class="badge-sm bg-green-600 btn-sm">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
+                        <td class="text-right"><span class="badge-sm bg-green-600 btn-xs">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
                     @else
                         <td class="text-right">{{ __('Up to date') }}</td>
                     @endif
@@ -52,7 +52,7 @@ class="text-blue font-bold mr-2">{{ $addon -> name() }}</a>
                     <td>{{ $addon -> version() }}</td>
                     @if ($count = $addon->changelog()->availableUpdatesCount())
                     <td class="text-right"><span
-                            class="badge-sm bg-green-600 btn-sm">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
+                            class="badge-sm bg-green-600 btn-xs">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
                     @else
                     <td class="text-right">{{ __('Up to date') }}</td>
                     @endif
diff --git a/resources/views/utilities/search.blade.php b/resources/views/utilities/search.blade.php
index f4c358fa920..ca29618c901 100644
--- a/resources/views/utilities/search.blade.php
+++ b/resources/views/utilities/search.blade.php
@@ -72,7 +72,7 @@
                             <form method="POST" action="{{ cp_route('utilities.search') }}">
                                 @csrf
                                 <input type="hidden" name="indexes[]" value="{{ $index->name() }}">
-                                <button type="submit" class="btn btn-sm">{{ __('Update') }}</button>
+                                <button type="submit" class="btn btn-xs">{{ __('Update') }}</button>
                             </form>
                         </td>
                     </tr>

From 147e2d884bb30dd4d08a10c0e57b8c5004147068 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 13 Mar 2023 13:18:45 -0400
Subject: [PATCH 20/32] Better h1-h6 icons (new from Streamline)

---
 resources/svg/add-bold.svg     | 2 +-
 resources/svg/filter-lines.svg | 2 +-
 resources/svg/h1.svg           | 2 +-
 resources/svg/h2.svg           | 2 +-
 resources/svg/h3.svg           | 2 +-
 resources/svg/h4.svg           | 2 +-
 resources/svg/h5.svg           | 2 +-
 resources/svg/h6.svg           | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/resources/svg/add-bold.svg b/resources/svg/add-bold.svg
index e80b757a94e..4467c834a28 100644
--- a/resources/svg/add-bold.svg
+++ b/resources/svg/add-bold.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" d="M7 1V13"></path><path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" d="M13 7L1 7"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M7 1v12M13 7H1"/></svg>
\ No newline at end of file
diff --git a/resources/svg/filter-lines.svg b/resources/svg/filter-lines.svg
index fd038eba0e3..faeabd06413 100644
--- a/resources/svg/filter-lines.svg
+++ b/resources/svg/filter-lines.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.51001 12.2115H9.48992"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.18237 8.73718H10.8177"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.89697 5.26282H12.1031"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M0.80957 1.78848H13.1904"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.51 12.211h4.98M3.182 8.737h7.636M1.897 5.263h10.206M.81 1.788h12.38"/></svg>
\ No newline at end of file
diff --git a/resources/svg/h1.svg b/resources/svg/h1.svg
index 20cb0e6c165..ff5f66acc29 100644
--- a/resources/svg/h1.svg
+++ b/resources/svg/h1.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.57 12.94"><path fill="currentColor" d="M8.32 0c.37 0 .68.34.68.74v11.37c0 .42-.31.76-.68.76s-.7-.34-.7-.76v-5.1H1.38v5.1c0 .42-.31.76-.68.76s-.7-.34-.7-.76V.74C0 .34.31 0 .7 0s.68.34.68.74v4.83h6.24V.74c0-.4.31-.74.7-.74zm4.16 4.81-.93.72a.55.55 0 0 1-.35.12c-.16 0-.33-.07-.42-.19-.08-.1-.11-.2-.11-.3 0-.18.1-.34.23-.45l1.73-1.34c.11-.08.27-.14.41-.14.3 0 .53.23.53.52v8.66c0 .29-.23.52-.54.52s-.55-.23-.55-.52V4.8z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" viewBox="0 0 14 14"><defs><clipPath id="clippath"><path d="M0 0h14v14H0z" style="fill:none"/></clipPath><style>.cls-2{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round}</style></defs><g id="Layer_1-2" style="clip-path:url(#clippath)"><path d="M11.39 7.65v5.1M9.7 8.72h.42c.7 0 1.27-.57 1.27-1.27M13.09 12.75h-3.4M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75" class="cls-2"/></g></svg>
\ No newline at end of file
diff --git a/resources/svg/h2.svg b/resources/svg/h2.svg
index 39e9400b856..95634bf9d7b 100644
--- a/resources/svg/h2.svg
+++ b/resources/svg/h2.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.03 12.87"><path fill="currentColor" d="M8.32 0c.37 0 .68.34.68.74v11.37c0 .42-.31.76-.68.76s-.7-.34-.7-.76v-5.1H1.38v5.1c0 .42-.31.76-.68.76s-.7-.34-.7-.76V.74C0 .34.31 0 .7 0s.68.34.68.74v4.83h6.24V.74c0-.4.31-.74.7-.74zm7.22 11.57c.27 0 .48.23.48.5 0 .29-.22.52-.48.52h-4.51c-.36 0-.55-.22-.55-.5s.2-.48.34-.63c1.47-1.54 3.75-3.97 3.75-5.89 0-.85-.48-1.54-1.45-1.54-.59 0-1.09.25-1.41.98-.12.26-.27.36-.51.36-.33 0-.51-.26-.51-.55 0-.07.01-.12.03-.19.37-1.15 1.39-1.69 2.49-1.69 1.67 0 2.44 1.23 2.44 2.41 0 2.67-3.03 5.55-3.74 6.22h3.62z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" viewBox="0 0 14 14"><defs><clipPath id="clippath"><path d="M0 0h14v14H0z" style="fill:none"/></clipPath><style>.cls-2{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round}</style></defs><g id="Layer_1-2" style="clip-path:url(#clippath)"><path d="M12.93 12.75H9.61V12c0-.53.29-1 .74-1.22l1.84-.86c.44-.21.73-.67.73-1.18 0-.71-.54-1.29-1.21-1.29h-.86c-.54 0-1 .37-1.17.88M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75" class="cls-2"/></g></svg>
\ No newline at end of file
diff --git a/resources/svg/h3.svg b/resources/svg/h3.svg
index 0a865148bd5..b45de42b724 100644
--- a/resources/svg/h3.svg
+++ b/resources/svg/h3.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.61 12.87"><path fill="currentColor" d="M8.32 0c.37 0 .68.34.68.74v11.37c0 .42-.31.76-.68.76s-.7-.34-.7-.76v-5.1H1.38v5.1c0 .42-.31.76-.68.76s-.7-.34-.7-.76V.74C0 .34.31 0 .7 0s.68.34.68.74v4.83h6.24V.74c0-.4.31-.74.7-.74zm4.71 3.03c1.37 0 2.26.91 2.26 2.41 0 1.04-.45 1.88-1.28 2.31 1.02.22 1.59 1.21 1.59 2.33 0 1.71-1.11 2.77-2.58 2.77-.99 0-1.85-.37-2.36-1.2a.888.888 0 0 1-.13-.42c0-.16.06-.31.19-.41.08-.05.16-.1.25-.1.17 0 .32.11.43.29.43.59.95.75 1.58.75 1.02 0 1.62-.75 1.62-1.72 0-1.02-.69-1.66-1.68-1.66h-.2c-.31 0-.5-.23-.5-.55s.2-.55.5-.55h.14c.73 0 1.42-.67 1.42-1.65s-.5-1.51-1.34-1.51c-.63 0-1.01.22-1.31.67-.12.16-.27.25-.42.25-.08 0-.16-.03-.25-.08a.465.465 0 0 1-.18-.38c0-.12.04-.25.11-.37.47-.76 1.21-1.17 2.12-1.17z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" viewBox="0 0 14 14"><defs><clipPath id="clippath"><path d="M0 0h14v14H0z" style="fill:none"/></clipPath><style>.cls-2{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round}</style></defs><g id="Layer_1-2" style="clip-path:url(#clippath)"><path d="M9.54 11.87c.18.52.67.88 1.25.88h.88c.73 0 1.33-.59 1.33-1.33v-.22c0-.73-.59-1.33-1.33-1.33h-.44.33c.67 0 1.22-.54 1.22-1.22s-.54-1.22-1.22-1.22h-.66c-.56 0-1.03.37-1.17.88M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75" class="cls-2"/></g></svg>
\ No newline at end of file
diff --git a/resources/svg/h4.svg b/resources/svg/h4.svg
index dce794f1655..5dd12d75c01 100644
--- a/resources/svg/h4.svg
+++ b/resources/svg/h4.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.43 12.87"><path fill="currentColor" d="M8.32 0c.37 0 .68.34.68.74v11.37c0 .42-.31.76-.68.76s-.7-.34-.7-.76v-5.1H1.38v5.1c0 .42-.31.76-.68.76s-.7-.34-.7-.76V.74C0 .34.31 0 .7 0s.68.34.68.74v4.83h6.24V.74c0-.4.31-.74.7-.74zm6.97 10.48v1.84c0 .31-.22.55-.47.55s-.47-.23-.47-.55v-1.84h-3.33c-.27 0-.51-.25-.51-.56 0-.12.04-.26.11-.38l3.17-5.91c.11-.2.24-.34.46-.34.26 0 .44.23.44.5 0 .1-.02.22-.08.33l-2.84 5.26h2.58V7.27c0-.31.22-.55.47-.55s.47.23.47.55v2.11h.65c.27 0 .5.26.5.55s-.22.55-.5.55h-.65z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" viewBox="0 0 14 14"><defs><clipPath id="clippath"><path d="M0 0h14v14H0z" style="fill:none"/></clipPath><style>.cls-2{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round}</style></defs><g id="Layer_1-2" style="clip-path:url(#clippath)"><path d="M12.36 11.42H9.15c-.18 0-.32-.14-.32-.32 0-.08.03-.15.08-.21l2.92-3.34c.06-.07.14-.1.23-.1.17 0 .3.14.3.3v3.67Zm0 0h.88m-.88 0v1.33M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75" class="cls-2"/></g></svg>
\ No newline at end of file
diff --git a/resources/svg/h5.svg b/resources/svg/h5.svg
index 3f0efda3b80..b0f6a369a9a 100644
--- a/resources/svg/h5.svg
+++ b/resources/svg/h5.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.1 12.87"><path fill="currentColor" d="M8.32 0c.37 0 .68.34.68.74v11.37c0 .42-.31.76-.68.76s-.7-.34-.7-.76v-5.1H1.38v5.1c0 .42-.31.76-.68.76s-.7-.34-.7-.76V.74C0 .34.31 0 .7 0s.68.34.68.74v4.83h6.24V.74c0-.4.31-.74.7-.74zm3.58 11.02c.43.55.97.74 1.52.74.95 0 1.67-.85 1.67-2.02s-.78-2.02-2.02-2.02c-.2 0-.39.03-.58.05-.03 0-.07.01-.11.01-.32 0-.52-.26-.52-.61v-.11l.37-3.38c.04-.3.26-.52.51-.52h2.85c.25 0 .45.23.45.55s-.2.55-.45.55h-2.47l-.31 2.58c.18-.05.43-.1.66-.1 1.51 0 2.62 1.15 2.62 2.96 0 1.98-1.23 3.15-2.71 3.15-.78 0-1.59-.25-2.27-1.23-.06-.1-.09-.2-.09-.33 0-.16.06-.33.19-.42.09-.07.18-.11.27-.11.14 0 .27.1.4.26z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" viewBox="0 0 14 14"><defs><clipPath id="clippath"><path d="M0 0h14v14H0z" style="fill:none"/></clipPath><style>.cls-2{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round}</style></defs><g id="Layer_1-2" style="clip-path:url(#clippath)"><path d="M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75M12.82 7.44H9.95l-.44 2.65.32-.16c.37-.18.77-.28 1.19-.28h.7c.73 0 1.33.59 1.33 1.33v.44c0 .73-.59 1.33-1.33 1.33h-.88c-.58 0-1.07-.37-1.25-.88" class="cls-2"/></g></svg>
\ No newline at end of file
diff --git a/resources/svg/h6.svg b/resources/svg/h6.svg
index bf3c68a9f1f..7e85128e12b 100644
--- a/resources/svg/h6.svg
+++ b/resources/svg/h6.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.32 12.87"><path fill="currentColor" d="M8.32 0c.37 0 .68.34.68.74v11.37c0 .42-.31.76-.68.76s-.7-.34-.7-.76v-5.1H1.38v5.1c0 .42-.31.76-.68.76s-.7-.34-.7-.76V.74C0 .34.31 0 .7 0s.68.34.68.74v4.83h6.24V.74c0-.4.31-.74.7-.74zm3.97 8.1c.31-.72.91-1.27 1.82-1.27 1.27 0 2.21 1.2 2.21 2.93 0 1.88-1.18 3.08-2.38 3.08-1.72 0-2.68-1.62-2.68-3.52 0-3.25 1.79-5.54 3.34-6.18.08-.03.17-.05.24-.05.17 0 .3.1.36.3.02.07.03.12.03.19 0 .23-.14.41-.33.49-1.17.57-2.31 1.9-2.62 4.02zm-.1 1.23c0 1.3.57 2.43 1.73 2.43.85 0 1.46-.89 1.46-1.91 0-1.1-.53-1.99-1.57-1.99-.9 0-1.45.8-1.62 1.47z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" viewBox="0 0 14 14"><defs><clipPath id="clippath"><path d="M0 0h14v14H0z" style="fill:none"/></clipPath><style>.cls-2{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round}</style></defs><g id="Layer_1-2" style="clip-path:url(#clippath)"><path d="M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75M9.5 11.42v-.22c0-.73.59-1.33 1.33-1.33h.88c.73 0 1.33.59 1.33 1.33v.22c0 .73-.59 1.33-1.33 1.33h-.88c-.73 0-1.33-.59-1.33-1.33Zm0 0V8.77c0-.73.59-1.33 1.33-1.33h.88c.58 0 1.07.37 1.25.88" class="cls-2"/></g></svg>
\ No newline at end of file

From 0d62ff7a2ac9b168d246bf767a57d6328803886a Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 13 Mar 2023 16:11:12 -0400
Subject: [PATCH 21/32] Add prop to disable Popover Clickaway behavior

---
 resources/js/components/Popover.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/Popover.vue b/resources/js/components/Popover.vue
index 75205771507..f740296b8f3 100644
--- a/resources/js/components/Popover.vue
+++ b/resources/js/components/Popover.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="popover-container" :class="{'popover-open': isOpen}" v-on-clickaway="close" @mouseleave="leave">
+    <div class="popover-container" :class="{'popover-open': isOpen}" v-on-clickaway="clickawayClose" @mouseleave="leave">
         <div @click="toggle" ref="trigger" aria-haspopup="true" :aria-expanded="isOpen" v-if="$scopedSlots.default">
             <slot name="trigger"></slot>
         </div>
@@ -24,6 +24,10 @@ export default {
             type: Boolean,
             default: false
         },
+        clickaway: {
+            type: Boolean,
+            default: true
+        },
         disabled: {
             type: Boolean,
             default: false
@@ -93,11 +97,17 @@ export default {
             this.escBinding = this.$keys.bind('esc', e => this.close())
             this.popper && this.popper.update();
         },
+        clickawayClose() {
+            if (this.clickaway) {
+                this.close();
+            }
+        },
         close() {
             this.isOpen = false;
             if (this.escBinding) {
                 this.escBinding.destroy();
             }
+            this.$emit('closed');
         },
         leave() {
             if (this.autoclose) {

From 5235735f71e1f706db7171a534eb4bc6b173d8d8 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 13 Mar 2023 16:12:40 -0400
Subject: [PATCH 22/32] Refactor Bard Link to Popover, improve UX, and remove
 Sticky Toolbars

Sticky toolbars were pretty problematic in lots of edge cases. I feel like it's better to just stick to full screening or using the floating toolbar for editing lots of text and not relying on the sticky toolbar.
---
 resources/css/components/fieldtypes/bard.css  | 26 +++-----
 resources/css/components/tabs.css             | 12 ++++
 .../fieldtypes/bard/LinkToolbar.vue           | 51 ++++++++--------
 .../fieldtypes/bard/LinkToolbarButton.vue     | 59 +++++++++++--------
 4 files changed, 80 insertions(+), 68 deletions(-)

diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 575df355af0..b8bc329ef2b 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -40,17 +40,12 @@
 }
 
 .bard-fixed-toolbar {
-    @apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between;
-    position: sticky;
-    padding: 4px 8px;
-    z-index: 5;
-    top: 0;
+    @apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between px-1 py-2 z-5 top-0;
+    /* position: sticky; */
+
 
     .bard-toolbar-button {
-        @apply text-gray-800 rounded px-1 flex text-center justify-center items-center text-base text-center;
-        height: 32px;
-        width: 32px;
-        margin: 0;
+        @apply text-gray-800 rounded px-1 flex text-center justify-center items-center text-base h-8 w-8 m-0;
         svg {
             @apply w-auto h-4;
         }
@@ -84,11 +79,7 @@
     @apply bg-black rounded-full shadow-lg px-4;
 
     button {
-        @apply text-gray-700 rounded px-1 flex items-center justify-center text-base text-center bg-transparent;
-        height: 32px;
-        width: 32px;
-        margin: 0 2px;
-        outline: none;
+        @apply text-gray-700 rounded px-1 flex items-center justify-center text-base text-center bg-transparent h-8 w-8 my-0 mx-0.5 outline-none;
         svg {
             @apply w-auto h-4;
         }
@@ -500,19 +491,20 @@
   ========================================================================== */
 
   .bard-link-toolbar {
-    @apply bg-white rounded absolute leading-none shadow mt-2;
+    /* @apply bg-white rounded absolute leading-none shadow mt-2;
     z-index: 100;
     width: 300px;
     top: 100%;
+    right: 0; */
 
-    &:before {
+    /* &:before {
         content: '';
         border: 6px solid transparent;
         border-bottom-color: white;
         position: absolute;
         bottom: 100%;
         left: 10px;
-    }
+    } */
 
     .input {
         @apply p-0 text-xs h-8 bg-transparent shadow-none border-none;
diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index eb1514da151..ceec3c61894 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -100,3 +100,15 @@
         @apply bg-blue-100 text-blue-900;
     }
 }
+
+.button-tab {
+    @apply text-gray-700 inline-block focus:outline-none px-2 py-1 mr-1;
+
+    &:hover {
+        @apply text-blue;
+    }
+
+    &.active {
+        @apply bg-blue-100 text-blue-800 rounded;
+    }
+}
diff --git a/resources/js/components/fieldtypes/bard/LinkToolbar.vue b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
index 757e69bdbbc..6a5f5b3e034 100644
--- a/resources/js/components/fieldtypes/bard/LinkToolbar.vue
+++ b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
@@ -1,33 +1,25 @@
 <template>
 
     <div class="bard-link-toolbar">
-
         <div>
-
             <!-- Link type select -->
             <div class="flex items-center px-4 py-2 border-b">
 
-                <label
-                    class="mr-3 flex items-center font-normal"
-                    v-for="type in visibleLinkTypes"
-                    :for="type.type"
-                    :key="type.type"
+                <button
+                    class="button-tab"
+                    v-for="visibleLinkType in visibleLinkTypes"
+                    :class="{active: visibleLinkType.type === linkType}"
+                    :for="visibleLinkType.type"
+                    :key="visibleLinkType.type"
+                    :id="visibleLinkType.type"
+                    @click="setLinkType(visibleLinkType.type)"
                 >
-                    <input
-                        class="mr-1 top-0"
-                        type="radio"
-                        name="link-type"
-                        :id="type.type"
-                        :checked="type.type === linkType"
-                        @click="setLinkType(type.type)"
-                    />
-                    {{ type.title }}
-                </label>
-
+                    {{ visibleLinkType.title }}
+                </button>
             </div>
 
             <div class="px-4 py-4 border-b">
-                <div class="h-8 mb-4 p-2 border rounded border-gray-500 flex items-center">
+                <div class="h-8 mb-4 p-2 border rounded border-gray-500 flex items-center hover:border-gray-600">
 
                     <!-- URL input -->
                     <input
@@ -37,12 +29,13 @@
                         ref="urlInput"
                         class="input h-auto text-sm"
                         placeholder="URL"
+                        @keydown.enter.prevent="commit"
                     />
 
                     <!-- Data input -->
                     <div
                         v-else
-                        class="w-full flex justify-between"
+                        class="w-full flex items-center justify-between cursor-pointer"
                         @click="openSelector"
                     >
 
@@ -58,11 +51,13 @@
                         </div>
 
                         <button
+                        class="flex items-center"
                             v-tooltip="`${__('Browse')}...`"
                             :aria-label="`${__('Browse')}...`"
                             @click="openSelector"
                         >
-                            <svg-icon :name="linkType === 'asset' ? 'folder-image' : 'folder-generic'" class="h-4 w-4" />
+                            <svg-icon v-show="linkType === 'asset'" name="folder-image" class="h-4 w-4" />
+                            <svg-icon v-show="linkType !== 'asset'" name="folder-generic" class="h-4 w-4" />
                         </button>
 
                     </div>
@@ -70,7 +65,7 @@
                 </div>
 
                 <!-- Title attribute -->
-                <div class="h-8 mb-4 p-2 border rounded border-gray-500 flex items-center" >
+                <div class="h-8 mb-4 p-2 border rounded border-gray-500 flex items-center hover:border-gray-600" >
                     <input
                         type="text"
                         ref="input"
@@ -80,15 +75,17 @@
                     />
                 </div>
 
-                <label for="target-blank" class="flex items-center font-normal">
+                <label for="target-blank" class="flex items-center font-normal cursor-pointer text-gray-800 hover:text-black">
                     <input class="checkbox mr-2" type="checkbox" v-model="targetBlank" id="target-blank">
                     {{ __('Open in new window') }}
                 </label>
             </div>
 
-            <div class="flex items-center justify-end space-x-1 font-normal px-4 py-3">
+            <footer class="bg-gray-100 rounded-b-md flex items-center justify-end space-x-3 font-normal p-2">
+                <button @click="$emit('canceled')" class="text-xs text-gray-600 hover:text-gray-800">
+                    {{ __('Cancel') }}
+                </button>
                 <button
-                    v-tooltip="__('Remove Link')"
                     :aria-label="__('Remove Link')"
                     @click="remove"
                     class="btn btn-sm"
@@ -102,9 +99,9 @@
                     @click="commit"
                     class="btn btn-sm"
                 >
-                    {{ __('OK') }}
+                    {{ __('Save') }}
                 </button>
-            </div>
+            </footer>
 
         </div>
 
diff --git a/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue b/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue
index 4bba94caed2..ff02bc60926 100644
--- a/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue
+++ b/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue
@@ -1,27 +1,29 @@
 <template>
-
-    <div class="inline-block relative">
-
-        <button
-            class="bard-toolbar-button"
-            :class="{ active }"
-            v-tooltip="button.text"
-            :aria-label="button.text"
-            @click="toggleLinkToolbar"
-        >
-            <svg-icon :name="button.svg" v-if="button.svg"></svg-icon>
-        </button>
-
-        <link-toolbar
-            v-if="showingToolbar"
-            :link-attrs="linkAttrs"
-            :config="config"
-            :bard="bard"
-            @updated="setLink"
-            @deselected="showingToolbar = false"
-        />
-    </div>
-
+    <popover ref="popover" placement="bottom-end" @closed="popoverClosed" :clickaway="false">
+        <template #trigger>
+            <button
+                class="bard-toolbar-button"
+                :class="{ active }"
+                v-tooltip="button.text"
+                :aria-label="button.text"
+                @click="toggleLinkToolbar"
+            >
+                <svg-icon :name="button.svg" v-if="button.svg"></svg-icon>
+            </button>
+        </template>
+        <template #default>
+            <link-toolbar
+                class="w-80"
+                ref="toolbar"
+                v-if="showingToolbar"
+                :link-attrs="linkAttrs"
+                :config="config"
+                :bard="bard"
+                @updated="setLink"
+                @canceled="close"
+            />
+        </template>
+    </popover>
 </template>
 
 <script>
@@ -54,10 +56,19 @@ export default {
             }
         },
 
+        close() {
+            this.showingToolbar = false;
+            this.$refs.popover.close();
+        },
+
+        popoverClosed() {
+            this.showingToolbar = false;
+        },
+
         setLink(attributes) {
             this.editor.commands.setLink(attributes);
             this.linkAttrs = null;
-            this.showingToolbar = false;
+            this.close();
             this.editor.view.dom.focus();
         }
 

From 8f766697c017e428daef99db148cbf9afd7fda1d Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 13 Mar 2023 16:13:06 -0400
Subject: [PATCH 23/32] Set new h1-h6 icons to currentColor

---
 resources/svg/h1.svg | 2 +-
 resources/svg/h2.svg | 2 +-
 resources/svg/h3.svg | 2 +-
 resources/svg/h4.svg | 2 +-
 resources/svg/h5.svg | 2 +-
 resources/svg/h6.svg | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/svg/h1.svg b/resources/svg/h1.svg
index ff5f66acc29..31d94701518 100644
--- a/resources/svg/h1.svg
+++ b/resources/svg/h1.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" viewBox="0 0 14 14"><defs><clipPath id="clippath"><path d="M0 0h14v14H0z" style="fill:none"/></clipPath><style>.cls-2{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round}</style></defs><g id="Layer_1-2" style="clip-path:url(#clippath)"><path d="M11.39 7.65v5.1M9.7 8.72h.42c.7 0 1.27-.57 1.27-1.27M13.09 12.75h-3.4M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75" class="cls-2"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><clipPath id="a"><path d="M0 0h14v14H0z" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M11.39 7.65v5.1M9.7 8.72h.42c.7 0 1.27-.57 1.27-1.27m1.7 5.3h-3.4m-8.69 0V1.25m5.75 0v11.5M1 6.52h5.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
diff --git a/resources/svg/h2.svg b/resources/svg/h2.svg
index 95634bf9d7b..74daade3ce9 100644
--- a/resources/svg/h2.svg
+++ b/resources/svg/h2.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" viewBox="0 0 14 14"><defs><clipPath id="clippath"><path d="M0 0h14v14H0z" style="fill:none"/></clipPath><style>.cls-2{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round}</style></defs><g id="Layer_1-2" style="clip-path:url(#clippath)"><path d="M12.93 12.75H9.61V12c0-.53.29-1 .74-1.22l1.84-.86c.44-.21.73-.67.73-1.18 0-.71-.54-1.29-1.21-1.29h-.86c-.54 0-1 .37-1.17.88M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75" class="cls-2"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><clipPath id="a"><path d="M0 0h14v14H0z" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M12.93 12.75H9.61V12c0-.53.29-1 .74-1.22l1.84-.86c.44-.21.73-.67.73-1.18 0-.71-.54-1.29-1.21-1.29h-.86c-.54 0-1 .37-1.17.88M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
diff --git a/resources/svg/h3.svg b/resources/svg/h3.svg
index b45de42b724..fffbe155ffd 100644
--- a/resources/svg/h3.svg
+++ b/resources/svg/h3.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" viewBox="0 0 14 14"><defs><clipPath id="clippath"><path d="M0 0h14v14H0z" style="fill:none"/></clipPath><style>.cls-2{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round}</style></defs><g id="Layer_1-2" style="clip-path:url(#clippath)"><path d="M9.54 11.87c.18.52.67.88 1.25.88h.88c.73 0 1.33-.59 1.33-1.33v-.22c0-.73-.59-1.33-1.33-1.33h-.44.33c.67 0 1.22-.54 1.22-1.22s-.54-1.22-1.22-1.22h-.66c-.56 0-1.03.37-1.17.88M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75" class="cls-2"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><clipPath id="a"><path d="M0 0h14v14H0z" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M9.54 11.87c.18.52.67.88 1.25.88h.88c.73 0 1.33-.59 1.33-1.33v-.22c0-.73-.59-1.33-1.33-1.33h-.44.33c.67 0 1.22-.54 1.22-1.22s-.54-1.22-1.22-1.22h-.66c-.56 0-1.03.37-1.17.88M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
diff --git a/resources/svg/h4.svg b/resources/svg/h4.svg
index 5dd12d75c01..c540cb00915 100644
--- a/resources/svg/h4.svg
+++ b/resources/svg/h4.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" viewBox="0 0 14 14"><defs><clipPath id="clippath"><path d="M0 0h14v14H0z" style="fill:none"/></clipPath><style>.cls-2{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round}</style></defs><g id="Layer_1-2" style="clip-path:url(#clippath)"><path d="M12.36 11.42H9.15c-.18 0-.32-.14-.32-.32 0-.08.03-.15.08-.21l2.92-3.34c.06-.07.14-.1.23-.1.17 0 .3.14.3.3v3.67Zm0 0h.88m-.88 0v1.33M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75" class="cls-2"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><clipPath id="a"><path d="M0 0h14v14H0z" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M12.36 11.42H9.15c-.18 0-.32-.14-.32-.32 0-.08.03-.15.08-.21l2.92-3.34c.06-.07.14-.1.23-.1.17 0 .3.14.3.3v3.67zm0 0h.88m-.88 0v1.33M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
diff --git a/resources/svg/h5.svg b/resources/svg/h5.svg
index b0f6a369a9a..13943ffe8d9 100644
--- a/resources/svg/h5.svg
+++ b/resources/svg/h5.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" viewBox="0 0 14 14"><defs><clipPath id="clippath"><path d="M0 0h14v14H0z" style="fill:none"/></clipPath><style>.cls-2{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round}</style></defs><g id="Layer_1-2" style="clip-path:url(#clippath)"><path d="M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75M12.82 7.44H9.95l-.44 2.65.32-.16c.37-.18.77-.28 1.19-.28h.7c.73 0 1.33.59 1.33 1.33v.44c0 .73-.59 1.33-1.33 1.33h-.88c-.58 0-1.07-.37-1.25-.88" class="cls-2"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><clipPath id="a"><path d="M0 0h14v14H0z" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75m6.07.92H9.95l-.44 2.65.32-.16c.37-.18.77-.28 1.19-.28h.7c.73 0 1.33.59 1.33 1.33v.44c0 .73-.59 1.33-1.33 1.33h-.88c-.58 0-1.07-.37-1.25-.88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
diff --git a/resources/svg/h6.svg b/resources/svg/h6.svg
index 7e85128e12b..135e0238703 100644
--- a/resources/svg/h6.svg
+++ b/resources/svg/h6.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" viewBox="0 0 14 14"><defs><clipPath id="clippath"><path d="M0 0h14v14H0z" style="fill:none"/></clipPath><style>.cls-2{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round}</style></defs><g id="Layer_1-2" style="clip-path:url(#clippath)"><path d="M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75M9.5 11.42v-.22c0-.73.59-1.33 1.33-1.33h.88c.73 0 1.33.59 1.33 1.33v.22c0 .73-.59 1.33-1.33 1.33h-.88c-.73 0-1.33-.59-1.33-1.33Zm0 0V8.77c0-.73.59-1.33 1.33-1.33h.88c.58 0 1.07.37 1.25.88" class="cls-2"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><clipPath id="a"><path d="M0 0h14v14H0z" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75m2.75 4.9v-.22c0-.73.59-1.33 1.33-1.33h.88c.73 0 1.33.59 1.33 1.33v.22c0 .73-.59 1.33-1.33 1.33h-.88c-.73 0-1.33-.59-1.33-1.33zm0 0V8.77c0-.73.59-1.33 1.33-1.33h.88c.58 0 1.07.37 1.25.88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

From 966341adcd7aa03b4d5f633e8a239627afba9a63 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 13 Mar 2023 16:17:19 -0400
Subject: [PATCH 24/32] reindent to remove unnecessary outdenting of entire
 file

---
 .../js/components/entries/PublishForm.vue     | 854 +++++++++---------
 1 file changed, 427 insertions(+), 427 deletions(-)

diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index 37951f6f44f..8fc96fb7630 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -288,506 +288,506 @@ import HasHiddenFields from '../publish/HasHiddenFields';
 
 export default {
 
-mixins: [
-    HasPreferences,
-    HasHiddenFields,
-],
-
-components: {
-    PublishActions,
-    SaveButtonOptions,
-    RevisionHistory,
-},
-
-props: {
-    publishContainer: String,
-    initialReference: String,
-    initialFieldset: Object,
-    initialValues: Object,
-    initialMeta: Object,
-    initialTitle: String,
-    initialLocalizations: Array,
-    initialLocalizedFields: Array,
-    originBehavior: String,
-    initialHasOrigin: Boolean,
-    initialOriginValues: Object,
-    initialOriginMeta: Object,
-    initialSite: String,
-    initialIsWorkingCopy: Boolean,
-    collectionHandle: String,
-    breadcrumbs: Array,
-    initialActions: Object,
-    method: String,
-    isCreating: Boolean,
-    isInline: Boolean,
-    initialReadOnly: Boolean,
-    initialIsRoot: Boolean,
-    initialPermalink: String,
-    revisionsEnabled: Boolean,
-    preloadedAssets: Array,
-    canEditBlueprint: Boolean,
-    canManagePublishState: Boolean,
-    createAnotherUrl: String,
-    listingUrl: String,
-    collectionHasRoutes: Boolean,
-    previewTargets: Array,
-    autosaveInterval: Number,
-},
-
-data() {
-    return {
-        actions: this.initialActions,
-        saving: false,
-        localizing: false,
-        trackDirtyState: true,
-        fieldset: this.initialFieldset,
-        title: this.initialTitle,
-        values: _.clone(this.initialValues),
-        meta: _.clone(this.initialMeta),
-        localizations: _.clone(this.initialLocalizations),
-        localizedFields: this.initialLocalizedFields,
-        hasOrigin: this.initialHasOrigin,
-        originValues: this.initialOriginValues || {},
-        originMeta: this.initialOriginMeta || {},
-        site: this.initialSite,
-        selectingOrigin: false,
-        selectedOrigin: null,
-        isWorkingCopy: this.initialIsWorkingCopy,
-        error: null,
-        errors: {},
-        isPreviewing: false,
-        sectionsVisible: true,
-        state: 'new',
-        revisionMessage: null,
-        showRevisionHistory: false,
-        preferencesPrefix: `collections.${this.collectionHandle}`,
-
-        // Whether it was published the last time it was saved.
-        // Successful publish actions (if using revisions) or just saving (if not) will update this.
-        // The current published value is inside the "values" object, and also accessible as a computed.
-        initialPublished: this.initialValues.published,
-
-        confirmingPublish: false,
-        readOnly: this.initialReadOnly,
-        isRoot: this.initialIsRoot,
-        permalink: this.initialPermalink,
-
-        saveKeyBinding: null,
-        quickSaveKeyBinding: null,
-        quickSave: false,
-        isAutosave: false,
-    }
-},
-
-computed: {
-
-    hasErrors() {
-        return this.error || Object.keys(this.errors).length;
+    mixins: [
+        HasPreferences,
+        HasHiddenFields,
+    ],
+
+    components: {
+        PublishActions,
+        SaveButtonOptions,
+        RevisionHistory,
+    },
+
+    props: {
+        publishContainer: String,
+        initialReference: String,
+        initialFieldset: Object,
+        initialValues: Object,
+        initialMeta: Object,
+        initialTitle: String,
+        initialLocalizations: Array,
+        initialLocalizedFields: Array,
+        originBehavior: String,
+        initialHasOrigin: Boolean,
+        initialOriginValues: Object,
+        initialOriginMeta: Object,
+        initialSite: String,
+        initialIsWorkingCopy: Boolean,
+        collectionHandle: String,
+        breadcrumbs: Array,
+        initialActions: Object,
+        method: String,
+        isCreating: Boolean,
+        isInline: Boolean,
+        initialReadOnly: Boolean,
+        initialIsRoot: Boolean,
+        initialPermalink: String,
+        revisionsEnabled: Boolean,
+        preloadedAssets: Array,
+        canEditBlueprint: Boolean,
+        canManagePublishState: Boolean,
+        createAnotherUrl: String,
+        listingUrl: String,
+        collectionHasRoutes: Boolean,
+        previewTargets: Array,
+        autosaveInterval: Number,
+    },
+
+    data() {
+        return {
+            actions: this.initialActions,
+            saving: false,
+            localizing: false,
+            trackDirtyState: true,
+            fieldset: this.initialFieldset,
+            title: this.initialTitle,
+            values: _.clone(this.initialValues),
+            meta: _.clone(this.initialMeta),
+            localizations: _.clone(this.initialLocalizations),
+            localizedFields: this.initialLocalizedFields,
+            hasOrigin: this.initialHasOrigin,
+            originValues: this.initialOriginValues || {},
+            originMeta: this.initialOriginMeta || {},
+            site: this.initialSite,
+            selectingOrigin: false,
+            selectedOrigin: null,
+            isWorkingCopy: this.initialIsWorkingCopy,
+            error: null,
+            errors: {},
+            isPreviewing: false,
+            sectionsVisible: true,
+            state: 'new',
+            revisionMessage: null,
+            showRevisionHistory: false,
+            preferencesPrefix: `collections.${this.collectionHandle}`,
+
+            // Whether it was published the last time it was saved.
+            // Successful publish actions (if using revisions) or just saving (if not) will update this.
+            // The current published value is inside the "values" object, and also accessible as a computed.
+            initialPublished: this.initialValues.published,
+
+            confirmingPublish: false,
+            readOnly: this.initialReadOnly,
+            isRoot: this.initialIsRoot,
+            permalink: this.initialPermalink,
+
+            saveKeyBinding: null,
+            quickSaveKeyBinding: null,
+            quickSave: false,
+            isAutosave: false,
+        }
     },
 
-    somethingIsLoading() {
-        return ! this.$progress.isComplete();
-    },
+    computed: {
 
-    canSave() {
-        return !this.readOnly && !this.somethingIsLoading;
-    },
+        hasErrors() {
+            return this.error || Object.keys(this.errors).length;
+        },
 
-    canPublish() {
-        if (!this.revisionsEnabled) return false;
+        somethingIsLoading() {
+            return ! this.$progress.isComplete();
+        },
 
-        if (this.readOnly || this.isCreating || this.somethingIsLoading || this.isDirty) return false;
+        canSave() {
+            return !this.readOnly && !this.somethingIsLoading;
+        },
 
-        return true;
-    },
+        canPublish() {
+            if (!this.revisionsEnabled) return false;
 
-    published() {
-        return this.values.published;
-    },
+            if (this.readOnly || this.isCreating || this.somethingIsLoading || this.isDirty) return false;
 
-    livePreviewUrl() {
-        return _.findWhere(this.localizations, { active: true }).livePreviewUrl;
-    },
+            return true;
+        },
 
-    isBase() {
-        return this.publishContainer === 'base';
-    },
+        published() {
+            return this.values.published;
+        },
 
-    isDirty() {
-        return this.$dirty.has(this.publishContainer);
-    },
+        livePreviewUrl() {
+            return _.findWhere(this.localizations, { active: true }).livePreviewUrl;
+        },
 
-    activeLocalization() {
-        return _.findWhere(this.localizations, { active: true });
-    },
+        isBase() {
+            return this.publishContainer === 'base';
+        },
 
-    saveText() {
-        switch(true) {
-            case this.revisionsEnabled:
-                return __('Save Changes');
-            case this.isUnpublishing:
-                return __('Save & Unpublish');
-            case this.isDraft:
-                return __('Save Draft');
-            default:
-                return __('Save & Publish');
-        }
-    },
-
-    isUnpublishing() {
-        return this.initialPublished && ! this.published && ! this.isCreating;
-    },
-
-    isDraft() {
-        return ! this.published;
-    },
+        isDirty() {
+            return this.$dirty.has(this.publishContainer);
+        },
 
-    saveButtonClass() {
-        return {
-            'btn': this.revisionsEnabled,
-            'btn-primary': this.isCreating || ! this.revisionsEnabled,
-        };
-    },
-
-    afterSaveOption() {
-        return this.getPreference('after_save');
-    },
+        activeLocalization() {
+            return _.findWhere(this.localizations, { active: true });
+        },
 
-    originOptions() {
-        return this.localizations
-            .filter(localization => localization.exists)
-            .map(localization => ({
-                value: localization.handle,
-                label: localization.name,
-            }));
-    },
+        saveText() {
+            switch(true) {
+                case this.revisionsEnabled:
+                    return __('Save Changes');
+                case this.isUnpublishing:
+                    return __('Save & Unpublish');
+                case this.isDraft:
+                    return __('Save Draft');
+                default:
+                    return __('Save & Publish');
+            }
+        },
 
-},
+        isUnpublishing() {
+            return this.initialPublished && ! this.published && ! this.isCreating;
+        },
 
-watch: {
+        isDraft() {
+            return ! this.published;
+        },
 
-    saving(saving) {
-        this.$progress.loading(`${this.publishContainer}-entry-publish-form`, saving);
-    }
+        saveButtonClass() {
+            return {
+                'btn': this.revisionsEnabled,
+                'btn-primary': this.isCreating || ! this.revisionsEnabled,
+            };
+        },
 
-},
+        afterSaveOption() {
+            return this.getPreference('after_save');
+        },
 
-methods: {
+        originOptions() {
+            return this.localizations
+                .filter(localization => localization.exists)
+                .map(localization => ({
+                    value: localization.handle,
+                    label: localization.name,
+                }));
+        },
 
-    clearErrors() {
-        this.error = null;
-        this.errors = {};
     },
 
-    save() {
-        if (! this.canSave) {
-            this.quickSave = false;
-            return;
-        }
+    watch: {
 
-        this.saving = true;
-        this.clearErrors();
+        saving(saving) {
+            this.$progress.loading(`${this.publishContainer}-entry-publish-form`, saving);
+        }
 
-        setTimeout(() => this.runBeforeSaveHook(), 151); // 150ms is the debounce time for fieldtype updates
     },
 
-    runBeforeSaveHook() {
-        Statamic.$hooks.run('entry.saving', {
-            collection: this.collectionHandle,
-            values: this.values,
-            container: this.$refs.container,
-            storeName: this.publishContainer,
-        })
-        .then(this.performSaveRequest)
-        .catch(error => {
-            this.saving = false;
-            this.$toast.error(error || 'Something went wrong');
-        });
-    },
+    methods: {
 
-    performSaveRequest() {
-        // Once the hook has completed, we need to make the actual request.
-        // We build the payload here because the before hook may have modified values.
-        const payload = { ...this.visibleValues, ...{
-            _blueprint: this.fieldset.handle,
-            _localized: this.localizedFields,
-        }};
+        clearErrors() {
+            this.error = null;
+            this.errors = {};
+        },
 
-        this.$axios[this.method](this.actions.save, payload).then(response => {
-            this.saving = false;
-            this.title = response.data.data.title;
-            this.isWorkingCopy = true;
-            if (this.isBase) {
-                document.title = this.title + ' ‹ ' + this.breadcrumbs[1].text + ' ‹ ' + this.breadcrumbs[0].text + ' ‹ Statamic';
+        save() {
+            if (! this.canSave) {
+                this.quickSave = false;
+                return;
             }
-            if (!this.revisionsEnabled) this.permalink = response.data.data.permalink;
-            if (!this.isCreating && !this.isAutosave) this.$toast.success(__('Saved'));
-            this.$refs.container.saved();
-            this.runAfterSaveHook(response);
-        }).catch(error => this.handleAxiosError(error));
-    },
 
-    runAfterSaveHook(response) {
-        // Once the save request has completed, we want to run the "after" hook.
-        // Devs can do what they need and we'll wait for them, but they can't cancel anything.
-        Statamic.$hooks
-            .run('entry.saved', {
+            this.saving = true;
+            this.clearErrors();
+
+            setTimeout(() => this.runBeforeSaveHook(), 151); // 150ms is the debounce time for fieldtype updates
+        },
+
+        runBeforeSaveHook() {
+            Statamic.$hooks.run('entry.saving', {
                 collection: this.collectionHandle,
-                reference: this.initialReference,
-                response
+                values: this.values,
+                container: this.$refs.container,
+                storeName: this.publishContainer,
             })
-            .then(() => {
-                // If revisions are enabled, just emit event.
-                if (this.revisionsEnabled) {
-                    this.$nextTick(() => this.$emit('saved', response));
-                    return;
+            .then(this.performSaveRequest)
+            .catch(error => {
+                this.saving = false;
+                this.$toast.error(error || 'Something went wrong');
+            });
+        },
+
+        performSaveRequest() {
+            // Once the hook has completed, we need to make the actual request.
+            // We build the payload here because the before hook may have modified values.
+            const payload = { ...this.visibleValues, ...{
+                _blueprint: this.fieldset.handle,
+                _localized: this.localizedFields,
+            }};
+
+            this.$axios[this.method](this.actions.save, payload).then(response => {
+                this.saving = false;
+                this.title = response.data.data.title;
+                this.isWorkingCopy = true;
+                if (this.isBase) {
+                    document.title = this.title + ' ‹ ' + this.breadcrumbs[1].text + ' ‹ ' + this.breadcrumbs[0].text + ' ‹ Statamic';
                 }
+                if (!this.revisionsEnabled) this.permalink = response.data.data.permalink;
+                if (!this.isCreating && !this.isAutosave) this.$toast.success(__('Saved'));
+                this.$refs.container.saved();
+                this.runAfterSaveHook(response);
+            }).catch(error => this.handleAxiosError(error));
+        },
+
+        runAfterSaveHook(response) {
+            // Once the save request has completed, we want to run the "after" hook.
+            // Devs can do what they need and we'll wait for them, but they can't cancel anything.
+            Statamic.$hooks
+                .run('entry.saved', {
+                    collection: this.collectionHandle,
+                    reference: this.initialReference,
+                    response
+                })
+                .then(() => {
+                    // If revisions are enabled, just emit event.
+                    if (this.revisionsEnabled) {
+                        this.$nextTick(() => this.$emit('saved', response));
+                        return;
+                    }
+
+                    let nextAction = this.quickSave || this.isAutosave ? 'continue_editing' : this.afterSaveOption;
+
+                    // If the user has opted to create another entry, redirect them to create page.
+                    if (!this.isInline && nextAction === 'create_another') {
+                        window.location = this.createAnotherUrl;
+                    }
+
+                    // If the user has opted to go to listing (default/null option), redirect them there.
+                    else if (!this.isInline && nextAction === null) {
+                        window.location = this.listingUrl;
+                    }
+
+                    // Otherwise, leave them on the edit form and emit an event. We need to wait until after
+                    // the hooks are resolved because if this form is being shown in a stack, we only
+                    // want to close it once everything's done.
+                    else {
+                        this.values = this.resetValuesFromResponse(response.data.data.values);
+                        this.initialPublished = response.data.data.published;
+                        this.activeLocalization.published = response.data.data.published;
+                        this.activeLocalization.status = response.data.data.status;
+                        this.$nextTick(() => this.$emit('saved', response));
+                    }
+
+                    this.quickSave = false;
+                    this.isAutosave = false;
+                }).catch(e => console.error(e));
+        },
+
+        confirmPublish() {
+            if (this.canPublish) {
+                this.confirmingPublish = true;
+            }
+        },
 
-                let nextAction = this.quickSave || this.isAutosave ? 'continue_editing' : this.afterSaveOption;
+        handleAxiosError(e) {
+            this.saving = false;
+            if (e.response && e.response.status === 422) {
+                const { message, errors } = e.response.data;
+                this.error = message;
+                this.errors = errors;
+                this.$toast.error(message);
+            } else if (e.response) {
+                this.$toast.error(e.response.data.message);
+            } else {
+                this.$toast.error(e || 'Something went wrong');
+            }
+        },
 
-                // If the user has opted to create another entry, redirect them to create page.
-                if (!this.isInline && nextAction === 'create_another') {
-                    window.location = this.createAnotherUrl;
-                }
+        localizationSelected(localization) {
+            if (localization.active) return;
 
-                // If the user has opted to go to listing (default/null option), redirect them there.
-                else if (!this.isInline && nextAction === null) {
-                    window.location = this.listingUrl;
+            if (this.isDirty) {
+                if (! confirm(__('Are you sure? Unsaved changes will be lost.'))) {
+                    return;
                 }
+            }
 
-                // Otherwise, leave them on the edit form and emit an event. We need to wait until after
-                // the hooks are resolved because if this form is being shown in a stack, we only
-                // want to close it once everything's done.
-                else {
-                    this.values = this.resetValuesFromResponse(response.data.data.values);
-                    this.initialPublished = response.data.data.published;
-                    this.activeLocalization.published = response.data.data.published;
-                    this.activeLocalization.status = response.data.data.status;
-                    this.$nextTick(() => this.$emit('saved', response));
-                }
+            this.$dirty.remove(this.publishContainer);
 
-                this.quickSave = false;
-                this.isAutosave = false;
-            }).catch(e => console.error(e));
-    },
+            this.localizing = localization;
 
-    confirmPublish() {
-        if (this.canPublish) {
-            this.confirmingPublish = true;
-        }
-    },
+            if (localization.exists) {
+                this.editLocalization(localization);
+            } else if (this.localizations.length > 2 && this.originBehavior === 'select') {
+                this.selectingOrigin = true;
+            } else {
+                this.createLocalization(localization);
+            }
 
-    handleAxiosError(e) {
-        this.saving = false;
-        if (e.response && e.response.status === 422) {
-            const { message, errors } = e.response.data;
-            this.error = message;
-            this.errors = errors;
-            this.$toast.error(message);
-        } else if (e.response) {
-            this.$toast.error(e.response.data.message);
-        } else {
-            this.$toast.error(e || 'Something went wrong');
-        }
-    },
+            if (this.isBase) {
+                window.history.replaceState({}, '', localization.url);
+            }
+        },
+
+        editLocalization(localization) {
+            return this.$axios.get(localization.url).then(response => {
+                clearTimeout(this.trackDirtyStateTimeout);
+                this.trackDirtyState = false;
+
+                const data = response.data;
+                this.values = data.values;
+                this.originValues = data.originValues;
+                this.originMeta = data.originMeta;
+                this.meta = data.meta;
+                this.localizations = data.localizations;
+                this.localizedFields = data.localizedFields;
+                this.hasOrigin = data.hasOrigin;
+                this.publishUrl = data.actions[this.action];
+                this.collection = data.collection;
+                this.title = data.editing ? data.values.title : this.title;
+                this.actions = data.actions;
+                this.fieldset = data.blueprint;
+                this.isRoot = data.isRoot;
+                this.permalink = data.permalink;
+                this.site = localization.handle;
+                this.localizing = false;
+
+                this.trackDirtyStateTimeout = setTimeout(() => this.trackDirtyState = true, 300); // after any fieldtypes do a debounced update
+            })
+        },
 
-    localizationSelected(localization) {
-        if (localization.active) return;
+        createLocalization(localization) {
+            this.selectingOrigin = false;
 
-        if (this.isDirty) {
-            if (! confirm(__('Are you sure? Unsaved changes will be lost.'))) {
+            if (this.isCreating) {
+                this.$nextTick(() => window.location = localization.url);
                 return;
             }
-        }
 
-        this.$dirty.remove(this.publishContainer);
-
-        this.localizing = localization;
-
-        if (localization.exists) {
-            this.editLocalization(localization);
-        } else if (this.localizations.length > 2 && this.originBehavior === 'select') {
-            this.selectingOrigin = true;
-        } else {
-            this.createLocalization(localization);
-        }
+            const originLocalization = this.localizations.find(e => e.handle === this.selectedOrigin);
+            const url = originLocalization.url + '/localize';
+            this.$axios.post(url, { site: localization.handle }).then(response => {
+                this.editLocalization(response.data).then(() => {
+                    this.$events.$emit('localization.created', { store: this.publishContainer });
 
-        if (this.isBase) {
-            window.history.replaceState({}, '', localization.url);
-        }
-    },
+                    if (this.originValues.published) {
+                        this.setFieldValue('published', true);
+                    }
+                });
+            });
+        },
 
-    editLocalization(localization) {
-        return this.$axios.get(localization.url).then(response => {
-            clearTimeout(this.trackDirtyStateTimeout);
-            this.trackDirtyState = false;
-
-            const data = response.data;
-            this.values = data.values;
-            this.originValues = data.originValues;
-            this.originMeta = data.originMeta;
-            this.meta = data.meta;
-            this.localizations = data.localizations;
-            this.localizedFields = data.localizedFields;
-            this.hasOrigin = data.hasOrigin;
-            this.publishUrl = data.actions[this.action];
-            this.collection = data.collection;
-            this.title = data.editing ? data.values.title : this.title;
-            this.actions = data.actions;
-            this.fieldset = data.blueprint;
-            this.isRoot = data.isRoot;
-            this.permalink = data.permalink;
-            this.site = localization.handle;
+        cancelLocalization() {
+            this.selectingOrigin = false;
             this.localizing = false;
+        },
+
+        localizationStatusText(localization) {
+            if (! localization.exists) return 'This entry does not exist for this site.';
+
+            return localization.published
+                ? 'This entry exists in this site, and is published.'
+                : 'This entry exists in this site, but is not published.';
+        },
+
+        openLivePreview() {
+            this.sectionsVisible = false;
+            this.$wait(200)
+                .then(() => {
+                    this.isPreviewing = true;
+                    return this.$wait(300);
+                })
+                .then(() => this.sectionsVisible = true);
+        },
+
+        closeLivePreview() {
+            this.isPreviewing = false;
+            this.sectionsVisible = true;
+        },
+
+        publishActionCompleted({ published, isWorkingCopy, response }) {
+            this.saving = false;
+            if (published !== undefined) {
+                this.$refs.container.setFieldValue('published', published);
+                this.initialPublished = published;
+            }
+            this.$refs.container.saved();
+            this.isWorkingCopy = isWorkingCopy;
+            this.confirmingPublish = false;
+            this.title = response.data.data.title;
+            this.activeLocalization.title = response.data.data.title;
+            this.activeLocalization.published = response.data.data.published;
+            this.activeLocalization.status = response.data.data.status;
+            this.permalink = response.data.data.permalink
+            this.$nextTick(() => this.$emit('saved', response));
+        },
 
-            this.trackDirtyStateTimeout = setTimeout(() => this.trackDirtyState = true, 300); // after any fieldtypes do a debounced update
-        })
-    },
-
-    createLocalization(localization) {
-        this.selectingOrigin = false;
+        setFieldValue(handle, value) {
+            if (this.hasOrigin) this.desyncField(handle);
 
-        if (this.isCreating) {
-            this.$nextTick(() => window.location = localization.url);
-            return;
-        }
+            this.$refs.container.setFieldValue(handle, value);
+        },
 
-        const originLocalization = this.localizations.find(e => e.handle === this.selectedOrigin);
-        const url = originLocalization.url + '/localize';
-        this.$axios.post(url, { site: localization.handle }).then(response => {
-            this.editLocalization(response.data).then(() => {
-                this.$events.$emit('localization.created', { store: this.publishContainer });
+        syncField(handle) {
+            if (! confirm('Are you sure? This field\'s value will be replaced by the value in the original entry.'))
+                return;
 
-                if (this.originValues.published) {
-                    this.setFieldValue('published', true);
-                }
-            });
-        });
-    },
+            this.localizedFields = this.localizedFields.filter(field => field !== handle);
+            this.$refs.container.setFieldValue(handle, this.originValues[handle]);
 
-    cancelLocalization() {
-        this.selectingOrigin = false;
-        this.localizing = false;
-    },
+            // Update the meta for this field. For instance, a relationship field would have its data preloaded into it.
+            // If you sync the field, the preloaded data would be outdated and an ID would show instead of the titles.
+            this.meta[handle] = this.originMeta[handle];
+        },
 
-    localizationStatusText(localization) {
-        if (! localization.exists) return 'This entry does not exist for this site.';
+        desyncField(handle) {
+            if (!this.localizedFields.includes(handle))
+                this.localizedFields.push(handle);
 
-        return localization.published
-            ? 'This entry exists in this site, and is published.'
-            : 'This entry exists in this site, but is not published.';
-    },
+            this.$refs.container.dirty();
+        },
 
-    openLivePreview() {
-        this.sectionsVisible = false;
-        this.$wait(200)
-            .then(() => {
-                this.isPreviewing = true;
-                return this.$wait(300);
-            })
-            .then(() => this.sectionsVisible = true);
-    },
+        setAutosaveInterval() {
+            const interval = setInterval(() => {
+                if (!this.isDirty) return;
 
-    closeLivePreview() {
-        this.isPreviewing = false;
-        this.sectionsVisible = true;
-    },
+                this.isAutosave = true;
+                this.save();
+            }, this.autosaveInterval);
 
-    publishActionCompleted({ published, isWorkingCopy, response }) {
-        this.saving = false;
-        if (published !== undefined) {
-            this.$refs.container.setFieldValue('published', published);
-            this.initialPublished = published;
+            this.$store.commit(`publish/${this.publishContainer}/setAutosaveInterval`, interval);
         }
-        this.$refs.container.saved();
-        this.isWorkingCopy = isWorkingCopy;
-        this.confirmingPublish = false;
-        this.title = response.data.data.title;
-        this.activeLocalization.title = response.data.data.title;
-        this.activeLocalization.published = response.data.data.published;
-        this.activeLocalization.status = response.data.data.status;
-        this.permalink = response.data.data.permalink
-        this.$nextTick(() => this.$emit('saved', response));
     },
 
-    setFieldValue(handle, value) {
-        if (this.hasOrigin) this.desyncField(handle);
-
-        this.$refs.container.setFieldValue(handle, value);
-    },
+    mounted() {
+        this.saveKeyBinding = this.$keys.bindGlobal(['mod+return'], e => {
+            e.preventDefault();
+            if (this.confirmingPublish) return;
+            this.save();
+        });
 
-    syncField(handle) {
-        if (! confirm('Are you sure? This field\'s value will be replaced by the value in the original entry.'))
-            return;
+        this.quickSaveKeyBinding = this.$keys.bindGlobal(['mod+s'], e => {
+            e.preventDefault();
+            if (this.confirmingPublish) return;
+            this.quickSave = true;
+            this.save();
+        });
 
-        this.localizedFields = this.localizedFields.filter(field => field !== handle);
-        this.$refs.container.setFieldValue(handle, this.originValues[handle]);
+        this.$store.commit(`publish/${this.publishContainer}/setPreloadedAssets`, this.preloadedAssets);
 
-        // Update the meta for this field. For instance, a relationship field would have its data preloaded into it.
-        // If you sync the field, the preloaded data would be outdated and an ID would show instead of the titles.
-        this.meta[handle] = this.originMeta[handle];
+        if (typeof this.autosaveInterval === 'number') {
+            this.setAutosaveInterval();
+        }
     },
 
-    desyncField(handle) {
-        if (!this.localizedFields.includes(handle))
-            this.localizedFields.push(handle);
+    created() {
+        window.history.replaceState({}, document.title, document.location.href.replace('created=true', ''));
 
-        this.$refs.container.dirty();
+        this.selectedOrigin = this.originBehavior === 'active'
+            ? this.localizations.find(l => l.active)?.handle
+            : this.localizations.find(l => l.root)?.handle;
     },
 
-    setAutosaveInterval() {
-        const interval = setInterval(() => {
-            if (!this.isDirty) return;
+    unmounted() {
+        clearTimeout(this.trackDirtyStateTimeout);
+    },
 
-            this.isAutosave = true;
-            this.save();
-        }, this.autosaveInterval);
+    beforeDestroy() {
+        this.$store.commit(`publish/${this.publishContainer}/clearAutosaveInterval`);
+    },
 
-        this.$store.commit(`publish/${this.publishContainer}/setAutosaveInterval`, interval);
-    }
-},
-
-mounted() {
-    this.saveKeyBinding = this.$keys.bindGlobal(['mod+return'], e => {
-        e.preventDefault();
-        if (this.confirmingPublish) return;
-        this.save();
-    });
-
-    this.quickSaveKeyBinding = this.$keys.bindGlobal(['mod+s'], e => {
-        e.preventDefault();
-        if (this.confirmingPublish) return;
-        this.quickSave = true;
-        this.save();
-    });
-
-    this.$store.commit(`publish/${this.publishContainer}/setPreloadedAssets`, this.preloadedAssets);
-
-    if (typeof this.autosaveInterval === 'number') {
-        this.setAutosaveInterval();
+    destroyed() {
+        this.saveKeyBinding.destroy();
+        this.quickSaveKeyBinding.destroy();
     }
-},
-
-created() {
-    window.history.replaceState({}, document.title, document.location.href.replace('created=true', ''));
-
-    this.selectedOrigin = this.originBehavior === 'active'
-        ? this.localizations.find(l => l.active)?.handle
-        : this.localizations.find(l => l.root)?.handle;
-},
-
-unmounted() {
-    clearTimeout(this.trackDirtyStateTimeout);
-},
-
-beforeDestroy() {
-    this.$store.commit(`publish/${this.publishContainer}/clearAutosaveInterval`);
-},
-
-destroyed() {
-    this.saveKeyBinding.destroy();
-    this.quickSaveKeyBinding.destroy();
-}
 
 }
 </script>

From fc7f0d51519707dd0908aeef96f35e6bdef4628e Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 13 Mar 2023 16:18:51 -0400
Subject: [PATCH 25/32] the html too

---
 .../js/components/entries/PublishForm.vue     | 502 +++++++++---------
 1 file changed, 251 insertions(+), 251 deletions(-)

diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index 8fc96fb7630..94bbe539eb7 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -1,280 +1,280 @@
 <template>
 
-<div>
-    <breadcrumb v-if="breadcrumbs" :url="breadcrumbs[1].url" :title="breadcrumbs[1].text" />
-
-    <div class="flex items-center mb-6">
-        <h1 class="flex-1">
-            <div class="flex items-center">
-                <span v-if="! isCreating" class="little-dot mr-2" :class="activeLocalization.status" v-tooltip="activeLocalization.status" />
-                <span v-html="$options.filters.striptags(title)" />
+    <div>
+        <breadcrumb v-if="breadcrumbs" :url="breadcrumbs[1].url" :title="breadcrumbs[1].text" />
+
+        <div class="flex items-center mb-6">
+            <h1 class="flex-1">
+                <div class="flex items-center">
+                    <span v-if="! isCreating" class="little-dot mr-2" :class="activeLocalization.status" v-tooltip="activeLocalization.status" />
+                    <span v-html="$options.filters.striptags(title)" />
+                </div>
+            </h1>
+
+            <dropdown-list class="mr-4" v-if="canEditBlueprint">
+                <dropdown-item :text="__('Edit Blueprint')" :redirect="actions.editBlueprint" />
+            </dropdown-list>
+
+            <div class="pt-px text-2xs text-gray-600 flex mr-4" v-if="readOnly">
+                <svg-icon name="lock" class="w-4 mr-1 -mt-1" /> {{ __('Read Only') }}
             </div>
-        </h1>
 
-        <dropdown-list class="mr-4" v-if="canEditBlueprint">
-            <dropdown-item :text="__('Edit Blueprint')" :redirect="actions.editBlueprint" />
-        </dropdown-list>
+            <div class="hidden md:flex items-center">
 
-        <div class="pt-px text-2xs text-gray-600 flex mr-4" v-if="readOnly">
-            <svg-icon name="lock" class="w-4 mr-1 -mt-1" /> {{ __('Read Only') }}
-        </div>
-
-        <div class="hidden md:flex items-center">
+                <save-button-options
+                    v-if="!readOnly"
+                    :show-options="!revisionsEnabled && !isInline"
+                    :button-class="saveButtonClass"
+                    :preferences-prefix="preferencesPrefix"
+                >
+                    <button
+                        :class="saveButtonClass"
+                        :disabled="!canSave"
+                        @click.prevent="save"
+                        v-text="saveText"
+                    />
+                </save-button-options>
 
-            <save-button-options
-                v-if="!readOnly"
-                :show-options="!revisionsEnabled && !isInline"
-                :button-class="saveButtonClass"
-                :preferences-prefix="preferencesPrefix"
-            >
                 <button
-                    :class="saveButtonClass"
-                    :disabled="!canSave"
-                    @click.prevent="save"
-                    v-text="saveText"
-                />
-            </save-button-options>
+                    v-if="revisionsEnabled && !isCreating"
+                    class="ml-4 btn-primary flex items-center"
+                    :disabled="!canPublish"
+                    @click="confirmingPublish = true">
+                    <span>{{ __('Publish') }}…</span>
+                </button>
+            </div>
 
-            <button
-                v-if="revisionsEnabled && !isCreating"
-                class="ml-4 btn-primary flex items-center"
-                :disabled="!canPublish"
-                @click="confirmingPublish = true">
-                <span>{{ __('Publish') }}…</span>
-            </button>
+            <slot name="action-buttons-right" />
         </div>
 
-        <slot name="action-buttons-right" />
-    </div>
-
-    <publish-container
-        v-if="fieldset"
-        ref="container"
-        :name="publishContainer"
-        :blueprint="fieldset"
-        :values="values"
-        :reference="initialReference"
-        :meta="meta"
-        :errors="errors"
-        :site="site"
-        :localized-fields="localizedFields"
-        :is-root="isRoot"
-        :track-dirty-state="trackDirtyState"
-        @updated="values = $event"
-    >
-        <live-preview
-            slot-scope="{ container, components, setFieldMeta }"
+        <publish-container
+            v-if="fieldset"
+            ref="container"
             :name="publishContainer"
-            :url="livePreviewUrl"
-            :previewing="isPreviewing"
-            :targets="previewTargets"
+            :blueprint="fieldset"
             :values="values"
-            :blueprint="fieldset.handle"
-            @opened-via-keyboard="openLivePreview"
-            @closed="closeLivePreview"
+            :reference="initialReference"
+            :meta="meta"
+            :errors="errors"
+            :site="site"
+            :localized-fields="localizedFields"
+            :is-root="isRoot"
+            :track-dirty-state="trackDirtyState"
+            @updated="values = $event"
         >
+            <live-preview
+                slot-scope="{ container, components, setFieldMeta }"
+                :name="publishContainer"
+                :url="livePreviewUrl"
+                :previewing="isPreviewing"
+                :targets="previewTargets"
+                :values="values"
+                :blueprint="fieldset.handle"
+                @opened-via-keyboard="openLivePreview"
+                @closed="closeLivePreview"
+            >
 
-            <div>
-                <component
-                    v-for="component in components"
-                    :key="component.id"
-                    :is="component.name"
-                    :container="container"
-                    v-bind="component.props"
-                    v-on="component.events"
-                />
-
-                <transition name="live-preview-sections-drop">
-                    <publish-sections
-                        v-show="sectionsVisible"
-                        :read-only="readOnly"
-                        :syncable="hasOrigin"
-                        :can-toggle-labels="true"
-                        @updated="setFieldValue"
-                        @meta-updated="setFieldMeta"
-                        @synced="syncField"
-                        @desynced="desyncField"
-                        @focus="container.$emit('focus', $event)"
-                        @blur="container.$emit('blur', $event)"
-                    >
-                        <template #actions="{ shouldShowSidebar }">
-
-                            <div v-if="collectionHasRoutes" :class="{ 'hi': !shouldShowSidebar }">
-
-                                <div class="p-4 flex items-center -mx-2">
-                                    <button
-                                        class="flex items-center justify-center btn-flat w-full mx-2 px-2"
-                                        v-if="isBase && livePreviewUrl"
-                                        @click="openLivePreview">
-                                        <svg-icon name="synchronize" class="h-4 w-4 mr-2" />
-                                        <span>{{ __('Live Preview') }}</span>
-                                    </button>
-                                    <a
-                                        class="flex items-center justify-center btn-flat w-full mx-2 px-2"
-                                        v-if="permalink"
-                                        :href="permalink"
-                                        target="_blank">
-                                        <svg-icon name="external-link" class="w-4 h-4 mr-2" />
-                                        <span>{{ __('Visit URL') }}</span>
-                                    </a>
-                                </div>
-                            </div>
-
-                            <div class="flex items-center border-t justify-between px-4 py-2" v-if="!revisionsEnabled">
-                                <label v-text="__('Published')" class="publish-field-label font-medium" />
-                                <toggle-input :value="published" :read-only="!canManagePublishState" @input="setFieldValue('published', $event)" />
-                            </div>
-
-                            <div class="border-t p-4" v-if="revisionsEnabled && !isCreating">
-                                <label class="publish-field-label font-medium mb-2" v-text="__('Revisions')"/>
-                                <div class="mb-1 flex items-center" v-if="published">
-                                    <span class="text-green-600 w-6 text-center">&check;</span>
-                                    <span class="text-2xs" v-text="__('Entry has a published version')"></span>
-                                </div>
-                                <div class="mb-1 flex items-center" v-else>
-                                    <span class="text-orange w-6 text-center">!</span>
-                                    <span class="text-2xs" v-text="__('Entry has not been published')"></span>
+                <div>
+                    <component
+                        v-for="component in components"
+                        :key="component.id"
+                        :is="component.name"
+                        :container="container"
+                        v-bind="component.props"
+                        v-on="component.events"
+                    />
+
+                    <transition name="live-preview-sections-drop">
+                        <publish-sections
+                            v-show="sectionsVisible"
+                            :read-only="readOnly"
+                            :syncable="hasOrigin"
+                            :can-toggle-labels="true"
+                            @updated="setFieldValue"
+                            @meta-updated="setFieldMeta"
+                            @synced="syncField"
+                            @desynced="desyncField"
+                            @focus="container.$emit('focus', $event)"
+                            @blur="container.$emit('blur', $event)"
+                        >
+                            <template #actions="{ shouldShowSidebar }">
+
+                                <div v-if="collectionHasRoutes" :class="{ 'hi': !shouldShowSidebar }">
+
+                                    <div class="p-4 flex items-center -mx-2">
+                                        <button
+                                            class="flex items-center justify-center btn-flat w-full mx-2 px-2"
+                                            v-if="isBase && livePreviewUrl"
+                                            @click="openLivePreview">
+                                            <svg-icon name="synchronize" class="h-4 w-4 mr-2" />
+                                            <span>{{ __('Live Preview') }}</span>
+                                        </button>
+                                        <a
+                                            class="flex items-center justify-center btn-flat w-full mx-2 px-2"
+                                            v-if="permalink"
+                                            :href="permalink"
+                                            target="_blank">
+                                            <svg-icon name="external-link" class="w-4 h-4 mr-2" />
+                                            <span>{{ __('Visit URL') }}</span>
+                                        </a>
+                                    </div>
                                 </div>
-                                <div class="mb-1 flex items-center" v-if="!isWorkingCopy && published">
-                                    <span class="text-green-600 w-6 text-center">&check;</span>
-                                    <span class="text-2xs" v-text="__('This is the published version')"></span>
+
+                                <div class="flex items-center border-t justify-between px-4 py-2" v-if="!revisionsEnabled">
+                                    <label v-text="__('Published')" class="publish-field-label font-medium" />
+                                    <toggle-input :value="published" :read-only="!canManagePublishState" @input="setFieldValue('published', $event)" />
                                 </div>
-                                <div class="mb-1 flex items-center" v-if="isDirty">
-                                    <span class="text-orange w-6 text-center">!</span>
-                                    <span class="text-2xs" v-text="__('Unsaved changes')"></span>
+
+                                <div class="border-t p-4" v-if="revisionsEnabled && !isCreating">
+                                    <label class="publish-field-label font-medium mb-2" v-text="__('Revisions')"/>
+                                    <div class="mb-1 flex items-center" v-if="published">
+                                        <span class="text-green-600 w-6 text-center">&check;</span>
+                                        <span class="text-2xs" v-text="__('Entry has a published version')"></span>
+                                    </div>
+                                    <div class="mb-1 flex items-center" v-else>
+                                        <span class="text-orange w-6 text-center">!</span>
+                                        <span class="text-2xs" v-text="__('Entry has not been published')"></span>
+                                    </div>
+                                    <div class="mb-1 flex items-center" v-if="!isWorkingCopy && published">
+                                        <span class="text-green-600 w-6 text-center">&check;</span>
+                                        <span class="text-2xs" v-text="__('This is the published version')"></span>
+                                    </div>
+                                    <div class="mb-1 flex items-center" v-if="isDirty">
+                                        <span class="text-orange w-6 text-center">!</span>
+                                        <span class="text-2xs" v-text="__('Unsaved changes')"></span>
+                                    </div>
+                                    <button
+                                            class="flex items-center justify-center mt-4 btn-flat px-2 w-full"
+                                            v-if="!isCreating && revisionsEnabled"
+                                            @click="showRevisionHistory = true">
+                                            <svg-icon name="history" class="h-4 w-4 mr-2" />
+                                            <span>{{ __('View History') }}</span>
+                                        </button>
                                 </div>
-                                <button
-                                        class="flex items-center justify-center mt-4 btn-flat px-2 w-full"
-                                        v-if="!isCreating && revisionsEnabled"
-                                        @click="showRevisionHistory = true">
-                                        <svg-icon name="history" class="h-4 w-4 mr-2" />
-                                        <span>{{ __('View History') }}</span>
-                                    </button>
-                            </div>
-
-                            <div class="p-4 border-t" v-if="localizations.length > 1">
-                                <label class="publish-field-label font-medium mb-2" v-text="__('Sites')" />
-                                <div
-                                    v-for="option in localizations"
-                                    :key="option.handle"
-                                    class="text-sm flex items-center -mx-4 px-4 py-2 cursor-pointer"
-                                    :class="option.active ? 'bg-blue-100' : 'hover:bg-gray-200'"
-                                    @click="localizationSelected(option)"
-                                >
-                                    <div class="flex-1 flex items-center" :class="{ 'line-through': !option.exists }">
-                                        <span class="little-dot mr-2" :class="{
-                                            'bg-green-600': option.published,
-                                            'bg-gray-500': !option.published,
-                                            'bg-red-500': !option.exists
-                                        }" />
-                                        {{ option.name }}
-                                        <loading-graphic
-                                            :size="14"
-                                            text=""
-                                            class="ml-2"
-                                            v-if="localizing && localizing.handle === option.handle" />
+
+                                <div class="p-4 border-t" v-if="localizations.length > 1">
+                                    <label class="publish-field-label font-medium mb-2" v-text="__('Sites')" />
+                                    <div
+                                        v-for="option in localizations"
+                                        :key="option.handle"
+                                        class="text-sm flex items-center -mx-4 px-4 py-2 cursor-pointer"
+                                        :class="option.active ? 'bg-blue-100' : 'hover:bg-gray-200'"
+                                        @click="localizationSelected(option)"
+                                    >
+                                        <div class="flex-1 flex items-center" :class="{ 'line-through': !option.exists }">
+                                            <span class="little-dot mr-2" :class="{
+                                                'bg-green-600': option.published,
+                                                'bg-gray-500': !option.published,
+                                                'bg-red-500': !option.exists
+                                            }" />
+                                            {{ option.name }}
+                                            <loading-graphic
+                                                :size="14"
+                                                text=""
+                                                class="ml-2"
+                                                v-if="localizing && localizing.handle === option.handle" />
+                                        </div>
+                                        <div class="badge-sm bg-orange" v-if="option.origin" v-text="__('Origin')" />
+                                        <div class="badge-sm bg-blue" v-if="option.active" v-text="__('Active')" />
+                                        <div class="badge-sm bg-purple" v-if="option.root && !option.origin && !option.active" v-text="__('Root')" />
                                     </div>
-                                    <div class="badge-sm bg-orange" v-if="option.origin" v-text="__('Origin')" />
-                                    <div class="badge-sm bg-blue" v-if="option.active" v-text="__('Active')" />
-                                    <div class="badge-sm bg-purple" v-if="option.root && !option.origin && !option.active" v-text="__('Root')" />
                                 </div>
-                            </div>
 
-                        </template>
-                    </publish-sections>
-                </transition>
-            </div>
-            <template v-slot:buttons>
-                <button
-                    v-if="!readOnly"
-                    class="ml-4"
-                    :class="{
-                        'btn': revisionsEnabled,
-                        'btn-primary': isCreating || !revisionsEnabled,
-                    }"
-                    :disabled="!canSave"
-                    @click.prevent="save"
-                    v-text="saveText">
-                </button>
+                            </template>
+                        </publish-sections>
+                    </transition>
+                </div>
+                <template v-slot:buttons>
+                    <button
+                        v-if="!readOnly"
+                        class="ml-4"
+                        :class="{
+                            'btn': revisionsEnabled,
+                            'btn-primary': isCreating || !revisionsEnabled,
+                        }"
+                        :disabled="!canSave"
+                        @click.prevent="save"
+                        v-text="saveText">
+                    </button>
+
+                    <button
+                        v-if="revisionsEnabled && !isCreating"
+                        class="ml-4 btn-primary flex items-center"
+                        :disabled="!canPublish"
+                        @click="confirmingPublish = true">
+                        <span v-text="__('Publish')" />
+                        <svg-icon name="chevron-down-xs" class="ml-2 w-2" />
+                    </button>
+                </template>
+            </live-preview>
+        </publish-container>
+
+        <div class="md:hidden mt-6 flex items-center">
+            <button
+                v-if="!readOnly"
+                class="btn-lg"
+                :class="{
+                    'btn-primary w-full': ! revisionsEnabled,
+                    'btn w-1/2 mr-4': revisionsEnabled,
+                }"
+                :disabled="!canSave"
+                @click.prevent="save"
+                v-text="__(revisionsEnabled ? 'Save Changes' : 'Save')" />
 
-                <button
-                    v-if="revisionsEnabled && !isCreating"
-                    class="ml-4 btn-primary flex items-center"
-                    :disabled="!canPublish"
-                    @click="confirmingPublish = true">
-                    <span v-text="__('Publish')" />
-                    <svg-icon name="chevron-down-xs" class="ml-2 w-2" />
-                </button>
-            </template>
-        </live-preview>
-    </publish-container>
-
-    <div class="md:hidden mt-6 flex items-center">
-        <button
-            v-if="!readOnly"
-            class="btn-lg"
-            :class="{
-                'btn-primary w-full': ! revisionsEnabled,
-                'btn w-1/2 mr-4': revisionsEnabled,
-            }"
-            :disabled="!canSave"
-            @click.prevent="save"
-            v-text="__(revisionsEnabled ? 'Save Changes' : 'Save')" />
-
-        <button
-            v-if="revisionsEnabled"
-            class="ml-2 btn btn-lg justify-center btn-primary flex items-center w-1/2"
-            :disabled="!canPublish"
-            @click="confirmingPublish = true">
-            <span v-text="__('Publish')" />
-            <svg-icon name="chevron-down-xs" class="ml-2 w-2" />
-        </button>
-    </div>
+            <button
+                v-if="revisionsEnabled"
+                class="ml-2 btn btn-lg justify-center btn-primary flex items-center w-1/2"
+                :disabled="!canPublish"
+                @click="confirmingPublish = true">
+                <span v-text="__('Publish')" />
+                <svg-icon name="chevron-down-xs" class="ml-2 w-2" />
+            </button>
+        </div>
 
-    <stack name="revision-history" v-if="showRevisionHistory" @closed="showRevisionHistory = false" :narrow="true">
-        <revision-history
-            slot-scope="{ close }"
-            :index-url="actions.revisions"
-            :restore-url="actions.restore"
+        <stack name="revision-history" v-if="showRevisionHistory" @closed="showRevisionHistory = false" :narrow="true">
+            <revision-history
+                slot-scope="{ close }"
+                :index-url="actions.revisions"
+                :restore-url="actions.restore"
+                :reference="initialReference"
+                @closed="close"
+            />
+        </stack>
+
+        <publish-actions
+            v-if="confirmingPublish"
+            :actions="actions"
+            :published="published"
+            :collection="collectionHandle"
             :reference="initialReference"
-            @closed="close"
+            :publish-container="publishContainer"
+            :can-manage-publish-state="canManagePublishState"
+            @closed="confirmingPublish = false"
+            @saving="saving = true"
+            @saved="publishActionCompleted"
         />
-    </stack>
-
-    <publish-actions
-        v-if="confirmingPublish"
-        :actions="actions"
-        :published="published"
-        :collection="collectionHandle"
-        :reference="initialReference"
-        :publish-container="publishContainer"
-        :can-manage-publish-state="canManagePublishState"
-        @closed="confirmingPublish = false"
-        @saving="saving = true"
-        @saved="publishActionCompleted"
-    />
-
-    <confirmation-modal
-        v-if="selectingOrigin"
-        :title="__('Create Localization')"
-        :buttonText="__('Create')"
-        @cancel="cancelLocalization()"
-        @confirm="createLocalization(localizing)"
-    >
-        <div class="publish-fields">
-            <div class="form-group publish-field field-w-full">
-                <label v-text="__('Origin')" />
-                <div class="help-block -mt-2" v-text="__('messages.entry_origin_instructions')"></div>
-                <select-input
-                    v-model="selectedOrigin"
-                    :options="originOptions"
-                    :placeholder="false"
-                />
+
+        <confirmation-modal
+            v-if="selectingOrigin"
+            :title="__('Create Localization')"
+            :buttonText="__('Create')"
+            @cancel="cancelLocalization()"
+            @confirm="createLocalization(localizing)"
+        >
+            <div class="publish-fields">
+                <div class="form-group publish-field field-w-full">
+                    <label v-text="__('Origin')" />
+                    <div class="help-block -mt-2" v-text="__('messages.entry_origin_instructions')"></div>
+                    <select-input
+                        v-model="selectedOrigin"
+                        :options="originOptions"
+                        :placeholder="false"
+                    />
+                </div>
             </div>
-        </div>
 
-    </confirmation-modal>
-</div>
+        </confirmation-modal>
+    </div>
 
 </template>
 

From 0e88a0f78d39f36e065ad244d0cf4985a4750260 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 13 Mar 2023 16:20:45 -0400
Subject: [PATCH 26/32] teeny tiny unnecessary diff change

---
 resources/js/components/entries/PublishForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index 94bbe539eb7..c911cbe2826 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -185,7 +185,7 @@
                     </transition>
                 </div>
                 <template v-slot:buttons>
-                    <button
+                   <button
                         v-if="!readOnly"
                         class="ml-4"
                         :class="{

From ecf079ce99d7d3ca47b5188f25f09c175ed379f4 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 13 Mar 2023 16:28:06 -0400
Subject: [PATCH 27/32] Better date fields in tight quarters

---
 resources/js/components/fieldtypes/DateFieldtype.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/fieldtypes/DateFieldtype.vue b/resources/js/components/fieldtypes/DateFieldtype.vue
index 5f3351e01de..eed1aaaa3c2 100644
--- a/resources/js/components/fieldtypes/DateFieldtype.vue
+++ b/resources/js/components/fieldtypes/DateFieldtype.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="datetime">
+    <div class="datetime min-w-[145px]">
 
         <button type="button" class="btn flex mb-2 md:mb-0 items-center pl-3" v-if="!isReadOnly && config.inline === false && !hasDate" @click="addDate" tabindex="0">
             <svg-icon name="calendar" class="w-4 h-4 mr-2"></svg-icon>
@@ -7,7 +7,8 @@
     	</button>
 
         <div v-if="hasDate || config.inline"
-            class="date-time-container flex-col @xs:flex-row"
+            class="date-time-container flex flow-col @sm:flex-row"
+            :class="config.time_seconds_enabled ? 'space-x-1' : 'space-x-3'"
         >
 
             <div class="flex-1 date-container">
@@ -86,7 +87,7 @@
                 </v-date-picker>
             </div>
 
-            <div v-if="config.time_enabled && !isRange" class="time-container mt-2 @xs:ml-2 @xs:mt-0 time-fieldtype">
+            <div v-if="config.time_enabled && !isRange" class="time-container @xs:ml-2 @xs:mt-0 time-fieldtype">
 				<time-fieldtype
                     v-if="hasTime"
                     ref="time"

From 708a892034f169a5f4d72dd290d7ca1d31fae0b3 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 13 Mar 2023 16:46:22 -0400
Subject: [PATCH 28/32] Fix Bard typography in Fullscreen Mode

---
 resources/css/components/fieldtypes/bard.css              | 4 ++++
 resources/js/components/fieldtypes/bard/BardFieldtype.vue | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index b8bc329ef2b..76cbe8e356c 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -229,6 +229,10 @@
         * > .ProseMirror {
             min-height: auto;
         }
+
+        &:focus {
+            @apply ring-0;
+        }
     }
 
     .bard-set-selector {
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 890b74b507f..4af9d030606 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -5,7 +5,7 @@
      be within the context of a publish form to continue working
      once it has been portaled out. -->
 <div :class="{ 'publish-fields': fullScreenMode }">
-<div :class="{ wrapperClasses: fullScreenMode }">
+<div :class="fullScreenMode && wrapperClasses">
 
     <div
         class="bard-fieldtype-wrapper"

From 1c30de2af58b94384e03af7751461b59a07c68ac Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 13 Mar 2023 16:56:38 -0400
Subject: [PATCH 29/32] Fix some fullscreen editor issues

---
 resources/css/components/fieldtypes/bard.css              | 2 +-
 resources/css/components/fieldtypes/markdown.css          | 2 +-
 resources/js/components/fieldtypes/bard/BardFieldtype.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 76cbe8e356c..921960eaaff 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -207,7 +207,7 @@
     }
 
     .bard-fixed-toolbar {
-        @apply shadow h-12 justify-center;
+        @apply shadow h-12;
         padding: 7px 8px;
         top: 0;
         z-index: 999;
diff --git a/resources/css/components/fieldtypes/markdown.css b/resources/css/components/fieldtypes/markdown.css
index 35aa0efbb12..8d0259ef7dc 100644
--- a/resources/css/components/fieldtypes/markdown.css
+++ b/resources/css/components/fieldtypes/markdown.css
@@ -108,7 +108,7 @@
     .markdown-modes button {
         @apply text-gray-700;
         &.active {
-            @apply text-white;
+            @apply text-white bg-black;
         }
     }
 
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 4af9d030606..6cb59225ea9 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -15,7 +15,7 @@
     >
 
         <div class="bard-fixed-toolbar" v-if="!readOnly && showFixedToolbar">
-            <div class="flex flex-wrap flex-1 items-center no-select" v-if="toolbarIsFixed">
+            <div class="flex flex-wrap flex-1 items-center no-select" v-if="toolbarIsFixed" :class="{'justify-center': fullScreenMode}">
                 <component
                     v-for="button in visibleButtons(buttons)"
                     :key="button.name"

From 4087931782e979e981a5c50d5f9ec70ba9286408 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 13 Mar 2023 18:17:38 -0400
Subject: [PATCH 30/32] Better replicator toolbar

---
 .../fieldtypes/replicator/Replicator.vue      | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index b1ea07574b5..2a4e39f0c00 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -8,24 +8,34 @@
 <div :class="{ wrapperClasses: fullScreenMode }">
 <div class="replicator-fieldtype-container" :class="{'replicator-fullscreen bg-white': fullScreenMode }">
 
-    <header class="bg-white border-b py-3 pl-3 flex items-center justify-between relative" v-if="fullScreenMode">
-        <h2 v-text="config.display" />
-        <button class="btn-close absolute top-2 right-5" @click="fullScreenMode = false" :aria-label="__('Exit Fullscreen Mode')">&times;</button>
+    <header class="bg-white fixed top-0 inset-x-0 border-b p-3 pl-4 flex items-center justify-between shadow z-max" v-if="fullScreenMode">
+        <h2 v-text="config.display" class="flex-1" />
+            <div class="flex items-center">
+                <div class="btn-group">
+                    <button @click="expandAll" class="btn btn-icon flex items-center" v-tooltip="__('Expand Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
+                        <svg-icon name="arrows-horizontal-expand" class="h-3.5 px-1 text-gray-750" />
+                    </button>
+                    <button @click="collapseAll" class="btn btn-icon flex items-center" v-tooltip="__('Collapse Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
+                        <svg-icon name="arrows-horizontal-collapse" class="h-3.5 px-1 text-gray-750" />
+                    </button>
+                </div>
+                <button class="btn-close ml-2" @click="fullScreenMode = false" :aria-label="__('Exit Fullscreen Mode')">&times;</button>
+            </div>
     </header>
 
-    <section :class="{'p-4 bg-gray-200 h-full': fullScreenMode}">
+    <section :class="{'mt-12 p-4 bg-gray-200': fullScreenMode}">
 
-        <div class="flex justify-end">
+        <div class="flex justify-end" v-if="! fullScreenMode">
             <div class="btn-group">
                 <button @click="expandAll" class="btn btn-icon flex items-center" v-tooltip="__('Expand Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
-                    <svg-icon name="arrows-horizontal-expand" class="h-3.5 px-0.5 text-gray-800" />
+                    <svg-icon name="arrows-horizontal-expand" class="h-3.5 px-0.5 text-gray-750" />
                 </button>
                 <button @click="collapseAll" class="btn btn-icon flex items-center" v-tooltip="__('Collapse Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
-                    <svg-icon name="arrows-horizontal-collapse" class="h-3.5 px-0.5 text-gray-800" />
+                    <svg-icon name="arrows-horizontal-collapse" class="h-3.5 px-0.5 text-gray-750" />
                 </button>
                 <button @click="fullScreenMode = !fullScreenMode" class="btn btn-icon flex items-center" v-tooltip="__('Toggle Fullscreen Mode')">
-                    <svg-icon name="expand-2" class="h-3.5 px-0.5 text-gray-800" v-show="! fullScreenMode" />
-                    <svg-icon name="shrink-all" class="h-3.5 px-0.5 text-gray-800" v-show="fullScreenMode" />
+                    <svg-icon name="expand-2" class="h-3.5 px-0.5 text-gray-750" v-show="! fullScreenMode" />
+                    <svg-icon name="shrink-all" class="h-3.5 px-0.5 text-gray-750" v-show="fullScreenMode" />
                 </button>
             </div>
         </div>

From c2a2f6c8afe1db704b2ea241e227cdc278ad7240 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 13 Mar 2023 18:23:02 -0400
Subject: [PATCH 31/32] Only show asset folders on the first page of results

Closes #2829.
---
 resources/js/components/assets/Browser/Browser.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index 30940c72663..6037b5e8cb5 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -111,7 +111,7 @@
                                         </td>
                                         <td :colspan="columns.length" />
                                     </tr>
-                                    <tr v-for="(folder, i) in folders" :key="folder.path" v-if="!restrictFolderNavigation">
+                                    <tr v-for="(folder, i) in folders" :key="folder.path" v-if="!restrictFolderNavigation && page === 1">
                                         <td />
                                         <td @click="selectFolder(folder.path)">
                                             <a class="flex items-center cursor-pointer group">

From bac9d48d632f148a4c2e3270f6c5ead53197698b Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 13 Mar 2023 18:34:43 -0400
Subject: [PATCH 32/32] Make Markdown keyboard shortcuts work on windows.

Closes #6024.
---
 resources/js/components/fieldtypes/MarkdownFieldtype.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/fieldtypes/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/MarkdownFieldtype.vue
index 41848ffa35b..75c22f42d1a 100644
--- a/resources/js/components/fieldtypes/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/MarkdownFieldtype.vue
@@ -441,19 +441,19 @@ export default {
          */
         shortcut: function(e) {
             var key = e.keyCode;
-            var meta = e.metaKey === true;
+            var mod = e.metaKey === true || e.ctrlKey === true;
 
-            if (meta && key === 66) { // cmd+b
+            if (mod && key === 66) { // cmd+b
                 this.bold();
                 e.preventDefault();
             }
 
-            if (meta && key === 73) { // cmd+i
+            if (mod && key === 73) { // cmd+i
                 this.italic();
                 e.preventDefault();
             }
 
-            if (meta && key === 75) { // cmd+k
+            if (mod && key === 75) { // cmd+k
                 this.insertLink();
                 e.preventDefault();
             }