add wip

Issue number: N/A

---------

## What is the current behavior?
Dark palette is hardcoded in style tags in tests. 

## What is the new behavior?

Updated the following tests:
- **datetime/basic** - added an import for `dark.class.css` which works
with the checkbox to toggle the `ion-palette-dark` class
- does not update the e2e test to include dark palette because this was
not tested previously
- **datetime/color** - added an import for `dark.class.css` which works
with the checkbox to toggle the `ion-palette-dark` class
    - updates the e2e test to use the dark palette
- **modal/dark-mode** - added an import for `dark.always.css` which
always applies the dark palette
- does not update the e2e test to include dark palette because this test
needs to be moved but I am not sure where it should go yet
- **toggle/enable-on-off-labels** - added an import for `dark.class.css`
which works with the checkbox to toggle the `ion-palette-dark` class
- updates the e2e test to use the dark palette & splits the color into a
separate screenshot test

Did not update the following tests:
- **item/buttons** - has already been updated to remove the dark palette
- **toggle/legacy/enable-on-off-labels** - test was removed in v8

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

- We could probably remove the checkbox toggles entirely when we add
support for the `palette` query param.

---------

Co-authored-by: ionitron <hi@ionicframework.com>

.github/workflows/assign-issues.yml

@@ -11,8 +11,8 @@ jobs:
       issues: write
     steps:
       - name: 'Auto-assign issue'
-        uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
+        uses: pozil/auto-assign-issue@65947009a243e6b3993edeef4e64df3ca85d760c # v1.14.0
         with:
-          assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, thetaPC
+          assignees: liamdebeasi, sean-perkins, brandyscarney, thetaPC
           numOfAssignee: 1
           allowSelfAssign: false

.vercelignore

@@ -0,0 +1 @@
+core/src/components/**/*/*.png

CHANGELOG.md

@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.2...v8.0.0) (2024-04-17)
+
+**Note:** Version bump only for package ionic-framework
+
+
+
+
+
+# [8.0.0-rc.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.1...v8.0.0-rc.2) (2024-04-17)
+
+
+### Bug Fixes
+
+* **dark-palette:** improve base colors ([#29239](https://github.com/ionic-team/ionic-framework/issues/29239)) ([4698d22](https://github.com/ionic-team/ionic-framework/commit/4698d22413966b59f9fa65b4e2533695cf00ed70)), closes [#29219](https://github.com/ionic-team/ionic-framework/issues/29219)
+* **form-controls:** adjust flex properties inside of an item ([#29328](https://github.com/ionic-team/ionic-framework/issues/29328)) ([9b59138](https://github.com/ionic-team/ionic-framework/commit/9b59138011fd1e71def209ec3a43fb7f91b58949)), closes [#29319](https://github.com/ionic-team/ionic-framework/issues/29319)
+
+
+
+
+
+## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
+
+
+### Bug Fixes
+
+* **modal:** improve sheet modal scrolling and gesture behavior ([#29312](https://github.com/ionic-team/ionic-framework/issues/29312)) ([9738228](https://github.com/ionic-team/ionic-framework/commit/9738228bc05abe3e2012e57b0e6b85f0ec06f66b)), closes [#24583](https://github.com/ionic-team/ionic-framework/issues/24583)
+
+
+
+
+
+# [8.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.0...v8.0.0-rc.1) (2024-04-10)
+
+
+### Bug Fixes
+
+* **button:** use clamp for font sizes on circle shape ([#29200](https://github.com/ionic-team/ionic-framework/issues/29200)) ([4d6edee](https://github.com/ionic-team/ionic-framework/commit/4d6edee89c7bb2cb669d67730d7ddf24c78b3cb1))
+
+
+
+
+
+## [7.8.4](https://github.com/ionic-team/ionic-framework/compare/v7.8.3...v7.8.4) (2024-04-10)
+
+
+### Performance Improvements
+
+* **styles:** compress distributed global stylesheets ([#29275](https://github.com/ionic-team/ionic-framework/issues/29275)) ([b3cd49b](https://github.com/ionic-team/ionic-framework/commit/b3cd49bf2219aacffc1ac34acbae7c76ef243765))
+
+
+
+
 
 ## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
 

core/CHANGELOG.md

@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.2...v8.0.0) (2024-04-17)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
+# [8.0.0-rc.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.1...v8.0.0-rc.2) (2024-04-17)
+
+
+### Bug Fixes
+
+* **dark-palette:** improve base colors ([#29239](https://github.com/ionic-team/ionic-framework/issues/29239)) ([4698d22](https://github.com/ionic-team/ionic-framework/commit/4698d22413966b59f9fa65b4e2533695cf00ed70)), closes [#29219](https://github.com/ionic-team/ionic-framework/issues/29219)
+* **form-controls:** adjust flex properties inside of an item ([#29328](https://github.com/ionic-team/ionic-framework/issues/29328)) ([9b59138](https://github.com/ionic-team/ionic-framework/commit/9b59138011fd1e71def209ec3a43fb7f91b58949)), closes [#29319](https://github.com/ionic-team/ionic-framework/issues/29319)
+
+
+
+
+
+## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
+
+
+### Bug Fixes
+
+* **modal:** improve sheet modal scrolling and gesture behavior ([#29312](https://github.com/ionic-team/ionic-framework/issues/29312)) ([9738228](https://github.com/ionic-team/ionic-framework/commit/9738228bc05abe3e2012e57b0e6b85f0ec06f66b)), closes [#24583](https://github.com/ionic-team/ionic-framework/issues/24583)
+
+
+
+
+
+# [8.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.0...v8.0.0-rc.1) (2024-04-10)
+
+
+### Bug Fixes
+
+* **button:** use clamp for font sizes on circle shape ([#29200](https://github.com/ionic-team/ionic-framework/issues/29200)) ([4d6edee](https://github.com/ionic-team/ionic-framework/commit/4d6edee89c7bb2cb669d67730d7ddf24c78b3cb1))
+
+
+
+
+
+## [7.8.4](https://github.com/ionic-team/ionic-framework/compare/v7.8.3...v7.8.4) (2024-04-10)
+
+
+### Performance Improvements
+
+* **styles:** compress distributed global stylesheets ([#29275](https://github.com/ionic-team/ionic-framework/issues/29275)) ([b3cd49b](https://github.com/ionic-team/ionic-framework/commit/b3cd49bf2219aacffc1ac34acbae7c76ef243765))
+
+
+
+
 
 ## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
 

core/api.txt

@@ -361,7 +361,6 @@ ion-col,css-prop,--ion-grid-columns
 
 ion-content,shadow
 ion-content,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
-ion-content,prop,fixedSlotPlacement,"after" | "before",'after',false,false
 ion-content,prop,forceOverscroll,boolean | undefined,undefined,false,false
 ion-content,prop,fullscreen,boolean,false,false,false
 ion-content,prop,scrollEvents,boolean,false,false,false
@@ -554,7 +553,6 @@ ion-input,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "h
 ion-input,prop,autocorrect,"off" | "on",'off',false,false
 ion-input,prop,autofocus,boolean,false,false,false
 ion-input,prop,clearInput,boolean,false,false,false
-ion-input,prop,clearInputIcon,string | undefined,undefined,false,false
 ion-input,prop,clearOnEdit,boolean | undefined,undefined,false,false
 ion-input,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-input,prop,counter,boolean,false,false,false
@@ -831,7 +829,6 @@ ion-modal,prop,backdropDismiss,boolean,true,false,false
 ion-modal,prop,breakpoints,number[] | undefined,undefined,false,false
 ion-modal,prop,canDismiss,((data?: any, role?: string | undefined) => Promise<boolean>) | boolean,true,false,false
 ion-modal,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
-ion-modal,prop,focusTrap,boolean,true,false,false
 ion-modal,prop,handle,boolean | undefined,undefined,false,false
 ion-modal,prop,handleBehavior,"cycle" | "none" | undefined,'none',false,false
 ion-modal,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
@@ -980,7 +977,6 @@ ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,fa
 ion-popover,prop,dismissOnSelect,boolean,false,false,false
 ion-popover,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-popover,prop,event,any,undefined,false,false
-ion-popover,prop,focusTrap,boolean,true,false,false
 ion-popover,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
 ion-popover,prop,isOpen,boolean,false,false,false
 ion-popover,prop,keepContentsMounted,boolean,false,false,false

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.0.0-rc.0",
+  "version": "8.0.0",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -54,12 +54,13 @@
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
+    "chalk": "^5.3.0",
     "clean-css-cli": "^5.6.1",
     "domino": "^2.1.6",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-custom-rules": "file:custom-rules",
-    "execa": "^5.0.0",
+    "execa": "^8.0.1",
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
@@ -96,10 +97,9 @@
     "test.treeshake": "node scripts/treeshaking.js dist/index.js",
     "validate": "npm run lint && npm run test && npm run build && npm run test.treeshake",
     "docker.build": "docker build -t ionic-playwright .",
-    "test.e2e.docker": "npm run docker.build && docker run -it --rm -e DISPLAY=$(cat docker-display.txt) -v $(cat docker-display-volume.txt) --ipc=host --mount=type=bind,source=./,target=/ionic ionic-playwright npm run test.e2e --",
+    "test.e2e.docker": "npm run docker.build && node ./scripts/docker.mjs",
     "test.e2e.docker.update-snapshots": "npm run test.e2e.docker -- --update-snapshots",
-    "test.e2e.docker.ci": "npm run docker.build && docker run -e CI='true' --rm --ipc=host --mount=type=bind,source=./,target=/ionic ionic-playwright npm run test.e2e --",
-    "test.report": "npx playwright show-report"
+    "test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs"
   },
   "author": "Ionic Team",
   "license": "MIT",

core/scripts/docker.mjs

@@ -0,0 +1,56 @@
+import { execa } from 'execa';
+import * as fs from 'fs';
+import { resolve } from 'path';
+import chalk from 'chalk';
+
+const removeNewline = (string) => {
+  return string.replace(/(\r\n|\n|\r)/gm, "");
+}
+
+const readConfigFile = (file) => {
+  if (fs.existsSync(file)) {
+    return fs.readFileSync(file, { encoding: 'utf-8' });
+  }
+
+  return '';
+}
+
+// These files are optional, so we don't want to error if they don't exist
+const display = removeNewline(readConfigFile('docker-display.txt'));
+const displayVolume = removeNewline(readConfigFile('docker-display-volume.txt'));
+
+// Using --mount requires an absolute path which is what this gives us.
+const pwd = resolve('./');
+
+/**
+ * -it will let the user gracefully kill the process using Ctrl+C (or equivalent)
+ * -e DISPLAY and -v handle configuration for headed mode
+ * --ipc=host is recommended when using Chromium to avoid out of memory crashes: https://playwright.dev/docs/ci#docker
+ * --init is recommended to avoid zombie processes: https://playwright.dev/docs/ci#docker
+ * --mount allow us to mount the local Ionic project inside of the Docker container so devs do not need to re-build the project in Docker.
+ */
+const args = ['run', '--rm', '--init', `-e DISPLAY=${display}`, `-v ${displayVolume}`, '--ipc=host', `--mount=type=bind,source=${pwd},target=/ionic`, 'ionic-playwright', 'npm run test.e2e --', ...process.argv.slice(2)];
+
+// Set the CI env variable so Playwright uses the CI config
+if (process.env.CI) {
+  args.splice(1, 0, '-e CI=true');
+/**
+ * Otherwise, we should let the session be interactive locally. This will
+ * not work on CI which is why we do not apply it there.
+ */
+} else {
+  args.splice(1, 0, '-it');
+}
+
+/**
+ * While these config files are optional to run the tests, they are required to run
+ * the tests in headed mode. Add a warning if dev tries to run headed tests without
+ * the correct config files.
+ */
+const requestHeaded = process.argv.find(arg => arg.includes('headed'));
+const hasHeadedConfigFiles = display && displayVolume;
+if (requestHeaded && !hasHeadedConfigFiles) {
+  console.warn(chalk.yellow.bold('\n⚠️ You are running tests in headed mode, but one or more of your headed config files was not found.\nPlease ensure that both docker-display.txt and docker-display-volume.txt have been created in the correct location.\n'));
+}
+
+execa('docker', args, { shell: true, stdio: 'inherit' });

core/src/components.d.ts

@@ -762,10 +762,6 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
-        /**
-          * Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'before'`.
-         */
-        "fixedSlotPlacement": 'after' | 'before';
         /**
           * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.
          */
@@ -1166,10 +1162,6 @@ export namespace Components {
           * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
          */
         "clearInput": boolean;
-        /**
-          * The icon to use for the clear button. Only applies when `clearInput` is set to `true`.
-         */
-        "clearInputIcon"?: string;
         /**
           * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
          */
@@ -1723,10 +1715,6 @@ export namespace Components {
           * Animation to use when the modal is presented.
          */
         "enterAnimation"?: AnimationBuilder;
-        /**
-          * If `true`, focus will not be allowed to move outside of this overlay. If 'false', focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
-         */
-        "focusTrap": boolean;
         /**
           * Returns the current breakpoint of a sheet style modal
          */
@@ -2143,10 +2131,6 @@ export namespace Components {
           * The event to pass to the popover animation.
          */
         "event": any;
-        /**
-          * If `true`, focus will not be allowed to move outside of this overlay. If 'false', focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
-         */
-        "focusTrap": boolean;
         "getParentPopover": () => Promise<HTMLIonPopoverElement | null>;
         "hasController": boolean;
         /**
@@ -5494,10 +5478,6 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
-        /**
-          * Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'before'`.
-         */
-        "fixedSlotPlacement"?: 'after' | 'before';
         /**
           * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.
          */
@@ -5906,10 +5886,6 @@ declare namespace LocalJSX {
           * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
          */
         "clearInput"?: boolean;
-        /**
-          * The icon to use for the clear button. Only applies when `clearInput` is set to `true`.
-         */
-        "clearInputIcon"?: string;
         /**
           * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
          */
@@ -6465,10 +6441,6 @@ declare namespace LocalJSX {
           * Animation to use when the modal is presented.
          */
         "enterAnimation"?: AnimationBuilder;
-        /**
-          * If `true`, focus will not be allowed to move outside of this overlay. If 'false', focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
-         */
-        "focusTrap"?: boolean;
         /**
           * The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties.
          */
@@ -6815,10 +6787,6 @@ declare namespace LocalJSX {
           * The event to pass to the popover animation.
          */
         "event"?: any;
-        /**
-          * If `true`, focus will not be allowed to move outside of this overlay. If 'false', focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
-         */
-        "focusTrap"?: boolean;
         "hasController"?: boolean;
         /**
           * Additional attributes to pass to the popover.

core/src/components/checkbox/checkbox.scss

@@ -38,6 +38,8 @@
 }
 
 :host(.in-item) {
+  flex: 1 1 0;
+
   width: 100%;
   height: 100%;
 }

core/src/components/content/content.tsx

@@ -75,15 +75,6 @@ export class Content implements ComponentInterface {
    */
   @Prop() fullscreen = false;
 
-  /**
-   * Controls where the fixed content is placed relative to the main content
-   * in the DOM. This can be used to control the order in which fixed elements
-   * receive keyboard focus.
-   * For example, if a FAB in the fixed slot should receive keyboard focus before
-   * the main page content, set this property to `'before'`.
-   */
-  @Prop() fixedSlotPlacement: 'after' | 'before' = 'after';
-
   /**
    * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.
    * If the content exceeds the bounds of ionContent, nothing will change.
@@ -432,7 +423,7 @@ export class Content implements ComponentInterface {
   }
 
   render() {
-    const { fixedSlotPlacement, isMainContent, scrollX, scrollY, el } = this;
+    const { isMainContent, scrollX, scrollY, el } = this;
     const rtl = isRTL(el) ? 'rtl' : 'ltr';
     const mode = getIonMode(this);
     const forceOverscroll = this.shouldForceOverscroll();
@@ -455,9 +446,6 @@ export class Content implements ComponentInterface {
         }}
       >
         <div ref={(el) => (this.backgroundContentEl = el)} id="background-content" part="background"></div>
-
-        {fixedSlotPlacement === 'before' ? <slot name="fixed"></slot> : null}
-
         <div
           class={{
             'inner-scroll': true,
@@ -479,7 +467,7 @@ export class Content implements ComponentInterface {
           </div>
         ) : null}
 
-        {fixedSlotPlacement === 'after' ? <slot name="fixed"></slot> : null}
+        <slot name="fixed"></slot>
       </Host>
     );
   }

core/src/components/content/test/content.spec.ts

@@ -1,31 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { Content } from '../content';
-
-describe('content: fixed slot placement', () => {
-  it('should should fixed slot after content', async () => {
-    const page = await newSpecPage({
-      components: [Content],
-      html: '<ion-content></ion-content>',
-    });
-
-    const content = page.body.querySelector('ion-content')!;
-    const fixedSlot = content.shadowRoot!.querySelector('slot[name="fixed"]')!;
-    const scrollEl = content.shadowRoot!.querySelector('[part="scroll"]')!;
-
-    expect(fixedSlot.nextElementSibling).not.toBe(scrollEl);
-  });
-
-  it('should should fixed slot before content', async () => {
-    const page = await newSpecPage({
-      components: [Content],
-      html: `<ion-content fixed-slot-placement="before"></ion-content>`,
-    });
-
-    const content = page.body.querySelector('ion-content')!;
-    const fixedSlot = content.shadowRoot!.querySelector('slot[name="fixed"]')!;
-    const scrollEl = content.shadowRoot!.querySelector('[part="scroll"]')!;
-
-    expect(fixedSlot.nextElementSibling).toBe(scrollEl);
-  });
-});

core/src/components/datetime/datetime.tsx

@@ -541,7 +541,7 @@ export class Datetime implements ComponentInterface {
     }
 
     if (closeOverlay) {
-      this.closeParentOverlay(CONFIRM_ROLE);
+      this.closeParentOverlay();
     }
   }
 
@@ -566,7 +566,7 @@ export class Datetime implements ComponentInterface {
     this.ionCancel.emit();
 
     if (closeOverlay) {
-      this.closeParentOverlay(CANCEL_ROLE);
+      this.closeParentOverlay();
     }
   }
 
@@ -616,13 +616,13 @@ export class Datetime implements ComponentInterface {
     return Array.isArray(activeParts) ? activeParts[0] : activeParts;
   };
 
-  private closeParentOverlay = (role: string) => {
+  private closeParentOverlay = () => {
     const popoverOrModal = this.el.closest('ion-modal, ion-popover') as
       | HTMLIonModalElement
       | HTMLIonPopoverElement
       | null;
     if (popoverOrModal) {
-      popoverOrModal.dismiss(undefined, role);
+      popoverOrModal.dismiss();
     }
   };
 
@@ -847,6 +847,23 @@ export class Datetime implements ComponentInterface {
     this.maxParts = parseMaxParts(max, defaultParts);
   };
 
+  private centerCalendarGrid = (workingMonth: HTMLElement) => {
+    const { el, calendarBodyRef } = this;
+
+    if (!calendarBodyRef) return;
+
+    const monthRight = workingMonth.offsetLeft + workingMonth.offsetWidth;
+    const elRight = el.offsetLeft + el.offsetWidth;
+
+    if (monthRight > elRight) {
+      calendarBodyRef.scrollLeft = workingMonth.clientWidth;
+      console.log('LTR', workingMonth)
+    } else {
+      calendarBodyRef.scrollLeft = -workingMonth.clientWidth;
+      console.log('RTL', workingMonth)
+    }
+  }
+
   private initializeCalendarListener = () => {
     const calendarBodyRef = this.calendarBodyRef;
     if (!calendarBodyRef) {
@@ -868,11 +885,11 @@ export class Datetime implements ComponentInterface {
      * the months in a row allows us to mostly sidestep
      * that issue.
      */
-    const months = calendarBodyRef.querySelectorAll('.calendar-month');
+    const months = calendarBodyRef.querySelectorAll<HTMLElement>('.calendar-month');
 
-    const startMonth = months[0] as HTMLElement;
-    const workingMonth = months[1] as HTMLElement;
-    const endMonth = months[2] as HTMLElement;
+    const startMonth = months[0];
+    const workingMonth = months[1];
+    const endMonth = months[2];
     const mode = getIonMode(this);
     const needsiOSRubberBandFix = mode === 'ios' && typeof navigator !== 'undefined' && navigator.maxTouchPoints > 1;
 
@@ -883,7 +900,7 @@ export class Datetime implements ComponentInterface {
      * if element is not in viewport. Use scrollLeft instead.
      */
     writeTask(() => {
-      calendarBodyRef.scrollLeft = startMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
+      this.centerCalendarGrid(workingMonth);
 
       const getChangedMonth = (parts: DatetimeParts): DatetimeParts | undefined => {
         const box = calendarBodyRef.getBoundingClientRect();
@@ -953,6 +970,7 @@ export class Datetime implements ComponentInterface {
          * then we can return early.
          */
         const newDate = getChangedMonth(this.workingParts);
+        console.log(newDate,this.workingParts)
         if (!newDate) return;
 
         const { month, day, year } = newDate;
@@ -993,7 +1011,7 @@ export class Datetime implements ComponentInterface {
             year,
           });
 
-          calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
+          this.centerCalendarGrid(workingMonth);
           calendarBodyRef.style.removeProperty('overflow');
 
           if (this.resolveForceDateScrolling) {
@@ -1185,7 +1203,7 @@ export class Datetime implements ComponentInterface {
      */
     const hasCalendarGrid = !preferWheel && ['date-time', 'time-date', 'date'].includes(presentation);
     if (minParts !== undefined && hasCalendarGrid && calendarBodyRef) {
-      const workingMonth = calendarBodyRef.querySelector('.calendar-month:nth-of-type(1)');
+      const workingMonth = calendarBodyRef.querySelector<HTMLElement>('.calendar-month:nth-of-type(1)');
       /**
        * We need to make sure the datetime is not in the process
        * of scrolling to a new datetime value if the value
@@ -1200,7 +1218,7 @@ export class Datetime implements ComponentInterface {
        * and the resolveForceDateScrolling promise never resolves.
        */
       if (workingMonth && forceRenderDate === undefined) {
-        calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
+        this.centerCalendarGrid(workingMonth);
       }
     }
 
@@ -1464,16 +1482,24 @@ export class Datetime implements ComponentInterface {
       return;
     }
 
-    const nextMonth = calendarBodyRef.querySelector('.calendar-month:last-of-type');
+    const nextMonth = calendarBodyRef.querySelector<HTMLElement>('.calendar-month:last-of-type');
     if (!nextMonth) {
       return;
     }
 
-    const left = (nextMonth as HTMLElement).offsetWidth * 2;
+    const left = nextMonth.offsetWidth * 2;
+
+    if (!calendarBodyRef) return;
+
+    console.log('yay',left)
+
+    const monthRight = nextMonth.offsetLeft + nextMonth.offsetWidth;
+    const elRight = this.el.offsetLeft + this.el.offsetWidth;
+    const direction = monthRight > elRight ? 1 : -1;
 
     calendarBodyRef.scrollTo({
       top: 0,
-      left: left * (isRTL(this.el) ? -1 : 1),
+      left: left * direction,
       behavior: 'smooth',
     });
   };
@@ -2645,7 +2671,5 @@ export class Datetime implements ComponentInterface {
 }
 
 let datetimeIds = 0;
-const CANCEL_ROLE = 'datetime-cancel';
-const CONFIRM_ROLE = 'datetime-confirm';
 const WHEEL_ITEM_PART = 'wheel-item';
 const WHEEL_ITEM_ACTIVE_PART = `active`;

core/src/components/datetime/test/basic/index.html

@@ -5,6 +5,7 @@
     <title>Datetime - Basic</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
     <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../css/palettes/dark.class.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
@@ -49,158 +50,6 @@
       ion-datetime {
         width: 350px;
       }
-
-      body.dark {
-        --ion-color-primary: #428cff;
-        --ion-color-primary-rgb: 66, 140, 255;
-        --ion-color-primary-contrast: #ffffff;
-        --ion-color-primary-contrast-rgb: 255, 255, 255;
-        --ion-color-primary-shade: #3a7be0;
-        --ion-color-primary-tint: #5598ff;
-
-        --ion-color-secondary: #50c8ff;
-        --ion-color-secondary-rgb: 80, 200, 255;
-        --ion-color-secondary-contrast: #ffffff;
-        --ion-color-secondary-contrast-rgb: 255, 255, 255;
-        --ion-color-secondary-shade: #46b0e0;
-        --ion-color-secondary-tint: #62ceff;
-
-        --ion-color-tertiary: #6a64ff;
-        --ion-color-tertiary-rgb: 106, 100, 255;
-        --ion-color-tertiary-contrast: #ffffff;
-        --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-        --ion-color-tertiary-shade: #5d58e0;
-        --ion-color-tertiary-tint: #7974ff;
-
-        --ion-color-success: #2fdf75;
-        --ion-color-success-rgb: 47, 223, 117;
-        --ion-color-success-contrast: #000000;
-        --ion-color-success-contrast-rgb: 0, 0, 0;
-        --ion-color-success-shade: #29c467;
-        --ion-color-success-tint: #44e283;
-
-        --ion-color-warning: #ffd534;
-        --ion-color-warning-rgb: 255, 213, 52;
-        --ion-color-warning-contrast: #000000;
-        --ion-color-warning-contrast-rgb: 0, 0, 0;
-        --ion-color-warning-shade: #e0bb2e;
-        --ion-color-warning-tint: #ffd948;
-
-        --ion-color-danger: #ff4961;
-        --ion-color-danger-rgb: 255, 73, 97;
-        --ion-color-danger-contrast: #ffffff;
-        --ion-color-danger-contrast-rgb: 255, 255, 255;
-        --ion-color-danger-shade: #e04055;
-        --ion-color-danger-tint: #ff5b71;
-
-        --ion-color-dark: #f4f5f8;
-        --ion-color-dark-rgb: 244, 245, 248;
-        --ion-color-dark-contrast: #000000;
-        --ion-color-dark-contrast-rgb: 0, 0, 0;
-        --ion-color-dark-shade: #d7d8da;
-        --ion-color-dark-tint: #f5f6f9;
-
-        --ion-color-medium: #989aa2;
-        --ion-color-medium-rgb: 152, 154, 162;
-        --ion-color-medium-contrast: #000000;
-        --ion-color-medium-contrast-rgb: 0, 0, 0;
-        --ion-color-medium-shade: #86888f;
-        --ion-color-medium-tint: #a2a4ab;
-
-        --ion-color-light: #222428;
-        --ion-color-light-rgb: 34, 36, 40;
-        --ion-color-light-contrast: #ffffff;
-        --ion-color-light-contrast-rgb: 255, 255, 255;
-        --ion-color-light-shade: #1e2023;
-        --ion-color-light-tint: #383a3e;
-      }
-
-      /*
-       * iOS Dark Theme
-       * -------------------------------------------
-       */
-
-      .ios body.dark {
-        --ion-background-color: #000000;
-        --ion-background-color-rgb: 0, 0, 0;
-
-        --ion-text-color: #ffffff;
-        --ion-text-color-rgb: 255, 255, 255;
-
-        --ion-color-step-50: #0d0d0d;
-        --ion-color-step-100: #1a1a1a;
-        --ion-color-step-150: #262626;
-        --ion-color-step-200: #333333;
-        --ion-color-step-250: #404040;
-        --ion-color-step-300: #4d4d4d;
-        --ion-color-step-350: #595959;
-        --ion-color-step-400: #666666;
-        --ion-color-step-450: #737373;
-        --ion-color-step-500: #808080;
-        --ion-color-step-550: #8c8c8c;
-        --ion-color-step-600: #999999;
-        --ion-color-step-650: #a6a6a6;
-        --ion-color-step-700: #b3b3b3;
-        --ion-color-step-750: #bfbfbf;
-        --ion-color-step-800: #cccccc;
-        --ion-color-step-850: #d9d9d9;
-        --ion-color-step-900: #e6e6e6;
-        --ion-color-step-950: #f2f2f2;
-
-        --ion-item-background: #000000;
-
-        --ion-card-background: #1c1c1d;
-      }
-
-      .ios body.dark ion-modal {
-        --ion-background-color: var(--ion-color-step-100);
-        --ion-toolbar-background: var(--ion-color-step-150);
-        --ion-toolbar-border-color: var(--ion-color-step-250);
-        --ion-item-background: var(--ion-color-step-150);
-      }
-
-      /*
-       * Material Design Dark Theme
-       * -------------------------------------------
-       */
-
-      .md body.dark {
-        --ion-background-color: #121212;
-        --ion-background-color-rgb: 18, 18, 18;
-
-        --ion-text-color: #ffffff;
-        --ion-text-color-rgb: 255, 255, 255;
-
-        --ion-border-color: #222222;
-
-        --ion-color-step-50: #1e1e1e;
-        --ion-color-step-100: #2a2a2a;
-        --ion-color-step-150: #363636;
-        --ion-color-step-200: #414141;
-        --ion-color-step-250: #4d4d4d;
-        --ion-color-step-300: #595959;
-        --ion-color-step-350: #656565;
-        --ion-color-step-400: #717171;
-        --ion-color-step-450: #7d7d7d;
-        --ion-color-step-500: #898989;
-        --ion-color-step-550: #949494;
-        --ion-color-step-600: #a0a0a0;
-        --ion-color-step-650: #acacac;
-        --ion-color-step-700: #b8b8b8;
-        --ion-color-step-750: #c4c4c4;
-        --ion-color-step-800: #d0d0d0;
-        --ion-color-step-850: #dbdbdb;
-        --ion-color-step-900: #e7e7e7;
-        --ion-color-step-950: #f3f3f3;
-
-        --ion-item-background: #1e1e1e;
-
-        --ion-toolbar-background: #1f1f1f;
-
-        --ion-tab-bar-background: #1f1f1f;
-
-        --ion-card-background: #1e1e1e;
-      }
     </style>
   </head>
   <body>
@@ -250,173 +99,12 @@
         </ion-toolbar>
       </ion-header>
       <ion-content class="ion-padding">
-        <div class="grid">
-          <div class="grid-item">
-            <h2>Inline</h2>
-            <ion-datetime value="2020-03-14T14:23:00.000Z" id="inline-datetime"></ion-datetime>
-          </div>
-
-          <div class="grid-item">
-            <h2>Inline - No Default Value</h2>
-            <ion-datetime id="inline-datetime-no-value"></ion-datetime>
-          </div>
-
-          <div class="grid-item">
-            <h2>Popover</h2>
-            <ion-button onclick="presentPopover(defaultPopover, event)">Present Popover</ion-button>
-            <ion-popover class="datetime-popover" id="default-popover">
-              <ion-datetime></ion-datetime>
-            </ion-popover>
-          </div>
-
-          <div class="grid-item">
-            <h2>Modal</h2>
-            <ion-button onclick="presentModal()">Present Modal</ion-button>
-          </div>
-
-          <div class="grid-item">
-            <h2>Inline - Custom</h2>
-            <ion-datetime show-default-buttons="true" color="danger" id="custom-datetime" show-clear-button="true">
-              <span slot="title">Select Date</span>
-            </ion-datetime>
-          </div>
-
-          <div class="grid-item">
-            <h2>Popover - Custom</h2>
-            <ion-button id="open-popover">Present Popover</ion-button>
-            <ion-popover class="datetime-popover" trigger="open-popover" id="custom-popover">
-              <ion-datetime>
-                <span slot="title">My Custom Title</span>
-                <ion-buttons slot="buttons">
-                  <ion-button color="danger">Destroy</ion-button>
-                  <ion-button color="primary">Confirm</ion-button>
-                </ion-buttons>
-              </ion-datetime>
-            </ion-popover>
-          </div>
-
-          <div class="grid-item">
-            <h2>Modal - Custom</h2>
-            <ion-button id="open-modal">Present Modal</ion-button>
-            <ion-modal trigger="open-modal" id="modal">
-              <ion-datetime>
-                <span slot="title">My Custom Title</span>
-                <ion-buttons slot="buttons">
-                  <ion-button color="danger">Destroy</ion-button>
-                  <ion-button color="primary">Confirm</ion-button>
-                </ion-buttons>
-              </ion-datetime>
-            </ion-modal>
-          </div>
-
-          <div class="grid-item">
-            <h2>formatOptions</h2>
-            <ion-datetime value="2020-03-14T14:23:00.000Z" id="format-options-datetime">
-              <span slot="title">Select Date</span>
-            </ion-datetime>
-          </div>
+        <ion-datetime></ion-datetime>
+        <ion-datetime dir="rtl"></ion-datetime>
+        <div dir="rtl">
+          <ion-datetime></ion-datetime>
         </div>
       </ion-content>
-      <script>
-        const datetimes = document.querySelectorAll('ion-datetime');
-        const color = document.querySelector('#color');
-        const locale = document.querySelector('#locale');
-        const datetime = document.querySelector('ion-datetime');
-        const buttons = document.querySelectorAll('ion-button');
-        const titleToggle = document.querySelector('#titleToggle');
-        const buttonsToggle = document.querySelector('#buttonsToggle');
-
-        locale.addEventListener('ionBlur', (ev) => {
-          const value = ev.target.value;
-          datetimes.forEach((datetime) => {
-            datetime.locale = !!value ? value : 'default';
-          });
-        });
-
-        const darkModeCheckbox = document.querySelector('ion-checkbox');
-        darkModeCheckbox.addEventListener('ionChange', (ev) => {
-          if (ev.detail.checked) {
-            document.body.classList.add('dark');
-          } else {
-            document.body.classList.remove('dark');
-          }
-        });
-        color.addEventListener('ionChange', (ev) => {
-          datetime.color = ev.target.value;
-          buttons.forEach((button) => {
-            button.color = ev.target.value;
-          });
-        });
-
-        titleToggle.addEventListener('ionChange', (ev) => {
-          datetimes.forEach((datetime) => {
-            datetime.showDefaultTitle = ev.detail.checked;
-          });
-        });
-        buttonsToggle.addEventListener('ionChange', (ev) => {
-          datetimes.forEach((datetime) => {
-            datetime.showDefaultButtons = ev.detail.checked;
-          });
-        });
-
-        datetimes.forEach((datetime) => {
-          datetime.addEventListener('ionFocus', () => {
-            console.log('Listen ionFocus: fired');
-          });
-
-          datetime.addEventListener('ionBlur', () => {
-            console.log('Listen ionBlur: fired');
-          });
-        });
-
-        const defaultPopover = document.querySelector('ion-popover#default-popover');
-        const customPopover = document.querySelector('ion-popover#custom-popover');
-        const presentPopover = (popover, ev) => {
-          popover.event = ev;
-          popover.showBackdrop = false;
-          popover.isOpen = true;
-
-          const dismiss = () => {
-            popover.isOpen = false;
-            popover.event = undefined;
-
-            popover.removeEventListener('didDismiss', dismiss);
-          };
-
-          popover.addEventListener('didDismiss', dismiss);
-        };
-
-        const presentModal = async () => {
-          const modal = await createModal();
-
-          await modal.present();
-        };
-
-        const createModal = () => {
-          // create component to open
-          const element = document.createElement('div');
-          element.innerHTML = `
-            <ion-datetime show-default-buttons="true" color="danger">
-              <span slot="title">Select Date</span>
-            </ion-datetime>
-          `;
-
-          // present the modal
-          const modalElement = Object.assign(document.createElement('ion-modal'), {
-            component: element,
-          });
-
-          const app = document.querySelector('ion-app');
-          app.appendChild(modalElement);
-          return modalElement;
-        };
-
-        const formatOptions = document.querySelector('#format-options-datetime');
-        formatOptions.formatOptions = {
-          time: { hour: '2-digit', minute: '2-digit' },
-          date: { day: '2-digit', month: 'long', era: 'short' },
-        };
-      </script>
     </ion-app>
   </body>
 </html>

core/src/components/datetime/test/color/datetime.e2e.ts

@@ -4,19 +4,28 @@ import { configs, test } from '@utils/test/playwright';
 /**
  * This behavior does not vary across directions
  */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('datetime: color'), () => {
     test('should not have visual regressions', async ({ page }) => {
-      await page.goto('/src/components/datetime/test/color', config);
+      await page.setContent(
+        `
+        <div id="container" style="width: 250px;">
+          <ion-datetime
+            color="danger"
+            value="2022-05-03"
+            show-default-title="true"
+            show-default-buttons="true"
+          ></ion-datetime>
+        </div>
+      `,
+        config
+      );
 
-      const datetime = page.locator('#color-datetime');
+      const container = page.locator('#container');
 
-      await expect(datetime).toHaveScreenshot(screenshot(`datetime-color`));
+      await page.locator('.datetime-ready').waitFor();
 
-      await page.evaluate(() => document.body.classList.toggle('dark'));
-      await page.waitForChanges();
-
-      await expect(datetime).toHaveScreenshot(screenshot(`datetime-color-dark`));
+      await expect(container).toHaveScreenshot(screenshot(`datetime-color`));
     });
   });
 });

core/src/components/datetime/test/color/index.html

@@ -5,6 +5,7 @@
     <title>Datetime - Color</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
     <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../css/palettes/dark.class.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
@@ -39,163 +40,6 @@
       #color-name::first-letter {
         text-transform: capitalize;
       }
-
-      /*
-      * Dark Theme
-      * -------------------------------------------
-      */
-
-      body.dark {
-        --ion-color-primary: #428cff;
-        --ion-color-primary-rgb: 66, 140, 255;
-        --ion-color-primary-contrast: #ffffff;
-        --ion-color-primary-contrast-rgb: 255, 255, 255;
-        --ion-color-primary-shade: #3a7be0;
-        --ion-color-primary-tint: #5598ff;
-
-        --ion-color-secondary: #50c8ff;
-        --ion-color-secondary-rgb: 80, 200, 255;
-        --ion-color-secondary-contrast: #ffffff;
-        --ion-color-secondary-contrast-rgb: 255, 255, 255;
-        --ion-color-secondary-shade: #46b0e0;
-        --ion-color-secondary-tint: #62ceff;
-
-        --ion-color-tertiary: #6a64ff;
-        --ion-color-tertiary-rgb: 106, 100, 255;
-        --ion-color-tertiary-contrast: #ffffff;
-        --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-        --ion-color-tertiary-shade: #5d58e0;
-        --ion-color-tertiary-tint: #7974ff;
-
-        --ion-color-success: #2fdf75;
-        --ion-color-success-rgb: 47, 223, 117;
-        --ion-color-success-contrast: #000000;
-        --ion-color-success-contrast-rgb: 0, 0, 0;
-        --ion-color-success-shade: #29c467;
-        --ion-color-success-tint: #44e283;
-
-        --ion-color-warning: #ffd534;
-        --ion-color-warning-rgb: 255, 213, 52;
-        --ion-color-warning-contrast: #000000;
-        --ion-color-warning-contrast-rgb: 0, 0, 0;
-        --ion-color-warning-shade: #e0bb2e;
-        --ion-color-warning-tint: #ffd948;
-
-        --ion-color-danger: #ff4961;
-        --ion-color-danger-rgb: 255, 73, 97;
-        --ion-color-danger-contrast: #ffffff;
-        --ion-color-danger-contrast-rgb: 255, 255, 255;
-        --ion-color-danger-shade: #e04055;
-        --ion-color-danger-tint: #ff5b71;
-
-        --ion-color-dark: #f4f5f8;
-        --ion-color-dark-rgb: 244, 245, 248;
-        --ion-color-dark-contrast: #000000;
-        --ion-color-dark-contrast-rgb: 0, 0, 0;
-        --ion-color-dark-shade: #d7d8da;
-        --ion-color-dark-tint: #f5f6f9;
-
-        --ion-color-medium: #989aa2;
-        --ion-color-medium-rgb: 152, 154, 162;
-        --ion-color-medium-contrast: #000000;
-        --ion-color-medium-contrast-rgb: 0, 0, 0;
-        --ion-color-medium-shade: #86888f;
-        --ion-color-medium-tint: #a2a4ab;
-
-        --ion-color-light: #222428;
-        --ion-color-light-rgb: 34, 36, 40;
-        --ion-color-light-contrast: #ffffff;
-        --ion-color-light-contrast-rgb: 255, 255, 255;
-        --ion-color-light-shade: #1e2023;
-        --ion-color-light-tint: #383a3e;
-      }
-
-      /*
-      * iOS Dark Theme
-      * -------------------------------------------
-      */
-
-      .ios body.dark {
-        --ion-background-color: #000000;
-        --ion-background-color-rgb: 0, 0, 0;
-
-        --ion-text-color: #ffffff;
-        --ion-text-color-rgb: 255, 255, 255;
-
-        --ion-color-step-50: #0d0d0d;
-        --ion-color-step-100: #1a1a1a;
-        --ion-color-step-150: #262626;
-        --ion-color-step-200: #333333;
-        --ion-color-step-250: #404040;
-        --ion-color-step-300: #4d4d4d;
-        --ion-color-step-350: #595959;
-        --ion-color-step-400: #666666;
-        --ion-color-step-450: #737373;
-        --ion-color-step-500: #808080;
-        --ion-color-step-550: #8c8c8c;
-        --ion-color-step-600: #999999;
-        --ion-color-step-650: #a6a6a6;
-        --ion-color-step-700: #b3b3b3;
-        --ion-color-step-750: #bfbfbf;
-        --ion-color-step-800: #cccccc;
-        --ion-color-step-850: #d9d9d9;
-        --ion-color-step-900: #e6e6e6;
-        --ion-color-step-950: #f2f2f2;
-
-        --ion-item-background: #000000;
-
-        --ion-card-background: #1c1c1d;
-      }
-
-      .ios body.dark ion-modal {
-        --ion-background-color: var(--ion-color-step-100);
-        --ion-toolbar-background: var(--ion-color-step-150);
-        --ion-toolbar-border-color: var(--ion-color-step-250);
-        --ion-item-background: var(--ion-color-step-150);
-      }
-
-      /*
-      * Material Design Dark Theme
-      * -------------------------------------------
-      */
-
-      .md body.dark {
-        --ion-background-color: #121212;
-        --ion-background-color-rgb: 18, 18, 18;
-
-        --ion-text-color: #ffffff;
-        --ion-text-color-rgb: 255, 255, 255;
-
-        --ion-border-color: #222222;
-
-        --ion-color-step-50: #1e1e1e;
-        --ion-color-step-100: #2a2a2a;
-        --ion-color-step-150: #363636;
-        --ion-color-step-200: #414141;
-        --ion-color-step-250: #4d4d4d;
-        --ion-color-step-300: #595959;
-        --ion-color-step-350: #656565;
-        --ion-color-step-400: #717171;
-        --ion-color-step-450: #7d7d7d;
-        --ion-color-step-500: #898989;
-        --ion-color-step-550: #949494;
-        --ion-color-step-600: #a0a0a0;
-        --ion-color-step-650: #acacac;
-        --ion-color-step-700: #b8b8b8;
-        --ion-color-step-750: #c4c4c4;
-        --ion-color-step-800: #d0d0d0;
-        --ion-color-step-850: #dbdbdb;
-        --ion-color-step-900: #e7e7e7;
-        --ion-color-step-950: #f3f3f3;
-
-        --ion-item-background: #1e1e1e;
-
-        --ion-toolbar-background: #1f1f1f;
-
-        --ion-tab-bar-background: #1f1f1f;
-
-        --ion-card-background: #1e1e1e;
-      }
     </style>
   </head>
   <body>
@@ -231,15 +75,15 @@
         const colorDatetime = document.querySelector('#color-datetime');
         const colorName = document.querySelector('#color-name');
         const colorSelect = document.querySelector('ion-select');
-        const darkModeToggle = document.querySelector('ion-checkbox');
+        const darkModeCheckbox = document.querySelector('ion-checkbox');
 
         colorSelect.addEventListener('ionChange', (ev) => {
           colorDatetime.color = ev.detail.value;
           colorName.innerHTML = ev.detail.value;
         });
 
-        darkModeToggle.addEventListener('ionChange', (ev) => {
-          document.body.classList.toggle('dark');
+        darkModeCheckbox.addEventListener('ionChange', (ev) => {
+          document.documentElement.classList.toggle('ion-palette-dark');
         });
       </script>
     </ion-app>

core/src/components/datetime/test/overlay-roles/datetime.e2e.ts

@@ -1,41 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
-  test.describe(title('datetime: overlay roles'), () => {
-    test.beforeEach(async ({ page }) => {
-      await page.setContent(
-        `
-          <ion-modal>
-            <ion-datetime></ion-datetime>
-          </ion-modal>  
-        `,
-        config
-      );
-    });
-    test('should pass role to overlay when calling confirm method', async ({ page }) => {
-      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-      const modal = page.locator('ion-modal');
-      const datetime = page.locator('ion-datetime');
-
-      await modal.evaluate((el: HTMLIonModalElement) => el.present());
-
-      await datetime.evaluate((el: HTMLIonDatetimeElement) => el.confirm(true));
-
-      await ionModalDidDismiss.next();
-      expect(ionModalDidDismiss).toHaveReceivedEventDetail({ data: undefined, role: 'datetime-confirm' });
-    });
-    test('should pass role to overlay when calling cancel method', async ({ page }) => {
-      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-      const modal = page.locator('ion-modal');
-      const datetime = page.locator('ion-datetime');
-
-      await modal.evaluate((el: HTMLIonModalElement) => el.present());
-
-      await datetime.evaluate((el: HTMLIonDatetimeElement) => el.cancel(true));
-
-      await ionModalDidDismiss.next();
-      expect(ionModalDidDismiss).toHaveReceivedEventDetail({ data: undefined, role: 'datetime-cancel' });
-    });
-  });
-});

core/src/components/datetime/test/overlay-roles/index.html

@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Datetime - Overlay Roles</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      ion-modal.ios,
-      ion-popover.datetime-popover.ios {
-        --width: 350px;
-        --height: 420px;
-      }
-
-      ion-modal.md,
-      ion-popover.datetime-popover.md {
-        --width: 350px;
-        --height: 450px;
-      }
-
-      ion-datetime {
-        width: 350px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-header translucent="true">
-        <ion-toolbar>
-          <ion-title>Datetime - Overlay Roles</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <ion-button onclick="presentModal()">Present Modal</ion-button>
-      </ion-content>
-    </ion-app>
-    <script>
-      const presentModal = async () => {
-        const modal = await createModal();
-
-        await modal.present();
-        console.log(await modal.onDidDismiss());
-      };
-
-      const createModal = () => {
-        // create component to open
-        const element = document.createElement('div');
-        element.innerHTML = `
-            <ion-datetime show-default-buttons="true"></ion-datetime>
-          `;
-
-        // present the modal
-        const modalElement = Object.assign(document.createElement('ion-modal'), {
-          component: element,
-        });
-
-        const app = document.querySelector('ion-app');
-        app.appendChild(modalElement);
-        return modalElement;
-      };
-    </script>
-  </body>
-</html>

core/src/components/input/input.tsx

@@ -92,11 +92,6 @@ export class Input implements ComponentInterface {
    */
   @Prop() clearInput = false;
 
-  /**
-   * The icon to use for the clear button. Only applies when `clearInput` is set to `true`.
-   */
-  @Prop() clearInputIcon?: string;
-
   /**
    * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
    */
@@ -686,13 +681,11 @@ export class Input implements ComponentInterface {
   }
 
   render() {
-    const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus, clearInputIcon } = this;
+    const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus } = this;
     const mode = getIonMode(this);
     const value = this.getValue();
     const inItem = hostContext('ion-item', this.el);
     const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
-    const defaultClearIcon = mode === 'ios' ? closeCircle : closeSharp;
-    const clearIconData = clearInputIcon ?? defaultClearIcon;
 
     const hasValue = this.hasValue();
     const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
@@ -791,7 +784,7 @@ export class Input implements ComponentInterface {
                 }}
                 onClick={this.clearTextInput}
               >
-                <ion-icon aria-hidden="true" icon={clearIconData}></ion-icon>
+                <ion-icon aria-hidden="true" icon={mode === 'ios' ? closeCircle : closeSharp}></ion-icon>
               </button>
             )}
             <slot name="end"></slot>

core/src/components/input/test/input.spec.ts

@@ -99,19 +99,3 @@ describe('input: label rendering', () => {
     expect(labelText.textContent).toBe('Label Prop Text');
   });
 });
-
-// https://github.com/ionic-team/ionic-framework/issues/26974
-describe('input: clear icon', () => {
-  it('should render custom icon', async () => {
-    const page = await newSpecPage({
-      components: [Input],
-      html: `
-        <ion-input clear-input-icon="foo" clear-input="true"></ion-input>
-      `,
-    });
-
-    const icon = page.body.querySelector<HTMLIonIconElement>('ion-input ion-icon')!;
-
-    expect(icon.getAttribute('icon')).toBe('foo');
-  });
-});

core/src/components/modal/gestures/sheet.ts

@@ -1,6 +1,6 @@
+import { isIonContent, findClosestIonContent } from '@utils/content';
 import { createGesture } from '@utils/gesture';
-import { clamp, raf } from '@utils/helpers';
-import { FOCUS_TRAP_DISABLE_CLASS } from '@utils/overlays';
+import { clamp, raf, getElementRoot } from '@utils/helpers';
 
 import type { Animation } from '../../../interface';
 import type { GestureDetail } from '../../../utils/gesture';
@@ -92,7 +92,7 @@ export const createSheetGesture = (
      * as inputs should not be focusable outside
      * the sheet.
      */
-    baseEl.classList.remove(FOCUS_TRAP_DISABLE_CLASS);
+    baseEl.classList.remove('ion-disable-focus-trap');
   };
 
   const disableBackdrop = () => {
@@ -106,7 +106,7 @@ export const createSheetGesture = (
      * Adding this class disables focus trapping
      * for the sheet temporarily.
      */
-    baseEl.classList.add(FOCUS_TRAP_DISABLE_CLASS);
+    baseEl.classList.add('ion-disable-focus-trap');
   };
 
   /**
@@ -143,22 +143,35 @@ export const createSheetGesture = (
 
   const canStart = (detail: GestureDetail) => {
     /**
-     * If the sheet is fully expanded and
-     * the user is swiping on the content,
-     * the gesture should not start to
-     * allow for scrolling on the content.
+     * If we are swiping on the content, swiping should only be possible if the content
+     * is scrolled all the way to the top so that we do not interfere with scrolling.
+     *
+     * We cannot assume that the `ion-content` target will remain consistent between swipes.
+     * For example, when using ion-nav within a modal it is possible to swipe, push a view,
+     * and then swipe again. The target content will not be the same between swipes.
      */
-    const content = (detail.event.target! as HTMLElement).closest('ion-content');
+    const contentEl = findClosestIonContent(detail.event.target! as HTMLElement);
     currentBreakpoint = getCurrentBreakpoint();
 
-    if (currentBreakpoint === 1 && content) {
-      return false;
+    if (currentBreakpoint === 1 && contentEl) {
+      /**
+       * The modal should never swipe to close on the content with a refresher.
+       * Note 1: We cannot solve this by making this gesture have a higher priority than
+       * the refresher gesture as the iOS native refresh gesture uses a scroll listener in
+       * addition to a gesture.
+       *
+       * Note 2: Do not use getScrollElement here because we need this to be a synchronous
+       * operation, and getScrollElement is asynchronous.
+       */
+      const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
+      const hasRefresherInContent = !!contentEl.querySelector('ion-refresher');
+      return !hasRefresherInContent && scrollEl!.scrollTop === 0;
     }
 
     return true;
   };
 
-  const onStart = () => {
+  const onStart = (detail: GestureDetail) => {
     /**
      * If canDismiss is anything other than `true`
      * then users should be able to swipe down
@@ -174,11 +187,10 @@ export const createSheetGesture = (
     canDismissBlocksGesture = baseEl.canDismiss !== undefined && baseEl.canDismiss !== true && minBreakpoint === 0;
 
     /**
-     * If swiping on the content
-     * we should disable scrolling otherwise
-     * the sheet will expand and the content will scroll.
+     * If we are pulling down, then it is possible we are pulling on the content.
+     * We do not want scrolling to happen at the same time as the gesture.
      */
-    if (contentEl) {
+    if (detail.deltaY > 0 && contentEl) {
       contentEl.scrollY = false;
     }
 
@@ -194,6 +206,16 @@ export const createSheetGesture = (
   };
 
   const onMove = (detail: GestureDetail) => {
+    /**
+     * If we are pulling down, then it is possible we are pulling on the content.
+     * We do not want scrolling to happen at the same time as the gesture.
+     * This accounts for when the user scrolls down, scrolls all the way up, and then
+     * pulls down again such that the modal should start to move.
+     */
+    if (detail.deltaY > 0 && contentEl) {
+      contentEl.scrollY = false;
+    }
+
     /**
      * Given the change in gesture position on the Y axis,
      * compute where the offset of the animation should be
@@ -315,6 +337,17 @@ export const createSheetGesture = (
       onDismiss();
     }
 
+    /**
+     * If the sheet is going to be fully expanded then we should enable
+     * scrolling immediately. The sheet modal animation takes ~500ms to finish
+     * so if we wait until then there is a visible delay for when scrolling is
+     * re-enabled. Native iOS allows for scrolling on the sheet modal as soon
+     * as the gesture is released, so we align with that.
+     */
+    if (contentEl && snapToBreakpoint === breakpoints[breakpoints.length - 1]) {
+      contentEl.scrollY = true;
+    }
+
     return new Promise<void>((resolve) => {
       animation
         .onFinish(
@@ -335,14 +368,6 @@ export const createSheetGesture = (
                   currentBreakpoint = snapToBreakpoint;
                   onBreakpointChange(currentBreakpoint);
 
-                  /**
-                   * If the sheet is fully expanded, we can safely
-                   * enable scrolling again.
-                   */
-                  if (contentEl && currentBreakpoint === breakpoints[breakpoints.length - 1]) {
-                    contentEl.scrollY = true;
-                  }
-
                   /**
                    * Backdrop should become enabled
                    * after the backdropBreakpoint value

core/src/components/modal/modal.tsx

@@ -16,7 +16,6 @@ import {
   present,
   createTriggerController,
   setOverlayId,
-  FOCUS_TRAP_DISABLE_CLASS,
 } from '@utils/overlays';
 import { getClassMap } from '@utils/theme';
 import { deepReady, waitForMount } from '@utils/transition';
@@ -258,25 +257,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
    */
   @Prop() keepContentsMounted = false;
 
-  /**
-   * If `true`, focus will not be allowed to move outside of this overlay.
-   * If 'false', focus will be allowed to move outside of the overlay.
-   *
-   * In most scenarios this property should remain set to `true`. Setting
-   * this property to `false` can cause severe accessibility issues as users
-   * relying on assistive technologies may be able to move focus into
-   * a confusing state. We recommend only setting this to `false` when
-   * absolutely necessary.
-   *
-   * Developers may want to consider disabling focus trapping if this
-   * overlay presents a non-Ionic overlay from a 3rd party library.
-   * Developers would disable focus trapping on the Ionic overlay
-   * when presenting the 3rd party overlay and then re-enable
-   * focus trapping when dismissing the 3rd party overlay and moving
-   * focus back to the Ionic overlay.
-   */
-  @Prop() focusTrap = true;
-
   /**
    * Determines whether or not a modal can dismiss
    * when calling the `dismiss` method.
@@ -925,8 +905,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
   };
 
   render() {
-    const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap } =
-      this;
+    const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes } = this;
 
     const showHandle = handle !== false && isSheetModal;
     const mode = getIonMode(this);
@@ -947,7 +926,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
           [`modal-card`]: isCardModal,
           [`modal-sheet`]: isSheetModal,
           'overlay-hidden': true,
-          [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false,
           ...getClassMap(this.cssClass),
         }}
         onIonBackdropTap={this.onBackdropTap}

core/src/components/modal/test/basic/modal.spec.tsx

@@ -2,7 +2,6 @@ import { h } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';
 
 import { Modal } from '../../modal';
-import { FOCUS_TRAP_DISABLE_CLASS } from '@utils/overlays';
 
 describe('modal: htmlAttributes inheritance', () => {
   it('should correctly inherit attributes on host', async () => {
@@ -16,26 +15,3 @@ describe('modal: htmlAttributes inheritance', () => {
     await expect(modal.getAttribute('data-testid')).toBe('basic-modal');
   });
 });
-
-describe('modal: focus trap', () => {
-  it('should set the focus trap class when disabled', async () => {
-    const page = await newSpecPage({
-      components: [Modal],
-      template: () => <ion-modal focusTrap={false} overlayIndex={1}></ion-modal>,
-    });
-
-    const modal = page.body.querySelector('ion-modal')!;
-
-    expect(modal.classList.contains(FOCUS_TRAP_DISABLE_CLASS)).toBe(true);
-  });
-  it('should not set the focus trap class by default', async () => {
-    const page = await newSpecPage({
-      components: [Modal],
-      template: () => <ion-modal overlayIndex={1}></ion-modal>,
-    });
-
-    const modal = page.body.querySelector('ion-modal')!;
-
-    expect(modal.classList.contains(FOCUS_TRAP_DISABLE_CLASS)).toBe(false);
-  });
-});

core/src/components/modal/test/dark-mode/index.html

@@ -8,6 +8,7 @@
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
     <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../css/palettes/dark.always.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>
@@ -36,167 +37,10 @@
         margin-top: 10px;
         margin-left: 5px;
       }
-
-      /*
-       * Dark Colors
-       * -------------------------------------------
-       */
-
-      body.dark {
-        --ion-color-primary: #428cff;
-        --ion-color-primary-rgb: 66, 140, 255;
-        --ion-color-primary-contrast: #ffffff;
-        --ion-color-primary-contrast-rgb: 255, 255, 255;
-        --ion-color-primary-shade: #3a7be0;
-        --ion-color-primary-tint: #5598ff;
-
-        --ion-color-secondary: #50c8ff;
-        --ion-color-secondary-rgb: 80, 200, 255;
-        --ion-color-secondary-contrast: #ffffff;
-        --ion-color-secondary-contrast-rgb: 255, 255, 255;
-        --ion-color-secondary-shade: #46b0e0;
-        --ion-color-secondary-tint: #62ceff;
-
-        --ion-color-tertiary: #6a64ff;
-        --ion-color-tertiary-rgb: 106, 100, 255;
-        --ion-color-tertiary-contrast: #ffffff;
-        --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-        --ion-color-tertiary-shade: #5d58e0;
-        --ion-color-tertiary-tint: #7974ff;
-
-        --ion-color-success: #2fdf75;
-        --ion-color-success-rgb: 47, 223, 117;
-        --ion-color-success-contrast: #000000;
-        --ion-color-success-contrast-rgb: 0, 0, 0;
-        --ion-color-success-shade: #29c467;
-        --ion-color-success-tint: #44e283;
-
-        --ion-color-warning: #ffd534;
-        --ion-color-warning-rgb: 255, 213, 52;
-        --ion-color-warning-contrast: #000000;
-        --ion-color-warning-contrast-rgb: 0, 0, 0;
-        --ion-color-warning-shade: #e0bb2e;
-        --ion-color-warning-tint: #ffd948;
-
-        --ion-color-danger: #ff4961;
-        --ion-color-danger-rgb: 255, 73, 97;
-        --ion-color-danger-contrast: #ffffff;
-        --ion-color-danger-contrast-rgb: 255, 255, 255;
-        --ion-color-danger-shade: #e04055;
-        --ion-color-danger-tint: #ff5b71;
-
-        --ion-color-dark: #f4f5f8;
-        --ion-color-dark-rgb: 244, 245, 248;
-        --ion-color-dark-contrast: #000000;
-        --ion-color-dark-contrast-rgb: 0, 0, 0;
-        --ion-color-dark-shade: #d7d8da;
-        --ion-color-dark-tint: #f5f6f9;
-
-        --ion-color-medium: #989aa2;
-        --ion-color-medium-rgb: 152, 154, 162;
-        --ion-color-medium-contrast: #000000;
-        --ion-color-medium-contrast-rgb: 0, 0, 0;
-        --ion-color-medium-shade: #86888f;
-        --ion-color-medium-tint: #a2a4ab;
-
-        --ion-color-light: #222428;
-        --ion-color-light-rgb: 34, 36, 40;
-        --ion-color-light-contrast: #ffffff;
-        --ion-color-light-contrast-rgb: 255, 255, 255;
-        --ion-color-light-shade: #1e2023;
-        --ion-color-light-tint: #383a3e;
-      }
-
-      /*
-       * iOS Dark Theme
-       * -------------------------------------------
-       */
-
-      .ios body.dark {
-        --ion-background-color: #000000;
-        --ion-background-color-rgb: 0, 0, 0;
-
-        --ion-text-color: #ffffff;
-        --ion-text-color-rgb: 255, 255, 255;
-
-        --ion-color-step-50: #0d0d0d;
-        --ion-color-step-100: #1a1a1a;
-        --ion-color-step-150: #262626;
-        --ion-color-step-200: #333333;
-        --ion-color-step-250: #404040;
-        --ion-color-step-300: #4d4d4d;
-        --ion-color-step-350: #595959;
-        --ion-color-step-400: #666666;
-        --ion-color-step-450: #737373;
-        --ion-color-step-500: #808080;
-        --ion-color-step-550: #8c8c8c;
-        --ion-color-step-600: #999999;
-        --ion-color-step-650: #a6a6a6;
-        --ion-color-step-700: #b3b3b3;
-        --ion-color-step-750: #bfbfbf;
-        --ion-color-step-800: #cccccc;
-        --ion-color-step-850: #d9d9d9;
-        --ion-color-step-900: #e6e6e6;
-        --ion-color-step-950: #f2f2f2;
-
-        --ion-item-background: #000000;
-
-        --ion-card-background: #1c1c1d;
-      }
-
-      .ios body.dark ion-modal {
-        --ion-background-color: var(--ion-color-step-100);
-        --ion-toolbar-background: var(--ion-color-step-150);
-        --ion-toolbar-border-color: var(--ion-color-step-250);
-        --ion-item-background: var(--ion-color-step-150);
-      }
-
-      /*
-       * Material Design Dark Theme
-       * -------------------------------------------
-       */
-
-      .md body.dark {
-        --ion-background-color: #121212;
-        --ion-background-color-rgb: 18, 18, 18;
-
-        --ion-text-color: #ffffff;
-        --ion-text-color-rgb: 255, 255, 255;
-
-        --ion-border-color: #222222;
-
-        --ion-color-step-50: #1e1e1e;
-        --ion-color-step-100: #2a2a2a;
-        --ion-color-step-150: #363636;
-        --ion-color-step-200: #414141;
-        --ion-color-step-250: #4d4d4d;
-        --ion-color-step-300: #595959;
-        --ion-color-step-350: #656565;
-        --ion-color-step-400: #717171;
-        --ion-color-step-450: #7d7d7d;
-        --ion-color-step-500: #898989;
-        --ion-color-step-550: #949494;
-        --ion-color-step-600: #a0a0a0;
-        --ion-color-step-650: #acacac;
-        --ion-color-step-700: #b8b8b8;
-        --ion-color-step-750: #c4c4c4;
-        --ion-color-step-800: #d0d0d0;
-        --ion-color-step-850: #dbdbdb;
-        --ion-color-step-900: #e7e7e7;
-        --ion-color-step-950: #f3f3f3;
-
-        --ion-item-background: #1e1e1e;
-
-        --ion-toolbar-background: #1f1f1f;
-
-        --ion-tab-bar-background: #1f1f1f;
-
-        --ion-card-background: #1e1e1e;
-      }
     </style>
   </head>
 
-  <body class="dark">
+  <body>
     <ion-app>
       <div class="ion-page">
         <ion-header>

core/src/components/popover/popover.tsx

@@ -5,15 +5,7 @@ import { CoreDelegate, attachComponent, detachComponent } from '@utils/framework
 import { addEventListener, raf, hasLazyBuild } from '@utils/helpers';
 import { createLockController } from '@utils/lock-controller';
 import { printIonWarning } from '@utils/logging';
-import {
-  BACKDROP,
-  dismiss,
-  eventMethod,
-  prepareOverlay,
-  present,
-  setOverlayId,
-  FOCUS_TRAP_DISABLE_CLASS,
-} from '@utils/overlays';
+import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, setOverlayId } from '@utils/overlays';
 import { isPlatform } from '@utils/platform';
 import { getClassMap } from '@utils/theme';
 import { deepReady, waitForMount } from '@utils/transition';
@@ -244,25 +236,6 @@ export class Popover implements ComponentInterface, PopoverInterface {
    */
   @Prop() keyboardEvents = false;
 
-  /**
-   * If `true`, focus will not be allowed to move outside of this overlay.
-   * If 'false', focus will be allowed to move outside of the overlay.
-   *
-   * In most scenarios this property should remain set to `true`. Setting
-   * this property to `false` can cause severe accessibility issues as users
-   * relying on assistive technologies may be able to move focus into
-   * a confusing state. We recommend only setting this to `false` when
-   * absolutely necessary.
-   *
-   * Developers may want to consider disabling focus trapping if this
-   * overlay presents a non-Ionic overlay from a 3rd party library.
-   * Developers would disable focus trapping on the Ionic overlay
-   * when presenting the 3rd party overlay and then re-enable
-   * focus trapping when dismissing the 3rd party overlay and moving
-   * focus back to the Ionic overlay.
-   */
-  @Prop() focusTrap = true;
-
   @Watch('trigger')
   @Watch('triggerAction')
   onTriggerChange() {
@@ -683,7 +656,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
 
   render() {
     const mode = getIonMode(this);
-    const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
+    const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
     const desktop = isPlatform('desktop');
     const enableArrow = arrow && !parentPopover;
 
@@ -703,7 +676,6 @@ export class Popover implements ComponentInterface, PopoverInterface {
           'overlay-hidden': true,
           'popover-desktop': desktop,
           [`popover-side-${side}`]: true,
-          [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false,
           'popover-nested': !!parentPopover,
         }}
         onIonPopoverDidPresent={onLifecycle}

core/src/components/popover/test/basic/popover.spec.tsx

@@ -3,8 +3,6 @@ import { newSpecPage } from '@stencil/core/testing';
 
 import { Popover } from '../../popover';
 
-import { FOCUS_TRAP_DISABLE_CLASS } from '@utils/overlays';
-
 describe('popover: htmlAttributes inheritance', () => {
   it('should correctly inherit attributes on host', async () => {
     const page = await newSpecPage({
@@ -17,26 +15,3 @@ describe('popover: htmlAttributes inheritance', () => {
     await expect(popover.getAttribute('data-testid')).toBe('basic-popover');
   });
 });
-
-describe('popover: focus trap', () => {
-  it('should set the focus trap class when disabled', async () => {
-    const page = await newSpecPage({
-      components: [Popover],
-      template: () => <ion-popover focusTrap={false} overlayIndex={1}></ion-popover>,
-    });
-
-    const popover = page.body.querySelector('ion-popover')!;
-
-    expect(popover.classList.contains(FOCUS_TRAP_DISABLE_CLASS)).toBe(true);
-  });
-  it('should not set the focus trap class by default', async () => {
-    const page = await newSpecPage({
-      components: [Popover],
-      template: () => <ion-popover overlayIndex={1}></ion-popover>,
-    });
-
-    const popover = page.body.querySelector('ion-popover')!;
-
-    expect(popover.classList.contains(FOCUS_TRAP_DISABLE_CLASS)).toBe(false);
-  });
-});

core/src/components/radio/radio.scss

@@ -58,6 +58,8 @@ input {
 }
 
 :host(.in-item) {
+  flex: 1 1 0;
+
   width: 100%;
   height: 100%;
 }

core/src/components/toggle/test/enable-on-off-labels/index.html

@@ -8,162 +8,11 @@
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
     <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../css/palettes/dark.class.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>
-      /*
-       * Dark Colors
-       * ------------------
-       */
-
-      body.dark {
-        --ion-color-primary: #428cff;
-        --ion-color-primary-rgb: 66, 140, 255;
-        --ion-color-primary-contrast: #ffffff;
-        --ion-color-primary-contrast-rgb: 255, 255, 255;
-        --ion-color-primary-shade: #3a7be0;
-        --ion-color-primary-tint: #5598ff;
-
-        --ion-color-secondary: #50c8ff;
-        --ion-color-secondary-rgb: 80, 200, 255;
-        --ion-color-secondary-contrast: #ffffff;
-        --ion-color-secondary-contrast-rgb: 255, 255, 255;
-        --ion-color-secondary-shade: #46b0e0;
-        --ion-color-secondary-tint: #62ceff;
-
-        --ion-color-tertiary: #6a64ff;
-        --ion-color-tertiary-rgb: 106, 100, 255;
-        --ion-color-tertiary-contrast: #ffffff;
-        --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-        --ion-color-tertiary-shade: #5d58e0;
-        --ion-color-tertiary-tint: #7974ff;
-
-        --ion-color-success: #2fdf75;
-        --ion-color-success-rgb: 47, 223, 117;
-        --ion-color-success-contrast: #000000;
-        --ion-color-success-contrast-rgb: 0, 0, 0;
-        --ion-color-success-shade: #29c467;
-        --ion-color-success-tint: #44e283;
-
-        --ion-color-warning: #ffd534;
-        --ion-color-warning-rgb: 255, 213, 52;
-        --ion-color-warning-contrast: #000000;
-        --ion-color-warning-contrast-rgb: 0, 0, 0;
-        --ion-color-warning-shade: #e0bb2e;
-        --ion-color-warning-tint: #ffd948;
-
-        --ion-color-danger: #ff4961;
-        --ion-color-danger-rgb: 255, 73, 97;
-        --ion-color-danger-contrast: #ffffff;
-        --ion-color-danger-contrast-rgb: 255, 255, 255;
-        --ion-color-danger-shade: #e04055;
-        --ion-color-danger-tint: #ff5b71;
-
-        --ion-color-dark: #f4f5f8;
-        --ion-color-dark-rgb: 244, 245, 248;
-        --ion-color-dark-contrast: #000000;
-        --ion-color-dark-contrast-rgb: 0, 0, 0;
-        --ion-color-dark-shade: #d7d8da;
-        --ion-color-dark-tint: #f5f6f9;
-
-        --ion-color-medium: #989aa2;
-        --ion-color-medium-rgb: 152, 154, 162;
-        --ion-color-medium-contrast: #000000;
-        --ion-color-medium-contrast-rgb: 0, 0, 0;
-        --ion-color-medium-shade: #86888f;
-        --ion-color-medium-tint: #a2a4ab;
-
-        --ion-color-light: #222428;
-        --ion-color-light-rgb: 34, 36, 40;
-        --ion-color-light-contrast: #ffffff;
-        --ion-color-light-contrast-rgb: 255, 255, 255;
-        --ion-color-light-shade: #1e2023;
-        --ion-color-light-tint: #383a3e;
-      }
-
-      /*
-       * iOS Dark Theme
-       * -------------------
-       */
-
-      .ios body.dark {
-        --ion-background-color: #000000;
-        --ion-background-color-rgb: 0, 0, 0;
-
-        --ion-text-color: #ffffff;
-        --ion-text-color-rgb: 255, 255, 255;
-
-        --ion-color-step-50: #0d0d0d;
-        --ion-color-step-100: #1a1a1a;
-        --ion-color-step-150: #262626;
-        --ion-color-step-200: #333333;
-        --ion-color-step-250: #404040;
-        --ion-color-step-300: #4d4d4d;
-        --ion-color-step-350: #595959;
-        --ion-color-step-400: #666666;
-        --ion-color-step-450: #737373;
-        --ion-color-step-500: #808080;
-        --ion-color-step-550: #8c8c8c;
-        --ion-color-step-600: #999999;
-        --ion-color-step-650: #a6a6a6;
-        --ion-color-step-700: #b3b3b3;
-        --ion-color-step-750: #bfbfbf;
-        --ion-color-step-800: #cccccc;
-        --ion-color-step-850: #d9d9d9;
-        --ion-color-step-900: #e6e6e6;
-        --ion-color-step-950: #f2f2f2;
-
-        --ion-toolbar-background: #0d0d0d;
-
-        --ion-item-background: #1c1c1c;
-        --ion-item-background-activated: #313131;
-      }
-
-      /*
-       * Material Design Dark Theme
-       * ------------------------------
-       */
-
-      .md body.dark {
-        --ion-background-color: #121212;
-        --ion-background-color-rgb: 18, 18, 18;
-
-        --ion-text-color: #ffffff;
-        --ion-text-color-rgb: 255, 255, 255;
-
-        --ion-border-color: #222222;
-
-        --ion-color-step-50: #1e1e1e;
-        --ion-color-step-100: #2a2a2a;
-        --ion-color-step-150: #363636;
-        --ion-color-step-200: #414141;
-        --ion-color-step-250: #4d4d4d;
-        --ion-color-step-300: #595959;
-        --ion-color-step-350: #656565;
-        --ion-color-step-400: #717171;
-        --ion-color-step-450: #7d7d7d;
-        --ion-color-step-500: #898989;
-        --ion-color-step-550: #949494;
-        --ion-color-step-600: #a0a0a0;
-        --ion-color-step-650: #acacac;
-        --ion-color-step-700: #b8b8b8;
-        --ion-color-step-750: #c4c4c4;
-        --ion-color-step-800: #d0d0d0;
-        --ion-color-step-850: #dbdbdb;
-        --ion-color-step-900: #e7e7e7;
-        --ion-color-step-950: #f3f3f3;
-
-        --ion-item-background: #1a1b1e;
-      }
-
-      /* Optional CSS, this is added for the flashing that happens when toggling between themes */
-      ion-item {
-        --transition: none;
-      }
-    </style>
   </head>
 
   <body>
@@ -256,11 +105,7 @@
     <script>
       const darkModeCheckbox = document.querySelector('ion-checkbox');
       darkModeCheckbox.addEventListener('ionChange', (ev) => {
-        if (ev.detail.checked) {
-          document.body.classList.add('dark');
-        } else {
-          document.body.classList.remove('dark');
-        }
+        document.documentElement.classList.toggle('ion-palette-dark');
       });
     </script>
   </body>

core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts

@@ -1,49 +1,70 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('toggle: enableOnOffLabels'), () => {
-    test.beforeEach(async ({ page }) => {
-      await page.goto(`/src/components/toggle/test/enable-on-off-labels`, config);
+configs({ palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toggle: enable-on-off-labels'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          #container {
+            display: grid;
+            grid-template-columns: repeat(2, auto);
+            justify-content: space-evenly;
+            gap: 8px;
+            padding: 16px 0;
+          }
+        </style>
+
+        <div id="container">
+          <ion-toggle enable-on-off-labels="true">Unchecked</ion-toggle>
+          <ion-toggle enable-on-off-labels="true" checked>Checked</ion-toggle>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`toggle-on-off-labels`));
     });
 
-    test('should not have visual regressions', async ({ page }) => {
-      await page.setIonViewport();
+    test('should not have visual regressions with color', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          #container {
+            display: grid;
+            grid-template-columns: repeat(2, auto);
+            justify-content: space-evenly;
+            gap: 8px;
+            padding: 16px 0;
+          }
+        </style>
 
-      await expect(page).toHaveScreenshot(screenshot(`toggle-on-off-labels-diff`));
-    });
-  });
-});
-
-/**
- * This behavior does not vary across directions
- */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('toggle: dark mode'), () => {
-    test.beforeEach(async ({ page }) => {
-      await page.goto(`/src/components/toggle/test/enable-on-off-labels`, config);
-    });
-
-    test('should not have visual regressions', async ({ page }) => {
-      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
-      const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
-
-      await page.click('#popover-trigger');
-      await ionPopoverDidPresent.next();
-
-      await page.click('#dark-mode');
-
-      await page.evaluate(() => {
-        const popover = document.querySelector('ion-popover');
-        return popover?.dismiss();
-      });
-      await ionPopoverDidDismiss.next();
-
-      await page.waitForChanges();
-
-      await page.setIonViewport();
-
-      await expect(page).toHaveScreenshot(screenshot(`toggle-on-off-labels-dark-mode-diff`));
+        <div id="container">
+          <ion-toggle color="secondary" enable-on-off-labels="true">Unchecked</ion-toggle>
+          <ion-toggle color="secondary" enable-on-off-labels="true" checked>Checked</ion-toggle>
+          <ion-toggle color="success" enable-on-off-labels="true">Unchecked</ion-toggle>
+          <ion-toggle color="success" enable-on-off-labels="true" checked>Checked</ion-toggle>
+          <ion-toggle color="danger" enable-on-off-labels="true">Unchecked</ion-toggle>
+          <ion-toggle color="danger" enable-on-off-labels="true" checked>Checked</ion-toggle>
+          <ion-toggle color="tertiary" enable-on-off-labels="true">Unchecked</ion-toggle>
+          <ion-toggle color="tertiary" enable-on-off-labels="true" checked>Checked</ion-toggle>
+          <ion-toggle color="light" enable-on-off-labels="true">Unchecked</ion-toggle>
+          <ion-toggle color="light" enable-on-off-labels="true" checked>Checked</ion-toggle>
+          <ion-toggle color="medium" enable-on-off-labels="true">Unchecked</ion-toggle>
+          <ion-toggle color="medium" enable-on-off-labels="true" checked>Checked</ion-toggle>
+          <ion-toggle color="dark" enable-on-off-labels="true">Unchecked</ion-toggle>
+          <ion-toggle color="dark" enable-on-off-labels="true" checked>Checked</ion-toggle>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`toggle-on-off-labels-color`));
     });
   });
 });