feat: add CSS theming variables for focused & hover elements

# Feature Request

**Ionic version:**
`master`

Branch created with the beginning of the non-breaking changes: https://github.com/ionic-team/ionic/tree/non-breaking-button-states

**Describe the Feature Request**
Add hover, focused, activated state to missing button components.

The following pull request made some major changes to the way we set hover, activated & focused: https://github.com/ionic-team/ionic/pull/19440

This allows users to customize the button by changing the color once and not having to know the opacity of each state. That change only applied to components with existing hover states due to it being breaking, the following need to be added:

| Name | Existing Hover (`master`) | Updated Hover? | Updated Activated? | Updated Focused? |
| -----------------------| ------------------------- | ------------------------ | ------------------------ | ------------------------ |
| Alert (Buttons) | :white_large_square: | :white_large_square: | :white_large_square: | :white_large_square: |
| Card | :white_large_square: | :white_large_square: | :white_large_square: | :white_large_square: |
| Checkbox | :white_large_square: | :white_large_square: | :white_large_square: | :white_large_square: |
| Chip | :white_large_square: | :white_large_square: | :white_large_square: | :white_large_square: |
| Item Option | :white_large_square: | :white_check_mark: | :white_large_square: | :white_large_square: |
| Picker (Buttons) | :white_large_square: | :white_check_mark: | :white_large_square: | :white_large_square: |
| Radio | :white_large_square: | :white_large_square: | :white_large_square: | :white_large_square: |
| Tab Button | :white_large_square: | :white_large_square: | :white_large_square: | :white_check_mark: |
| Toast (Buttons) | :white_large_square: | :white_large_square: | :white_large_square: | :white_large_square: |
| Toggle | :white_large_square: | :white_large_square: | :white_large_square: | :white_large_square: |

* Alert needs hovers on the buttons and tappable items
* Router link is just an anchor, should it have an underline or follow MD design for clear buttons?
* Buttons (in overlays) should be named `--button-background-hover`

### Activated Components

Components that have `--background-activated` & `--color-activated` or `--button-background-activated` & `--button-color-activated` for overlays.

- action-sheet (MISSING `--button-color-activated`)
- button
- fab-button
- item

### Hover Components

Components that have `--background-hover` & `--color-hover` or `--button-background-hover` & `--button-color-hover` for overlays.

- action-sheet
- back-button
- button
- fab-button
- item-option (MISSING `--color-hover`)
- item
- menu-button
- picker (MISSING `--button-color-hover`)
- segment-button

### Focused Components

Components that have `--background-focused` & `--color-focused` or `--button-background-focused` & `--button-color-focused` for overlays.

- back-button
- button
- fab-button
- item
- menu-button
- tab-button (MISSING `--color-focused`)

Review pull request #19440 and the listed activated, hover, and focused component states, starting with the components named in the issue. Compare the existing theme variables with the missing entries and the non-breaking-button-states branch. Done means the specified components expose the requested state variables, including the overlay button names and noted exceptions.

Written by the indexing model from the issue text.