fix(divider): remove safe areas from horizontal padding (#30311)

Issue number: internal

---------
## What is the current behavior?
The horizontal padding of the divider component was being calculated
taking into account safe areas.
However, since this component can be placed inside other components that
already take these areas into account, this is not necessary.

## What is the new behavior?
- Removes the safe areas

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Confirmed with design: the new divider component’s main use case is to
be used inside ion-content (or one of it’s children). As such, the
responsibility of taking into account safe areas will fall on the
developer (as it’s already stated in the
[documentation](https://ionicframework.com/docs/api/content#safe-area-padding)).
This means, the divider component itself will not account for the safe
areas for its' specific padding.

The default spacing also changed from `xxsmall` to `medium`

Author: OS-martacarlos

core/api.txt

@@ -747,7 +747,7 @@ ion-datetime-button,part,native
 
 ion-divider,shadow
 ion-divider,prop,inset,boolean,false,false,false
-ion-divider,prop,spacing,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | undefined,'xxsmall',false,true
+ion-divider,prop,spacing,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | undefined,'medium',false,true
 ion-divider,css-prop,--margin-bottom,ionic
 ion-divider,css-prop,--margin-bottom,ios
 ion-divider,css-prop,--margin-bottom,md

core/src/components.d.ts

@@ -1170,7 +1170,7 @@ export namespace Components {
          */
         "inset": boolean;
         /**
-          * Set to `"xxsmall"` for the smallest spacing. Set to "xsmall" for very small spacing. Set to `"small"` for small spacing. Set to "medium" for medium spacing. Set to "large" for large spacing. Set to `"xlarge"` for the largest spacing.  Defaults to `"xxsmall"`.
+          * Set to `"xxsmall"` for the smallest spacing. Set to "xsmall" for very small spacing. Set to `"small"` for small spacing. Set to "medium" for medium spacing. Set to "large" for large spacing. Set to `"xlarge"` for the largest spacing.  Defaults to `"medium"`.
          */
         "spacing"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
     }
@@ -6642,7 +6642,7 @@ declare namespace LocalJSX {
          */
         "inset"?: boolean;
         /**
-          * Set to `"xxsmall"` for the smallest spacing. Set to "xsmall" for very small spacing. Set to `"small"` for small spacing. Set to "medium" for medium spacing. Set to "large" for large spacing. Set to `"xlarge"` for the largest spacing.  Defaults to `"xxsmall"`.
+          * Set to `"xxsmall"` for the smallest spacing. Set to "xsmall" for very small spacing. Set to `"small"` for small spacing. Set to "medium" for medium spacing. Set to "large" for large spacing. Set to `"xlarge"` for the largest spacing.  Defaults to `"medium"`.
          */
         "spacing"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
     }

core/src/components/divider/divider.common.scss

@@ -12,21 +12,11 @@
   --padding-start: 0px;
   --padding-end: 0px;
 
+  @include padding-horizontal(var(--padding-start), var(--padding-end));
+
   display: block;
 
   width: 100%;
-
-  /* stylelint-disable */
-  @include ltr() {
-    padding-right: calc(var(--padding-end) + var(--ion-safe-area-right, 0px));
-    padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
-  }
-
-  @include rtl() {
-    padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
-    padding-left: calc(var(--padding-end) + var(--ion-safe-area-left, 0px));
-  }
-  /* stylelint-enable */
 }
 
 :host hr {

core/src/components/divider/divider.tsx

@@ -20,10 +20,10 @@ export class Divider implements ComponentInterface {
    * Set to "large" for large spacing.
    * Set to `"xlarge"` for the largest spacing.
    *
-   * Defaults to `"xxsmall"`.
+   * Defaults to `"medium"`.
    */
   @Prop({ reflect: true }) spacing?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' =
-    'xxsmall';
+    'medium';
 
   /**
    * If `true`, the divider will have horizontal margins