…less than the backdrop breakpoint (#29955)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
This PR aims to fix an issue introduced in
#29932 where the enter
animation for ionic theme was in a broken state when the modal's initial
breakpoint value was lesser than the specified backdrop breakpoint.

## What is the new behavior?
- The erroneous behaviour happened because the shouldShowBackdrop
constant had a false value which was being taken into consideration when
computing the backdrop opacity for the ionic theme. This PR fixes this
by always transitioning the backdrop opacity from 0 to 0.7 once the
modal appears, independently of the initial, current or activation
breakpoint.

## 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. -->

Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The backdrop opacity is incorrectly set to 0.7

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Sets backdrop opacity to 1

## 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. -->


[Preview](https://ionic-framework-pkqwthhvj-ionic1.vercel.app/src/components/modal/test/sheet?ionic:theme=ionic)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Removed old tokens stored on foundations folder. Now the jsons with
the tokens come from the new dependency:
https://github.com/OutSystems/outsystems-design-tokens.
- The tokens from UX Team completely changed the structure and in some
cases the values. Everything was replaced on the project to use the new
tokens.
- Snapshots updated and differences reviewed with UX Team. A fix was
done on the testing css, to make sure the correct _Inter_ font-family
was actually used. This resulted in some differences on the text for
some componentes, that had snapshots with the native fonts.
- Removed generation of scss file on tokens script, that contained the
:root selector with the custom CSS properties, as they were not used on
the Ionic context.
- Removed generation of html file with tokens preview, as there wasn't a
great value on this (we have storybook on other contexts) and it allowed
to reduce a lot of code and complexity from the tokens script.
- The token command was adapted to use the command available from the
https://github.com/OutSystems/outsystems-design-tokens package, using
the `--config` prop, where we pass the path to our Ionic token script,
where we generate the needed scss variables and utility-classes (by
default the tokens repo tries to be as agnostic as possible, and only
generates the css variables, without the prefix and added details we
need on the Ionic side).
- Removed the token command from the npm run build, as it unnecessarily
added time on that command to run. Besides, it should not be common that
we need to run this command in the future.
- Updated reference to latest version of [Style Dictionary
4.1.3](https://v4.styledictionary.com/version-4/statement/). Version 4
comes with a lot of improvements, but also breaking-changes, so it was
needed to adapt the tokens script. The code on the script is also now
cleaner.
- Changed prefix from ionic to ion. The term ionic was used initially,
to help differentiate from the old ios/md stuff, but I feel with the
current scss architecture, that is no longer needed, and we can use the
same prefix across themes.

This requires to run `npm install ` again.

## Does this introduce a breaking change?

- [x] Yes
- [ ] 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.
-->

---------

Co-authored-by: ionitron <[email protected]>
Co-authored-by: Maria Hutt <[email protected]>

… other themes (#29974)

The default (iOS/MD) bundle is removed from the tests for the `ionic` theme because it adds global component styles that the `ionic` theme does not need. The missing utility files are imported, and padding/margin classes are generated from the design tokens, as many tests rely on `ion-padding` and `ion-text-center` being available. This change ensures the `ionic` theme includes the same classes offered in our documentation: https://ionicframework.com/docs/layout/css-utilities.

…c theme (#29971)

- Adds support for the `shape` property in accordion group.
- Adds styles for the `"soft"`, `"round"` and `"rectangular"` shapes in the `ionic` theme
- Defaults the shape to `"round"` for the ionic theme
- Adds an e2e test for `shape` with screenshots of all shapes
- Renames the `accordion.e2e.ts` files in other tests to `accordion-group.e2e.ts` which also renames the screenshot folder

Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Unable to use the `rtl` mixin from the ionic theme global import:

```scss
@use "../../themes/ionic/ionic.globals.scss" as globals;

:host {
  @include globals.rtl() {
    ...
  }
}
```

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Allows the `rtl` mixin to be accessed from the global sass import

## 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. -->

- Applies border radius based on the `shape` defined on the parent accordion group
- Adds an e2e test for shape with focused items to show the border radius
- Adds screenshots for the e2e test

- Removes the `*.ionic.vars.scss` files for item, list and input and uses the design tokens directly
- Removes the `tab-bar.ionic.vars.scss` file and moves the variables to the default ionic theme file since this uses global css variables

Rebase next after v8.4.0 release

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
No ionic theme custom implementation existed for the ion-range
component.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added ionic theme specific styling (based on the ios styling) for the
range according to UX requirements.

## 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. -->

![image](https://github.com/user-attachments/assets/1b78cba4-0f0f-45d4-abdc-d48cdb917ea2)

… for ionic theme (#29988)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
The ion-range pin is only shown we the range is being dragged for all
themes.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- This PR updates the range pin so that it is alway visible when it is
enabled for the ionic theme.

## 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. -->

…ew (#30002)

## What is the current behavior?
Segment view does not contains styling once at ionic theme.

## What is the new behavior?
Same default style as md should be added.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

Co-authored-by: Brandy Carney <[email protected]>

…30032)

Moves the padding to the inner content element so the `offsetHeight` will be calculated properly and the animation will be smooth.

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?

- Removed avatar border with ionic theme, to align with UX/UI design.
- Updated snapshots

## 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. -->

[Avatar Ionic
Sample](https://ionic-framework-nimqjtxw7-ionic1.vercel.app/src/components/avatar/test/shape?ionic:theme=ionic)

v8.7.15

Issue number: internal


<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- guarantee that every child of segment-button has color: primary-color
when checked;

## 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.
-->

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

Sample:
https://ionic-framework-git-rou-12439-ionic1.vercel.app/src/components/segment/test/basic?ionic:theme=ionic

)

Issue number: resolves #

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
Helper and Error text style it's not uniform between elements.

## What is the new behavior?
* Changed the typography for `.checkbox-bottom` and `.toggle-bottom` to
use `globals.$ion-body-sm-medium` for a more consistent appearance with
other components.
[[1]](diffhunk://#diff-796ffc72b6171910c25d5aad085bc245095c38f104d55e253e06282702205066L116-R116)
[[2]](diffhunk://#diff-ad6128c5d08f42a970eab3a8c7081eaad590bd4ebbcd19ec4e6110a6f7977040L59-R70)
* Updated the color of `.input-bottom .helper-text` and `.input-bottom
.counter` to use `globals.$ion-text-subtlest` instead of
`globals.$ion-primitives-neutral-800`, and `.input-bottom .error-text`
to use `globals.$ion-text-danger`.
* Standardized `.textarea-bottom .error-text` to use
`globals.$ion-text-danger` and reordered the CSS for clarity, while
`.textarea-bottom .helper-text` and `.textarea-bottom .counter` use
`globals.$ion-text-subtlest`.
* Updated `.toggle-bottom .error-text` to use `globals.$ion-text-danger`
and `.toggle-bottom .helper-text` to use `globals.$ion-text-subtlest`
for improved semantic clarity and consistency.

## 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.
-->

---------

Co-authored-by: ionitron <[email protected]>

…mproved styling consistency (#30905)

Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
- Previously in iOS, when using something different than the `ion-label`
to add a text inside the `segment-button`, the default color attributed
to it was blue.
<img width="357" height="103" alt="image"
src="https://github.com/user-attachments/assets/2196e548-f0b7-4e7f-b093-e58c88b2a6cb"
/>

- In Android, the expected color is not attributed either, but it
defaults to black instead of blue.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Now, all the slotted elements will respect the color defined by the
`color` CSS variable.

## 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. -->

Issue number: internal

---------

## What is the current behavior?
Card content has no encapsulation.

## What is the new behavior?
Converted `ion-card-content` to Shadow DOM which improves consistency among components & CSP compatibility.

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

BREAKING CHANGE:

The `ion-card-content` component has been updated to Shadow DOM. With this update, all card-related components now use Shadow DOM for style encapsulation. There should not be any breaking changes related to targeting inner elements since `ion-card-content` does not have any internal elements of its own. However, some user styles may break due to the removal of the `card-content-{mode}` class or changes in selector specificity.

The default styles for heading elements inside `ion-card-content` have been removed. If you need custom styling for headings, you can add your own CSS targeting these elements.

For example:

```css
ion-card-content h1 {
  margin-top: 0;
  margin-bottom: 2px;

  font-size: 1.5rem;
}

ion-card-content h2 {
  margin-top: 2px;
  margin-bottom: 2px;

  font-size: 1rem;
}

ion-card-content h3,
ion-card-content h4,
ion-card-content h5,
ion-card-content h6 {
  margin-top: 2px;
  margin-bottom: 2px;

  font-size: 0.875rem;
}
```

---------

Co-authored-by: Brandy Smith <[email protected]>

Issue number: N/A

---------

## What is the current behavior?
The Datetime component breaks CSP rules due to the following:

1. Datetime is using `ion-buttons` which uses `scoped` encapsulation.
2. When using the `ionic` theme, it imports Phosphor icons as data URIs, which are blocked by `connect-src 'self' blob:`.

## What is the new behavior?
- Remove all usages of `ion-buttons`, removing the dependency on a scoped component
- Updates the styling to account for the removal of `ion-buttons`
- Updates `ion-button` to change its styles based on being inside of an `ion-datetime`

Phosphor icons have not been removed because there is a workaround for it and we will remove its usage across all components in future work.

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

This shouldn't cause breaking changes but because we are no longer recommending users use `ion-buttons` with custom buttons I am marking it as a breaking change.

BREAKING CHANGE:

The `ion-buttons` component has been removed from the internal implementation of `ion-datetime` and is no longer required when passing custom buttons to the `slot="buttons"`. When providing custom buttons, use a `div` element instead of `ion-buttons`. While existing code using `ion-buttons` may continue to work visually, future updates to the `ion-buttons` component may cause any styles you rely on to break.

---------

Co-authored-by: Brandy Smith <[email protected]>

Issue number: internal

---------

## What is the current behavior?
Textarea uses `scoped` encapsulation. This causes issues with CSP compatibility and is inconsistent with our goal of having all components use Shadow DOM.

## What is the new behavior?
- Converts `ion-textarea` to `shadow` with `formAssociated: true`
- Adds shadow parts for inner elements
- Adds and updates existing e2e tests in core for textarea
- Updated Angular test app to target textarea shadowRoot and updated lazy forms test to include textarea (standalone already has these)
- Updated React & Vue test apps to target textarea shadowRoot and added validation tests
- Improves focus behavior inside of a popover so that it is no longer required to tab twice to get to the textarea in any browser

## Does this introduce a breaking change?
- [x] Yes
- [ ] No

BREAKING CHANGE:

Textarea has been converted to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).

If you were targeting the internals of `ion-textarea` in your CSS, you will need to target the `container`, `label`, `native`, `supporting-text`, `helper-text`, `error-text`, `counter`, or `bottom` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables.

---------

Co-authored-by: Brandy Smith <[email protected]>

…#30884)

Issue number: internal

---------

## What is the current behavior?
Input Otp uses `scoped` encapsulation. This causes issues with CSP compatibility and is inconsistent with our goal of having all components use Shadow DOM.

## What is the new behavior?
- Converts `ion-input-otp` to `shadow` with `formAssociated: true`
- Adds shadow parts for inner elements

## Does this introduce a breaking change?
- [x] Yes
- [ ] No

BREAKING CHANGE:

Input Otp has been converted to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).

If you were targeting the internals of `ion-input-otp` in your CSS, you will need to target the `group`, `container`, `native`, `separator` or `description` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables.

---------

Co-authored-by: Brandy Smith <[email protected]>

… theme (#30957)

Issue number: resolves internal

---------

## What is the current behavior?
- The `rows` attribute is not respected in `ion-textarea` when lower
than 3. Some paddings and margins were applied in incorrect places in
the `ionic` theme.

## What is the new behavior?
- The ionic theme has the following changes:
- `.textarea-size-*` classes stopped forcing the `min-height` allowing
`rows` to adjust the height
- Added an end-to-end test file `textarea.e2e.ts` to verify that the
`rows` attribute is respected across different values, sizes, and with
auto-grow enabled.
- Introduced a new HTML test page (`index.html`) for visual/manual
testing of `ion-textarea` with different `rows` and `size` combinations,
and with auto-grow enabled.

## Does this introduce a breaking change?
- [ ] Yes
- [x] No

## Other information

- [Textarea:
Autogrow](https://ionic-framework-git-rou-12443-v4-ionic1.vercel.app/src/components/textarea/test/autogrow?ionic:theme=ionic)
- [Textarea:
Basic](https://ionic-framework-git-rou-12443-v4-ionic1.vercel.app/src/components/textarea/test/basic?ionic:theme=ionic)
- [Textarea:
Rows](https://ionic-framework-git-rou-12443-v4-ionic1.vercel.app/src/components/textarea/test/rows?ionic:theme=ionic)
- [Textarea:
Size](https://ionic-framework-git-rou-12443-v4-ionic1.vercel.app/src/components/textarea/test/size?ionic:theme=ionic)
- [Textarea:
Shape](https://ionic-framework-git-rou-12443-v4-ionic1.vercel.app/src/components/textarea/test/shape?ionic:theme=ionic)

---------

Co-authored-by: ionitron <[email protected]>
Co-authored-by: Maria Hutt <[email protected]>

Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When an icon was placed within a chip, the icon size was the same
regardless of the chip size.

## What is the new behavior?
Scales the size of the icon based on design specifications.

## 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. -->

…0976)

Issue number: resolves internal

---------

## What is the current behavior?
When radio buttons are added after the radio group has already been
initialised (e.g., as a result of a fetch), the `tabindex` of the radio
buttons is not updated.

## What is the new behavior?
When a radio button is added or removed, the radio group updates the
`tabindex` of its radio buttons in accordance with the existing logic.

## Does this introduce a breaking change?

- [ ] Yes
- [ ] No

## Other information

[Current Behavior
Example](https://stackblitz.com/edit/mjr76e54?file=src%2FApp.tsx,src%2Fmain.tsx)

Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The Ionic Textarea component, has a margin to avoid the textarea element
to overlap the label when the label placement is stacked. However, as
the ionic theme already has other styles that safeguard the label, this
margin, is causing a misalignment of the content:
<img width="457" height="174" alt="image"
src="https://github.com/user-attachments/assets/f04dce93-57f6-492f-aa54-5f037aaf943f"
/>

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- In the new behavior, the corresponding CSS was moved in to the
`textarea.native.scss` file that is inherited by both ios and md themes,
leaving ionic theme unaffected.
- After the change:
<img width="457" height="174" alt="image"
src="https://github.com/user-attachments/assets/ef9cbb22-b5d2-4845-a01d-e0540fe1df70"
/>

## 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. -->

---------

Co-authored-by: ionitron <[email protected]>

Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
The badge positioning for the tab bar did not match our design
specifications.
 
## What is the new behavior?
Updates the tab bar badge to be positioned according to design
specifications.

## 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. -->


[Preview](https://ionic-framework-git-rou-12460-fix-badge-positioning-ionic1.vercel.app/src/components/tab-bar/test/basic/?ionic:theme=ionic)

---------

Co-authored-by: ionitron <[email protected]>

…main

Syncing with `main`

Issue number: resolves #

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
Now due to spinner elements animations (scale and transforms) when
inside a certain contexts such as `ion-col` **spinner** is forcing those
elements to have a scroll.

## What is the new behavior?
Now there is no scroll due the mentioned above.

## 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. -->

Issue number: resolves #

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
Now target area `min-height` for Ionic theme is set to the default size
token size, which causes an issue when button size is **small**.

## What is the new behavior?
By changing this to **inherit** target area will have now the parent
height.


## 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. -->