refactor(themes): rename theme files and combine function files

BREAKING.md

@@ -30,7 +30,6 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Progress bar](#version-8x-progress-bar)
   - [Radio](#version-8x-radio)
   - [Range](#version-8x-range)
-  - [Searchbar](#version-8x-searchbar)
   - [Select](#version-8x-select)
   - [Textarea](#version-8x-textarea)
   - [Toggle](#version-8x-toggle)
@@ -265,10 +264,6 @@ For more information on styling toast buttons, refer to the [Toast Theming docum
 
 - The `legacy` property and support for the legacy syntax, which involved placing an `ion-range` inside of an `ion-item` with an `ion-label`, have been removed. Ionic will also no longer attempt to automatically associate form controls with sibling `<label>` elements as these label elements are now used inside the form control. Developers should provide a label (either visible text or `aria-label`) directly to the form control. For more information on migrating from the legacy range syntax, refer to the [Range documentation](https://ionicframework.com/docs/api/range#migrating-from-legacy-range-syntax).
 
-<h4 id="version-8x-searchbar">Searchbar</h4>
-
-- The `autocapitalize` property now defaults to `'off'`.
-
 <h4 id="version-8x-select">Select</h4>
 
 - The `legacy` property and support for the legacy syntax, which involved placing an `ion-select` inside of an `ion-item` with an `ion-label`, have been removed. Ionic will also no longer attempt to automatically associate form controls with sibling `<label>` elements as these label elements are now used inside the form control. Developers should provide a label (either visible text or `aria-label`) directly to the form control. For more information on migrating from the legacy select syntax, refer to the [Select documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax).

core/api.txt

@@ -265,6 +265,7 @@ ion-button,css-prop,--padding-start
 ion-button,css-prop,--padding-top
 ion-button,css-prop,--ripple-color
 ion-button,css-prop,--transition
+ion-button,part,focus-ring
 ion-button,part,native
 
 ion-buttons,scoped
@@ -603,7 +604,7 @@ ion-input,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secon
 ion-input,prop,counter,boolean,false,false,false
 ion-input,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false
 ion-input,prop,debounce,number | undefined,undefined,false,false
-ion-input,prop,disabled,boolean,false,false,true
+ion-input,prop,disabled,boolean,false,false,false
 ion-input,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
 ion-input,prop,errorText,string | undefined,undefined,false,false
 ion-input,prop,fill,"outline" | "solid" | undefined,undefined,false,false
@@ -620,7 +621,7 @@ ion-input,prop,multiple,boolean | undefined,undefined,false,false
 ion-input,prop,name,string,this.inputId,false,false
 ion-input,prop,pattern,string | undefined,undefined,false,false
 ion-input,prop,placeholder,string | undefined,undefined,false,false
-ion-input,prop,readonly,boolean,false,false,true
+ion-input,prop,readonly,boolean,false,false,false
 ion-input,prop,required,boolean,false,false,false
 ion-input,prop,shape,"round" | undefined,undefined,false,false
 ion-input,prop,spellcheck,boolean,false,false,false
@@ -653,12 +654,6 @@ ion-input,css-prop,--placeholder-font-style
 ion-input,css-prop,--placeholder-font-weight
 ion-input,css-prop,--placeholder-opacity
 
-ion-input-password-toggle,shadow
-ion-input-password-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
-ion-input-password-toggle,prop,hideIcon,string | undefined,undefined,false,false
-ion-input-password-toggle,prop,mode,"ios" | "md",undefined,false,false
-ion-input-password-toggle,prop,showIcon,string | undefined,undefined,false,false
-
 ion-item,shadow
 ion-item,prop,button,boolean,false,false,false
 ion-item,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
@@ -1271,7 +1266,7 @@ ion-row,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
 ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false
-ion-searchbar,prop,autocapitalize,string,'off',false,false
+ion-searchbar,prop,autocapitalize,string,undefined,true,false
 ion-searchbar,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
 ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
 ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', arrowBackSharp) as string,false,false
@@ -1677,7 +1672,4 @@ ion-toolbar,css-prop,--opacity
 ion-toolbar,css-prop,--padding-bottom
 ion-toolbar,css-prop,--padding-end
 ion-toolbar,css-prop,--padding-start
-ion-toolbar,css-prop,--padding-top
-
-test-header,scoped
-test-header,prop,testTitle,string | undefined,undefined,false,false
+ion-toolbar,css-prop,--padding-top

core/package-lock.json

@@ -43,7 +43,7 @@
         "jest-cli": "^29.7.0",
         "prettier": "^2.6.1",
         "rollup": "^2.26.4",
-        "sass": "^1.33.0",
+        "sass": "^1.72.0",
         "serve": "^14.0.1",
         "stylelint": "^13.13.1",
         "stylelint-order": "^4.1.0"
@@ -5149,6 +5149,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
+      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
@@ -8604,18 +8610,20 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.33.0.tgz",
-      "integrity": "sha512-9v0MUXnSi62FtfjqcwZ+b8B9FIxdwFEb3FPUkjEPXWd0b5KcnPGSp2XF9WrzcH1ZxedfgJVTdA3A1j4eEj53xg==",
+      "version": "1.72.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.72.0.tgz",
+      "integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==",
       "dev": true,
       "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
       },
       "bin": {
         "sass": "sass.js"
       },
       "engines": {
-        "node": ">=8.9.0"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/semver": {
@@ -8788,6 +8796,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
@@ -13699,6 +13716,12 @@
       "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
       "dev": true
     },
+    "immutable": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
+      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
+      "dev": true
+    },
     "import-fresh": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
@@ -16186,12 +16209,14 @@
       "dev": true
     },
     "sass": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.33.0.tgz",
-      "integrity": "sha512-9v0MUXnSi62FtfjqcwZ+b8B9FIxdwFEb3FPUkjEPXWd0b5KcnPGSp2XF9WrzcH1ZxedfgJVTdA3A1j4eEj53xg==",
+      "version": "1.72.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.72.0.tgz",
+      "integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==",
       "dev": true,
       "requires": {
-        "chokidar": ">=3.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
       }
     },
     "semver": {
@@ -16328,6 +16353,12 @@
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true
     },
+    "source-map-js": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "dev": true
+    },
     "source-map-support": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",

core/package.json

@@ -65,7 +65,7 @@
     "jest-cli": "^29.7.0",
     "prettier": "^2.6.1",
     "rollup": "^2.26.4",
-    "sass": "^1.33.0",
+    "sass": "^1.72.0",
     "serve": "^14.0.1",
     "stylelint": "^13.13.1",
     "stylelint-order": "^4.1.0"

core/src/components.d.ts

@@ -1471,25 +1471,6 @@ export namespace Components {
          */
         "value"?: string | number | null;
     }
-    interface IonInputPasswordToggle {
-        /**
-          * 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;
-        /**
-          * The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
-         */
-        "hideIcon"?: string;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        /**
-          * The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
-         */
-        "showIcon"?: string;
-        "type": TextFieldTypes;
-    }
     interface IonItem {
         /**
           * If `true`, a button tag will be rendered and the item will be tappable.
@@ -3760,9 +3741,6 @@ export namespace Components {
          */
         "theme"?: "ios" | "md" | "ionic";
     }
-    interface TestHeader {
-        "testTitle"?: string;
-    }
 }
 export interface IonAccordionGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -4345,12 +4323,6 @@ declare global {
         prototype: HTMLIonInputElement;
         new (): HTMLIonInputElement;
     };
-    interface HTMLIonInputPasswordToggleElement extends Components.IonInputPasswordToggle, HTMLStencilElement {
-    }
-    var HTMLIonInputPasswordToggleElement: {
-        prototype: HTMLIonInputPasswordToggleElement;
-        new (): HTMLIonInputPasswordToggleElement;
-    };
     interface HTMLIonItemElement extends Components.IonItem, HTMLStencilElement {
     }
     var HTMLIonItemElement: {
@@ -5140,12 +5112,6 @@ declare global {
         prototype: HTMLIonToolbarElement;
         new (): HTMLIonToolbarElement;
     };
-    interface HTMLTestHeaderElement extends Components.TestHeader, HTMLStencilElement {
-    }
-    var HTMLTestHeaderElement: {
-        prototype: HTMLTestHeaderElement;
-        new (): HTMLTestHeaderElement;
-    };
     interface HTMLElementTagNameMap {
         "ion-accordion": HTMLIonAccordionElement;
         "ion-accordion-group": HTMLIonAccordionGroupElement;
@@ -5181,7 +5147,6 @@ declare global {
         "ion-infinite-scroll": HTMLIonInfiniteScrollElement;
         "ion-infinite-scroll-content": HTMLIonInfiniteScrollContentElement;
         "ion-input": HTMLIonInputElement;
-        "ion-input-password-toggle": HTMLIonInputPasswordToggleElement;
         "ion-item": HTMLIonItemElement;
         "ion-item-divider": HTMLIonItemDividerElement;
         "ion-item-group": HTMLIonItemGroupElement;
@@ -5240,7 +5205,6 @@ declare global {
         "ion-toast": HTMLIonToastElement;
         "ion-toggle": HTMLIonToggleElement;
         "ion-toolbar": HTMLIonToolbarElement;
-        "test-header": HTMLTestHeaderElement;
     }
 }
 declare namespace LocalJSX {
@@ -6725,25 +6689,6 @@ declare namespace LocalJSX {
          */
         "value"?: string | number | null;
     }
-    interface IonInputPasswordToggle {
-        /**
-          * 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;
-        /**
-          * The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
-         */
-        "hideIcon"?: string;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        /**
-          * The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
-         */
-        "showIcon"?: string;
-        "type"?: TextFieldTypes;
-    }
     interface IonItem {
         /**
           * If `true`, a button tag will be rendered and the item will be tappable.
@@ -8176,7 +8121,7 @@ declare namespace LocalJSX {
         /**
           * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
          */
-        "autocapitalize"?: string;
+        "autocapitalize": string;
         /**
           * Set the input's autocomplete property.
          */
@@ -9084,9 +9029,6 @@ declare namespace LocalJSX {
          */
         "theme"?: "ios" | "md" | "ionic";
     }
-    interface TestHeader {
-        "testTitle"?: string;
-    }
     interface IntrinsicElements {
         "ion-accordion": IonAccordion;
         "ion-accordion-group": IonAccordionGroup;
@@ -9122,7 +9064,6 @@ declare namespace LocalJSX {
         "ion-infinite-scroll": IonInfiniteScroll;
         "ion-infinite-scroll-content": IonInfiniteScrollContent;
         "ion-input": IonInput;
-        "ion-input-password-toggle": IonInputPasswordToggle;
         "ion-item": IonItem;
         "ion-item-divider": IonItemDivider;
         "ion-item-group": IonItemGroup;
@@ -9181,7 +9122,6 @@ declare namespace LocalJSX {
         "ion-toast": IonToast;
         "ion-toggle": IonToggle;
         "ion-toolbar": IonToolbar;
-        "test-header": TestHeader;
     }
 }
 export { LocalJSX as JSX };
@@ -9222,7 +9162,6 @@ declare module "@stencil/core" {
             "ion-infinite-scroll": LocalJSX.IonInfiniteScroll & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollElement>;
             "ion-infinite-scroll-content": LocalJSX.IonInfiniteScrollContent & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollContentElement>;
             "ion-input": LocalJSX.IonInput & JSXBase.HTMLAttributes<HTMLIonInputElement>;
-            "ion-input-password-toggle": LocalJSX.IonInputPasswordToggle & JSXBase.HTMLAttributes<HTMLIonInputPasswordToggleElement>;
             "ion-item": LocalJSX.IonItem & JSXBase.HTMLAttributes<HTMLIonItemElement>;
             "ion-item-divider": LocalJSX.IonItemDivider & JSXBase.HTMLAttributes<HTMLIonItemDividerElement>;
             "ion-item-group": LocalJSX.IonItemGroup & JSXBase.HTMLAttributes<HTMLIonItemGroupElement>;
@@ -9281,7 +9220,6 @@ declare module "@stencil/core" {
             "ion-toast": LocalJSX.IonToast & JSXBase.HTMLAttributes<HTMLIonToastElement>;
             "ion-toggle": LocalJSX.IonToggle & JSXBase.HTMLAttributes<HTMLIonToggleElement>;
             "ion-toolbar": LocalJSX.IonToolbar & JSXBase.HTMLAttributes<HTMLIonToolbarElement>;
-            "test-header": LocalJSX.TestHeader & JSXBase.HTMLAttributes<HTMLTestHeaderElement>;
         }
     }
 }

core/src/components/accordion-group/accordion-group.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 @import "../accordion/accordion.vars";
 
 // Accordion Group

core/src/components/accordion/accordion.md.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 
 // Accordion
 // --------------------------------------------------

core/src/components/accordion/accordion.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Accordion
 // --------------------------------------------------

core/src/components/action-sheet/action-sheet.ios.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 
 // iOS Action Sheet
 // --------------------------------------------------

core/src/components/action-sheet/action-sheet.md.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 
 // Material Design Action Sheet
 // --------------------------------------------------

core/src/components/action-sheet/action-sheet.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Action Sheet
 // --------------------------------------------------

core/src/components/alert/alert.ios.vars.scss

@@ -1,5 +1,5 @@
 @use "sass:math";
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 @import "../item/item.ios.vars";
 
 // iOS Alert

core/src/components/alert/alert.md.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 @import "../item/item.md.vars";
 
 // Material Design Alert

core/src/components/alert/alert.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Alert
 // --------------------------------------------------

core/src/components/avatar/avatar.ios.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 
 
 // iOS Avatar

core/src/components/avatar/avatar.md.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 
 
 // Material Design Avatar

core/src/components/avatar/avatar.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 
 // Avatar

core/src/components/back-button/back-button.ios.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 
 // iOS Back Button
 // --------------------------------------------------

core/src/components/back-button/back-button.md.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 
 // Material Design Back Button
 // --------------------------------------------------

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

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Back Button
 // --------------------------------------------------

core/src/components/backdrop/backdrop.ios.vars.scss

@@ -1 +1 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";

core/src/components/backdrop/backdrop.md.vars.scss

@@ -1 +1 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";

core/src/components/backdrop/backdrop.vars.scss

@@ -1 +1 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";

core/src/components/badge/badge.ios.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 
 // iOS Badge
 // --------------------------------------------------

core/src/components/badge/badge.md.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 
 // Material Design Badge
 // --------------------------------------------------

core/src/components/badge/badge.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Badge
 // --------------------------------------------------

core/src/components/breadcrumb/breadcrumb.ios.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 
 // iOS Breadcrumb
 // --------------------------------------------------

core/src/components/breadcrumb/breadcrumb.md.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 
 // Material Design Breadcrumb
 // --------------------------------------------------

core/src/components/breadcrumb/breadcrumb.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Breadcrumb
 // --------------------------------------------------

core/src/components/breadcrumbs/breadcrumbs.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Breadcrumbs
 // --------------------------------------------------

core/src/components/button/button.ionic.scss

@@ -156,9 +156,26 @@
 // -------------------------------------------------------------------------------
 
 // Only show the focus ring when the button is focused
-:host(.ion-focused) .button-native {
-  outline: var(--focus-ring-width) solid var(--focus-ring-color);
-  outline-offset: 2px;
+:host(.ion-focused) {
+  --overflow: visible;
+
+  .button-native::after {
+    @include border-radius(inherit);
+  }
+}
+
+.button-focus-ring {
+  @include position(-4px, -4px, -4px, -4px);
+  @include border-radius(inherit);
+
+  position: absolute;
+
+  transition: border-color 0.3s;
+
+  border: var(--focus-ring-width) solid var(--focus-ring-color);
+
+  content: "";
+  box-sizing: border-box;
 }
 
 // Fill Solid Button

core/src/components/button/button.ionic.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 
 // Ionic Button
 // -------------------------------------------------------------------------------

core/src/components/button/button.ios.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 
 // iOS Button
 // --------------------------------------------------

core/src/components/button/button.md.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 
 // Material Design Button
 // --------------------------------------------------

core/src/components/button/button.tsx

@@ -20,6 +20,7 @@ import type { RouterDirection } from '../router/utils/interface';
  * @slot end - Content is placed to the right of the button text in LTR, and to the left in RTL.
  *
  * @part native - The native HTML button or anchor element that wraps all child elements.
+ * @part focus-ring - The visual indicator that appears as an outline around the button when focused. Only available for the Ionic theme.
  */
 @Component({
   tag: 'ion-button',
@@ -417,6 +418,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
             <slot name="end"></slot>
           </span>
           {theme === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
+          {theme === 'ionic' && <div part="focus-ring" class="button-focus-ring"></div>}
         </TagType>
       </Host>
     );

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

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Button
 // --------------------------------------------------

core/src/components/button/test/clear/button.e2e.ts

@@ -4,7 +4,7 @@ import { configs, test } from '@utils/test/playwright';
 /**
  * Fill="clear" does not render differently based on the direction.
  */
-configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, config, screenshot }) => {
+configs({ directions: ['ltr'], themes: ['ios', 'md', 'ionic'] }).forEach(({ title, config, screenshot }) => {
   test.describe(title('button: fill: clear'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/button/test/clear`, config);

core/src/components/button/test/shape/button.e2e.ts

@@ -74,7 +74,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
 /**
  * Shape="rectangular" is only available in the Ionic theme.
  */
-configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], themes: ['ionic'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('button: shape'), () => {
     test.describe('rectangular', () => {
       test('should not have visual regressions', async ({ page }) => {

core/src/components/button/test/size/button.e2e.ts

@@ -1,7 +1,8 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
+// TODO: FW-6077 - Limit this test to just the Ionic theme on MD mode.
+configs({ directions: ['ltr'], themes: ['ionic', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('button: size'), () => {
     test('should render small buttons', async ({ page }) => {
       await page.setContent(
@@ -64,7 +65,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ ti
 /**
  * The following tests are specific to the Ionic theme and do not depend on the text direction.
  */
-configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], themes: ['ionic'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('button: size'), () => {
     test('should render xsmall buttons', async ({ page }) => {
       await page.setContent(`<ion-button size="xsmall" fill="solid">X-Small Button</ion-button>`, config);

core/src/components/buttons/buttons.ios.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 @import "../toolbar/toolbar.ios.vars";
 
 // iOS Buttons

core/src/components/buttons/buttons.md.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 @import "../toolbar/toolbar.md.vars";
 
 // Material Design Buttons

core/src/components/buttons/buttons.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 :host {
   display: flex;

core/src/components/card-content/card-content.ios.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 
 // iOS Card Header
 // --------------------------------------------------

core/src/components/card-content/card-content.md.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 
 // Material Design Card Content
 // --------------------------------------------------

core/src/components/card-content/card-content.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Card Content
 // --------------------------------------------------

core/src/components/card-header/card-header.ios.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 
 // iOS Card Header
 // --------------------------------------------------

core/src/components/card-header/card-header.md.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 
 // Material Design Card Header
 // --------------------------------------------------

core/src/components/card-header/card-header.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Card Header
 // --------------------------------------------------

core/src/components/card-subtitle/card-subtitle.ios.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 
 // iOS Card Subtitle
 // --------------------------------------------------

core/src/components/card-subtitle/card-subtitle.md.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 
 // Material Design Card Subtitle
 // --------------------------------------------------

core/src/components/card-subtitle/card-subtitle.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Card Subtitle
 // --------------------------------------------------
@@ -16,4 +16,4 @@
 
 :host(.ion-color) {
   color: current-color(base);
-}
+}

core/src/components/card-title/card-title.ios.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 
 // iOS Card Title
 // --------------------------------------------------

core/src/components/card-title/card-title.md.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 
 // Material Design Card Title
 // --------------------------------------------------

core/src/components/card-title/card-title.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 
 // Card Title

core/src/components/card/card.ios.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 
 // iOS Card
 // --------------------------------------------------

core/src/components/card/card.md.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 
 // Material Design Card
 // --------------------------------------------------

core/src/components/card/card.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Card
 // --------------------------------------------------

core/src/components/checkbox/checkbox.ios.vars.scss

@@ -1,5 +1,5 @@
 @use "sass:math";
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 @import "../item/item.ios.vars";
 
 // iOS Checkbox

core/src/components/checkbox/checkbox.md.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 @import "../item/item.md.vars";
 
 // Material Design Checkbox

core/src/components/checkbox/checkbox.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 @import "./checkbox.vars.scss";
 
 // Checkbox

core/src/components/chip/chip.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 @import "./chip.vars";
 
 :host {

core/src/components/col/col.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 @import "../grid/grid.mixins";
 
 // Grid Column

core/src/components/content/content.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Content
 // --------------------------------------------------

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

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Datetime Button
 // --------------------------------------------------

core/src/components/datetime/datetime.ios.scss

@@ -1,6 +1,6 @@
 @import "./datetime.scss";
 @import "./datetime.ios.vars.scss";
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 
 :host {
   --background: #{ion-color(light, base)};

core/src/components/datetime/datetime.md.scss

@@ -1,6 +1,6 @@
 @import "./datetime.scss";
 @import "./datetime.md.vars.scss";
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 
 :host {
   --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));

core/src/components/datetime/datetime.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Datetime
 // --------------------------------------------------

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

@@ -31,6 +31,10 @@
         }
       }
 
+      .options-popover {
+        --width: 300px;
+      }
+
       ion-modal.ios,
       ion-popover.datetime-popover.ios {
         --width: 350px;
@@ -45,36 +49,206 @@
       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>
     <ion-app>
-      <test-header test-title="Datetime - Basic">
-        <div slot="items">
-          <ion-item>
-            <ion-toggle id="titleToggle">Show Default Title</ion-toggle>
-          </ion-item>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Datetime - Basic</ion-title>
+          <ion-buttons slot="end">
+            <ion-button id="popover-trigger">Options</ion-button>
+          </ion-buttons>
+          <ion-popover class="options-popover" trigger="popover-trigger">
+            <ion-list lines="none">
+              <ion-item>
+                <ion-checkbox>Dark Mode</ion-checkbox>
+              </ion-item>
+              <ion-item detail="true" href="?ionic:mode=ios">
+                <ion-label>iOS Mode</ion-label>
+              </ion-item>
+              <ion-item detail="true" href="?ionic:mode=md">
+                <ion-label>MD Mode</ion-label>
+              </ion-item>
 
-          <ion-item>
-            <ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
-          </ion-item>
+              <ion-item>
+                <ion-toggle id="titleToggle">Show Default Title</ion-toggle>
+              </ion-item>
 
-          <ion-item>
-            <ion-input label="Locale" placeholder="default" id="locale"></ion-input>
-          </ion-item>
+              <ion-item>
+                <ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
+              </ion-item>
 
-          <ion-item>
-            <ion-select label="Color" id="color" value="primary">
-              <ion-select-option value="primary">Primary</ion-select-option>
-              <ion-select-option value="secondary">Secondary</ion-select-option>
-              <ion-select-option value="tertiary">Tertiary</ion-select-option>
-              <ion-select-option value="success">Success</ion-select-option>
-              <ion-select-option value="warning">Warning</ion-select-option>
-              <ion-select-option value="danger">Danger</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </div>
-      </test-header>
+              <ion-item>
+                <ion-input label="Locale" placeholder="default" id="locale"></ion-input>
+              </ion-item>
+
+              <ion-item>
+                <ion-select label="Color" id="color" value="primary">
+                  <ion-select-option value="primary">Primary</ion-select-option>
+                  <ion-select-option value="secondary">Secondary</ion-select-option>
+                  <ion-select-option value="tertiary">Tertiary</ion-select-option>
+                  <ion-select-option value="success">Success</ion-select-option>
+                  <ion-select-option value="warning">Warning</ion-select-option>
+                  <ion-select-option value="danger">Danger</ion-select-option>
+                </ion-select>
+              </ion-item>
+            </ion-list>
+          </ion-popover>
+        </ion-toolbar>
+      </ion-header>
       <ion-content class="ion-padding">
         <div class="grid">
           <div class="grid-item">
@@ -159,6 +333,14 @@
           });
         });
 
+        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) => {

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

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 
 // iOS FAB Button
 // --------------------------------------------------

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

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 
 // Material Design FAB Button
 // --------------------------------------------------

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

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Floating Action Buttons
 // --------------------------------------------------

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

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 @import "../fab-button/fab-button.vars";
 
 // Floating Action Button List

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

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 @import "../fab-button/fab-button.vars";
 
 // Floating Action Button Container

core/src/components/footer/footer.ios.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 
 // iOS Footer
 // --------------------------------------------------

core/src/components/footer/footer.md.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 
 // Material Design Footer
 // --------------------------------------------------

core/src/components/footer/footer.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Footer
 // --------------------------------------------------
@@ -16,4 +16,4 @@ ion-footer {
 
 ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
   padding-bottom: var(--ion-safe-area-bottom, 0);
-}
+}

core/src/components/grid/grid.mixins.scss

@@ -1,5 +1,5 @@
-@import "../../themes/ionic.globals";
-@import "../../themes/ionic.mixins";
+@import "../../themes/globals";
+@import "../../themes/mixins";
 
 // Responsive Mixins
 // --------------------------------------------------

core/src/components/grid/grid.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 @import "./grid.mixins";
 
 // Grid

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

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 
 // iOS Header
 // --------------------------------------------------

core/src/components/header/header.md.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 
 // Material Design Header
 // --------------------------------------------------

core/src/components/header/header.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Header
 // --------------------------------------------------

core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/globals.ios";
 
 // Material Design Infinite Scroll
 // --------------------------------------------------

core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/globals.md";
 
 // Material Design Infinite Scroll
 // --------------------------------------------------

core/src/components/infinite-scroll-content/infinite-scroll-content.vars.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/globals";
 
 // Infinite Scroll
 // --------------------------------------------------

core/src/components/input-password-toggle/input-password-toggle.tsx

@@ -1,152 +0,0 @@
-import type { ComponentInterface } from '@stencil/core';
-import { Component, Element, Host, Prop, h, Watch } from '@stencil/core';
-import { printIonWarning } from '@utils/logging';
-import { createColorClasses } from '@utils/theme';
-import { eyeOff, eye } from 'ionicons/icons';
-
-import { getIonMode } from '../../global/ionic-global';
-import type { Color, TextFieldTypes } from '../../interface';
-
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- */
-@Component({
-  tag: 'ion-input-password-toggle',
-  /**
-   * Empty CSS files are required in order for the mode to be inherited to the
-   * inner ion-button. Otherwise, the setMode callback provided to Stencil will not get called
-   * and we will default to MD mode.
-   */
-  styleUrls: {
-    ios: 'input-password-toggle.scss',
-    md: 'input-password-toggle.scss',
-  },
-  shadow: true,
-})
-export class InputPasswordToggle implements ComponentInterface {
-  private inputElRef!: HTMLIonInputElement | null;
-
-  @Element() el!: HTMLIonInputElement;
-
-  /**
-   * 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).
-   */
-  @Prop({ reflect: true }) color?: Color;
-
-  /**
-   * The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
-   */
-  @Prop() showIcon?: string;
-
-  /**
-   * The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
-   */
-  @Prop() hideIcon?: string;
-
-  /**
-   * @internal
-   */
-  @Prop({ mutable: true }) type: TextFieldTypes = 'password';
-
-  /**
-   * Whenever the input type changes we need to re-run validation to ensure the password
-   * toggle is being used with the correct input type. If the application changes the type
-   * outside of this component we also need to re-render so the correct icon is shown.
-   */
-  @Watch('type')
-  onTypeChange(newValue: TextFieldTypes) {
-    if (newValue !== 'text' && newValue !== 'password') {
-      printIonWarning(
-        `ion-input-password-toggle only supports inputs of type "text" or "password". Input of type "${newValue}" is not compatible.`,
-        this.el
-      );
-
-      return;
-    }
-  }
-
-  connectedCallback() {
-    const { el } = this;
-
-    const inputElRef = (this.inputElRef = el.closest('ion-input'));
-
-    if (!inputElRef) {
-      printIonWarning(
-        'No ancestor ion-input found for ion-input-password-toggle. This component must be slotted inside of an ion-input.',
-        el
-      );
-
-      return;
-    }
-
-    /**
-     * Important: Set the type in connectedCallback because the default value
-     * of this.type may not always be accurate. Usually inputs have the "password" type
-     * but it is possible to have the input to initially have the "text" type. In that scenario
-     * the wrong icon will show briefly before switching to the correct icon. Setting the
-     * type here allows us to avoid that flicker.
-     */
-    this.type = inputElRef.type;
-  }
-
-  disconnectedCallback() {
-    this.inputElRef = null;
-  }
-
-  private togglePasswordVisibility = () => {
-    const { inputElRef } = this;
-
-    if (!inputElRef) {
-      return;
-    }
-
-    inputElRef.type = inputElRef.type === 'text' ? 'password' : 'text';
-  };
-
-  render() {
-    const { color, type } = this;
-
-    const mode = getIonMode(this);
-
-    const showPasswordIcon = this.showIcon ?? eye;
-    const hidePasswordIcon = this.hideIcon ?? eyeOff;
-
-    const isPasswordVisible = type === 'text';
-
-    return (
-      <Host
-        class={createColorClasses(color, {
-          [mode]: true,
-        })}
-      >
-        <ion-button
-          mode={mode}
-          color={color}
-          fill="clear"
-          shape="round"
-          aria-checked={isPasswordVisible ? 'true' : 'false'}
-          aria-label="show password"
-          role="switch"
-          type="button"
-          onPointerDown={(ev) => {
-            /**
-             * This prevents mobile browsers from
-             * blurring the input when the password toggle
-             * button is activated.
-             */
-            ev.preventDefault();
-          }}
-          onClick={this.togglePasswordVisibility}
-        >
-          <ion-icon
-            slot="icon-only"
-            aria-hidden="true"
-            icon={isPasswordVisible ? hidePasswordIcon : showPasswordIcon}
-          ></ion-icon>
-        </ion-button>
-      </Host>
-    );
-  }
-}

core/src/components/input-password-toggle/test/a11y/input-password-toggle.e2e.ts

@@ -1,23 +0,0 @@
-import AxeBuilder from '@axe-core/playwright';
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('input password toggle: a11y'), () => {
-    test('should not have accessibility violations', async ({ page }) => {
-      await page.setContent(
-        `
-          <main>
-            <ion-input label="input" type="password">
-              <ion-input-password-toggle slot="end"></ion-input-password-toggle>
-            </ion-input>
-          </main>
-        `,
-        config
-      );
-
-      const results = await new AxeBuilder({ page }).analyze();
-      expect(results.violations).toEqual([]);
-    });
-  });
-});