removed host-context

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
- There was a misalignment between the disabled and readonly state
textarea with the desired designed UX.

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

- update textarea css vars;
- add styles for disabled textarea;
- add styles for readonly textarea;

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
[textarea
preview](https://ionic-framework-git-rou-11586-ionic1.vercel.app/src/components/textarea/test/basic?ionic:theme=ionic)

---------

Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>

.github/workflows/actions/build-angular-server/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

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

@@ -11,7 +11,7 @@ runs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
 
     - name: Install Dependencies
       run: npm ci

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

@@ -11,7 +11,7 @@ runs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - name: Install Dependencies
       run: npm install
       working-directory: ./core

.github/workflows/actions/build-react-router/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/build-vue-router/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/publish-npm/action.yml

@@ -21,7 +21,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     # Provenance requires npm 9.5.0+
     - name: Install latest npm
       run: npm install -g npm@latest

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
 
     - uses: ./.github/workflows/actions/download-archive
       with:

.github/workflows/actions/test-core-lint/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - name: Install Dependencies
       run: npm ci
       working-directory: ./core

.github/workflows/actions/test-core-screenshot/action.yml

@@ -15,7 +15,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/test-core-spec/action.yml

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - name: Install Dependencies
       run: npm ci
       working-directory: ./core

.github/workflows/actions/test-react-e2e/action.yml

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/test-react-router-e2e/action.yml

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/test-vue-e2e/action.yml

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/update-reference-screenshots/action.yml

@@ -9,7 +9,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: actions/download-artifact@v4
       with:
         path: ./artifacts

.github/workflows/assign-issues.yml

@@ -11,7 +11,7 @@ jobs:
       issues: write
     steps:
       - name: 'Auto-assign issue'
-        uses: pozil/auto-assign-issue@c5bca5027e680b9e8411b826d16947afd8c76b32 # v2.0.0
+        uses: pozil/auto-assign-issue@d4b175c7e47cd6d5067f5aa83c9f21b93f8c723e # v2.1.1
         with:
           assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva, tanner-reits
           numOfAssignee: 1

.github/workflows/build.yml

@@ -140,7 +140,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng16, ng17, ng18]
+        apps: [ng16, ng17, ng18, ng19]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:

.github/workflows/stencil-nightly.yml

@@ -150,7 +150,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng16, ng17, ng18]
+        apps: [ng16, ng17, ng18, ng19]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:

CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.4.1](https://github.com/ionic-team/ionic-framework/compare/v8.4.0...v8.4.1) (2024-11-27)
+
+
+### Bug Fixes
+
+* **header:** use aria attributes to hide small title when collapsed ([#30027](https://github.com/ionic-team/ionic-framework/issues/30027)) ([23763ab](https://github.com/ionic-team/ionic-framework/commit/23763abf797f9a4ba8262225760f718e9dcc4782)), closes [#29347](https://github.com/ionic-team/ionic-framework/issues/29347)
+* **menu:** hide from screen readers while animating ([#30036](https://github.com/ionic-team/ionic-framework/issues/30036)) ([845071c](https://github.com/ionic-team/ionic-framework/commit/845071c97a856d45eb5e0bb81d9c270bc38bb604))
+* **overlays:** announce info after opening based on platform ([#30025](https://github.com/ionic-team/ionic-framework/issues/30025)) ([f6188c4](https://github.com/ionic-team/ionic-framework/commit/f6188c47e9278fe69fd9d250c65156edbe5ef32e))
+* **overlays:** focus management with checkbox/radio ([#30026](https://github.com/ionic-team/ionic-framework/issues/30026)) ([8ee42bb](https://github.com/ionic-team/ionic-framework/commit/8ee42bbc1e0bf4731d20040c7853756722f1a4b2))
+* **toast:** swipe gesture works with custom container layout ([#29999](https://github.com/ionic-team/ionic-framework/issues/29999)) ([470decc](https://github.com/ionic-team/ionic-framework/commit/470decca7b6b89ef74095ef0bb7909b93640cd78)), closes [#29998](https://github.com/ionic-team/ionic-framework/issues/29998)
+
+
+
+
+
 # [8.4.0](https://github.com/ionic-team/ionic-framework/compare/v8.3.4...v8.4.0) (2024-11-04)
 
 

core/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.4.1](https://github.com/ionic-team/ionic-framework/compare/v8.4.0...v8.4.1) (2024-11-27)
+
+
+### Bug Fixes
+
+* **header:** use aria attributes to hide small title when collapsed ([#30027](https://github.com/ionic-team/ionic-framework/issues/30027)) ([23763ab](https://github.com/ionic-team/ionic-framework/commit/23763abf797f9a4ba8262225760f718e9dcc4782)), closes [#29347](https://github.com/ionic-team/ionic-framework/issues/29347)
+* **menu:** hide from screen readers while animating ([#30036](https://github.com/ionic-team/ionic-framework/issues/30036)) ([845071c](https://github.com/ionic-team/ionic-framework/commit/845071c97a856d45eb5e0bb81d9c270bc38bb604))
+* **overlays:** announce info after opening based on platform ([#30025](https://github.com/ionic-team/ionic-framework/issues/30025)) ([f6188c4](https://github.com/ionic-team/ionic-framework/commit/f6188c47e9278fe69fd9d250c65156edbe5ef32e))
+* **overlays:** focus management with checkbox/radio ([#30026](https://github.com/ionic-team/ionic-framework/issues/30026)) ([8ee42bb](https://github.com/ionic-team/ionic-framework/commit/8ee42bbc1e0bf4731d20040c7853756722f1a4b2))
+* **toast:** swipe gesture works with custom container layout ([#29999](https://github.com/ionic-team/ionic-framework/issues/29999)) ([470decc](https://github.com/ionic-team/ionic-framework/commit/470decca7b6b89ef74095ef0bb7909b93640cd78)), closes [#29998](https://github.com/ionic-team/ionic-framework/issues/29998)
+
+
+
+
+
 # [8.4.0](https://github.com/ionic-team/ionic-framework/compare/v8.3.4...v8.4.0) (2024-11-04)
 
 

core/api.txt

@@ -313,10 +313,12 @@ ion-backdrop,event,ionBackdropTap,void,true
 
 ion-badge,shadow
 ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-badge,prop,hintPosition,"bottom-right" | "top-right",'top-right',false,false
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
 ion-badge,prop,shape,"round | rectangular" | "soft" | undefined,undefined,false,false
 ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false
 ion-badge,prop,theme,"ios" | "md" | "ionic",undefined,false,false
+ion-badge,prop,useAsHint,boolean,false,false,false
 ion-badge,css-prop,--background,ionic
 ion-badge,css-prop,--background,ios
 ion-badge,css-prop,--background,md
@@ -1661,6 +1663,7 @@ ion-progress-bar,prop,buffer,number,1,false,false
 ion-progress-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-progress-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-progress-bar,prop,reversed,boolean,false,false,false
+ion-progress-bar,prop,shape,"rectangular" | "round" | undefined,undefined,false,false
 ion-progress-bar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-progress-bar,prop,type,"determinate" | "indeterminate",'determinate',false,false
 ion-progress-bar,prop,value,number,0,false,false
@@ -2180,6 +2183,14 @@ ion-split-pane,css-prop,--side-width,ionic
 ion-split-pane,css-prop,--side-width,ios
 ion-split-pane,css-prop,--side-width,md
 
+ion-status-hint,shadow
+ion-status-hint,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-status-hint,prop,mode,"ios" | "md",undefined,false,false
+ion-status-hint,prop,position,"bottom-right" | "static" | "top-right",'static',false,false
+ion-status-hint,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
+ion-status-hint,prop,size,"large" | "medium" | "small" | undefined,undefined,false,false
+ion-status-hint,prop,theme,"ios" | "md" | "ionic",undefined,false,false
+
 ion-tab,shadow
 ion-tab,prop,component,Function | HTMLElement | null | string | undefined,undefined,false,false
 ion-tab,prop,mode,"ios" | "md",undefined,false,false
@@ -2213,6 +2224,7 @@ ion-tab-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-star
 ion-tab-button,prop,mode,"ios" | "md",undefined,false,false
 ion-tab-button,prop,rel,string | undefined,undefined,false,false
 ion-tab-button,prop,selected,boolean,false,false,false
+ion-tab-button,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-tab-button,prop,tab,string | undefined,undefined,false,false
 ion-tab-button,prop,target,string | undefined,undefined,false,false
 ion-tab-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.4.0",
+  "version": "8.4.1",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -42,7 +42,7 @@
     "@capacitor/haptics": "^6.0.0",
     "@capacitor/keyboard": "^6.0.0",
     "@capacitor/status-bar": "^6.0.0",
-    "@clack/prompts": "^0.7.0",
+    "@clack/prompts": "^0.9.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@playwright/test": "^1.46.1",
@@ -66,7 +66,7 @@
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "outsystems-design-tokens": "^1.0.1",
+    "outsystems-design-tokens": "^1.1.2",
     "prettier": "^2.8.8",
     "rollup": "^2.26.4",
     "sass": "^1.33.0",

core/scripts/tokens/index.js

@@ -17,7 +17,7 @@
     removeConsecutiveRepeatedWords,
     setPrefixValue,
     generateRadiusUtilityClasses,
-    generateBorderSizeUtilityClasses,
+    generateBorderUtilityClasses,
     generateFontUtilityClasses,
     generateShadowUtilityClasses,
     generateUtilityClasses
@@ -112,7 +112,6 @@
         }
 
         let utilityClass = '';
-
         switch (tokenCategory) {
           case 'color':
           case 'primitives':
@@ -123,8 +122,8 @@
           case 'state':
             utilityClass = generateColorUtilityClasses(prop, propName);
             break;
-          case 'border-size':
-            utilityClass = generateBorderSizeUtilityClasses(propName);
+          case 'border':
+            utilityClass = generateBorderUtilityClasses(prop, propName);
             break;
           case 'font':
             utilityClass = generateFontUtilityClasses(prop, propName);

core/scripts/tokens/utils.js

@@ -231,7 +231,14 @@ function generateSpaceUtilityClasses(prop, className) {
 };
 `;
 
-  return `${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
+  // Add gap utility classes for gap tokens
+  const generateGapUtilityClasses = () =>`
+.${variablesPrefix}-gap-${prop.name} { 
+  gap: #{$${variablesPrefix}-${prop.name}}; 
+};
+`;
+
+  return `${generateGapUtilityClasses()}\n${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
 }
 
 // Generates a valid box-shadow value from a shadow Design Token structure
@@ -239,9 +246,22 @@ function generateRadiusUtilityClasses(propName) {
   return `.${variablesPrefix}-${propName} {\n  border-radius: $${variablesPrefix}-${propName};\n}`;
 }
 
-// Generates a font based css utility-class from a font Design Token structure
-function generateBorderSizeUtilityClasses(propName) {
-  return `.${variablesPrefix}-${propName} {\n  border-width: $${variablesPrefix}-${propName};\n}`;
+// Generates a border based css utility-class from a font Design Token structure
+function generateBorderUtilityClasses(prop, propName) {
+  let attribute;
+
+  switch (prop.attributes.type) {
+    case 'border-radius':
+    case 'border-style':
+      attribute = prop.attributes.type;
+      break;
+    case 'border-size':
+      attribute = 'border-width';
+      break;
+    default:
+      attribute = 'border-color';
+  }
+  return `.${variablesPrefix}-${propName} {\n  ${attribute}: $${variablesPrefix}-${propName};\n}`;
 }
 
 // Generates a font based css utility-class from a font Design Token structure
@@ -273,7 +293,7 @@ module.exports = {
     generateDefaultSpaceUtilityClasses,
     generateSpaceUtilityClasses,
     removeConsecutiveRepeatedWords,
-    generateBorderSizeUtilityClasses,
+    generateBorderUtilityClasses,
     generateFontUtilityClasses,
     generateShadowUtilityClasses,
     generateUtilityClasses

core/src/components.d.ts

@@ -424,6 +424,7 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        "hintPosition": 'top-right' | 'bottom-right';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -440,6 +441,7 @@ export namespace Components {
           * The theme determines the visual appearance of the component.
          */
         "theme"?: "ios" | "md" | "ionic";
+        "useAsHint": boolean;
     }
     interface IonBreadcrumb {
         /**
@@ -2609,6 +2611,10 @@ export namespace Components {
           * If true, reverse the progress bar direction.
          */
         "reversed": boolean;
+        /**
+          * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -2679,6 +2685,7 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
+        "setFocus": () => Promise<void>;
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -3420,6 +3427,26 @@ export namespace Components {
          */
         "when": string | boolean;
     }
+    interface IonStatusHint {
+        "color"?: Color;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        "position": 'top-right' | 'bottom-right' | 'static';
+        /**
+          * Set to `"soft"` for an hint with slightly rounded corners, `"round"` for an hint with fully rounded corners, or `"rectangular"` for an hint without rounded corners.  Defaults to `"round"`.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * Set to `"small"` for a compact size. Set to `"medium"` for the default height and width. Set to `"large"` for a larger size.  Defaults to `"small"`.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+    }
     interface IonTab {
         "active": boolean;
         /**
@@ -3503,6 +3530,10 @@ export namespace Components {
           * The selected tab component
          */
         "selected": boolean;
+        /**
+          * Set to `"soft"` for a tab-button with slightly rounded corners, `"round"` for a tab-button with fully rounded corners, or `"rectangular"` for a tab-button without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
          */
@@ -5142,6 +5173,12 @@ declare global {
         prototype: HTMLIonSplitPaneElement;
         new (): HTMLIonSplitPaneElement;
     };
+    interface HTMLIonStatusHintElement extends Components.IonStatusHint, HTMLStencilElement {
+    }
+    var HTMLIonStatusHintElement: {
+        prototype: HTMLIonStatusHintElement;
+        new (): HTMLIonStatusHintElement;
+    };
     interface HTMLIonTabElement extends Components.IonTab, HTMLStencilElement {
     }
     var HTMLIonTabElement: {
@@ -5386,6 +5423,7 @@ declare global {
         "ion-skeleton-text": HTMLIonSkeletonTextElement;
         "ion-spinner": HTMLIonSpinnerElement;
         "ion-split-pane": HTMLIonSplitPaneElement;
+        "ion-status-hint": HTMLIonStatusHintElement;
         "ion-tab": HTMLIonTabElement;
         "ion-tab-bar": HTMLIonTabBarElement;
         "ion-tab-button": HTMLIonTabButtonElement;
@@ -5775,6 +5813,7 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        "hintPosition"?: 'top-right' | 'bottom-right';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -5791,6 +5830,7 @@ declare namespace LocalJSX {
           * The theme determines the visual appearance of the component.
          */
         "theme"?: "ios" | "md" | "ionic";
+        "useAsHint"?: boolean;
     }
     interface IonBreadcrumb {
         /**
@@ -7954,6 +7994,10 @@ declare namespace LocalJSX {
           * If true, reverse the progress bar direction.
          */
         "reversed"?: boolean;
+        /**
+          * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -8855,6 +8899,26 @@ declare namespace LocalJSX {
          */
         "when"?: string | boolean;
     }
+    interface IonStatusHint {
+        "color"?: Color;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        "position"?: 'top-right' | 'bottom-right' | 'static';
+        /**
+          * Set to `"soft"` for an hint with slightly rounded corners, `"round"` for an hint with fully rounded corners, or `"rectangular"` for an hint without rounded corners.  Defaults to `"round"`.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * Set to `"small"` for a compact size. Set to `"medium"` for the default height and width. Set to `"large"` for a larger size.  Defaults to `"small"`.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+    }
     interface IonTab {
         "active"?: boolean;
         /**
@@ -8940,6 +9004,10 @@ declare namespace LocalJSX {
           * The selected tab component
          */
         "selected"?: boolean;
+        /**
+          * Set to `"soft"` for a tab-button with slightly rounded corners, `"round"` for a tab-button with fully rounded corners, or `"rectangular"` for a tab-button without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
          */
@@ -9447,6 +9515,7 @@ declare namespace LocalJSX {
         "ion-skeleton-text": IonSkeletonText;
         "ion-spinner": IonSpinner;
         "ion-split-pane": IonSplitPane;
+        "ion-status-hint": IonStatusHint;
         "ion-tab": IonTab;
         "ion-tab-bar": IonTabBar;
         "ion-tab-button": IonTabButton;
@@ -9549,6 +9618,7 @@ declare module "@stencil/core" {
             "ion-skeleton-text": LocalJSX.IonSkeletonText & JSXBase.HTMLAttributes<HTMLIonSkeletonTextElement>;
             "ion-spinner": LocalJSX.IonSpinner & JSXBase.HTMLAttributes<HTMLIonSpinnerElement>;
             "ion-split-pane": LocalJSX.IonSplitPane & JSXBase.HTMLAttributes<HTMLIonSplitPaneElement>;
+            "ion-status-hint": LocalJSX.IonStatusHint & JSXBase.HTMLAttributes<HTMLIonStatusHintElement>;
             "ion-tab": LocalJSX.IonTab & JSXBase.HTMLAttributes<HTMLIonTabElement>;
             "ion-tab-bar": LocalJSX.IonTabBar & JSXBase.HTMLAttributes<HTMLIonTabBarElement>;
             "ion-tab-button": LocalJSX.IonTabButton & JSXBase.HTMLAttributes<HTMLIonTabButtonElement>;

core/src/components/accordion/accordion.ionic.scss

@@ -58,7 +58,7 @@
 // Accordion Content
 // --------------------------------------------------
 
-#content {
+#content-wrapper {
   @include globals.padding(null, globals.$ion-space-400, globals.$ion-space-300, globals.$ion-space-400);
   @include globals.typography(globals.$ion-body-md-regular);
 

core/src/components/accordion/test/shape/index.html

@@ -11,7 +11,7 @@
     <style>
       .grid {
         display: grid;
-        grid-template-columns: repeat(4, 1fr);
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
         grid-row-gap: 20px;
         grid-column-gap: 20px;
       }

core/src/components/avatar/avatar.ionic.scss

@@ -23,8 +23,6 @@
 
 :host(:not(.avatar-image)) {
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
-
-  border: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-primitives-neutral-800;
 }
 
 // Avatar Sizes

core/src/components/badge/badge.common.scss

@@ -48,6 +48,13 @@
   color: #{color.current-color(contrast)};
 }
 
-:host(:empty) {
+:host(:empty):not(.badge-hint) {
   display: none;
 }
+
+ion-avatar ::slotted(ion-badge) {
+  position: absolute;
+  right: 0;
+
+  font-size: var(--ion-font-size-275, 0.6875rem);
+}

core/src/components/badge/badge.tsx

@@ -47,6 +47,10 @@ export class Badge implements ComponentInterface {
    */
   @Prop() size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 
+  @Prop() useAsHint: boolean = false;
+
+  @Prop() hintPosition: 'top-right' | 'bottom-right' = 'top-right';
+
   private getShape(): string | undefined {
     const theme = getIonTheme(this);
     const { shape } = this;
@@ -63,11 +67,12 @@ export class Badge implements ComponentInterface {
     return shape;
   }
 
+
   private getSize(): string | undefined {
     const theme = getIonTheme(this);
-    const { size } = this;
+    const { size, useAsHint } = this;
 
-    // TODO(ROU-10747): Remove theme check when sizes are defined for all themes.
+    // TODO: Remove theme check when sizes are defined for all themes.
     if (theme !== 'ionic') {
       return undefined;
     }
@@ -76,9 +81,14 @@ export class Badge implements ComponentInterface {
       return 'small';
     }
 
+    if (useAsHint && size && !['small', 'medium', 'large'].includes(size)) {
+      return 'small';
+    }
+
     return size;
   }
 
+
   render() {
     const shape = this.getShape();
     const size = this.getSize();
@@ -89,6 +99,8 @@ export class Badge implements ComponentInterface {
           [theme]: true,
           [`badge-${shape}`]: shape !== undefined,
           [`badge-${size}`]: size !== undefined,
+          ['badge-hint']: this.useAsHint,
+          [`badge-hint-${this.hintPosition}`]: this.useAsHint,
         })}
       >
         <slot></slot>

core/src/components/button/button.common.scss

@@ -304,4 +304,4 @@ ion-ripple-effect {
 :host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
   background: #{var(--ion-toolbar-color, var(--background))};
   color: #{var(--ion-toolbar-background, var(--color))};
-}
+}

core/src/components/checkbox/checkbox.ionic.scss

@@ -380,8 +380,7 @@ input {
 // --------------------------------------------------
 // Only show the focus ring when the checkbox is focused and not disabled
 :host(.ion-focused:not(.checkbox-disabled)) .native-wrapper {
-  outline: var(--focus-ring-width) globals.$ion-border-style-solid var(--focus-ring-color);
-  outline-offset: var(--focus-ring-offset);
+  @include globals.focused-state(var(--focus-ring-width), globals.$ion-border-style-solid, var(--focus-ring-color));
 }
 
 // Checkbox: Active

core/src/components/checkbox/checkbox.tsx

@@ -212,6 +212,7 @@ export class Checkbox implements ComponentInterface {
           'in-item': hostContext('ion-item', el),
           'checkbox-checked': checked,
           'checkbox-disabled': disabled,
+          'ion-focusable': true,
           'checkbox-indeterminate': indeterminate,
           interactive: true,
           [`checkbox-justify-${justify}`]: justify !== undefined,