chore(): sync with main

.github/dependabot.yml

@@ -6,3 +6,4 @@ updates:
       interval: "daily"
     allow:
       - dependency-name: "@playwright/test"
+        dependency-name: "@axe-core/playwright"

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

@@ -8,7 +8,7 @@ runs:
         node-version: 16.x
 
     - name: Install Angular Server Dependencies
-      run: npm install --legacy-peer-deps
+      run: npm ci
       shell: bash
       working-directory: ./packages/angular-server
     - name: Build

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

@@ -12,7 +12,7 @@ runs:
         path: ./core
         filename: CoreBuild.zip
     - name: Install Angular Dependencies
-      run: npm install --legacy-peer-deps
+      run: npm ci
       shell: bash
       working-directory: ./angular
     - name: Sync

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

@@ -6,15 +6,6 @@ runs:
     - uses: actions/setup-node@v3
       with:
         node-version: 16.x
-    - name: Install Dependencies
-      run: npm install --legacy-peer-deps
-      shell: bash
-      working-directory: ./packages/react-router
-    - uses: ./.github/workflows/actions/download-archive
-      with:
-        name: ionic-react
-        path: ./packages/react
-        filename: ReactBuild.zip
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
@@ -26,7 +17,7 @@ runs:
         path: ./packages/react
         filename: ReactBuild.zip
     - name: Install Dependencies
-      run: npm install --legacy-peer-deps
+      run: npm ci
       shell: bash
       working-directory: ./packages/react-router
     - name: Sync

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

@@ -12,7 +12,7 @@ runs:
         path: ./core
         filename: CoreBuild.zip
     - name: Install React Dependencies
-      run: npm install --legacy-peer-deps
+      run: npm ci
       shell: bash
       working-directory: ./packages/react
     - name: Sync

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

@@ -17,7 +17,7 @@ runs:
         path: ./packages/vue
         filename: VueBuild.zip
     - name: Install Vue Router Dependencies
-      run: npm install
+      run: npm ci
       shell: bash
       working-directory: ./packages/vue-router
     - name: Sync

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

@@ -12,7 +12,7 @@ runs:
         path: ./core
         filename: CoreBuild.zip
     - name: Install Vue Dependencies
-      run: npm install --legacy-peer-deps
+      run: npm ci
       shell: bash
       working-directory: ./packages/vue
     - name: Sync

.github/workflows/release.yml

@@ -57,7 +57,7 @@ jobs:
     # so we do that here.
     - name: Bump Package Lock
       run: |
-        lerna exec "npm install --package-lock-only --legacy-peer-deps"
+        lerna exec "npm install --package-lock-only"
         git add .
         git commit -m "chore(): update package lock files"
         git push

.stackblitz/codeflow.json

@@ -0,0 +1,10 @@
+{
+  "bot": {
+    "issues": {
+      "enabled": false
+    },
+    "pullRequests": {
+      "enabled": true
+    }
+  }
+}

CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.5.0](https://github.com/ionic-team/ionic-framework/compare/v6.4.3...v6.5.0) (2023-01-18)
+
+
+### Features
+
+* **deps:** update ionicons to 6.1.0 ([#26617](https://github.com/ionic-team/ionic-framework/issues/26617)) ([ccd2a92](https://github.com/ionic-team/ionic-framework/commit/ccd2a9224e018ad0d67903d44ec312934c3b35ec))
+* **deps:** update ionicons to 6.1.1 ([#26626](https://github.com/ionic-team/ionic-framework/issues/26626)) ([90405eb](https://github.com/ionic-team/ionic-framework/commit/90405eb0af69ce04faf5855189449d0b7518288c))
+* **router:** export hook interfaces ([#26551](https://github.com/ionic-team/ionic-framework/issues/26551)) ([2752702](https://github.com/ionic-team/ionic-framework/commit/27527025e4588f43f9f79640f0929e7c7d0618ee))
+
+
+
+
+
+## [6.4.3](https://github.com/ionic-team/ionic-framework/compare/v6.4.2...v6.4.3) (2023-01-18)
+
+
+### Bug Fixes
+
+* **datetime:** allow header to render in all wheel picker presentations ([#26616](https://github.com/ionic-team/ionic-framework/issues/26616)) ([7b947b5](https://github.com/ionic-team/ionic-framework/commit/7b947b5d58ff51a3a6ac360fef6d4df073e1bfec))
+* **input:** clear button uses contrast when setting color on item ([#26592](https://github.com/ionic-team/ionic-framework/issues/26592)) ([a31e1e5](https://github.com/ionic-team/ionic-framework/commit/a31e1e594d4ed7bbcf690b27eee143da232f2bdc)), closes [#26337](https://github.com/ionic-team/ionic-framework/issues/26337)
+* **list:** inset lists render correctly ([#26586](https://github.com/ionic-team/ionic-framework/issues/26586)) ([911b1d4](https://github.com/ionic-team/ionic-framework/commit/911b1d496efe595ddbf8e980f052e505ce9716c2)), closes [#20819](https://github.com/ionic-team/ionic-framework/issues/20819)
+
+
+
+
+
+## [6.4.2](https://github.com/ionic-team/ionic-framework/compare/v6.4.1...v6.4.2) (2023-01-11)
+
+
+### Bug Fixes
+
+* **datetime:** time wheel input mode is dismissed on user scroll ([#26567](https://github.com/ionic-team/ionic-framework/issues/26567)) ([d13a146](https://github.com/ionic-team/ionic-framework/commit/d13a14658df2723aff908a94181cb563cb1f5b43))
+* **loading:** support custom aria-label ([#26581](https://github.com/ionic-team/ionic-framework/issues/26581)) ([2450a1e](https://github.com/ionic-team/ionic-framework/commit/2450a1e821d3901c8efb57ec256a10a951d22c8f)), closes [#24486](https://github.com/ionic-team/ionic-framework/issues/24486)
+* **modal:** canDismiss type with data and role ([#26547](https://github.com/ionic-team/ionic-framework/issues/26547)) ([32c2622](https://github.com/ionic-team/ionic-framework/commit/32c2622ab04a70d00684e9a813d9bcef698d7551)), closes [#26544](https://github.com/ionic-team/ionic-framework/issues/26544)
+* **picker-column-internal:** blurring picker does not throw error ([#26560](https://github.com/ionic-team/ionic-framework/issues/26560)) ([3e671b9](https://github.com/ionic-team/ionic-framework/commit/3e671b9c8ff62945a12eff431839ddae37d9d1a7)), closes [#26559](https://github.com/ionic-team/ionic-framework/issues/26559)
+* **segment:** nested interactive is not rendered ([#26575](https://github.com/ionic-team/ionic-framework/issues/26575)) ([77ce9e0](https://github.com/ionic-team/ionic-framework/commit/77ce9e066e1ee71438ceac35479ea04e8df021f5))
+* **tab-button:** nested interactives are not rendered ([#26576](https://github.com/ionic-team/ionic-framework/issues/26576)) ([df4882d](https://github.com/ionic-team/ionic-framework/commit/df4882d4d1c516038badfa647db484e070fbd099)), closes [#23332](https://github.com/ionic-team/ionic-framework/issues/23332)
+* **vue:** unmount teleported user component ([#26543](https://github.com/ionic-team/ionic-framework/issues/26543)) ([c996384](https://github.com/ionic-team/ionic-framework/commit/c996384786257524842cc1dca8d0fb940699719b)), closes [#26542](https://github.com/ionic-team/ionic-framework/issues/26542)
+
+
+
+
+
 ## [6.4.1](https://github.com/ionic-team/ionic-framework/compare/v6.4.0...v6.4.1) (2022-12-14)
 
 

angular/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.5.0](https://github.com/ionic-team/ionic/compare/v6.4.3...v6.5.0) (2023-01-18)
+
+
+### Features
+
+* **deps:** update ionicons to 6.1.0 ([#26617](https://github.com/ionic-team/ionic/issues/26617)) ([ccd2a92](https://github.com/ionic-team/ionic/commit/ccd2a9224e018ad0d67903d44ec312934c3b35ec))
+* **deps:** update ionicons to 6.1.1 ([#26626](https://github.com/ionic-team/ionic/issues/26626)) ([90405eb](https://github.com/ionic-team/ionic/commit/90405eb0af69ce04faf5855189449d0b7518288c))
+
+
+
+
+
+## [6.4.3](https://github.com/ionic-team/ionic/compare/v6.4.2...v6.4.3) (2023-01-18)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [6.4.2](https://github.com/ionic-team/ionic/compare/v6.4.1...v6.4.2) (2023-01-11)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [6.4.1](https://github.com/ionic-team/ionic/compare/v6.4.0...v6.4.1) (2022-12-14)
 
 **Note:** Version bump only for package @ionic/angular

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.4.1",
+  "version": "6.5.0",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -42,8 +42,8 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "^6.4.1",
+    "@ionic/core": "^6.5.0",
-    "ionicons": "^6.0.4",
+    "ionicons": "^6.1.1",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },

angular/src/app-initialize.ts

@@ -6,6 +6,8 @@ import { Config } from './providers/config';
 import { IonicWindow } from './types/interfaces';
 import { raf } from './util/util';
 
+// TODO(FW-2827): types
+
 export const appInitialize = (config: Config, doc: Document, zone: NgZone) => {
   return (): any => {
     const win: IonicWindow | undefined = doc.defaultView as any;

angular/src/directives/control-value-accessors/boolean-value-accessor.ts

@@ -18,13 +18,13 @@ export class BooleanValueAccessorDirective extends ValueAccessor {
     super(injector, el);
   }
 
-  writeValue(value: any): void {
+  writeValue(value: boolean): void {
     this.el.nativeElement.checked = this.lastValue = value;
     setIonicClasses(this.el);
   }
 
   @HostListener('ionChange', ['$event.target'])
-  _handleIonChange(el: any): void {
+  _handleIonChange(el: HTMLIonCheckboxElement | HTMLIonToggleElement): void {
-    this.handleValueChange(el, el.checked);
+    this.handleChangeEvent(el, el.checked);
   }
 }

angular/src/directives/control-value-accessors/radio-value-accessor.ts

@@ -19,6 +19,7 @@ export class RadioValueAccessorDirective extends ValueAccessor {
     super(injector, el);
   }
 
+  // TODO(FW-2827): type (HTMLIonRadioElement and HTMLElement are both missing `checked`)
   @HostListener('ionSelect', ['$event.target'])
   _handleIonSelect(el: any): void {
     this.handleValueChange(el, el.checked);

angular/src/directives/control-value-accessors/select-value-accessor.ts

@@ -20,7 +20,14 @@ export class SelectValueAccessorDirective extends ValueAccessor {
   }
 
   @HostListener('ionChange', ['$event.target'])
-  _handleChangeEvent(el: any): void {
+  _handleChangeEvent(
-    this.handleValueChange(el, el.value);
+    el:
+      | HTMLIonRangeElement
+      | HTMLIonSelectElement
+      | HTMLIonRadioGroupElement
+      | HTMLIonSegmentElement
+      | HTMLIonDatetimeElement
+  ): void {
+    this.handleChangeEvent(el, el.value);
   }
 }

angular/src/directives/control-value-accessors/text-value-accessor.ts

@@ -19,7 +19,7 @@ export class TextValueAccessorDirective extends ValueAccessor {
   }
 
   @HostListener('ionInput', ['$event.target'])
-  _handleInputEvent(el: any): void {
+  _handleInputEvent(el: HTMLIonInputElement | HTMLIonTextareaElement | HTMLIonSearchbarElement): void {
-    this.handleValueChange(el, el.value);
+    this.handleChangeEvent(el, el.value);
   }
 }

angular/src/directives/control-value-accessors/value-accessor.ts

@@ -4,6 +4,8 @@ import { Subscription } from 'rxjs';
 
 import { raf } from '../../util/util';
 
+// TODO(FW-2827): types
+
 @Directive()
 export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDestroy {
   private onChange: (value: any) => void = () => {

angular/src/directives/navigation/ion-router-outlet.ts

@@ -30,6 +30,8 @@ import { isComponentFactoryResolver } from '../../util/util';
 import { StackController } from './stack-controller';
 import { RouteView, getUrl } from './stack-utils';
 
+// TODO(FW-2827): types
+
 @Directive({
   selector: 'ion-router-outlet',
   exportAs: 'outlet',

angular/src/directives/navigation/stack-controller.ts

@@ -17,6 +17,8 @@ import {
   toSegments,
 } from './stack-utils';
 
+// TODO(FW-2827): types
+
 export class StackController {
   private views: RouteView[] = [];
   private runningTask?: Promise<any>;

angular/src/directives/navigation/stack-utils.ts

@@ -86,6 +86,7 @@ export interface StackEvent {
   tabSwitch: boolean;
 }
 
+// TODO(FW-2827): types
 export interface RouteView {
   id: number;
   url: string;

angular/src/directives/overlays/modal.ts

@@ -106,6 +106,7 @@ export declare interface IonModal extends Components.IonModal {
   ],
 })
 export class IonModal {
+  // TODO(FW-2827): type
   @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
 
   isCmpOpen: boolean = false;

angular/src/directives/overlays/popover.ts

@@ -99,6 +99,7 @@ export declare interface IonPopover extends Components.IonPopover {
   ],
 })
 export class IonPopover {
+  // TODO(FW-2827): type
   @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
 
   isCmpOpen: boolean = false;

angular/src/providers/angular-delegate.ts

@@ -21,6 +21,8 @@ import { EnvironmentInjector } from '../di/r3_injector';
 import { NavParams } from '../directives/navigation/nav-params';
 import { isComponentFactoryResolver } from '../util/util';
 
+// TODO(FW-2827): types
+
 @Injectable()
 export class AngularDelegate {
   constructor(private zone: NgZone, private appRef: ApplicationRef) {}

angular/src/providers/platform.ts

@@ -3,6 +3,8 @@ import { NgZone, Inject, Injectable } from '@angular/core';
 import { BackButtonEventDetail, KeyboardEventDetail, Platforms, getPlatforms, isPlatform } from '@ionic/core';
 import { Subscription, Subject } from 'rxjs';
 
+// TODO(FW-2827): types
+
 export interface BackButtonEmitter extends Subject<BackButtonEventDetail> {
   subscribeWithPriority(
     priority: number,

angular/src/schematics/utils/config.ts

@@ -4,6 +4,8 @@ import { parse } from 'jsonc-parser';
 
 const CONFIG_PATH = 'angular.json';
 
+// TODO(FW-2827): types
+
 export function readConfig(host: Tree): any {
   const sourceText = host.read(CONFIG_PATH)?.toString('utf-8');
   return JSON.parse(sourceText);

angular/src/types/interfaces.ts

@@ -1,5 +1,5 @@
 export interface IonicGlobal {
-  config?: any;
+  config?: any; // TODO(FW-2827): type
   asyncQueue?: boolean;
 }
 

angular/src/util/overlay.ts

@@ -1,3 +1,5 @@
+// TODO(FW-2827): types
+
 interface ControllerShape<Opts, HTMLElm> {
   create(options: Opts): Promise<HTMLElm>;
   dismiss(data?: any, role?: string, id?: string): Promise<boolean>;

core/CHANGELOG.md

@@ -3,6 +3,48 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.5.0](https://github.com/ionic-team/ionic/compare/v6.4.3...v6.5.0) (2023-01-18)
+
+
+### Features
+
+* **deps:** update ionicons to 6.1.0 ([#26617](https://github.com/ionic-team/ionic/issues/26617)) ([ccd2a92](https://github.com/ionic-team/ionic/commit/ccd2a9224e018ad0d67903d44ec312934c3b35ec))
+* **deps:** update ionicons to 6.1.1 ([#26626](https://github.com/ionic-team/ionic/issues/26626)) ([90405eb](https://github.com/ionic-team/ionic/commit/90405eb0af69ce04faf5855189449d0b7518288c))
+* **router:** export hook interfaces ([#26551](https://github.com/ionic-team/ionic/issues/26551)) ([2752702](https://github.com/ionic-team/ionic/commit/27527025e4588f43f9f79640f0929e7c7d0618ee))
+
+
+
+
+
+## [6.4.3](https://github.com/ionic-team/ionic/compare/v6.4.2...v6.4.3) (2023-01-18)
+
+
+### Bug Fixes
+
+* **datetime:** allow header to render in all wheel picker presentations ([#26616](https://github.com/ionic-team/ionic/issues/26616)) ([7b947b5](https://github.com/ionic-team/ionic/commit/7b947b5d58ff51a3a6ac360fef6d4df073e1bfec))
+* **input:** clear button uses contrast when setting color on item ([#26592](https://github.com/ionic-team/ionic/issues/26592)) ([a31e1e5](https://github.com/ionic-team/ionic/commit/a31e1e594d4ed7bbcf690b27eee143da232f2bdc)), closes [#26337](https://github.com/ionic-team/ionic/issues/26337)
+* **list:** inset lists render correctly ([#26586](https://github.com/ionic-team/ionic/issues/26586)) ([911b1d4](https://github.com/ionic-team/ionic/commit/911b1d496efe595ddbf8e980f052e505ce9716c2)), closes [#20819](https://github.com/ionic-team/ionic/issues/20819)
+
+
+
+
+
+## [6.4.2](https://github.com/ionic-team/ionic/compare/v6.4.1...v6.4.2) (2023-01-11)
+
+
+### Bug Fixes
+
+* **datetime:** time wheel input mode is dismissed on user scroll ([#26567](https://github.com/ionic-team/ionic/issues/26567)) ([d13a146](https://github.com/ionic-team/ionic/commit/d13a14658df2723aff908a94181cb563cb1f5b43))
+* **loading:** support custom aria-label ([#26581](https://github.com/ionic-team/ionic/issues/26581)) ([2450a1e](https://github.com/ionic-team/ionic/commit/2450a1e821d3901c8efb57ec256a10a951d22c8f)), closes [#24486](https://github.com/ionic-team/ionic/issues/24486)
+* **modal:** canDismiss type with data and role ([#26547](https://github.com/ionic-team/ionic/issues/26547)) ([32c2622](https://github.com/ionic-team/ionic/commit/32c2622ab04a70d00684e9a813d9bcef698d7551)), closes [#26544](https://github.com/ionic-team/ionic/issues/26544)
+* **picker-column-internal:** blurring picker does not throw error ([#26560](https://github.com/ionic-team/ionic/issues/26560)) ([3e671b9](https://github.com/ionic-team/ionic/commit/3e671b9c8ff62945a12eff431839ddae37d9d1a7)), closes [#26559](https://github.com/ionic-team/ionic/issues/26559)
+* **segment:** nested interactive is not rendered ([#26575](https://github.com/ionic-team/ionic/issues/26575)) ([77ce9e0](https://github.com/ionic-team/ionic/commit/77ce9e066e1ee71438ceac35479ea04e8df021f5))
+* **tab-button:** nested interactives are not rendered ([#26576](https://github.com/ionic-team/ionic/issues/26576)) ([df4882d](https://github.com/ionic-team/ionic/commit/df4882d4d1c516038badfa647db484e070fbd099)), closes [#23332](https://github.com/ionic-team/ionic/issues/23332)
+
+
+
+
+
 ## [6.4.1](https://github.com/ionic-team/ionic/compare/v6.4.0...v6.4.1) (2022-12-14)
 
 

core/api.txt

@@ -205,8 +205,6 @@ ion-breadcrumbs,prop,itemsBeforeCollapse,number,1,false,false
 ion-breadcrumbs,prop,maxItems,number | undefined,undefined,false,false
 ion-breadcrumbs,prop,mode,"ios" | "md",undefined,false,false
 ion-breadcrumbs,event,ionCollapsedClick,BreadcrumbCollapsedClickEventDetail,true
-ion-breadcrumbs,css-prop,--background
-ion-breadcrumbs,css-prop,--color
 
 ion-button,shadow
 ion-button,prop,buttonType,string,'button',false,false

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.4.1",
+  "version": "6.5.0",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -32,7 +32,7 @@
   ],
   "dependencies": {
     "@stencil/core": "^2.18.0",
-    "ionicons": "^6.0.4",
+    "ionicons": "^6.1.1",
     "tslib": "^2.1.0"
   },
   "devDependencies": {

core/src/components.d.ts

@@ -1996,6 +1996,7 @@ export namespace Components {
         "value"?: string | number;
     }
     interface IonPickerInternal {
+        "exitInputMode": () => Promise<void>;
         /**
           * The mode determines which platform styles to use.
          */
@@ -2581,6 +2582,7 @@ export namespace Components {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
+        "setFocus": () => Promise<void>;
         /**
           * The type of the button.
          */

core/src/components/action-sheet/action-sheet.tsx

@@ -388,7 +388,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
               {buttons.map((b) => (
                 <button type="button" id={b.id} class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
                   <span class="action-sheet-button-inner">
-                    {b.icon && <ion-icon icon={b.icon} lazy={false} class="action-sheet-icon" />}
+                    {b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}
                     {b.text}
                   </span>
                   {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
@@ -400,7 +400,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
               <div class="action-sheet-group action-sheet-group-cancel">
                 <button type="button" class={buttonClass(cancelButton)} onClick={() => this.buttonClick(cancelButton)}>
                   <span class="action-sheet-button-inner">
-                    {cancelButton.icon && <ion-icon icon={cancelButton.icon} lazy={false} class="action-sheet-icon" />}
+                    {cancelButton.icon && (
+                      <ion-icon icon={cancelButton.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />
+                    )}
                     {cancelButton.text}
                   </span>
                   {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}

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

@@ -25,7 +25,7 @@ export interface AlertInput {
   type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
   name?: string;
   placeholder?: string;
-  value?: any;
+  value?: any; // TODO(FW-2832): type
   label?: string;
   checked?: boolean;
   disabled?: boolean;
@@ -45,5 +45,6 @@ export interface AlertButton {
   role?: 'cancel' | 'destructive' | string;
   cssClass?: string | string[];
   id?: string;
+  // TODO(FW-2832): type
   handler?: (value: any) => AlertButtonOverlayHandler | Promise<AlertButtonOverlayHandler>;
 }

core/src/components/alert/alert.tsx

@@ -33,6 +33,8 @@ import { iosLeaveAnimation } from './animations/ios.leave';
 import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';
 
+// TODO(FW-2832): types
+
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */

core/src/components/app/app.tsx

@@ -10,7 +10,7 @@ import { isPlatform } from '../../utils/platform';
   styleUrl: 'app.scss',
 })
 export class App implements ComponentInterface {
-  private focusVisible?: any;
+  private focusVisible?: any; // TODO(FW-2832): type
 
   @Element() el!: HTMLElement;
 

core/src/components/breadcrumbs/breadcrumbs.scss

@@ -4,10 +4,6 @@
 // --------------------------------------------------
 
 :host {
-  /**
-   * @prop --background: Background of the breadcrumbs
-   * @prop --color: Text color of the breadcrumbs
-   */
   @include font-smoothing();
 
   display: flex;

core/src/components/content/content.tsx

@@ -21,7 +21,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
   shadow: true,
 })
 export class Content implements ComponentInterface {
-  private watchDog: any;
+  private watchDog: ReturnType<typeof setInterval> | null = null;
   private isScrolling = false;
   private lastScroll = 0;
   private queued = false;
@@ -311,7 +311,7 @@ export class Content implements ComponentInterface {
   }
 
   private onScrollEnd() {
-    clearInterval(this.watchDog);
+    if (this.watchDog) clearInterval(this.watchDog);
     this.watchDog = null;
     if (this.isScrolling) {
       this.isScrolling = false;

core/src/components/datetime/datetime.tsx

@@ -95,6 +95,7 @@ export class Datetime implements ComponentInterface {
   private destroyCalendarListener?: () => void;
   private destroyKeyboardMO?: () => void;
 
+  // TODO(FW-2832): types (DatetimeParts causes some errors that need untangling)
   private minParts?: any;
   private maxParts?: any;
   private todayParts!: DatetimeParts;
@@ -2177,7 +2178,7 @@ export class Datetime implements ComponentInterface {
     return headerText;
   }
 
-  private renderCalendarViewHeader(showExpandedHeader = true) {
+  private renderHeader(showExpandedHeader = true) {
     const hasSlottedTitle = this.el.querySelector('[slot="title"]') !== null;
     if (!hasSlottedTitle && !this.showDefaultTitle) {
       return;
@@ -2235,13 +2236,13 @@ export class Datetime implements ComponentInterface {
      */
     const hasWheelVariant = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
     if (preferWheel && hasWheelVariant) {
-      return [this.renderCalendarViewHeader(false), this.renderWheelView(), this.renderFooter()];
+      return [this.renderHeader(false), this.renderWheelView(), this.renderFooter()];
     }
 
     switch (presentation) {
       case 'date-time':
         return [
-          this.renderCalendarViewHeader(),
+          this.renderHeader(),
           this.renderCalendar(mode),
           this.renderCalendarViewMonthYearPicker(),
           this.renderTime(),
@@ -2249,21 +2250,21 @@ export class Datetime implements ComponentInterface {
         ];
       case 'time-date':
         return [
-          this.renderCalendarViewHeader(),
+          this.renderHeader(),
           this.renderTime(),
           this.renderCalendar(mode),
           this.renderCalendarViewMonthYearPicker(),
           this.renderFooter(),
         ];
       case 'time':
-        return [this.renderTime(), this.renderFooter()];
+        return [this.renderHeader(false), this.renderTime(), this.renderFooter()];
       case 'month':
       case 'month-year':
       case 'year':
-        return [this.renderWheelView(), this.renderFooter()];
+        return [this.renderHeader(false), this.renderWheelView(), this.renderFooter()];
       default:
         return [
-          this.renderCalendarViewHeader(),
+          this.renderHeader(),
           this.renderCalendar(mode),
           this.renderCalendarViewMonthYearPicker(),
           this.renderFooter(),