Merge branch 'feature-7.5' into FW-4612

Issue number: resolves #18974

---------

<!-- 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 multiple menus on the same `side` are registered, all but the most
recent menu are disabled. For example, if a user starts on PageA with a
`start` menu and then navigates to PageB which also has a `start` menu,
then the menu on PageA will be disabled. The problem is that if users
navigates back to PageA they will be unable to open the menu on that
view because it is still disabled. This behavior impacts any Ionic
developer trying to open a menu whether by calling the `open` method on
the menu itself or on the `menuController`.

After discussing with the team, we believe the original intent of this
behavior was to prevent users from accidentally opening the wrong menu
when calling `menuController.open('start')`. This API allows developers
to reference a menu by side, and since it's possible to have multiple
menus on the same side it's also possible to open the wrong menu when
referencing by side only.

However, this API starts to break down pretty quickly in a navigation
scenario.

Sample Repo: https://github.com/liamdebeasi/multiple-menu-bug-repro

## Scenario 1: Referencing Menu by Side

1. On the "home" route click "Open 'start' menu". Observe that the home
page menu opens.
2. Close the menu and click "Go to Page Two".
3. On the "page-two" route click "Open 'start' menu". Observe that the
page two menu opens.
4. Go back to "home".
5. Click "Open 'start' menu". Observe that nothing happens.
6. Click "Enable and Open 'start'" Menu". Observe that the home menu
opens.

## Scenario 2: Referencing Menu by ID

1. On the "home" route click "Open '#menu1' menu". Observe that the home
page menu opens.
2. Close the menu and click "Go to Page Two".
3. On the "page-two" route click "Open '#menu2' menu". Observe that the
page two menu opens.
4. Go back to "home".
5. Click "Open '#menu1' menu". Observe that nothing happens.
6. Click "Enable and Open '#menu1'" Menu". Observe that the home menu
opens.

## Scenario 3: Using 3 or more menus even when enabling menus

1. On the "home" route click "Open 'start' menu". Observe that the home
page menu opens.
2. Close the menu and click "Go to Page Two".
3. On the "page-two" route click "Open 'start' menu". Observe that the
page two menu opens.
4. Close the menu and click "Go to Page Three"
5. On the "page-three" route click "Open 'start' menu". Observe that the
page three menu opens.
6. Go back to "page-two".
8. Click "Open 'start' menu". Observe that nothing happens.
9. Click "Enable and Open 'start' Menu". Observe that nothing happens.

The menu controller attempts to find an enabled menu on the specified
side:
a04a11be35/core/src/utils/menu-controller/index.ts (L79C12-L79C12)

Step 6 is where this breaks down. In this scenario, the menus on "home"
and "page-two" are disabled. This leads menu controller to use its
fallback which tries to get the first menu registered on the specified
side:
a04a11be35/core/src/utils/menu-controller/index.ts (L86)

This means that the menu controller would attempt to open the "home"
menu even though the user is on "page-two" (because the start menu on
"home" was the first to be registered).

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

- Menus are no longer automatically disabled when a new menu on the same
side is registered
- Referencing menus by side when multiple menus with that side exist in
the DOM will cause a warning to be logged

This change has a couple implications:

1. Developers no longer need to manually enable a menu as noted in
https://ionicframework.com/docs/api/menu#multiple-menus. Note that
continuing to manually enable the menus will not cause any adverse side
effects and will effectively be a no-op.
2. Developers using the menuController to open a menu based on "side"
may end up having the wrong menu get opened.

Example before to this change:

1. Start on PageA with a `start` menu. Calling
`menuController.open('start')` opens the menu on PageA.
2. Go to PageB with a `start` menu. Calling
`menuController.open('start')` opens the menu on PageB because the menu
on PageA is disabled.

Example after to this change:

1. Start on PageA with a `start` menu. Calling
`menuController.open('start')` opens the menu on PageA.
2. Go to PageB with a `start` menu. Calling
`menuController.open('start')` attempts to opens the menu on PageA
because both menus are enabled. However, since PageA is hidden nothing
will appear to happen.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

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

I manually verified that removing the Angular Universal code does not
regress the behavior fixed in
https://github.com/ionic-team/ionic-framework/pull/27814. The menu is
never automatically disabled, so the bug does not happen.

This is a partial fix for
https://github.com/ionic-team/ionic-framework/issues/18683. Properly
fixing this requires another change which is out of scope for this work.

.github/workflows/stencil-nightly.yml

@@ -8,7 +8,12 @@ on:
     # at 6:00 UTC (6:00 am UTC)
     - cron: '00 06 * * 1-5'
   workflow_dispatch:
-    # allows for manual invocations in the GitHub UI
+    inputs:
+      npm_release_tag:
+        required: true
+        type: string
+        description: What version should be pulled from NPM?
+        default: nightly
 
 # When pushing a new commit we should
 # cancel the previous test run to not
@@ -24,7 +29,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/workflows/actions/build-core-stencil-prerelease
         with:
-          stencil-version: nightly
+          stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
 
   test-core-clean-build:
     needs: [build-core-with-stencil-nightly]
@@ -47,7 +52,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/workflows/actions/test-core-spec
         with:
-          stencil-version: nightly
+          stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
 
   test-core-screenshot:
     strategy:

CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
+
+
+### Bug Fixes
+
+* **fab-button:** position is correct with custom sizes ([#28195](https://github.com/ionic-team/ionic-framework/issues/28195)) ([eb41b55](https://github.com/ionic-team/ionic-framework/commit/eb41b556b57c97139b9c36dc3e3be3711d8afaca)), closes [#22564](https://github.com/ionic-team/ionic-framework/issues/22564)
+* **range:** knob positions are correct on initial render with custom elements build ([#28257](https://github.com/ionic-team/ionic-framework/issues/28257)) ([ac2c8e6](https://github.com/ionic-team/ionic-framework/commit/ac2c8e6c22da4d0d8224def24ddef56ee9d26246)), closes [#25444](https://github.com/ionic-team/ionic-framework/issues/25444)
+
+
+
+
+
+## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
+
+
+### Bug Fixes
+
+* **react:** Nav unmounts component while invoking popTo or popToRoot ([#27821](https://github.com/ionic-team/ionic-framework/issues/27821)) ([0edcb2c](https://github.com/ionic-team/ionic-framework/commit/0edcb2cd85133ae8c304c53c37ca829e5fbad447)), closes [#27798](https://github.com/ionic-team/ionic-framework/issues/27798)
+* **title:** large title uses custom font on transition ([#28231](https://github.com/ionic-team/ionic-framework/issues/28231)) ([71a7af0](https://github.com/ionic-team/ionic-framework/commit/71a7af0f52fe62937b1dea1ca2739e78801a2a6d))
+
+
+
+
+
+## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
+
+
+### Bug Fixes
+
+* **overlays:** correctly re-add root to accessibility tree ([#28183](https://github.com/ionic-team/ionic-framework/issues/28183)) ([81714d4](https://github.com/ionic-team/ionic-framework/commit/81714d45bd97f0ba91729959b60a0dc1d1d06533)), closes [#28180](https://github.com/ionic-team/ionic-framework/issues/28180)
+* **radio,toggle,checkbox,select:** padded space is clickable in items ([#28136](https://github.com/ionic-team/ionic-framework/issues/28136)) ([5b7e422](https://github.com/ionic-team/ionic-framework/commit/5b7e422dc0bfd4d58fb31f62715af47e62dabb57)), closes [#27169](https://github.com/ionic-team/ionic-framework/issues/27169)
+* **range:** knob is not cut off in item with modern syntax ([#28199](https://github.com/ionic-team/ionic-framework/issues/28199)) ([0104d89](https://github.com/ionic-team/ionic-framework/commit/0104d899270d73e16f2850a5fd7d2ba25a9e7ef0)), closes [#27199](https://github.com/ionic-team/ionic-framework/issues/27199)
+* **scroll-assist:** improve input scroll accuracy with native resizing ([#28169](https://github.com/ionic-team/ionic-framework/issues/28169)) ([b5c736f](https://github.com/ionic-team/ionic-framework/commit/b5c736f5ac829efebedf3256ddf77ab3daa7a5f6)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
+* **scroll-assist:** re-run when keyboard changes ([#28174](https://github.com/ionic-team/ionic-framework/issues/28174)) ([3f06da4](https://github.com/ionic-team/ionic-framework/commit/3f06da4cfc0d59c658e17e09ccb1ea28a29339f9)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
+
+
+
+
+
 # [7.4.0](https://github.com/ionic-team/ionic-framework/compare/v7.3.4...v7.4.0) (2023-09-14)
 
 

core/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
+
+
+### Bug Fixes
+
+* **fab-button:** position is correct with custom sizes ([#28195](https://github.com/ionic-team/ionic-framework/issues/28195)) ([eb41b55](https://github.com/ionic-team/ionic-framework/commit/eb41b556b57c97139b9c36dc3e3be3711d8afaca)), closes [#22564](https://github.com/ionic-team/ionic-framework/issues/22564)
+* **range:** knob positions are correct on initial render with custom elements build ([#28257](https://github.com/ionic-team/ionic-framework/issues/28257)) ([ac2c8e6](https://github.com/ionic-team/ionic-framework/commit/ac2c8e6c22da4d0d8224def24ddef56ee9d26246)), closes [#25444](https://github.com/ionic-team/ionic-framework/issues/25444)
+
+
+
+
+
+## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
+
+
+### Bug Fixes
+
+* **title:** large title uses custom font on transition ([#28231](https://github.com/ionic-team/ionic-framework/issues/28231)) ([71a7af0](https://github.com/ionic-team/ionic-framework/commit/71a7af0f52fe62937b1dea1ca2739e78801a2a6d))
+
+
+
+
+
+## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
+
+
+### Bug Fixes
+
+* **overlays:** correctly re-add root to accessibility tree ([#28183](https://github.com/ionic-team/ionic-framework/issues/28183)) ([81714d4](https://github.com/ionic-team/ionic-framework/commit/81714d45bd97f0ba91729959b60a0dc1d1d06533)), closes [#28180](https://github.com/ionic-team/ionic-framework/issues/28180)
+* **radio,toggle,checkbox,select:** padded space is clickable in items ([#28136](https://github.com/ionic-team/ionic-framework/issues/28136)) ([5b7e422](https://github.com/ionic-team/ionic-framework/commit/5b7e422dc0bfd4d58fb31f62715af47e62dabb57)), closes [#27169](https://github.com/ionic-team/ionic-framework/issues/27169)
+* **range:** knob is not cut off in item with modern syntax ([#28199](https://github.com/ionic-team/ionic-framework/issues/28199)) ([0104d89](https://github.com/ionic-team/ionic-framework/commit/0104d899270d73e16f2850a5fd7d2ba25a9e7ef0)), closes [#27199](https://github.com/ionic-team/ionic-framework/issues/27199)
+* **scroll-assist:** improve input scroll accuracy with native resizing ([#28169](https://github.com/ionic-team/ionic-framework/issues/28169)) ([b5c736f](https://github.com/ionic-team/ionic-framework/commit/b5c736f5ac829efebedf3256ddf77ab3daa7a5f6)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
+* **scroll-assist:** re-run when keyboard changes ([#28174](https://github.com/ionic-team/ionic-framework/issues/28174)) ([3f06da4](https://github.com/ionic-team/ionic-framework/commit/3f06da4cfc0d59c658e17e09ccb1ea28a29339f9)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
+
+
+
+
+
 # [7.4.0](https://github.com/ionic-team/ionic-framework/compare/v7.3.4...v7.4.0) (2023-09-14)
 
 

core/api.txt

@@ -394,7 +394,7 @@ ion-datetime,prop,disabled,boolean,false,false,false
 ion-datetime,prop,doneText,string,'Done',false,false
 ion-datetime,prop,firstDayOfWeek,number,0,false,false
 ion-datetime,prop,highlightedDates,((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined,undefined,false,false
-ion-datetime,prop,hourCycle,"h12" | "h23" | undefined,undefined,false,false
+ion-datetime,prop,hourCycle,"h11" | "h12" | "h23" | "h24" | undefined,undefined,false,false
 ion-datetime,prop,hourValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,prop,isDateEnabled,((dateIsoString: string) => boolean) | undefined,undefined,false,false
 ion-datetime,prop,locale,string,'default',false,false
@@ -1445,6 +1445,7 @@ ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefin
 ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,false
 ion-toast,prop,mode,"ios" | "md",undefined,false,false
 ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false
+ion-toast,prop,positionAnchor,HTMLElement | string | undefined,undefined,false,false
 ion-toast,prop,translucent,boolean,false,false,false
 ion-toast,prop,trigger,string | undefined,undefined,false,false
 ion-toast,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.4.0",
+  "version": "7.4.3",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,30 +31,30 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.2.1",
-    "ionicons": "7.1.0",
+    "@stencil/core": "^4.4.0",
+    "ionicons": "^7.1.2",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.7.3",
-    "@capacitor/core": "^5.4.0",
+    "@capacitor/core": "^5.4.2",
     "@capacitor/haptics": "^5.0.6",
     "@capacitor/keyboard": "^5.0.6",
     "@capacitor/status-bar": "^5.0.6",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@jest/core": "^27.5.1",
-    "@playwright/test": "^1.38.0",
+    "@playwright/test": "^1.38.1",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.8.2",
     "@stencil/react-output-target": "^0.5.3",
-    "@stencil/sass": "^3.0.5",
+    "@stencil/sass": "^3.0.6",
     "@stencil/vue-output-target": "^0.8.6",
     "@types/jest": "^27.5.2",
     "@types/node": "^14.6.0",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.2",
+    "@typescript-eslint/parser": "^6.7.2",
     "clean-css-cli": "^5.6.1",
     "domino": "^2.1.6",
     "eslint": "^7.32.0",
@@ -69,8 +69,7 @@
     "sass": "^1.26.10",
     "serve": "^14.0.1",
     "stylelint": "^13.13.1",
-    "stylelint-order": "^4.1.0",
-    "typescript": "^4.0.5"
+    "stylelint-order": "^4.1.0"
   },
   "scripts": {
     "build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
@@ -95,6 +94,7 @@
     "test.spec": "stencil test --spec --max-workers=2",
     "test.spec.debug": "npx --node-arg=\"--inspect-brk\" stencil test --spec",
     "test.e2e": "npx playwright test",
+    "test.e2e.update-snapshots": "npm run test.e2e -- --update-snapshots",
     "test.watch": "jest --watch --no-cache",
     "test.treeshake": "node scripts/treeshaking.js dist/index.js",
     "validate": "npm run lint && npm run test && npm run build && npm run test.treeshake"

core/playwright.config.ts

@@ -60,7 +60,8 @@ const config: PlaywrightTestConfig = {
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   maxFailures: 0,
-  retries: 2,
+  /* Test retries help catch flaky tests on CI */
+  retries: process.env.CI ? 2 : 0,
   reportSlowTests: null,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,

core/src/components.d.ts

@@ -15,7 +15,7 @@ import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 import { CounterFormatter } from "./components/item/item-interface";
@@ -39,7 +39,7 @@ import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./com
 import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
 import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
-import { ToastButton, ToastLayout, ToastPosition } from "./components/toast/toast-interface";
+import { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions } from "./components/toast/toast-interface";
 import { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
 export { AccordionGroupChangeEventDetail } from "./components/accordion-group/accordion-group-interface";
 export { AnimationBuilder, AutocompleteTypes, Color, ComponentProps, ComponentRef, FrameworkDelegate, StyleEventDetail, TextFieldTypes } from "./interface";
@@ -51,7 +51,7 @@ export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 export { CounterFormatter } from "./components/item/item-interface";
@@ -75,7 +75,7 @@ export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./com
 export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
 export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
-export { ToastButton, ToastLayout, ToastPosition } from "./components/toast/toast-interface";
+export { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions } from "./components/toast/toast-interface";
 export { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
 export namespace Components {
     interface IonAccordion {
@@ -865,7 +865,7 @@ export namespace Components {
         /**
           * The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.
          */
-        "hourCycle"?: 'h23' | 'h12';
+        "hourCycle"?: DatetimeHourCycle;
         /**
           * Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.
          */
@@ -1336,6 +1336,7 @@ export namespace Components {
         "download": string | undefined;
         /**
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
+          * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -3156,9 +3157,13 @@ export namespace Components {
         "onWillDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
         "overlayIndex": number;
         /**
-          * The position of the toast on the screen.
+          * The starting position of the toast on the screen. Can be tweaked further using the `positionAnchor` property.
          */
         "position": ToastPosition;
+        /**
+          * The element to anchor the toast's position to. Can be set as a direct reference or the ID of the element. With `position="bottom"`, the toast will sit above the chosen element. With `position="top"`, the toast will sit below the chosen element. With `position="middle"`, the value of `positionAnchor` is ignored.
+         */
+        "positionAnchor"?: HTMLElement | string;
         /**
           * Present the toast overlay after it has been created.
          */
@@ -4888,7 +4893,7 @@ declare namespace LocalJSX {
         /**
           * The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.
          */
-        "hourCycle"?: 'h23' | 'h12';
+        "hourCycle"?: DatetimeHourCycle;
         /**
           * Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.
          */
@@ -5407,6 +5412,7 @@ declare namespace LocalJSX {
         "download"?: string | undefined;
         /**
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
+          * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -6974,6 +6980,7 @@ declare namespace LocalJSX {
          */
         "mode"?: "ios" | "md";
         "onIonTabBarChanged"?: (event: IonTabBarCustomEvent<TabBarChangedEventDetail>) => void;
+        "onIonTabBarLoaded"?: (event: IonTabBarCustomEvent<void>) => void;
         /**
           * The selected tab component
          */
@@ -7305,9 +7312,13 @@ declare namespace LocalJSX {
         "onWillPresent"?: (event: IonToastCustomEvent<void>) => void;
         "overlayIndex": number;
         /**
-          * The position of the toast on the screen.
+          * The starting position of the toast on the screen. Can be tweaked further using the `positionAnchor` property.
          */
         "position"?: ToastPosition;
+        /**
+          * The element to anchor the toast's position to. Can be set as a direct reference or the ID of the element. With `position="bottom"`, the toast will sit above the chosen element. With `position="top"`, the toast will sit below the chosen element. With `position="middle"`, the value of `positionAnchor` is ignored.
+         */
+        "positionAnchor"?: HTMLElement | string;
         /**
           * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */

core/src/components/alert/alert.tsx

@@ -228,6 +228,15 @@ export class Alert implements ComponentInterface, OverlayInterface {
   onKeydown(ev: any) {
     const inputTypes = new Set(this.processedInputs.map((i) => i.type));
 
+    /**
+     * Based on keyboard navigation requirements, the
+     * checkbox should not respond to the enter keydown event.
+     */
+    if (inputTypes.has('checkbox') && ev.key === 'Enter') {
+      ev.preventDefault();
+      return;
+    }
+
     // The only inputs we want to navigate between using arrow keys are the radios
     // ignore the keydown event if it is not on a radio button
     if (

core/src/components/alert/test/a11y/alert.e2e.ts

@@ -76,5 +76,22 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
       await expect(alertButton).toHaveAttribute('aria-labelledby', 'close-label');
       await expect(alertButton).toHaveAttribute('aria-label', 'close button');
     });
+
+    test('should not toggle the checkbox when pressing the Enter key', async ({ page }) => {
+      const didPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+      const button = page.locator('#checkbox');
+      await button.click();
+
+      await didPresent.next();
+
+      const alertCheckbox = page.locator('ion-alert .alert-checkbox');
+      const ariaChecked = await alertCheckbox.getAttribute('aria-checked');
+
+      await expect(alertCheckbox).toHaveAttribute('aria-checked', ariaChecked!);
+
+      await alertCheckbox.press('Enter');
+      await expect(alertCheckbox).toHaveAttribute('aria-checked', ariaChecked!);
+    });
   });
 });

core/src/components/alert/test/a11y/index.html

@@ -25,6 +25,7 @@
       <ion-button id="noMessage" expand="block" onclick="presentNoMessage()">No Message</ion-button>
       <ion-button id="customAria" expand="block" onclick="presentCustomAria()">Custom Aria</ion-button>
       <ion-button id="ariaLabelButton" expand="block" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
+      <ion-button id="checkbox" expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
     </main>
 
     <script>
@@ -94,6 +95,21 @@
           ],
         });
       }
+
+      function presentAlertCheckbox() {
+        openAlert({
+          header: 'Checkbox',
+          inputs: [
+            {
+              type: 'checkbox',
+              label: 'Checkbox 1',
+              value: 'value1',
+              checked: true,
+            },
+          ],
+          buttons: ['OK'],
+        });
+      }
     </script>
   </body>
 </html>

core/src/components/checkbox/checkbox.tsx

@@ -140,9 +140,8 @@ export class Checkbox implements ComponentInterface {
    */
   @Event() ionStyle!: EventEmitter<StyleEventDetail>;
 
-  // TODO(FW-3100): remove this
   connectedCallback() {
-    this.legacyFormController = createLegacyFormController(this.el);
+    this.legacyFormController = createLegacyFormController(this.el); // TODO(FW-3100): remove this
   }
 
   componentWillLoad() {
@@ -195,7 +194,7 @@ export class Checkbox implements ComponentInterface {
     });
   };
 
-  private toggleChecked = (ev: any) => {
+  private toggleChecked = (ev: Event) => {
     ev.preventDefault();
 
     this.setFocus();
@@ -211,6 +210,10 @@ export class Checkbox implements ComponentInterface {
     this.ionBlur.emit();
   };
 
+  private onClick = (ev: MouseEvent) => {
+    this.toggleChecked(ev);
+  };
+
   // TODO(FW-3100): run contents of renderCheckbox directly instead
   render() {
     const { legacyFormController } = this;
@@ -252,6 +255,7 @@ export class Checkbox implements ComponentInterface {
           [`checkbox-alignment-${alignment}`]: true,
           [`checkbox-label-placement-${labelPlacement}`]: true,
         })}
+        onClick={this.onClick}
       >
         <label class="checkbox-wrapper">
           {/*
@@ -333,6 +337,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
           'legacy-checkbox': true,
           interactive: true,
         })}
+        onClick={this.onClick}
       >
         <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
           {path}

core/src/components/checkbox/test/basic/checkbox.e2e.ts

@@ -83,5 +83,28 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await checkbox.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true));
       expect(ionChange).not.toHaveReceivedEvent();
     });
+
+    test('clicking padded space within item should click the checkbox', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-item>
+          <ion-checkbox>Size</ion-checkbox>
+        </ion-item>
+      `,
+        config
+      );
+      const itemNative = page.locator('.item-native');
+      const ionChange = await page.spyOnEvent('ionChange');
+
+      // Clicks the padded space within the item
+      await itemNative.click({
+        position: {
+          x: 5,
+          y: 5,
+        },
+      });
+
+      expect(ionChange).toHaveReceivedEvent();
+    });
   });
 });

core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts

@@ -67,5 +67,28 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       await checkbox.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true));
       await expect(ionChange).not.toHaveReceivedEvent();
     });
+
+    test('clicking padded space within item should click the checkbox', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-item>
+          <ion-checkbox legacy="true" value="my-checkbox"></ion-checkbox>
+        </ion-item>
+      `,
+        config
+      );
+      const itemNative = page.locator('.item-native');
+      const ionChange = await page.spyOnEvent('ionChange');
+
+      // Clicks the padded space within the item
+      await itemNative.click({
+        position: {
+          x: 5,
+          y: 5,
+        },
+      });
+
+      expect(ionChange).toHaveReceivedEvent();
+    });
   });
 });

core/src/components/content/content.tsx

@@ -1,6 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';
-import { componentOnReady } from '@utils/helpers';
+import { componentOnReady, hasLazyBuild } from '@utils/helpers';
 import { isPlatform } from '@utils/platform';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses, hostContext } from '@utils/theme';
@@ -34,6 +34,9 @@ export class Content implements ComponentInterface {
   private isMainContent = true;
   private resizeTimeout: ReturnType<typeof setTimeout> | null = null;
 
+  private tabsElement: HTMLElement | null = null;
+  private tabsLoadCallback?: () => void;
+
   // Detail is used in a hot loop in the scroll event, by allocating it here
   // V8 will be able to inline any read/write to it since it's a monomorphic class.
   // https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
@@ -115,15 +118,61 @@ export class Content implements ComponentInterface {
 
   connectedCallback() {
     this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
+
+    /**
+     * The fullscreen content offsets need to be
+     * computed after the tab bar has loaded. Since
+     * lazy evaluation means components are not hydrated
+     * at the same time, we need to wait for the ionTabBarLoaded
+     * event to fire. This does not impact dist-custom-elements
+     * because there is no hydration there.
+     */
+    if (hasLazyBuild(this.el)) {
+      /**
+       * We need to cache the reference to the tabs.
+       * If just the content is unmounted then we won't
+       * be able to query for the closest tabs on disconnectedCallback
+       * since the content has been removed from the DOM tree.
+       */
+      const closestTabs = (this.tabsElement = this.el.closest('ion-tabs'));
+      if (closestTabs !== null) {
+        /**
+         * When adding and removing the event listener
+         * we need to make sure we pass the same function reference
+         * otherwise the event listener will not be removed properly.
+         * We can't only pass `this.resize` because "this" in the function
+         * context becomes a reference to IonTabs instead of IonContent.
+         *
+         * Additionally, we listen for ionTabBarLoaded on the IonTabs
+         * instance rather than the IonTabBar instance. It's possible for
+         * a tab bar to be conditionally rendered/mounted. Since ionTabBarLoaded
+         * bubbles, we can catch any instances of child tab bars loading by listening
+         * on IonTabs.
+         */
+        this.tabsLoadCallback = () => this.resize();
+        closestTabs.addEventListener('ionTabBarLoaded', this.tabsLoadCallback);
+      }
+    }
   }
 
   disconnectedCallback() {
     this.onScrollEnd();
-  }
 
-  @Listen('appload', { target: 'window' })
-  onAppLoad() {
-    this.resize();
+    if (hasLazyBuild(this.el)) {
+      /**
+       * The event listener and tabs caches need to
+       * be cleared otherwise this will create a memory
+       * leak where the IonTabs instance can never be
+       * garbage collected.
+       */
+      const { tabsElement, tabsLoadCallback } = this;
+      if (tabsElement !== null && tabsLoadCallback !== undefined) {
+        tabsElement.removeEventListener('ionTabBarLoaded', tabsLoadCallback);
+      }
+
+      this.tabsElement = null;
+      this.tabsLoadCallback = undefined;
+    }
   }
 
   /**

core/src/components/datetime-button/datetime-button.tsx

@@ -9,7 +9,7 @@ import type { Color } from '../../interface';
 import type { DatetimePresentation } from '../datetime/datetime-interface';
 import { getToday } from '../datetime/utils/data';
 import { getMonthAndYear, getMonthDayAndYear, getLocalizedDateTime, getLocalizedTime } from '../datetime/utils/format';
-import { is24Hour } from '../datetime/utils/helpers';
+import { getHourCycle } from '../datetime/utils/helpers';
 import { parseDate } from '../datetime/utils/parse';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -218,7 +218,7 @@ export class DatetimeButton implements ComponentInterface {
      * warning in the console.
      */
     const firstParsedDatetime = parsedDatetimes[0];
-    const use24Hour = is24Hour(locale, hourCycle);
+    const computedHourCycle = getHourCycle(locale, hourCycle);
 
     this.dateText = this.timeText = undefined;
 
@@ -226,7 +226,7 @@ export class DatetimeButton implements ComponentInterface {
       case 'date-time':
       case 'time-date':
         const dateText = getMonthDayAndYear(locale, firstParsedDatetime);
-        const timeText = getLocalizedTime(locale, firstParsedDatetime, use24Hour);
+        const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
         if (preferWheel) {
           this.dateText = `${dateText} ${timeText}`;
         } else {
@@ -250,7 +250,7 @@ export class DatetimeButton implements ComponentInterface {
         }
         break;
       case 'time':
-        this.timeText = getLocalizedTime(locale, firstParsedDatetime, use24Hour);
+        this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
         break;
       case 'month-year':
         this.dateText = getMonthAndYear(locale, firstParsedDatetime);

core/src/components/datetime/datetime-interface.ts

@@ -34,3 +34,5 @@ export type DatetimeHighlightStyle =
 export type DatetimeHighlight = { date: string } & DatetimeHighlightStyle;
 
 export type DatetimeHighlightCallback = (dateIsoString: string) => DatetimeHighlightStyle | undefined;
+
+export type DatetimeHourCycle = 'h11' | 'h12' | 'h23' | 'h24';

core/src/components/datetime/datetime.tsx

@@ -19,6 +19,7 @@ import type {
   DatetimeHighlight,
   DatetimeHighlightStyle,
   DatetimeHighlightCallback,
+  DatetimeHourCycle,
 } from './datetime-interface';
 import { isSameDay, warnIfValueOutOfBounds, isBefore, isAfter } from './utils/comparison';
 import {
@@ -33,7 +34,7 @@ import {
   getCombinedDateColumnData,
 } from './utils/data';
 import { formatValue, getLocalizedTime, getMonthAndDay, getMonthAndYear } from './utils/format';
-import { is24Hour, isLocaleDayPeriodRTL, isMonthFirstLocale, getNumDaysInMonth } from './utils/helpers';
+import { isLocaleDayPeriodRTL, isMonthFirstLocale, getNumDaysInMonth, getHourCycle } from './utils/helpers';
 import {
   calculateHourFromAMPM,
   convertDataToISO,
@@ -422,7 +423,7 @@ export class Datetime implements ComponentInterface {
    * The hour cycle of the `ion-datetime`. If no value is set, this is
    * specified by the current locale.
    */
-  @Prop() hourCycle?: 'h23' | 'h12';
+  @Prop() hourCycle?: DatetimeHourCycle;
 
   /**
    * If `cover`, the `ion-datetime` will expand to cover the full width of its container.
@@ -2237,7 +2238,7 @@ export class Datetime implements ComponentInterface {
 
   private renderTimeOverlay() {
     const { hourCycle, isTimePopoverOpen, locale } = this;
-    const use24Hour = is24Hour(locale, hourCycle);
+    const computedHourCycle = getHourCycle(locale, hourCycle);
     const activePart = this.getActivePartsWithFallback();
 
     return [
@@ -2270,7 +2271,7 @@ export class Datetime implements ComponentInterface {
           }
         }}
       >
-        {getLocalizedTime(locale, activePart, use24Hour)}
+        {getLocalizedTime(locale, activePart, computedHourCycle)}
       </button>,
       <ion-popover
         alignment="center"

core/src/components/datetime/test/data.spec.ts

@@ -1,4 +1,125 @@
-import { generateMonths, getDaysOfWeek, generateTime, getToday, getCombinedDateColumnData } from '../utils/data';
+import {
+  generateMonths,
+  getDaysOfWeek,
+  generateTime,
+  getToday,
+  getCombinedDateColumnData,
+  getTimeColumnsData,
+} from '../utils/data';
+
+// The minutes are the same across all hour cycles, so we don't check those
+describe('getTimeColumnsData()', () => {
+  it('should generate formatted h12 hours and AM/PM data data', () => {
+    const refParts = { month: 5, year: 2021, day: 1, hour: 4, minute: 30 };
+    const results = getTimeColumnsData('en-US', refParts, 'h12');
+
+    expect(results.hoursData).toEqual([
+      { text: '12', value: 0 },
+      { text: '1', value: 1 },
+      { text: '2', value: 2 },
+      { text: '3', value: 3 },
+      { text: '4', value: 4 },
+      { text: '5', value: 5 },
+      { text: '6', value: 6 },
+      { text: '7', value: 7 },
+      { text: '8', value: 8 },
+      { text: '9', value: 9 },
+      { text: '10', value: 10 },
+      { text: '11', value: 11 },
+    ]);
+    expect(results.dayPeriodData).toEqual([
+      { text: 'AM', value: 'am' },
+      { text: 'PM', value: 'pm' },
+    ]);
+  });
+  it('should generate formatted h23 hours and AM/PM data data', () => {
+    const refParts = { month: 5, year: 2021, day: 1, hour: 4, minute: 30 };
+    const results = getTimeColumnsData('en-US', refParts, 'h23');
+
+    expect(results.hoursData).toEqual([
+      { text: '00', value: 0 },
+      { text: '01', value: 1 },
+      { text: '02', value: 2 },
+      { text: '03', value: 3 },
+      { text: '04', value: 4 },
+      { text: '05', value: 5 },
+      { text: '06', value: 6 },
+      { text: '07', value: 7 },
+      { text: '08', value: 8 },
+      { text: '09', value: 9 },
+      { text: '10', value: 10 },
+      { text: '11', value: 11 },
+      { text: '12', value: 12 },
+      { text: '13', value: 13 },
+      { text: '14', value: 14 },
+      { text: '15', value: 15 },
+      { text: '16', value: 16 },
+      { text: '17', value: 17 },
+      { text: '18', value: 18 },
+      { text: '19', value: 19 },
+      { text: '20', value: 20 },
+      { text: '21', value: 21 },
+      { text: '22', value: 22 },
+      { text: '23', value: 23 },
+    ]);
+    expect(results.dayPeriodData).toEqual([]);
+  });
+  it('should generate formatted h11 hours and AM/PM data data', () => {
+    const refParts = { month: 5, year: 2021, day: 1, hour: 4, minute: 30 };
+    const results = getTimeColumnsData('en-US', refParts, 'h11');
+
+    expect(results.hoursData).toEqual([
+      { text: '0', value: 0 },
+      { text: '1', value: 1 },
+      { text: '2', value: 2 },
+      { text: '3', value: 3 },
+      { text: '4', value: 4 },
+      { text: '5', value: 5 },
+      { text: '6', value: 6 },
+      { text: '7', value: 7 },
+      { text: '8', value: 8 },
+      { text: '9', value: 9 },
+      { text: '10', value: 10 },
+      { text: '11', value: 11 },
+    ]);
+    expect(results.dayPeriodData).toEqual([
+      { text: 'AM', value: 'am' },
+      { text: 'PM', value: 'pm' },
+    ]);
+  });
+  it('should generate formatted h24 hours and AM/PM data data', () => {
+    const refParts = { month: 5, year: 2021, day: 1, hour: 4, minute: 30 };
+    const results = getTimeColumnsData('en-US', refParts, 'h24');
+
+    expect(results.hoursData).toEqual([
+      { text: '01', value: 1 },
+      { text: '02', value: 2 },
+      { text: '03', value: 3 },
+      { text: '04', value: 4 },
+      { text: '05', value: 5 },
+      { text: '06', value: 6 },
+      { text: '07', value: 7 },
+      { text: '08', value: 8 },
+      { text: '09', value: 9 },
+      { text: '10', value: 10 },
+      { text: '11', value: 11 },
+      { text: '12', value: 12 },
+      { text: '13', value: 13 },
+      { text: '14', value: 14 },
+      { text: '15', value: 15 },
+      { text: '16', value: 16 },
+      { text: '17', value: 17 },
+      { text: '18', value: 18 },
+      { text: '19', value: 19 },
+      { text: '20', value: 20 },
+      { text: '21', value: 21 },
+      { text: '22', value: 22 },
+      { text: '23', value: 23 },
+      { text: '24', value: 0 },
+    ]);
+    expect(results.dayPeriodData).toEqual([]);
+  });
+});
 
 describe('generateMonths()', () => {
   it('should generate correct month data', () => {
@@ -41,7 +162,7 @@ describe('generateTime()', () => {
       hour: 5,
       minute: 43,
     };
-    const { hours, minutes } = generateTime(today);
+    const { hours, minutes } = generateTime('en-US', today);
 
     expect(hours.length).toEqual(12);
     expect(minutes.length).toEqual(60);
@@ -61,7 +182,7 @@ describe('generateTime()', () => {
       hour: 2,
       minute: 40,
     };
-    const { hours, minutes } = generateTime(today, 'h12', min);
+    const { hours, minutes } = generateTime('en-US', today, 'h12', min);
 
     expect(hours.length).toEqual(10);
     expect(minutes.length).toEqual(60);
@@ -81,7 +202,7 @@ describe('generateTime()', () => {
       hour: 2,
       minute: 40,
     };
-    const { hours, minutes } = generateTime(today, 'h12', min);
+    const { hours, minutes } = generateTime('en-US', today, 'h12', min);
 
     expect(hours.length).toEqual(12);
     expect(minutes.length).toEqual(60);
@@ -101,7 +222,7 @@ describe('generateTime()', () => {
       hour: 7,
       minute: 44,
     };
-    const { hours, minutes } = generateTime(today, 'h12', undefined, max);
+    const { hours, minutes } = generateTime('en-US', today, 'h12', undefined, max);
 
     expect(hours.length).toEqual(8);
     expect(minutes.length).toEqual(45);
@@ -121,7 +242,7 @@ describe('generateTime()', () => {
       hour: 2,
       minute: 40,
     };
-    const { hours, minutes } = generateTime(today, 'h12', undefined, max);
+    const { hours, minutes } = generateTime('en-US', today, 'h12', undefined, max);
 
     expect(hours.length).toEqual(12);
     expect(minutes.length).toEqual(60);
@@ -141,7 +262,7 @@ describe('generateTime()', () => {
       hour: 2,
       minute: 40,
     };
-    const { hours, minutes } = generateTime(today, 'h12', min);
+    const { hours, minutes } = generateTime('en-US', today, 'h12', min);
 
     expect(hours.length).toEqual(0);
     expect(minutes.length).toEqual(0);
@@ -161,7 +282,7 @@ describe('generateTime()', () => {
       hour: 2,
       minute: 40,
     };
-    const { hours, minutes } = generateTime(today, 'h12', undefined, max);
+    const { hours, minutes } = generateTime('en-US', today, 'h12', undefined, max);
 
     expect(hours.length).toEqual(0);
     expect(minutes.length).toEqual(0);
@@ -185,7 +306,7 @@ describe('generateTime()', () => {
       year: 2021,
     };
 
-    const { hours, minutes } = generateTime(today, 'h12', min, max);
+    const { hours, minutes } = generateTime('en-US', today, 'h12', min, max);
 
     expect(hours.length).toEqual(12);
     expect(minutes.length).toEqual(60);
@@ -199,7 +320,7 @@ describe('generateTime()', () => {
       minute: 43,
     };
 
-    const { hours, minutes } = generateTime(today, 'h12', undefined, undefined, [1, 2, 3], [10, 15, 20]);
+    const { hours, minutes } = generateTime('en-US', today, 'h12', undefined, undefined, [1, 2, 3], [10, 15, 20]);
 
     expect(hours).toStrictEqual([1, 2, 3]);
     expect(minutes).toStrictEqual([10, 15, 20]);
@@ -229,7 +350,7 @@ describe('generateTime()', () => {
       minute: 14,
     };
 
-    const { am, pm } = generateTime(today, 'h12', min, max);
+    const { am, pm } = generateTime('en-US', today, 'h12', min, max);
 
     expect(am).toBe(true);
     expect(pm).toBe(true);
@@ -253,7 +374,7 @@ describe('generateTime()', () => {
         minute: 50,
       };
 
-      const { hours } = generateTime(refValue, 'h23', minParts);
+      const { hours } = generateTime('en-US', refValue, 'h23', minParts);
 
       expect(hours).toStrictEqual([19, 20, 21, 22, 23]);
     });
@@ -276,7 +397,7 @@ describe('generateTime()', () => {
           minute: 30,
         };
 
-        const { hours, minutes } = generateTime(refValue, 'h23', minParts);
+        const { hours, minutes } = generateTime('en-US', refValue, 'h23', minParts);
 
         expect(hours).toStrictEqual([19, 20, 21, 22, 23]);
         expect(minutes.length).toEqual(60);
@@ -308,7 +429,7 @@ describe('generateTime()', () => {
         minute: 40,
       };
 
-      const { hours } = generateTime(refValue, 'h23', minParts, maxParts);
+      const { hours } = generateTime('en-US', refValue, 'h23', minParts, maxParts);
 
       expect(hours).toStrictEqual([19, 20]);
     });
@@ -330,7 +451,7 @@ describe('generateTime()', () => {
         minute: 2,
       };
 
-      const { minutes } = generateTime(refValue, 'h23', undefined, maxParts);
+      const { minutes } = generateTime('en-US', refValue, 'h23', undefined, maxParts);
 
       expect(minutes).toStrictEqual([0, 1, 2]);
     });
@@ -352,7 +473,7 @@ describe('generateTime()', () => {
         minute: 2,
       };
 
-      const { minutes } = generateTime(refValue, 'h23', undefined, maxParts);
+      const { minutes } = generateTime('en-US', refValue, 'h23', undefined, maxParts);
 
       expect(minutes.length).toEqual(60);
     });

core/src/components/datetime/test/format.spec.ts

@@ -56,11 +56,17 @@ describe('getMonthAndDay()', () => {
 
 describe('getFormattedHour()', () => {
   it('should only add padding if using 24 hour time', () => {
-    expect(getFormattedHour(0, true)).toEqual('00');
-    expect(getFormattedHour(0, false)).toEqual('12');
+    expect(getFormattedHour(1, 'h11')).toEqual('1');
+    expect(getFormattedHour(1, 'h12')).toEqual('1');
+    expect(getFormattedHour(1, 'h23')).toEqual('01');
+    expect(getFormattedHour(1, 'h24')).toEqual('01');
+  });
 
-    expect(getFormattedHour(10, true)).toEqual('10');
-    expect(getFormattedHour(10, false)).toEqual('10');
+  it('should return correct hour value for hour cycle', () => {
+    expect(getFormattedHour(0, 'h11')).toEqual('0');
+    expect(getFormattedHour(0, 'h12')).toEqual('12');
+    expect(getFormattedHour(0, 'h23')).toEqual('00');
+    expect(getFormattedHour(0, 'h24')).toEqual('24');
   });
 });
 
@@ -111,7 +117,7 @@ describe('getLocalizedTime', () => {
       minute: 40,
     };
 
-    expect(getLocalizedTime('en-US', datetimeParts, false)).toEqual('1:40 PM');
+    expect(getLocalizedTime('en-US', datetimeParts, 'h12')).toEqual('1:40 PM');
   });
 
   it('should localize the time to AM', () => {
@@ -123,7 +129,7 @@ describe('getLocalizedTime', () => {
       minute: 40,
     };
 
-    expect(getLocalizedTime('en-US', datetimeParts, false)).toEqual('9:40 AM');
+    expect(getLocalizedTime('en-US', datetimeParts, 'h12')).toEqual('9:40 AM');
   });
 
   it('should avoid Chromium bug when using 12 hour time in a 24 hour locale', () => {
@@ -135,7 +141,7 @@ describe('getLocalizedTime', () => {
       minute: 0,
     };
 
-    expect(getLocalizedTime('en-GB', datetimeParts, false)).toEqual('12:00 am');
+    expect(getLocalizedTime('en-GB', datetimeParts, 'h12')).toEqual('12:00 am');
   });
   it('should parse time-only values correctly', () => {
     const datetimeParts = {
@@ -143,7 +149,7 @@ describe('getLocalizedTime', () => {
       minute: 40,
     };
 
-    expect(getLocalizedTime('en-US', datetimeParts, false)).toEqual('10:40 PM');
-    expect(getLocalizedTime('en-US', datetimeParts, true)).toEqual('22:40');
+    expect(getLocalizedTime('en-US', datetimeParts, 'h12')).toEqual('10:40 PM');
+    expect(getLocalizedTime('en-US', datetimeParts, 'h23')).toEqual('22:40');
   });
 });

core/src/components/datetime/test/helpers.spec.ts

@@ -1,4 +1,4 @@
-import { isLeapYear, getNumDaysInMonth, is24Hour, isMonthFirstLocale } from '../utils/helpers';
+import { isLeapYear, getNumDaysInMonth, is24Hour, isMonthFirstLocale, getHourCycle } from '../utils/helpers';
 
 describe('daysInMonth()', () => {
   it('should return correct days in month for month and year', () => {
@@ -37,14 +37,29 @@ describe('isLeapYear()', () => {
 
 describe('is24Hour()', () => {
   it('should return true if the locale uses 24 hour time', () => {
-    expect(is24Hour('en-US')).toBe(false);
-    expect(is24Hour('en-US', 'h23')).toBe(true);
-    expect(is24Hour('en-US', 'h12')).toBe(false);
-    expect(is24Hour('en-US-u-hc-h23')).toBe(true);
-    expect(is24Hour('en-GB')).toBe(true);
-    expect(is24Hour('en-GB', 'h23')).toBe(true);
-    expect(is24Hour('en-GB', 'h12')).toBe(false);
-    expect(is24Hour('en-GB-u-hc-h12')).toBe(false);
+    expect(is24Hour('h11')).toBe(false);
+    expect(is24Hour('h12')).toBe(false);
+    expect(is24Hour('h23')).toBe(true);
+    expect(is24Hour('h24')).toBe(true);
+  });
+});
+
+describe('getHourCycle()', () => {
+  it('should return the correct hour cycle', () => {
+    expect(getHourCycle('en-US')).toBe('h12');
+    expect(getHourCycle('en-US', 'h23')).toBe('h23');
+    expect(getHourCycle('en-US', 'h12')).toBe('h12');
+    expect(getHourCycle('en-US-u-hc-h23')).toBe('h23');
+    expect(getHourCycle('en-GB')).toBe('h23');
+    expect(getHourCycle('en-GB', 'h23')).toBe('h23');
+    expect(getHourCycle('en-GB', 'h12')).toBe('h12');
+    expect(getHourCycle('en-GB-u-hc-h12')).toBe('h12');
+
+    expect(getHourCycle('en-GB', 'h11')).toBe('h11');
+    expect(getHourCycle('en-GB-u-hc-h11')).toBe('h11');
+
+    expect(getHourCycle('en-GB', 'h24')).toBe('h24');
+    expect(getHourCycle('en-GB-u-hc-h24')).toBe('h24');
   });
 });
 

core/src/components/datetime/test/hour-cycle/datetime.e2e.ts

@@ -25,5 +25,27 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const timeButton = page.locator('ion-datetime .time-body');
       await expect(timeButton).toHaveText('4:30 PM');
     });
+    test('should set the h11 hour cycle correctly', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime hour-cycle="h11" value="2022-01-01T00:30:00"></ion-datetime>
+      `,
+        config
+      );
+
+      const timeButton = page.locator('ion-datetime .time-body');
+      await expect(timeButton).toHaveText('0:30 AM');
+    });
+    test('should set the h24 hour cycle correctly', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime hour-cycle="h24" value="2022-01-01T00:30:00"></ion-datetime>
+      `,
+        config
+      );
+
+      const timeButton = page.locator('ion-datetime .time-body');
+      await expect(timeButton).toHaveText('24:30');
+    });
   });
 });

core/src/components/datetime/test/hour-cycle/index.html

@@ -51,6 +51,14 @@
             <h2>h12 Hour cycle</h2>
             <ion-datetime hour-cycle="h12"></ion-datetime>
           </div>
+          <div class="grid-item">
+            <h2>h11 Hour cycle</h2>
+            <ion-datetime hour-cycle="h11"></ion-datetime>
+          </div>
+          <div class="grid-item">
+            <h2>h24 Hour cycle</h2>
+            <ion-datetime hour-cycle="h24"></ion-datetime>
+          </div>
           <div class="grid-item">
             <h2>h23 Hour cycle (Extension Tag)</h2>
             <ion-datetime locale="en-US-u-hc-h23"></ion-datetime>

core/src/components/datetime/utils/data.ts

@@ -1,6 +1,6 @@
 import type { Mode } from '../../../interface';
 import type { PickerColumnItem } from '../../picker-column-internal/picker-column-internal-interfaces';
-import type { DatetimeParts } from '../datetime-interface';
+import type { DatetimeParts, DatetimeHourCycle } from '../datetime-interface';
 
 import { isAfter, isBefore, isSameDay } from './comparison';
 import {
@@ -11,7 +11,7 @@ import {
   getTodayLabel,
   getYear,
 } from './format';
-import { getNumDaysInMonth, is24Hour } from './helpers';
+import { getNumDaysInMonth, is24Hour, getHourCycle } from './helpers';
 import { getNextMonth, getPreviousMonth, getInternalHourValue } from './manipulation';
 
 /**
@@ -44,9 +44,19 @@ const minutes = [
   0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
   32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59,
 ];
+
+// h11 hour system uses 0-11. Midnight starts at 0:00am.
+const hour11 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+
+// h12 hour system uses 0-12. Midnight starts at 12:00am.
 const hour12 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+
+// h23 hour system uses 0-23. Midnight starts at 0:00.
 const hour23 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
 
+// h24 hour system uses 1-24. Midnight starts at 24:00.
+const hour24 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 0];
+
 /**
  * Given a locale and a mode,
  * return an array with formatted days
@@ -125,21 +135,42 @@ export const getDaysOfMonth = (month: number, year: number, firstDayOfWeek: numb
   return days;
 };
 
+/**
+ * Returns an array of pre-defined hour
+ * values based on the provided hourCycle.
+ */
+const getHourData = (hourCycle: DatetimeHourCycle) => {
+  switch (hourCycle) {
+    case 'h11':
+      return hour11;
+    case 'h12':
+      return hour12;
+    case 'h23':
+      return hour23;
+    case 'h24':
+      return hour24;
+    default:
+      throw new Error(`Invalid hour cycle "${hourCycle}"`);
+  }
+};
+
 /**
  * Given a local, reference datetime parts and option
  * max/min bound datetime parts, calculate the acceptable
  * hour and minute values according to the bounds and locale.
  */
 export const generateTime = (
+  locale: string,
   refParts: DatetimeParts,
-  hourCycle: 'h12' | 'h23' = 'h12',
+  hourCycle: DatetimeHourCycle = 'h12',
   minParts?: DatetimeParts,
   maxParts?: DatetimeParts,
   hourValues?: number[],
   minuteValues?: number[]
 ) => {
-  const use24Hour = hourCycle === 'h23';
-  let processedHours = use24Hour ? hour23 : hour12;
+  const computedHourCycle = getHourCycle(locale, hourCycle);
+  const use24Hour = is24Hour(computedHourCycle);
+  let processedHours = getHourData(computedHourCycle);
   let processedMinutes = minutes;
   let isAMAllowed = true;
   let isPMAllowed = true;
@@ -540,16 +571,18 @@ export const getCombinedDateColumnData = (
 export const getTimeColumnsData = (
   locale: string,
   refParts: DatetimeParts,
-  hourCycle?: 'h23' | 'h12',
+  hourCycle?: DatetimeHourCycle,
   minParts?: DatetimeParts,
   maxParts?: DatetimeParts,
   allowedHourValues?: number[],
   allowedMinuteValues?: number[]
 ): { [key: string]: PickerColumnItem[] } => {
-  const use24Hour = is24Hour(locale, hourCycle);
+  const computedHourCycle = getHourCycle(locale, hourCycle);
+  const use24Hour = is24Hour(computedHourCycle);
   const { hours, minutes, am, pm } = generateTime(
+    locale,
     refParts,
-    use24Hour ? 'h23' : 'h12',
+    computedHourCycle,
     minParts,
     maxParts,
     allowedHourValues,
@@ -558,7 +591,7 @@ export const getTimeColumnsData = (
 
   const hoursItems = hours.map((hour) => {
     return {
-      text: getFormattedHour(hour, use24Hour),
+      text: getFormattedHour(hour, computedHourCycle),
       value: getInternalHourValue(hour, use24Hour, refParts.ampm),
     };
   });

core/src/components/datetime/utils/format.ts

@@ -1,5 +1,6 @@
-import type { DatetimeParts } from '../datetime-interface';
+import type { DatetimeParts, DatetimeHourCycle } from '../datetime-interface';
 
+import { is24Hour } from './helpers';
 import { convertDataToISO } from './manipulation';
 
 const getFormattedDayPeriod = (dayPeriod?: string) => {
@@ -10,7 +11,7 @@ const getFormattedDayPeriod = (dayPeriod?: string) => {
   return dayPeriod.toUpperCase();
 };
 
-export const getLocalizedTime = (locale: string, refParts: DatetimeParts, use24Hour: boolean): string => {
+export const getLocalizedTime = (locale: string, refParts: DatetimeParts, hourCycle: DatetimeHourCycle): string => {
   const timeParts: Pick<DatetimeParts, 'hour' | 'minute'> = {
     hour: refParts.hour,
     minute: refParts.minute,
@@ -34,7 +35,7 @@ export const getLocalizedTime = (locale: string, refParts: DatetimeParts, use24H
      * We use hourCycle here instead of hour12 due to:
      * https://bugs.chromium.org/p/chromium/issues/detail?id=1347316&q=hour12&can=2
      */
-    hourCycle: use24Hour ? 'h23' : 'h12',
+    hourCycle,
     /**
      * Setting Z at the end indicates that this
      * date string is in the UTC time zone. This
@@ -83,18 +84,34 @@ export const addTimePadding = (value: number): string => {
  * 12 hour times it ensures that
  * hour 0 is formatted as '12'.
  */
-export const getFormattedHour = (hour: number, use24Hour: boolean): string => {
-  if (use24Hour) {
-    return addTimePadding(hour);
-  }
-
+export const getFormattedHour = (hour: number, hourCycle: DatetimeHourCycle): string => {
   /**
-   * If using 12 hour
-   * format, make sure hour
-   * 0 is formatted as '12'.
+   * Midnight for h11 starts at 0:00am
+   * Midnight for h12 starts at 12:00am
+   * Midnight for h23 starts at 00:00
+   * Midnight for h24 starts at 24:00
    */
   if (hour === 0) {
-    return '12';
+    switch (hourCycle) {
+      case 'h11':
+        return '0';
+      case 'h12':
+        return '12';
+      case 'h23':
+        return '00';
+      case 'h24':
+        return '24';
+      default:
+        throw new Error(`Invalid hour cycle "${hourCycle}"`);
+    }
+  }
+
+  const use24Hour = is24Hour(hourCycle);
+  /**
+   * h23 and h24 use 24 hour times.
+   */
+  if (use24Hour) {
+    return addTimePadding(hour);
   }
 
   return hour.toString();

core/src/components/datetime/utils/helpers.ts

@@ -1,10 +1,4 @@
-/**
- * Typescript 4.x does not recognize hourCycle as a valid option.
- * See https://github.com/microsoft/TypeScript/issues/34399.
- */
-interface DatetimeFormatOptions extends Intl.ResolvedDateTimeFormatOptions {
-  hourCycle?: 'h11' | 'h12' | 'h23' | 'h24';
-}
+import type { DatetimeHourCycle } from '../datetime-interface';
 
 /**
  * Determines if given year is a
@@ -16,13 +10,19 @@ export const isLeapYear = (year: number) => {
   return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
 };
 
-export const is24Hour = (locale: string, hourCycle?: 'h23' | 'h12') => {
+/**
+ * Determines the hour cycle for a user.
+ * If the hour cycle is explicitly defined, just use that.
+ * Otherwise, we try to derive it from either the specified
+ * locale extension tags or from Intl.DateTimeFormat directly.
+ */
+export const getHourCycle = (locale: string, hourCycle?: DatetimeHourCycle) => {
   /**
-   * If developer has explicitly enabled h23 time
+   * If developer has explicitly enabled 24-hour time
    * then return early and do not look at the system default.
    */
   if (hourCycle !== undefined) {
-    return hourCycle === 'h23';
+    return hourCycle;
   }
 
   /**
@@ -32,9 +32,9 @@ export const is24Hour = (locale: string, hourCycle?: 'h23' | 'h12') => {
    * option into the locale string. Example: `en-US-u-hc-h23`
    */
   const formatted = new Intl.DateTimeFormat(locale, { hour: 'numeric' });
-  const options = formatted.resolvedOptions() as DatetimeFormatOptions;
+  const options = formatted.resolvedOptions();
   if (options.hourCycle !== undefined) {
-    return options.hourCycle === 'h23';
+    return options.hourCycle;
   }
 
   /**
@@ -50,7 +50,34 @@ export const is24Hour = (locale: string, hourCycle?: 'h23' | 'h12') => {
     throw new Error('Hour value not found from DateTimeFormat');
   }
 
-  return hour.value === '00';
+  /**
+   * Midnight for h11 starts at 0:00am
+   * Midnight for h12 starts at 12:00am
+   * Midnight for h23 starts at 00:00
+   * Midnight for h24 starts at 24:00
+   */
+  switch (hour.value) {
+    case '0':
+      return 'h11';
+    case '12':
+      return 'h12';
+    case '00':
+      return 'h23';
+    case '24':
+      return 'h24';
+    default:
+      throw new Error(`Invalid hour cycle "${hourCycle}"`);
+  }
+};
+
+/**
+ * Determine if the hour cycle uses a 24-hour format.
+ * Returns true for h23 and h24. Returns false otherwise.
+ * If you don't know the hourCycle, use getHourCycle above
+ * and pass the result into this function.
+ */
+export const is24Hour = (hourCycle: DatetimeHourCycle) => {
+  return hourCycle === 'h23' || hourCycle === 'h24';
 };
 
 /**

core/src/components/fab-button/fab-button.scss

@@ -199,7 +199,7 @@
 // --------------------------------------------------
 
 :host(.fab-button-small) {
-  @include margin(($fab-size - $fab-small-size) * 0.5);
+  @include margin($fab-button-small-margin);
 
   width: #{$fab-small-size};
   height: #{$fab-small-size};

core/src/components/fab-button/fab-button.vars.scss

@@ -11,3 +11,6 @@ $fab-small-size:                         40px !default;
 
 /// @prop - Border radius of the FAB button
 $fab-border-radius:                     50% !default;
+
+/// @prop - Margin applied to the small FAB button
+$fab-button-small-margin: 8px !default;

core/src/components/fab-list/fab-list.scss

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 :host {
-  @include margin($fab-size + $fab-list-margin, 0);
+  @include margin(calc(100% + #{$fab-list-margin}), 0);
 
   display: none;
   position: absolute;
@@ -13,8 +13,15 @@
   flex-direction: column;
   align-items: center;
 
-  min-width: $fab-size;
-  min-height: $fab-size;
+  /**
+   * The list should be centered relative to the parent
+   * FAB button. We set minimum dimensions so the
+   * FAB list can be centered relative to the small FAB button.
+   * However, the small FAB button adds start/end margin, so we need
+   * to account for that in the FAB list dimensions.
+   */
+  min-width: $fab-small-size + ($fab-button-small-margin * 2);
+  min-height: $fab-small-size + ($fab-button-small-margin * 2);
 }
 
 :host(.fab-list-active) {
@@ -59,14 +66,14 @@
 }
 
 :host(.fab-list-side-start) {
-  @include margin(0, $fab-size + $fab-list-margin);
+  @include margin(0, calc(100% + #{$fab-list-margin}));
   @include position-horizontal(null, 0);
 
   flex-direction: row-reverse;
 }
 
 :host(.fab-list-side-end) {
-  @include margin(0, $fab-size + $fab-list-margin);
+  @include margin(0, calc(100% + #{$fab-list-margin}));
   @include position(null, null, null, 0);
 
   flex-direction: row;

core/src/components/fab/fab.scss

@@ -1,4 +1,5 @@
 @import "./fab.vars";
+@import "../fab-list/fab-list.vars";
 
 // Floating Action Button Container
 // --------------------------------------------------
@@ -6,6 +7,9 @@
 :host {
   position: absolute;
 
+  width: fit-content;
+  height: fit-content;
+
   z-index: $z-index-fixed-content;
 }
 
@@ -14,8 +18,8 @@
 // --------------------------------------------------
 
 :host(.fab-horizontal-center) {
-  @include position(null, null, null, 50%);
-  @include margin-horizontal(-$fab-size * 0.5, null);
+  @include position(null, 0px, null, 0px);
+  @include margin(null, auto);
 }
 
 :host(.fab-horizontal-start) {
@@ -38,22 +42,93 @@
   top: $fab-content-margin;
 }
 
+/**
+ * Reset the top value since edge
+ * styles use margin-top.
+ */
 :host(.fab-vertical-top.fab-edge) {
-  top: -$fab-size * 0.5;
+  top: 0;
 }
 
+/**
+ * We need to adjust the parent FAB button up by half
+ * its height so that half of it sits on the header. As a result,
+ * we target the slotted ion-fab-button instead of targeting the host.
+ */
+:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button) {
+  margin-top: -50%;
+}
+
+/**
+ * The small FAB button adds top and bottom margin. We need to account for
+ * that margin when we adjust the FAB button for edge styles since we
+ * are overriding the margin-top value below.
+ */
+:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button.fab-button-small) {
+  margin-top: calc((-100% + $fab-button-small-margin * 2) / 2);
+}
+
+/**
+ * Since we are adjusting the FAB button we also need
+ * to adjust the sibling ion-fab-list otherwise there will be
+ * a gap between the parent FAB button and the associated list.
+ */
+:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),
+:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-end) {
+  @include margin(-50%, null, null, null);
+}
+
+:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),
+:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom) {
+  @include margin(calc(50% + #{$fab-list-margin}) null, null, null);
+}
 
 :host(.fab-vertical-bottom) {
   bottom: $fab-content-margin;
 }
 
+/**
+ * Reset the bottom value since edge
+ * styles use margin-bottom.
+ */
 :host(.fab-vertical-bottom.fab-edge) {
-  bottom: -$fab-size * 0.5;
+  bottom: 0;
 }
 
+/**
+ * We need to adjust the parent FAB button down by half
+ * its height so that half of it sits on the footer. As a result,
+ * we target the slotted ion-fab-button instead of targeting the host.
+ */
+:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button) {
+  margin-bottom: -50%;
+}
+
+/**
+ * The small FAB button adds top and bottom margin. We need to account for
+ * that margin when we adjust the FAB button for edge styles since we
+ * are overriding the margin-bottom value below.
+ */
+:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button.fab-button-small) {
+  margin-bottom: calc((-100% + $fab-button-small-margin * 2) / 2);
+}
+
+/**
+ * Since we are adjusting the FAB button we also need
+ * to adjust the sibling ion-fab-list otherwise there will be
+ * a gap between the parent FAB button and the associated list.
+ */
+:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),
+:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-end) {
+  @include margin(null, null, -50%, null);
+}
+
+:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),
+:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom) {
+  @include margin(null, null, calc(50% + #{$fab-list-margin}) null);
+}
 
 :host(.fab-vertical-center) {
-  @include margin(-$fab-size * 0.5, null, null, null);
-
-  top: 50%;
+  @include position(0px, null, 0px, null);
+  @include margin(auto, null);
 }

core/src/components/fab/test/custom-size/fab.e2e.ts

@@ -0,0 +1,17 @@
+import { expect } from '@playwright/test';
+import { configs, test, Viewports } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across modes
+ */
+configs({ modes: ['ios'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('fab: custom size'), () => {
+    test('should position fabs correctly with custom sizes', async ({ page }) => {
+      await page.goto(`/src/components/fab/test/custom-size`, config);
+
+      await page.setViewportSize(Viewports.tablet.landscape);
+
+      await expect(page).toHaveScreenshot(screenshot(`fab-custom-size`));
+    });
+  });
+});

core/src/components/fab/test/custom-size/index.html

@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Floating Action Button - Custom Size</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .ruler-y {
+        height: 100%;
+        width: 1px;
+
+        background: red;
+
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+
+        margin: 0 auto;
+
+        z-index: 10000;
+      }
+
+      .ruler-x {
+        height: 1px;
+        width: 100%;
+
+        background: red;
+
+        position: absolute;
+        top: 50%;
+        bottom: 0;
+        left: 0;
+        right: 0;
+
+        margin: 0 auto;
+
+        z-index: 10000;
+
+        transform: translateY(-50%);
+      }
+
+      ion-fab-button {
+        width: 80px;
+        height: 80px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Floating Action Button - Custom Size</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding" id="content">
+        <div class="ruler-y"></div>
+        <div class="ruler-x"></div>
+
+        <ion-fab vertical="top" horizontal="start" slot="fixed" edge="true">
+          <ion-fab-button activated="true">
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="bottom" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="end" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+
+        <ion-fab vertical="top" horizontal="end" slot="fixed" edge="true">
+          <ion-fab-button activated="true">
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="start" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="bottom" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+
+        <ion-fab vertical="bottom" horizontal="start" slot="fixed" edge="true">
+          <ion-fab-button activated="true">
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="top" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="end" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+
+        <ion-fab vertical="bottom" horizontal="end" slot="fixed" edge="true">
+          <ion-fab-button activated="true">
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="start" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="top" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+
+        <ion-fab vertical="center" horizontal="center" slot="fixed">
+          <ion-fab-button activated="true">
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="start" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="top" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="bottom" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="end" activated="true">
+            <ion-fab-button show="true">
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-vimeo"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button show="true">
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+      </ion-content>
+
+      <ion-footer>
+        <ion-toolbar>
+          <ion-title>Floating Action Button - Basic</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+    </ion-app>
+  </body>
+</html>

core/src/components/header/header.ios.scss

@@ -107,3 +107,28 @@
 .header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
   visibility: hidden;
 }
+
+/**
+ * The main header is only hidden once the collapsible large
+ * title is configured. As a result, if the main header loads
+ * before the collapsible large title is configured then the
+ * main header will be visible briefly before being hidden
+ * by the collapsible large title.
+ *
+ * The following selector ensures that any main header
+ * on a page with a collapsible large title is hidden
+ * before the collapsible large title is configured.
+ * Once the collapsible large title is configured the main
+ * header will have the ".header-collapse-main" class, and
+ * this selector will no longer apply.
+ *
+ * The :has(...) part of the selector ensures a couple things:
+ * 1. This will only apply within a page view since the content
+ * must be a subsequent-sibling of the header (~ ion-content).
+ * 2. This will only apply when that content has a collapse header (ion-header[collapse="condense"])
+ *
+ * We use opacity: 0 to avoid a layout shift.
+ */
+ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse="condense"]) {
+  opacity: 0;
+}

core/src/components/item-sliding/test/basic/item-sliding.e2e.ts

@@ -1,18 +1,53 @@
 import { expect } from '@playwright/test';
 import { configs, dragElementBy, test } from '@utils/test/playwright';
 
-import { testSlidingItem } from '../test.utils';
-
 /**
- * item-sliding doesn't have mode-specific styling
+ * item-sliding doesn't have mode-specific styling,
+ * but the child components, item-options and item-option, do.
+ *
+ * It is important to test all modes to ensure that the
+ * child components are being rendered correctly.
  */
-configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('item-sliding: basic'), () => {
-    test.fixme('should not have visual regressions', async ({ page }) => {
+    test.beforeEach(async ({ page }) => {
       await page.goto(`/src/components/item-sliding/test/basic`, config);
+    });
+    test.describe('start options', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        const item = page.locator('#item2');
 
-      await testSlidingItem(page, 'item2', 'start', screenshot, true);
-      await testSlidingItem(page, 'item2', 'end', screenshot);
+        /**
+         * Negative dragByX value to drag element from the right to the left
+         * to reveal the options on the right side.
+         * Positive dragByX value to drag element from the left to the right
+         * to reveal the options on the left side.
+         */
+        const dragByX = config.direction === 'rtl' ? -150 : 150;
+
+        await dragElementBy(item, page, dragByX);
+        await page.waitForChanges();
+
+        await expect(item).toHaveScreenshot(screenshot('item-sliding-start'));
+      });
+    });
+
+    test.describe('end options', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        const item = page.locator('#item2');
+
+        /**
+         * Negative dragByX value to drag element from the right to the left
+         * to reveal the options on the right side.
+         * Positive dragByX value to drag element from the left to the right
+         * to reveal the options on the left side.
+         */
+        const dragByX = config.direction === 'rtl' ? 150 : -150;
+
+        await dragElementBy(item, page, dragByX);
+
+        await expect(item).toHaveScreenshot(screenshot('item-sliding-end'));
+      });
     });
   });
 });