move via prop on content

core/src/components.d.ts

@@ -768,6 +768,7 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        "fixedSlotPlacement": 'afterContent' | 'beforeContent';
         /**
           * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.
          */
@@ -5475,6 +5476,7 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        "fixedSlotPlacement"?: 'afterContent' | 'beforeContent';
         /**
           * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.
          */

core/src/components/content/content.scss

@@ -255,9 +255,3 @@
    */
   transform: translateZ(0);
 }
-
-::slotted([slot="new"]) {
-  position: absolute;
-
-  z-index: $z-index-fixed-content;
-}

core/src/components/content/content.tsx

@@ -75,6 +75,8 @@ export class Content implements ComponentInterface {
    */
   @Prop() fullscreen = false;
 
+  @Prop() fixedSlotPlacement: 'afterContent' | 'beforeContent' = 'afterContent';
+
   /**
    * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.
    * If the content exceeds the bounds of ionContent, nothing will change.
@@ -423,7 +425,7 @@ export class Content implements ComponentInterface {
   }
 
   render() {
-    const { isMainContent, scrollX, scrollY, el } = this;
+    const { fixedSlotPlacement, isMainContent, scrollX, scrollY, el } = this;
     const rtl = isRTL(el) ? 'rtl' : 'ltr';
     const mode = getIonMode(this);
     const forceOverscroll = this.shouldForceOverscroll();
@@ -447,7 +449,7 @@ export class Content implements ComponentInterface {
       >
         <div ref={(el) => (this.backgroundContentEl = el)} id="background-content" part="background"></div>
 
-        <slot name="new"></slot>
+        {fixedSlotPlacement === 'beforeContent' ? <slot name="fixed"></slot> : null}
 
         <TagType
           class={{
@@ -470,7 +472,7 @@ export class Content implements ComponentInterface {
           </div>
         ) : null}
 
-        <slot name="fixed"></slot>
+        {fixedSlotPlacement !== 'beforeContent' ? <slot name="fixed"></slot> : null}
       </Host>
     );
   }

core/src/components/fab/test/basic/index.html

@@ -22,13 +22,9 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content class="ion-padding">
+      <ion-content class="ion-padding" fixed-slot-placement="beforeContent">
         <ion-fab slot="fixed" vertical="top" horizontal="start">
-          <ion-fab-button> "fixed"<br />slot </ion-fab-button>
-        </ion-fab>
-
-        <ion-fab slot="new" vertical="bottom" horizontal="end">
-          <ion-fab-button> new<br />slot </ion-fab-button>
+          <ion-fab-button>fixed<br />slot </ion-fab-button>
         </ion-fab>
 
         <ion-list>
@@ -37,9 +33,7 @@
           <ion-item button>List</ion-item>
         </ion-list>
 
-        <ion-button id="fixed-button-new" slot="new">Fixed Button in new slot</ion-button>
-
-        <ion-button id="fixed-button-fixed" slot="fixed">Fixed Button in "fixed" slot</ion-button>
+        <ion-button id="fixed-button" slot="fixed">Fixed Button</ion-button>
 
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
@@ -109,14 +103,10 @@
       </script>
 
       <style>
-        #fixed-button-new {
+        #fixed-button {
           right: 0px;
           top: 50%;
         }
-        #fixed-button-fixed {
-          bottom: 0px;
-          left: 50%;
-        }
       </style>
     </ion-app>
   </body>

core/src/components/refresher/test/basic/index.html

@@ -22,7 +22,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content>
+      <ion-content fixed-slot-placement="beforeContent">
         <ion-refresher id="refresher" slot="fixed">
           <ion-refresher-content
             pulling-icon="arrow-down-outline"