change prop to vertical

Author: BenOsodrac

core/api.txt

@@ -314,10 +314,10 @@ ion-backdrop,event,ionBackdropTap,void,true
 ion-badge,shadow
 ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
-ion-badge,prop,position,"bottom" | "top" | undefined,undefined,false,false
 ion-badge,prop,shape,"round | rectangular" | "soft" | undefined,undefined,false,false
 ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false
 ion-badge,prop,theme,"ios" | "md" | "ionic",undefined,false,false
+ion-badge,prop,vertical,"bottom" | "top" | undefined,undefined,false,false
 ion-badge,css-prop,--background,ionic
 ion-badge,css-prop,--background,ios
 ion-badge,css-prop,--background,md

core/src/components.d.ts

@@ -428,10 +428,6 @@ export namespace Components {
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
-        /**
-          * Set to `"top"` to position the badge on top right absolute position of the parent element. Set to `"bottom"` to position the badge on bottom right absolute position of the parent element.
-         */
-        "position"?: 'top' | 'bottom';
         /**
           * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
          */
@@ -444,6 +440,10 @@ export namespace Components {
           * The theme determines the visual appearance of the component.
          */
         "theme"?: "ios" | "md" | "ionic";
+        /**
+          * Set to `"top"` to position the badge on top right absolute position of the parent element. Set to `"bottom"` to position the badge on bottom right absolute position of the parent element.
+         */
+        "vertical"?: 'top' | 'bottom';
     }
     interface IonBreadcrumb {
         /**
@@ -5796,10 +5796,6 @@ declare namespace LocalJSX {
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
-        /**
-          * Set to `"top"` to position the badge on top right absolute position of the parent element. Set to `"bottom"` to position the badge on bottom right absolute position of the parent element.
-         */
-        "position"?: 'top' | 'bottom';
         /**
           * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
          */
@@ -5812,6 +5808,10 @@ declare namespace LocalJSX {
           * The theme determines the visual appearance of the component.
          */
         "theme"?: "ios" | "md" | "ionic";
+        /**
+          * Set to `"top"` to position the badge on top right absolute position of the parent element. Set to `"bottom"` to position the badge on bottom right absolute position of the parent element.
+         */
+        "vertical"?: 'top' | 'bottom';
     }
     interface IonBreadcrumb {
         /**

core/src/components/badge/badge.tsx

@@ -51,7 +51,7 @@ export class Badge implements ComponentInterface {
    * Set to `"top"` to position the badge on top right absolute position of the parent element.
    * Set to `"bottom"` to position the badge on bottom right absolute position of the parent element.
    */
-  @Prop() position?: 'top' | 'bottom';
+  @Prop() vertical?: 'top' | 'bottom';
 
   private getShape(): string | undefined {
     const theme = getIonTheme(this);
@@ -95,7 +95,7 @@ export class Badge implements ComponentInterface {
           [theme]: true,
           [`badge-${shape}`]: shape !== undefined,
           [`badge-${size}`]: size !== undefined,
-          [`badge-${this.position}`]: this.position !== undefined,
+          [`badge-${this.vertical}`]: this.vertical !== undefined,
         })}
       >
         <slot></slot>

packages/angular/src/directives/proxies.ts

@@ -261,14 +261,14 @@ export declare interface IonBackdrop extends Components.IonBackdrop {
 
 
 @ProxyCmp({
-  inputs: ['color', 'mode', 'position', 'shape', 'size', 'theme']
+  inputs: ['color', 'mode', 'shape', 'size', 'theme', 'vertical']
 })
 @Component({
   selector: 'ion-badge',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'mode', 'position', 'shape', 'size', 'theme'],
+  inputs: ['color', 'mode', 'shape', 'size', 'theme', 'vertical'],
 })
 export class IonBadge {
   protected el: HTMLElement;

packages/angular/standalone/src/directives/proxies.ts

@@ -349,14 +349,14 @@ export declare interface IonBackdrop extends Components.IonBackdrop {
 
 @ProxyCmp({
   defineCustomElementFn: defineIonBadge,
-  inputs: ['color', 'mode', 'position', 'shape', 'size', 'theme']
+  inputs: ['color', 'mode', 'shape', 'size', 'theme', 'vertical']
 })
 @Component({
   selector: 'ion-badge',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'mode', 'position', 'shape', 'size', 'theme'],
+  inputs: ['color', 'mode', 'shape', 'size', 'theme', 'vertical'],
   standalone: true
 })
 export class IonBadge {

packages/vue/src/proxies.ts

@@ -125,7 +125,7 @@ export const IonBadge = /*@__PURE__*/ defineContainer<JSX.IonBadge>('ion-badge',
   'color',
   'shape',
   'size',
-  'position'
+  'vertical'
 ]);