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. -->
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 internal
---------
## What is the current behavior?
When an accordion item was set as disabled, it was still possible to
focus using keyboard navigation.
## What is the new behavior?
When an accordion item is disabled, `tabindex` is set as -1 to stop
being focusable using the keyboard navigation.
## Does this introduce a breaking change?
- [ ] Yes
- [ ] No
## Other information
[preview](https://ionic-framework-qznd9tqne-ionic1.vercel.app/src/components/accordion-group/test/states/)
---------
Co-authored-by: Maria Hutt <maria.hutt@outsystems.com>
Issue number: resolves#30735
---------
## What is the current behavior?
Toast's wrapper and content divs do not have part attributes.
## What is the new behavior?
- Adds `wrapper` and `content` parts to Toast.
## 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
This PR was originally opened by @Hurubon here in #30737. It was lost in
`feature-8.8` due to a bad merge, so this PR is to re-apply this feature
so it can go out in 8.8.1 (it was originally supposed to go out in
8.8.0)
Co-authored-by: Hurubon <58346722+Hurubon@users.noreply.github.com>
Co-authored-by: Hurubon <58346722+Hurubon@users.noreply.github.com>
Issue number: internal
---------
## What is the current behavior?
The sheet and card modal can be dragged to view content. However, there
are no events that determine when drag has started or ended.
## What is the new behavior?
- Added drag events for sheet and card modal: `ionDragStart`, `ionDragMove`, `ionDragEnd`
- Added a drag interface
- Added tests
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: Shane <shane@shanessite.net>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Issue number: resolves#29862
---------
## What is the current behavior?
Range exposes a single part for both knobs & pins. This makes it impossible to style the knobs/pins differently when dual knobs is enabled.
## What is the new behavior?
- Fixes a bug where the knobs would swap A & B when they cross over each other
- Fixes the focus behavior so that dual knobs act the same as a single knob range when focusing a knob
- Adds the following classes to the host element when `dualKnobs` is enabled:
- `range-dual-knobs`
- `range-pressed-a` when the knob with name A is pressed
- `range-pressed-b` when the knob with name B is pressed
- `range-pressed-lower` when the lower knob is pressed
- `range-pressed-upper` when the upper knob is pressed
- Adds parts for the following:
- `knob-handle-a` — The container for the knob with the static `A` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
- `knob-handle-b` — The container for the knob with the static `B` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
- `knob-handle-lower` — The container for the knob whose current `value` is `lower` when `dualKnobs` is `true`. The lower and upper parts swap which knob handle they refer to when the knobs cross.
- `knob-handle-upper` — The container for the knob whose current `value` is `upper` when `dualKnobs` is `true`. The lower and upper parts swap which knob handle they refer to when the knobs cross.
- `pin-a` — The value indicator above the knob with the static `A` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
- `pin-b` — The value indicator above the knob with the static `B` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
- `pin-lower` — The value indicator above the knob whose current `value` is `lower` when `dualKnobs` is `true`. The lower and upper parts swap which pin they refer to when the knobs cross.
- `pin-upper` — The value indicator above the knob whose current `value` is `upper` when `dualKnobs` is `true`. The lower and upper parts swap which pin they refer to when the knobs cross.
- `knob-a` — The visual knob for the static `A` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
- `knob-b` — The visual knob for the static `B` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
- `knob-lower` — The visual knob whose current `value` is `lower` when `dualKnobs` is `true`. The lower and upper parts swap which knob they refer to when the knobs cross.
- `knob-upper` — The visual knob whose current `value` is `upper` when `dualKnobs` is `true`. The lower and upper parts swap which knob they refer to when the knobs cross.
- `activated` — Added to the knob-handle, knob, and pin when the knob is active. Only one set has this part at a time when `dualKnobs` is `true`.
- `focused` — Added to the knob-handle, knob, and pin that currently has focus. Only one set has this part at a time when `dualKnobs` is `true`.
- `hover` — Added to the knob-handle, knob, and pin when the knob has hover. Only one set has this part at a time when `dualKnobs` is `true`.
- `pressed` — Added to the knob-handle, knob, and pin that is currently being pressed to drag. Only one set has this part at a time when `dualKnobs` is `true`.
- Adds e2e tests for the following:
- customizing label part
- customizing bar parts
- customizing pin parts
- customizing tick parts
- customizing knob parts
- customizing dual knob a & b parts
- customizing dual knob lower & upper parts
- verifies that a & b parts stay on the original elements but lower & upper parts swap when the values swap
- Adds spec tests for the following:
- css classes
- value state classes
- boolean property classes
- pressed state classes
- shadow parts
- static shadow parts
- verifies the shadow parts exist based on the existence of certain range properties
- state shadow parts
- verifies the shadow parts exist based on the state of the range knob (pressed, focused, activated, hover)
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
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 <hi@ionicframework.com>
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 <hi@ionicframework.com>
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: N/A
---------
## What is the current behavior?
The inner structural element of list-header is not exposed as a shadow part, preventing users from being able to customize its styles directly.
## What is the new behavior?
- Exposes `inner` shadow part
- Adds e2e test coverage for customizing the shadow part
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: N/A
---------
## What is the current behavior?
The inner structural elements of item-option are not exposed as shadow parts, preventing users from being able to customize their styles directly.
## What is the new behavior?
- Exposes `inner` and `container` shadow parts
- Adds e2e test coverage for customizing the shadow parts
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: N/A
---------
## What is the current behavior?
The inner structural elements of item-divider are not exposed as shadow parts, preventing users from being able to customize their styles directly.
## What is the new behavior?
- Exposes `inner` and `container` shadow parts
- Adds e2e test coverage for customizing the shadow parts
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: N/A
---------
## What is the current behavior?
The inner structural elements of item are not exposed as shadow parts, preventing users from being able to customize their styles directly.
## What is the new behavior?
- Exposes `inner` and `container` shadow parts
- Adds e2e test coverage for customizing the shadow parts
- Removes css variables test, combining it with the shadow parts test
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Adds guidelines document establishing standardized naming conventions for CSS Shadow Parts in Ionic Framework components.
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
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. -->
resolves#30279resolves#30359
## What is the current behavior?
While Ionic's `stencil.config.ts` sets `experimentalSlotFixes: true`,
the fixes never get applied at runtime. Ionic is using an external
runtime, so Ionic components import `defineCustomElement` from
`@stencil/core/internal/client` at runtime and this code has no
awareness of the project's stencil configuration.
This leads to a `NotFoundError` (Failed to execute 'removeChild' on
'Node') when filtering or dynamically removing radios in an
`ion-radio-group`. The error occurs because `ion-radio-group` wraps its
slotted content in an internal `<div>`.
## What is the new behavior?
By setting `externalRuntime: false`, Stencil generates a
project-specific file with `defineCustomElement` that components import.
This file has the project's build settings baked in, correctly applying
slot fixes.
Additionally, the internal wrapper `<div>` around the slotted content in
`ion-radio-group` is removed. With slot fixes correctly applied and the
wrapper removed, radios can be filtered or dynamically removed without
triggering `NotFoundError` or `DOMExceptions`.
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
## Other information
External Runtime is enabled by default and designed for projects that
import Stencil components from multiple sources. This is flawed because
those components will not be running with the runtime settings for which
they were made.
Issue number: resolves#24524
---------
<!-- 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?
There is no way to know when the refresher has fully returned to its
inactive state after a pull gesture. The existing `ionStart` event fires
when pulling begins, but there is no corresponding end event. Watching
the progress property is insufficient because hitting zero doesn’t
necessarily mean the user has completed the pull gesture.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Two new events are added to the refresher component:
- `ionPullStart`: Emitted when the user begins pulling down (same as
`ionStart`, which is now deprecated)
- `ionPullEnd`: Emitted when the refresher returns to inactive state,
with a `reason` property of `'complete'` or `'cancel'` indicating
whether the refresh operation completed successfully or was cancelled
This allows you to know both when the user is no longer touching the
screen AND when the refresher is ready to be pulled again.
## 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. -->
Test page:
https://ionic-framework-git-fw-6591-ionic1.vercel.app/src/components/refresher/test/basic/index.html
Current dev build:
```
8.7.17-dev.11770319814.172b4f50
```
---------
Co-authored-by: Patrick McDonald <764290+WhatsThatItsPat@users.noreply.github.com>
Issue number: resolves#30860
## What is the current behavior?
We have flaky tests in an ionic angular project that root cause are not
cleaned up timeouts.
I commented out the timeout in the searchbar componentWillLoad method.
and after several runs no flaky tests at all.
My guess -> test runs faster than the 300ms it takes til the timeout
runs. Everything is cleaned up, but not the ionic timeouts (i think i
saw something similar in other components)
## What is the new behavior?
Timeouts are cleaned on disconnect.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
Testrunner is vitest + angular 20 and latest ionic version 8.x
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?
When a CanDeactivate guard cancels a back navigation (like when it's
initiated by ion-back-button), the NavController’s explicit direction
state (back) is never consumed because consumeTransition() is not called
for canceled navigations. This stale direction leaks into the next
forward navigation, causing it to be incorrectly treated as a back/root
navigation.
## What is the new behavior?
The NavController now listens for NavigationCancel and NavigationError
router events and resets direction, animated, and animationBuilder back
to their defaults. This ensures stale state from a canceled navigation
does not affect subsequent navigations. The reset puts the NavController
into 'auto' mode, which correctly uses guessDirection for the next
navigation.
## 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
Current dev build:
```
8.7.18-dev.11771020096.1ca03a6d
```
Issue number: resolves#28411
---------
<!-- 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?
When a modal is displayed on tablet-sized screens (>= 768px × >= 600px),
the `--ion-safe-area-*` CSS variables are explicitly set to 0px. This
was intended for inset modals that don't touch screen edges, but it
breaks safe area handling on newer iPads with Face ID/home indicators,
causing content to overlap with system UI elements.
## What is the new behavior?
Modals now dynamically handle safe-area insets based on their type and
position. This has to be done because modals that don't touch the edges
cannot have a safe area applied (because it will add unnecessary
padding), but modals that do touch the edges need to apply safe area
correctly or the edges will be obstructed by whatever is in the safe
area.
## 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. -->
[Modals test
page](https://ionic-framework-git-fw-6830-2-ionic1.vercel.app/src/components/modal/test/safe-area/index.html)
[Popovers test
page](https://ionic-framework-git-fw-6830-2-ionic1.vercel.app/src/components/popover/test/safe-area/index.html)
Current dev build:
```
8.7.18-dev.11770674094.18396f54
```
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#30290
---------
## What is the current behavior?
The segment view swipe gesture can only be disabled by adding the `disabled` property and setting `opacity: 1`.
## What is the new behavior?
- Adds a new property, `swipeGesture`, to disable swiping on the segment view
- Adds an e2e test which verifies the styles blocking the swipe are correctly applied when `swipeGesture` is `false`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
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 <6577830+brandyscarney@users.noreply.github.com>
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 <6577830+brandyscarney@users.noreply.github.com>
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 <6577830+brandyscarney@users.noreply.github.com>
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 <6577830+brandyscarney@users.noreply.github.com>
