[6.x] Kill sibling transitions

resources/css/components/page-tree.css

@@ -10,7 +10,6 @@
         /* We only want to animate tree nodes on page load. We don't want to animate child nodes when toggling them open, less it looks glitchy and feels unresponsive. */
         &:not(.page-tree--ready &) {
             transition: opacity var(--starting-style-transition-duration);
-            transition-delay: calc(sibling-index() * var(--starting-style-sibling-delay));
             @starting-style {
                 opacity: 0;
             }

resources/css/core/animation.css

@@ -88,12 +88,4 @@
     .starting-style-transition--delay {
         transition-delay: calc(var(--starting-style-transition-duration) * 5);
     }
-
-    .starting-style-transition--siblings,
-    /* Assume that when we're animating children we want a sibling delay */
-    .starting-style-transition-children > *,
-    .publish-fields > *,
-    .publish-fields-fluid > * {
-        transition-delay: calc(sibling-index() * var(--starting-style-sibling-delay));
-    }
 }

resources/css/elements/base.css

@@ -23,7 +23,6 @@
 
     /* Used for entry animations */
     --starting-style-transition-duration: 0.125s;
-    --starting-style-sibling-delay: 0.01s;
 }
 
 /* FOCUS STATES

resources/js/components/ui/Listing/Listing.vue

@@ -715,7 +715,7 @@ autoApplyState();
     </slot>
     <slot v-if="!initializing" :items="items" :is-column-visible="isColumnVisible" :loading="loading">
         <Presets v-if="showPresets" />
-        <div v-if="allowSearch || hasFilters || allowCustomizingColumns" class="relative overflow-clip flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition starting-style-transition--siblings st-overflow-clip-margin">
+        <div v-if="allowSearch || hasFilters || allowCustomizingColumns" class="relative overflow-clip flex items-center gap-2 sm:gap-3 min-h-16 starting-style-transition st-overflow-clip-margin">
             <div class="flex flex-1 items-center gap-2 sm:gap-3 w-full">
                 <Search v-if="allowSearch" />
                 <Filters v-if="hasFilters" />

resources/js/components/ui/Listing/TableBody.vue

@@ -78,7 +78,7 @@ function handleRowClick(event, index) {
             <tr
                 v-for="(row, index) in items"
                 :key="row.id"
-                class="sortable-row outline-hidden starting-style-transition starting-style-transition--siblings"
+                class="sortable-row outline-hidden starting-style-transition"
                 :data-row="isSelected(row.id) ? 'selected' : 'unselected'"
                 @click="handleRowClick($event, index)"
             >

resources/js/components/ui/Panel/Panel.vue

@@ -15,7 +15,7 @@ const props = defineProps({
     <div
         :class="[
             '@container/panel relative bg-gray-150 [.bg-architectural-lines_&]:backdrop-blur-[10px] dark:bg-gray-950/35 dark:inset-shadow-2xs dark:inset-shadow-black',
-            'w-full rounded-2xl mb-10 max-[600px]:p-1.25 p-1.75 [&:has(>[data-ui-panel-header])]:pt-0 focus-none starting-style-transition starting-style-transition--siblings',
+            'w-full rounded-2xl mb-10 max-[600px]:p-1.25 p-1.75 [&:has(>[data-ui-panel-header])]:pt-0 focus-none starting-style-transition',
         ]"
         data-ui-panel
     >

resources/js/pages/Dashboard.vue

@@ -51,7 +51,7 @@ function tailwindWidthClass(width) {
         <div class="widgets @container/widgets flex flex-wrap gap-y-6 -mx-2 sm:-mx-3">
             <div
                 v-for="widget in widgets"
-                class="px-3 starting-style-transition starting-style-transition--siblings"
+                class="px-3 starting-style-transition"
                 :class="classes(widget)"
             >
                 <component v-if="widget.component" :is="widget.component.name" v-bind="widget.component.props" />