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

.github/workflows/actions/build-core-stencil-prerelease/action.yml

@@ -29,4 +29,4 @@ runs:
       with:
         name: ionic-core
         output: core/CoreBuild.zip
-        paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts
+        paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts

.github/workflows/actions/build-core/action.yml

@@ -31,4 +31,4 @@ runs:
       with:
         name: ionic-core
         output: core/CoreBuild.zip
-        paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts core/api.txt
+        paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts core/api.txt

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).

README.md

@@ -9,7 +9,7 @@
 </h1>
 
 <p align="center">
-  Ionic is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase with JavaScript and the Web. test 123
+  Ionic is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase with JavaScript and the Web.
 </p>
 <p align="center">
   Ionic is based on <a href="https://www.webcomponents.org/introduction">Web Components</a>, which enables significant performance, usability, and feature improvements alongside support for popular web frameworks like <a href="https://angular.io/">Angular</a>, <a href="https://reactjs.com/">React</a>, and <a href="https://vuejs.org/">Vue</a>.

core/.stylelintrc.yml

@@ -23,10 +23,10 @@ rules:
   at-rule-empty-line-before:
     - always
     - except:
-        - blockless-after-blockless
-        - first-nested
+      - blockless-after-blockless
+      - first-nested
       ignore:
-        - after-comment
+      - after-comment
 
   block-closing-brace-newline-before:
     - always
@@ -40,13 +40,14 @@ rules:
   custom-property-empty-line-before:
     - always
     - except:
-        - after-comment
-        - after-custom-property
-        - first-nested
+      - after-comment
+      - after-custom-property
+      - first-nested
 
   declaration-no-important:
     - true
 
+
   order/order:
     - custom-properties
     - dollar-variables
@@ -56,212 +57,216 @@ rules:
 
   # https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
   order/properties-order:
+
     # Box
 
     - emptyLineBefore: always
       properties:
-        - display
-        - position
-        - top
-        - right
-        - bottom
-        - left
+      - display
+      - position
+      - top
+      - right
+      - bottom
+      - left
 
     - emptyLineBefore: always
       properties:
-        - flex
-        - flex-basis
-        - flex-direction
-        - flex-flow
-        - flex-grow
-        - flex-shrink
-        - flex-wrap
-        - align-content
-        - align-items
-        - align-self
-        - justify-content
-        - order
+      - flex
+      - flex-basis
+      - flex-direction
+      - flex-flow
+      - flex-grow
+      - flex-shrink
+      - flex-wrap
+      - align-content
+      - align-items
+      - align-self
+      - justify-content
+      - order
 
     - emptyLineBefore: always
       properties:
-        - width
-        - min-width
-        - max-width
+      - width
+      - min-width
+      - max-width
 
-        - height
-        - min-height
-        - max-height
+      - height
+      - min-height
+      - max-height
 
     - emptyLineBefore: always
       properties:
-        - margin
-        - margin-top
-        - margin-right
-        - margin-bottom
-        - margin-left
+      - margin
+      - margin-top
+      - margin-right
+      - margin-bottom
+      - margin-left
 
     - emptyLineBefore: always
       properties:
-        - padding
-        - padding-top
-        - padding-right
-        - padding-bottom
-        - padding-left
+      - padding
+      - padding-top
+      - padding-right
+      - padding-bottom
+      - padding-left
 
     - emptyLineBefore: always
       properties:
-        - float
-        - clear
+      - float
+      - clear
 
     - emptyLineBefore: always
       properties:
-        - columns
-        - column-gap
-        - column-fill
-        - column-rule
-        - column-span
-        - column-count
-        - column-width
+      - columns
+      - column-gap
+      - column-fill
+      - column-rule
+      - column-span
+      - column-count
+      - column-width
 
     - emptyLineBefore: always
       properties:
-        - transform
-        - transform-box
-        - transform-origin
-        - transform-style
+      - transform
+      - transform-box
+      - transform-origin
+      - transform-style
 
     - emptyLineBefore: always
       properties:
-        - transition
-        - transition-delay
-        - transition-duration
-        - transition-property
-        - transition-timing-function
+      - transition
+      - transition-delay
+      - transition-duration
+      - transition-property
+      - transition-timing-function
 
     # Border
 
     - emptyLineBefore: always
       properties:
-        - border
-        - border-top
-        - border-right
-        - border-bottom
-        - border-left
-        - border-width
-        - border-top-width
-        - border-right-width
-        - border-bottom-width
-        - border-left-width
+      - border
+      - border-top
+      - border-right
+      - border-bottom
+      - border-left
+      - border-width
+      - border-top-width
+      - border-right-width
+      - border-bottom-width
+      - border-left-width
 
-        - border-style
-        - border-top-style
-        - border-right-style
-        - border-bottom-style
-        - border-left-style
+      - border-style
+      - border-top-style
+      - border-right-style
+      - border-bottom-style
+      - border-left-style
 
-        - border-radius
-        - border-top-left-radius
-        - border-top-right-radius
-        - border-bottom-left-radius
-        - border-bottom-right-radius
+      - border-radius
+      - border-top-left-radius
+      - border-top-right-radius
+      - border-bottom-left-radius
+      - border-bottom-right-radius
 
-        - border-color
-        - border-top-color
-        - border-right-color
-        - border-bottom-color
-        - border-left-color
+      - border-color
+      - border-top-color
+      - border-right-color
+      - border-bottom-color
+      - border-left-color
 
     - emptyLineBefore: always
       properties:
-        - outline
-        - outline-color
-        - outline-offset
-        - outline-style
-        - outline-width
+      - outline
+      - outline-color
+      - outline-offset
+      - outline-style
+      - outline-width
 
     # Background
 
     - emptyLineBefore: always
       properties:
-        - background
-        - background-attachment
-        - background-clip
-        - background-color
-        - background-image
-        - background-repeat
-        - background-position
-        - background-size
+      - background
+      - background-attachment
+      - background-clip
+      - background-color
+      - background-image
+      - background-repeat
+      - background-position
+      - background-size
 
-        # Text
+    # Text
 
-        - color
+      - color
 
     - emptyLineBefore: always
       properties:
-        - font
-        - font-family
-        - font-size
-        - font-smoothing
-        - font-style
-        - font-variant
-        - font-weight
+      - font
+      - font-family
+      - font-size
+      - font-smoothing
+      - font-style
+      - font-variant
+      - font-weight
 
     - emptyLineBefore: always
       properties:
-        - letter-spacing
-        - line-height
-        - list-style
+      - letter-spacing
+      - line-height
+      - list-style
 
     - emptyLineBefore: always
       properties:
-        - text-align
-        - text-decoration
-        - text-indent
-        - text-overflow
-        - text-rendering
-        - text-shadow
-        - text-transform
-        - text-wrap
+      - text-align
+      - text-decoration
+      - text-indent
+      - text-overflow
+      - text-rendering
+      - text-shadow
+      - text-transform
+      - text-wrap
 
     - emptyLineBefore: always
       properties:
-        - white-space
-        - word-spacing
+      - white-space
+      - word-spacing
 
     # Other
 
     - emptyLineBefore: always
       properties:
-        - border-collapse
-        - border-spacing
-        - box-shadow
-        - caption-side
-        - contain
-        - content
-        - cursor
-        - direction
-        - empty-cells
-        - object-fit
-        - opacity
-        - overflow
-        - quotes
-        - speak
-        - table-layout
-        - touch-action
-        - user-select
-        - vertical-align
-        - visibility
-        - z-index
+      - border-collapse
+      - border-spacing
+      - box-shadow
+      - caption-side
+      - contain
+      - content
+      - cursor
+      - direction
+      - empty-cells
+      - object-fit
+      - opacity
+      - overflow
+      - quotes
+      - speak
+      - table-layout
+      - touch-action
+      - user-select
+      - vertical-align
+      - visibility
+      - z-index
 
   property-disallowed-list:
     - background-position
     - right
     - left
     - float
+    - padding
     - padding-left
     - padding-right
+    - margin
     - margin-left
     - margin-right
+    - border-radius
     - border-top-left-radius
     - border-top-right-radius
     - border-bottom-right-radius

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

core/package.json

@@ -65,18 +65,16 @@
     "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",
-    "style-dictionary": "^3.9.2",
     "stylelint": "^13.13.1",
     "stylelint-order": "^4.1.0"
   },
   "scripts": {
-    "build": "npm run clean && npm run build.tokens && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
+    "build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
     "build.css": "npm run css.sass && npm run css.minify",
     "build.debug": "npm run clean && stencil build --debug",
     "build.docs.json": "stencil build --docs-json dist/docs.json",
-    "build.tokens": "node ./scripts/tokens.js && npm run lint.sass.fix",
     "clean": "node scripts/clean.js",
     "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
     "css.sass": "sass --embed-sources src/css:./css",

core/scripts/tokens.js

@@ -1,174 +0,0 @@
-/* For generating Design Tokens, we use Style Dictionary for several reasons:
-- It's prepared to easily generate tokens for multiple types of outputs (CSS, SCSS, iOS, Android, documentation, etc.).
-- It also works very well out of the box with any kind of Design Tokens formats, like Figma Tokens, as well as APIs to adjust to more custom ones.
-- It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time.
-- It can easily scale to different necessities we might have in the future.
-*/
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const StyleDictionary = require('style-dictionary');
-
-const { fileHeader } = StyleDictionary.formatHelpers;
-
-// Empty for as an example of how we can add some extra variables, not from the tokens JSON
-const customVariables = ``;
-
-// Prefix for all generated variables
-const variablesPrefix = 'ionic';
-
-// CSS vanilla :root format
-StyleDictionary.registerFormat({
-  name: 'rootFormat',
-  formatter({ dictionary, file }) {
-    // Add a prefix to all variable names
-    const prefixedVariables = dictionary.allProperties.map((prop) => {
-      return `  --${variablesPrefix}-${prop.name}: ${prop.value};`;
-    });
-
-    return (
-      fileHeader({ file }) +
-      ':root {\n' +
-      prefixedVariables.join('\n') + // Join all prefixed variables with a newline
-      customVariables +
-      '\n}\n'
-    );
-  },
-});
-
-// scss variables format
-StyleDictionary.registerFormat({
-  name: 'scssVariablesFormat',
-  formatter({ dictionary, file }) {
-    // Add a prefix to all variable names
-    const prefixedVariables = dictionary.allProperties.map((prop) => {
-      return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${prop.value});`;
-    });
-
-    return (
-      fileHeader({ file }) +
-      prefixedVariables.join('\n') + // Join all prefixed variables with a newline
-      customVariables +
-      '\n'
-    );
-  },
-});
-
-// Create utility-classes
-StyleDictionary.registerFormat({
-  name: 'cssUtilityClassesFormat',
-  formatter({ dictionary, file }) {
-    const utilityClasses = dictionary.allProperties.map((prop) => {
-      let tokenType = prop.attributes.category;
-      const className = `${prop.name}`;
-      let utilityClass = '';
-
-      switch (tokenType) {
-        case 'color':
-          utilityClass = `.${variablesPrefix}-${className} {\n  color: $ionic-${prop.name};\n}
-.${variablesPrefix}-background-${className} {\n  background-color: $ionic-${prop.name};\n}`;
-          break;
-        case 'border':
-          const borderAttribute = prop.attributes.type === 'radius' ? 'border-radius' : 'border-width';
-          utilityClass = `.${variablesPrefix}-${className} {\n  ${borderAttribute}: $ionic-${prop.name};\n}`;
-          break;
-        case 'font':
-          let fontAttribute;
-          switch (prop.attributes.type) {
-            case 'size':
-              fontAttribute = 'font-size';
-              break;
-            case 'weight':
-              fontAttribute = 'font-weight';
-              break;
-            case 'line-height':
-              fontAttribute = 'line-height';
-              break;
-            case 'letter-spacing':
-              fontAttribute = 'letter-spacing';
-              break;
-            case 'family':
-              return;
-          }
-          utilityClass = `.${variablesPrefix}-${className} {\n  ${fontAttribute}: $ionic-${prop.name};\n}`;
-          break;
-        case 'elevation':
-          utilityClass = `.${variablesPrefix}-${className} {\n  box-shadow: $ionic-${prop.name};\n}`;
-          break;
-        case 'space':
-          utilityClass = `.${variablesPrefix}-margin-${className} {\n  margin: $ionic-${prop.name};\n};
-.${variablesPrefix}-padding-${className} {\n  padding: $ionic-${prop.name};\n}`;
-          break;
-        default:
-          utilityClass = `.${variablesPrefix}-${className} {\n  ${tokenType}: $ionic-${prop.name};\n}`;
-      }
-
-      return utilityClass;
-    });
-
-    return [fileHeader({ file }), '@import "./ionic.vars";\n', utilityClasses.join('\n')].join('\n');
-  },
-});
-
-// Make Style Dictionary comply with the $ format on properties from W3C Guidelines
-const w3cTokenJsonParser = {
-  pattern: /\.json|\.tokens\.json|\.tokens$/,
-  parse(_a) {
-    var contents = _a.contents;
-    // replace $value with value so that style dictionary recognizes it
-    var preparedContent = (contents || '{}')
-      .replace(/"\$?value":/g, '"value":')
-      // convert $description to comment
-      .replace(/"\$?description":/g, '"comment":');
-    //
-    return JSON.parse(preparedContent);
-  },
-};
-
-StyleDictionary.registerParser(w3cTokenJsonParser);
-
-// Generate Tokens
-StyleDictionary.extend({
-  source: ['./src/foundations/*.json'],
-  platforms: {
-    css: {
-      buildPath: './src/foundations/',
-      transformGroup: 'css',
-      files: [
-        {
-          destination: 'ionic.root.scss',
-          format: 'rootFormat',
-          options: {
-            outputReferences: true,
-            fileHeader: `myFileHeader`,
-          },
-        },
-      ],
-    },
-    scss: {
-      buildPath: './src/foundations/',
-      transformGroup: 'scss',
-      files: [
-        {
-          destination: 'ionic.vars.scss',
-          format: 'scssVariablesFormat',
-          options: {
-            outputReferences: true,
-            fileHeader: `myFileHeader`,
-          },
-        },
-        {
-          destination: 'ionic.utility.scss',
-          format: 'cssUtilityClassesFormat',
-          options: {
-            outputReferences: true,
-            fileHeader: `myFileHeader`,
-          },
-        },
-      ],
-    },
-  },
-  fileHeader: {
-    myFileHeader: () => {
-      return [`This is an auto-generated file, please do not change it directly.`, `Ionic Design System`];
-    },
-  },
-}).buildAllPlatforms();

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.
@@ -4342,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: {
@@ -5172,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;
@@ -6715,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.
@@ -8166,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.
          */
@@ -9109,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;
@@ -9208,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>;

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

@@ -142,7 +142,6 @@
 
 // Button Shape Rectangular
 // -------------------------------------------------------------------------------
-
 :host(.button-rectangular) {
   --border-radius: #{$button-ionic-rectangular-border};
 }
@@ -157,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
@@ -169,11 +185,6 @@
   --background-activated: #{ion-color(primary, shade)};
 }
 
-:host(.button-solid.ion-color.ion-activated) .button-native::after {
-  background: #{current-color(shade)};
-}
-
-
 // Fill Outline 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/button/test/states/button.e2e.ts

@@ -1,84 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('button: activated'), () => {
-    test('should render solid button', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-button class="ion-activated">Button</ion-button>
-      `,
-        config
-      );
-
-      const button = page.locator('ion-button');
-
-      await expect(button).toHaveScreenshot(screenshot(`button-activated-solid`));
-    });
-
-    test('should render solid button with color', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-button color="tertiary" class="ion-activated">Button</ion-button>
-      `,
-        config
-      );
-
-      const button = page.locator('ion-button');
-
-      await expect(button).toHaveScreenshot(screenshot(`button-activated-solid-color`));
-    });
-
-    test('should render outline button', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-button fill="outline" class="ion-activated">Button</ion-button>
-      `,
-        config
-      );
-
-      const button = page.locator('ion-button');
-
-      await expect(button).toHaveScreenshot(screenshot(`button-activated-outline`));
-    });
-
-    test('should render outline button with color', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-button color="tertiary" fill="outline" class="ion-activated">Button</ion-button>
-      `,
-        config
-      );
-
-      const button = page.locator('ion-button');
-
-      await expect(button).toHaveScreenshot(screenshot(`button-activated-outline-color`));
-    });
-
-    test('should render clear button', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-button fill="clear" class="ion-activated">Button</ion-button>
-      `,
-        config
-      );
-
-      const button = page.locator('ion-button');
-
-      await expect(button).toHaveScreenshot(screenshot(`button-activated-clear`));
-    });
-
-    test('should render clear button with color', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-button color="tertiary" fill="clear" class="ion-activated">Button</ion-button>
-      `,
-        config
-      );
-
-      const button = page.locator('ion-button');
-
-      await expect(button).toHaveScreenshot(screenshot(`button-activated-clear-color`));
-    });
-  });
-});