@openrewrite/recipes-angular 1.17.0 → 1.18.0

package/src/libraries/cdk/migrate-focus-trap-factory-create.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {ExecutionContext, foundSearchResult, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, Template} from "@openrewrite/rewrite/javascript";
+import {isLiteral, J, Type} from "@openrewrite/rewrite/java";
+import {argumentCount, isCdkClass} from "./find-cdk-signature-changes";
+
+export class MigrateFocusTrapFactoryCreate extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.MigrateFocusTrapFactoryCreate";
+    readonly displayName = "Pass a config object to `ConfigurableFocusTrapFactory.create`";
+    readonly description = "CDK 22 removed the `create(element, deferCaptureElements: boolean)` overload of " +
+        "`ConfigurableFocusTrapFactory`. Rewrites `create(element, true)` to `create(element, {defer: true})`, and marks " +
+        "calls whose second argument is a boolean expression other than a literal.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            protected async visitMethodInvocation(method: J.MethodInvocation, p: ExecutionContext): Promise<J | undefined> {
+                const m = await super.visitMethodInvocation(method, p) as J.MethodInvocation;
+                if (m.name.simpleName !== 'create' || argumentCount(m.arguments) !== 2) return m;
+                if (!isCdkClass(m.methodType?.declaringType, 'ConfigurableFocusTrapFactory')) return m;
+
+                const args = m.arguments.elements;
+                const defer = args[1].element;
+                if (isLiteral(defer) && typeof defer.value === 'boolean') {
+                    const applied = await Template.builder()
+                        .code(`create(element, {defer: ${defer.value}})`)
+                        .build()
+                        .apply(m, this.cursor) as J.MethodInvocation;
+                    const config = applied.arguments?.elements?.[1]?.element;
+                    if (!config) return m;
+                    const elements = [args[0], {...args[1], element: {...config, prefix: defer.prefix}}];
+                    return {...m, arguments: {...m.arguments, elements}} as J.MethodInvocation;
+                }
+                if (isBoolean(defer)) {
+                    return foundSearchResult(m, "The boolean overload of `ConfigurableFocusTrapFactory.create` was " +
+                        "removed in @angular/cdk 22. Pass `{defer: <value>}` instead.");
+                }
+                return m;
+            }
+        }();
+    }
+}
+
+function isBoolean(expression: J): boolean {
+    const type = (expression as J & {type?: Type}).type;
+    return Type.isPrimitive(type) && type.keyword === 'boolean';
+}

package/src/libraries/cdk/remove-cdk-super-arguments.ts

@@ -0,0 +1,83 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS} from "@openrewrite/rewrite/javascript";
+import {J} from "@openrewrite/rewrite/java";
+import {importedNames} from "../components/symbols";
+import {emptyArguments, extendedClassName, isSuperCall} from "../components/lst";
+import {argumentCount} from "./find-cdk-signature-changes";
+
+/** Classes whose constructor was `constructor(...args: unknown[])` in CDK 21 and takes no arguments in CDK 22. */
+const ZERO_ARGUMENT_CONSTRUCTORS: Record<string, string[]> = {
+    '@angular/cdk/a11y': [
+        'AriaDescriber', 'CdkAriaLive', 'CdkMonitorFocus', 'CdkTrapFocus', 'ConfigurableFocusTrapFactory',
+        'FocusMonitor', 'FocusTrapFactory', 'HighContrastModeDetector', 'InputModalityDetector',
+        'InteractivityChecker', 'LiveAnnouncer'
+    ],
+    '@angular/cdk/accordion': ['CdkAccordionItem'],
+    '@angular/cdk/bidi': ['Directionality'],
+    '@angular/cdk/clipboard': ['CdkCopyToClipboard', 'Clipboard'],
+    '@angular/cdk/dialog': ['CdkDialogContainer', 'Dialog'],
+    '@angular/cdk/drag-drop': [
+        'CdkDrag', 'CdkDragHandle', 'CdkDragPlaceholder', 'CdkDragPreview', 'CdkDropList', 'DragDrop',
+        'DragDropRegistry'
+    ],
+    '@angular/cdk/layout': ['BreakpointObserver', 'MediaMatcher'],
+    '@angular/cdk/observers': ['CdkObserveContent', 'ContentObserver'],
+    '@angular/cdk/overlay': [
+        'CdkConnectedOverlay', 'CdkOverlayOrigin', 'CdkScrollable', 'FullscreenOverlayContainer', 'Overlay',
+        'OverlayContainer', 'OverlayPositionBuilder', 'ScrollDispatcher', 'ScrollStrategyOptions', 'ViewportRuler'
+    ],
+    '@angular/cdk/portal': ['CdkPortal', 'CdkPortalOutlet'],
+    '@angular/cdk/scrolling': [
+        'CdkScrollable', 'CdkVirtualForOf', 'CdkVirtualScrollViewport', 'CdkVirtualScrollable',
+        'CdkVirtualScrollableElement', 'CdkVirtualScrollableWindow', 'ScrollDispatcher', 'ViewportRuler'
+    ],
+    '@angular/cdk/stepper': [
+        'CdkStep', 'CdkStepHeader', 'CdkStepLabel', 'CdkStepper', 'CdkStepperNext', 'CdkStepperPrevious'
+    ],
+    '@angular/cdk/table': [
+        'BaseRowDef', 'CdkCell', 'CdkCellDef', 'CdkCellOutlet', 'CdkColumnDef', 'CdkFooterCell',
+        'CdkFooterCellDef', 'CdkFooterRowDef', 'CdkHeaderCell', 'CdkHeaderCellDef', 'CdkHeaderRowDef',
+        'CdkNoDataRow', 'CdkRowDef', 'CdkTable', 'CdkTextColumn', 'DataRowOutlet', 'FooterRowOutlet',
+        'HeaderRowOutlet', 'NoDataRowOutlet'
+    ],
+    '@angular/cdk/text-field': ['AutofillMonitor', 'CdkAutofill', 'CdkTextareaAutosize'],
+    '@angular/cdk/tree': [
+        'CdkNestedTreeNode', 'CdkTree', 'CdkTreeNode', 'CdkTreeNodeDef', 'CdkTreeNodeOutlet', 'CdkTreeNodePadding',
+        'CdkTreeNodeToggle'
+    ],
+};
+
+export class RemoveCdkSuperArguments extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.RemoveCdkSuperArguments";
+    readonly displayName = "Remove the `super(...)` arguments of CDK subclasses";
+    readonly description = "CDK 22 removed the `constructor(...args: unknown[])` that kept old `super(...)` calls compiling " +
+        "after the CDK classes moved to `inject()`. Removes the arguments of `super(...)` in classes that extend one of " +
+        "those classes, such as `CdkStepper`, `CdkTable` or `Overlay`, since the CDK already ignored them.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            private cdkClasses = new Set<string>();
+
+            protected async visitJsCompilationUnit(cu: JS.CompilationUnit, p: ExecutionContext): Promise<J | undefined> {
+                this.cdkClasses = new Set(Object.entries(ZERO_ARGUMENT_CONSTRUCTORS)
+                    .flatMap(([module, classes]) => [...importedNames(cu, module, classes).keys()]));
+                return this.cdkClasses.size === 0 ? cu : super.visitJsCompilationUnit(cu, p);
+            }
+
+            protected async visitFunctionCall(functionCall: JS.FunctionCall, p: ExecutionContext): Promise<J | undefined> {
+                const call = await super.visitFunctionCall(functionCall, p) as JS.FunctionCall;
+                if (!isSuperCall(call) || argumentCount(call.arguments) === 0) return call;
+                const classDecl = this.cursor.firstEnclosing((t: any): t is J.ClassDeclaration => t?.kind === J.Kind.ClassDeclaration);
+                const extended = classDecl && extendedClassName(classDecl);
+                if (!extended || !this.cdkClasses.has(extended)) return call;
+                return {...call, arguments: emptyArguments(call.arguments)} as JS.FunctionCall;
+            }
+        }();
+    }
+}

package/src/libraries/cdk/remove-portal-factory-resolver-arguments.ts

@@ -0,0 +1,88 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS} from "@openrewrite/rewrite/javascript";
+import {Expression, isIdentifier, J, Type} from "@openrewrite/rewrite/java";
+import {importedNames} from "../components/symbols";
+import {argumentCount} from "./find-cdk-signature-changes";
+
+interface RemovedParameters {
+    /** Index of the `ComponentFactoryResolver` parameter. */
+    resolver: number;
+    /** Index of a later parameter that CDK 20 removed as well. */
+    trailing?: number;
+    /** Arguments the CDK 20 constructor accepts at most, so a longer call is unambiguously a CDK 19 one. */
+    newArity: number;
+}
+
+const REMOVED_PARAMETERS: Record<string, RemovedParameters> = {
+    // (component, viewContainerRef, injector, componentFactoryResolver, projectableNodes)
+    ComponentPortal: {resolver: 3, newArity: 4},
+    // (outletElement, componentFactoryResolver, appRef, defaultInjector, document)
+    DomPortalOutlet: {resolver: 1, trailing: 4, newArity: 3},
+    DomPortalHost: {resolver: 1, trailing: 4, newArity: 3},
+};
+
+export class RemovePortalFactoryResolverArguments extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.RemovePortalFactoryResolverArguments";
+    readonly displayName = "Remove the `ComponentFactoryResolver` argument of CDK portals";
+    readonly description = "CDK 20 removed the deprecated `ComponentFactoryResolver` parameter of the `ComponentPortal` " +
+        "constructor and the `ComponentFactoryResolver` and `Document` parameters of the `DomPortalOutlet` constructor. " +
+        "Removes those arguments from `new ComponentPortal(...)` and `new DomPortalOutlet(...)` so the remaining ones " +
+        "line up with the new parameter lists. A call that also fits the new parameter list is only changed when the " +
+        "argument is typed or named as a `ComponentFactoryResolver`.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            private portalClasses = new Map<string, string>();
+
+            protected async visitJsCompilationUnit(cu: JS.CompilationUnit, p: ExecutionContext): Promise<J | undefined> {
+                this.portalClasses = importedNames(cu, '@angular/cdk/portal', Object.keys(REMOVED_PARAMETERS));
+                if (this.portalClasses.size === 0) return cu;
+                return super.visitJsCompilationUnit(cu, p);
+            }
+
+            protected async visitNewClass(newClass: J.NewClass, p: ExecutionContext): Promise<J | undefined> {
+                const n = await super.visitNewClass(newClass, p) as J.NewClass;
+                const clazz = n.class;
+                if (!clazz || !isIdentifier(clazz)) return n;
+                const portalClass = this.portalClasses.get(clazz.simpleName);
+                if (!portalClass) return n;
+
+                const removed = REMOVED_PARAMETERS[portalClass];
+                let elements = n.arguments.elements;
+                const resolver = elements[removed.resolver]?.element;
+                if (!resolver || (argumentCount(n.arguments) <= removed.newArity && !isResolver(resolver))) return n;
+
+                if (removed.trailing !== undefined) {
+                    elements = removeArgument(elements, removed.trailing);
+                }
+                elements = removeArgument(elements, removed.resolver);
+                return {...n, arguments: {...n.arguments, elements}} as J.NewClass;
+            }
+        }();
+    }
+}
+
+function removeArgument(elements: J.RightPadded<Expression>[], index: number): J.RightPadded<Expression>[] {
+    if (index >= elements.length) return elements;
+    const retained = elements.filter((_, i) => i !== index);
+    if (index === elements.length - 1) {
+        retained[retained.length - 1] = {...retained[retained.length - 1], after: elements[index].after};
+    }
+    return retained;
+}
+
+/** Whether an argument is typed as, or named like, a `ComponentFactoryResolver`. */
+function isResolver(argument: Expression): boolean {
+    const type = (argument as Expression & {type?: Type}).type;
+    if (Type.isClass(type) && type.fullyQualifiedName.endsWith('ComponentFactoryResolver')) return true;
+    const name = isIdentifier(argument) ? argument.simpleName
+        : argument.kind === J.Kind.FieldAccess ? (argument as J.FieldAccess).name.element.simpleName
+            : undefined;
+    return name !== undefined && /resolver/i.test(name);
+}

package/src/libraries/cdk/remove-tilde-from-stylesheet-imports.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {StylesheetRecipe, withoutComments} from "../components/stylesheets";
+
+const TILDE_IMPORT = /(@(?:import|use|forward)\s+['"])~(@angular\/[^'"]*?)(?:\.scss)?(['"])/g;
+
+export class RemoveTildeFromStylesheetImports extends StylesheetRecipe {
+    readonly name = "org.openrewrite.angular.cdk.RemoveTildeFromStylesheetImports";
+    readonly displayName = "Remove `~` from `@angular` stylesheet imports";
+    readonly description = "Removes the webpack-specific `~` prefix and the `.scss` extension from `@import`, `@use` and " +
+        "`@forward` rules that load `@angular/cdk` or `@angular/material` stylesheets. The Angular 13 CLI deprecated " +
+        "tilde imports. This is the `ng update` tilde-import migration of `@angular/cdk` 13.";
+
+    protected migrate(content: string): string {
+        if (!content.includes('~@angular/')) return content;
+        return withoutComments(content, masked => masked.replace(TILDE_IMPORT, '$1$2$3'));
+    }
+}

package/src/libraries/cdk/rename-portal-template-selectors.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {ExecutionContext, foundSearchResult, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {PlainText, PlainTextVisitor} from "@openrewrite/rewrite/text";
+import {RenameTemplateAttributes, renameTemplateAttributes} from "../components/templates";
+
+export class RenamePortalTemplateSelectors extends RenameTemplateAttributes {
+    readonly name = "org.openrewrite.angular.cdk.RenamePortalTemplateSelectors";
+    readonly displayName = "Rename the removed CDK portal directive selectors";
+    readonly description = "CDK 21 removed `PortalHostDirective` and `TemplatePortalDirective`. Renames the selectors " +
+        "only they matched to those of `CdkPortalOutlet` and `CdkPortal`: `[cdkPortalHost]` becomes `[cdkPortalOutlet]`, " +
+        "a `#ref=\"cdkPortalHost\"` reference becomes `#ref=\"cdkPortalOutlet\"`, and `<ng-template cdk-portal>` becomes " +
+        "`<ng-template cdkPortal>`, in `.html` templates and inline `template` metadata.";
+
+    protected readonly attributes = [
+        {name: 'cdkPortalHost', newName: 'cdkPortalOutlet'},
+        {name: 'cdk-portal', newName: 'cdkPortal', element: 'ng-template'},
+    ];
+    protected readonly exportAs = [
+        {name: 'cdkPortalHost', newName: 'cdkPortalOutlet'},
+    ];
+}
+
+const UNPREFIXED_SELECTORS = [
+    {name: 'portal', newName: 'cdkPortal', element: 'ng-template'},
+    {name: 'portalHost', newName: 'cdkPortalOutlet'},
+];
+
+export class FindUnprefixedPortalSelectors extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.FindUnprefixedPortalSelectors";
+    readonly displayName = "Find the removed unprefixed CDK portal selectors";
+    readonly description = "Finds `.html` templates that use the `portal` or `portalHost` attribute, which only the " +
+        "`TemplatePortalDirective` and `PortalHostDirective` that CDK 21 removed matched. These names are too generic to " +
+        "rename blindly, so confirm they are the CDK directives and rename them to `cdkPortal` and `cdkPortalOutlet`.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends PlainTextVisitor<ExecutionContext> {
+            override async visitText(text: PlainText, p: ExecutionContext): Promise<PlainText | undefined> {
+                const t = await super.visitText(text, p) as PlainText;
+                if (!t || !t.sourcePath.endsWith('.html')) return t;
+                if (renameTemplateAttributes(t.text, UNPREFIXED_SELECTORS) === t.text) return t;
+                return foundSearchResult(t, "`portal` and `portalHost` stopped matching a CDK directive in " +
+                    "@angular/cdk 21. If they refer to the CDK portal directives, rename them to `cdkPortal` and `cdkPortalOutlet`.");
+            }
+        }();
+    }
+}

package/src/libraries/cdk/upgrade-to-cdk.ts

@@ -0,0 +1,146 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {Recipe} from "@openrewrite/rewrite";
+import {renameSymbols} from "../components/symbols";
+import {RemoveTildeFromStylesheetImports} from "./remove-tilde-from-stylesheet-imports";
+import {FindRemovedCdk13Apis, FindRemovedCdk14Apis, FindRemovedCdk20Apis, FindRemovedCdk21Apis, FindRemovedCdk22Apis} from "./find-removed-cdk-apis";
+import {
+    FindComponentPortalFactoryResolver,
+    FindDialogComponentFactoryResolver,
+    FindDropListRefDropWithoutEvent,
+    FindFocusTrapWithoutInjector,
+    FindOverlayConnectedTo,
+    FindSelectionModelVoidOverrides,
+    FindTestElementImplementations
+} from "./find-cdk-signature-changes";
+import {MigrateCdkSassImports} from "./migrate-cdk-sass-imports";
+import {RemovePortalFactoryResolverArguments} from "./remove-portal-factory-resolver-arguments";
+import {FindUnprefixedPortalSelectors, RenamePortalTemplateSelectors} from "./rename-portal-template-selectors";
+import {MigrateFocusTrapFactoryCreate} from "./migrate-focus-trap-factory-create";
+import {MigrateCdkStepper} from "./migrate-cdk-stepper";
+import {MigrateDragDropRegistry} from "./migrate-drag-drop-registry";
+import {MigrateDeprecatedOverlaySass} from "./migrate-deprecated-overlay-sass";
+import {RemoveCdkSuperArguments} from "./remove-cdk-super-arguments";
+
+// The `@angular/cdk` version bump is part of `UpgradeToAngularN`, which runs these composites as well.
+
+export class UpgradeToCdk13CodeChanges extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.UpgradeToCdk13CodeChanges";
+    readonly displayName = "Angular CDK 13 code changes";
+    readonly description = "The `@angular/cdk` source changes of the version 13 migration: renames " +
+        "`CKD_COPY_TO_CLIPBOARD_CONFIG`, removes `~` from `@angular` stylesheet imports, and finds the removed " +
+        "`ConnectedPositionStrategy` API. `UpgradeToAngular13` includes this recipe.";
+
+    async recipeList(): Promise<Recipe[]> {
+        return [
+            ...renameSymbols([
+                {module: '@angular/cdk/clipboard', name: 'CKD_COPY_TO_CLIPBOARD_CONFIG', newName: 'CDK_COPY_TO_CLIPBOARD_CONFIG'},
+            ]),
+            new RemoveTildeFromStylesheetImports(),
+            new FindRemovedCdk13Apis(),
+            new FindOverlayConnectedTo(),
+        ];
+    }
+}
+
+export class UpgradeToCdk14CodeChanges extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.UpgradeToCdk14CodeChanges";
+    readonly displayName = "Angular CDK 14 code changes";
+    readonly description = "The `@angular/cdk` source changes of the version 14 migration: migrates `CdkStepper` " +
+        "subclasses off the private `_orientation` and the removed `_document` parameter, and finds imports from the " +
+        "removed `@angular/cdk/testing/protractor` entry point. `UpgradeToAngular14` includes this recipe.";
+
+    async recipeList(): Promise<Recipe[]> {
+        return [
+            new MigrateCdkStepper(),
+            new FindRemovedCdk14Apis(),
+        ];
+    }
+}
+
+export class UpgradeToCdk17CodeChanges extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.UpgradeToCdk17CodeChanges";
+    readonly displayName = "Angular CDK 17 code changes";
+    readonly description = "The `@angular/cdk` source changes of the version 17 migration: replaces the Sass `@import` " +
+        "entry points that CDK 17 deleted with `@use '@angular/cdk'`. `UpgradeToAngular17` includes this recipe.";
+
+    async recipeList(): Promise<Recipe[]> {
+        return [new MigrateCdkSassImports()];
+    }
+}
+
+export class UpgradeToCdk20CodeChanges extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.UpgradeToCdk20CodeChanges";
+    readonly displayName = "Angular CDK 20 code changes";
+    readonly description = "The `@angular/cdk` source changes of the version 20 migration: renames the removed " +
+        "`*PortalHost` aliases to their `*PortalOutlet` classes, drops the `ComponentFactoryResolver` arguments of the " +
+        "portal constructors, migrates `DragDropRegistry` off its type arguments and `scroll` subject, and finds the " +
+        "removed dialog, portal and table APIs and the `SelectionModel` overrides that still return `void`. " +
+        "`UpgradeToAngular20` includes this recipe.";
+
+    async recipeList(): Promise<Recipe[]> {
+        return [
+            ...renameSymbols([
+                {module: '@angular/cdk/portal', name: 'BasePortalHost', newName: 'BasePortalOutlet'},
+                {module: '@angular/cdk/portal', name: 'DomPortalHost', newName: 'DomPortalOutlet'},
+                {module: '@angular/cdk/portal', name: 'PortalHost', newName: 'PortalOutlet'},
+            ]),
+            new RemovePortalFactoryResolverArguments(),
+            new MigrateDragDropRegistry(),
+            new FindRemovedCdk20Apis(),
+            new FindDialogComponentFactoryResolver(),
+            new FindComponentPortalFactoryResolver(),
+            new FindSelectionModelVoidOverrides(),
+        ];
+    }
+}
+
+export class UpgradeToCdk21CodeChanges extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.UpgradeToCdk21CodeChanges";
+    readonly displayName = "Angular CDK 21 code changes";
+    readonly description = "The `@angular/cdk` source changes of the version 21 migration: replaces the removed " +
+        "`TemplatePortalDirective` and `PortalHostDirective` with `CdkPortal` and `CdkPortalOutlet` in code and " +
+        "templates, renames the removed overlay Sass variables, and finds the removed `@angular/cdk/a11y` factories and incomplete `TestElement` implementations. " +
+        "`UpgradeToAngular21` includes this recipe.";
+
+    async recipeList(): Promise<Recipe[]> {
+        return [
+            ...renameSymbols([
+                {module: '@angular/cdk/portal', name: 'TemplatePortalDirective', newName: 'CdkPortal'},
+                {module: '@angular/cdk/portal', name: 'PortalHostDirective', newName: 'CdkPortalOutlet'},
+            ]),
+            new RenamePortalTemplateSelectors(),
+            new FindUnprefixedPortalSelectors(),
+            new MigrateDeprecatedOverlaySass(),
+            new FindRemovedCdk21Apis(),
+            new FindTestElementImplementations(),
+        ];
+    }
+}
+
+export class UpgradeToCdk22CodeChanges extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.UpgradeToCdk22CodeChanges";
+    readonly displayName = "Angular CDK 22 code changes";
+    readonly description = "The `@angular/cdk` source changes of the version 22 migration: renames `ContextMenuTracker` " +
+        "to `MenuTracker`, removes the `super(...)` arguments that CDK constructors no longer accept, rewrites the boolean " +
+        "overload of `ConfigurableFocusTrapFactory.create`, and finds the removed " +
+        "`AriaDescriber` constants and the calls missing a now-required `Injector` or `event` argument. " +
+        "`UpgradeToAngular22` includes this recipe.";
+
+    async recipeList(): Promise<Recipe[]> {
+        return [
+            ...renameSymbols([
+                {module: '@angular/cdk/menu', name: 'ContextMenuTracker', newName: 'MenuTracker'},
+            ]),
+            new RemoveCdkSuperArguments(),
+            new MigrateFocusTrapFactoryCreate(),
+            new FindRemovedCdk22Apis(),
+            new FindFocusTrapWithoutInjector(),
+            new FindDropListRefDropWithoutEvent(),
+        ];
+    }
+}

package/src/libraries/components/lst.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {emptyMarkers, randomId} from "@openrewrite/rewrite";
+import {JS} from "@openrewrite/rewrite/javascript";
+import {emptySpace, Expression, isIdentifier, J} from "@openrewrite/rewrite/java";
+
+/** The argument list of a call without arguments, which the LST represents as one `J.Empty`. */
+export function emptyArguments(container: J.Container<Expression>): J.Container<Expression> {
+    const empty: J.Empty = {kind: J.Kind.Empty, id: randomId(), prefix: emptySpace, markers: emptyMarkers};
+    return {
+        ...container,
+        elements: [{kind: J.Kind.RightPadded, element: empty, after: emptySpace, markers: emptyMarkers} as J.RightPadded<Expression>],
+    };
+}
+
+/** The simple name of the class a class declaration extends, with any type arguments stripped. */
+export function extendedClassName(classDecl: J.ClassDeclaration): string | undefined {
+    let extended: J | undefined = classDecl.extends?.element;
+    if (extended?.kind === JS.Kind.TypeTreeExpression) extended = (extended as JS.TypeTreeExpression).expression;
+    if (extended?.kind === JS.Kind.ExpressionWithTypeArguments) extended = (extended as JS.ExpressionWithTypeArguments).clazz;
+    if (extended?.kind === J.Kind.ParameterizedType) extended = (extended as J.ParameterizedType).class;
+    return extended && isIdentifier(extended) ? extended.simpleName : undefined;
+}
+
+/** Whether a function call is a `super(...)` constructor call. */
+export function isSuperCall(call: JS.FunctionCall): boolean {
+    const fn = call.function?.element;
+    return fn !== undefined && isIdentifier(fn) && fn.simpleName === 'super';
+}

package/src/libraries/components/stylesheets.ts

@@ -0,0 +1,55 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {ExecutionContext, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {PlainText, PlainTextVisitor} from "@openrewrite/rewrite/text";
+
+const COMMENT = /\/\*[\s\S]*?\*\/|\/\/[^\n]*/g;
+const COMMENT_PLACEHOLDER = /__ngComment(\d+)__/g;
+
+/** Rewrites the text of `.scss` and `.css` files, the stylesheets the Angular CLI compiles with Sass. */
+export abstract class StylesheetRecipe extends Recipe {
+    protected abstract migrate(content: string): string;
+
+    protected acceptsPath(sourcePath: string): boolean {
+        return isStylesheet(sourcePath);
+    }
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        const migrate = (content: string) => this.migrate(content);
+        const acceptsPath = (sourcePath: string) => this.acceptsPath(sourcePath);
+        return new class extends PlainTextVisitor<ExecutionContext> {
+            override async visitText(text: PlainText, p: ExecutionContext): Promise<PlainText | undefined> {
+                const t = await super.visitText(text, p) as PlainText;
+                if (!t || !acceptsPath(t.sourcePath)) return t;
+                const updated = migrate(t.text);
+                return updated === t.text ? t : {...t, text: updated, snippets: []};
+            }
+        }();
+    }
+}
+
+export function isStylesheet(sourcePath: string): boolean {
+    return sourcePath.endsWith('.scss') || sourcePath.endsWith('.css');
+}
+
+/** Applies `migrate` to a stylesheet with its comments masked, so commented-out code stays as written. */
+export function withoutComments(content: string, migrate: (masked: string) => string): string {
+    const comments: string[] = [];
+    const masked = content.replace(COMMENT, comment => {
+        comments.push(comment);
+        return `__ngComment${comments.length - 1}__`;
+    });
+    return migrate(masked).replace(COMMENT_PLACEHOLDER, (_, index) => comments[Number(index)]);
+}
+
+export function maskComments(content: string): string {
+    return content.replace(COMMENT, '');
+}
+
+export function escapeRegExp(value: string): string {
+    return value.replace(/[.*+?^${}()|[\]\\/]/g, '\\$&');
+}

package/src/libraries/components/symbols.ts

@@ -0,0 +1,116 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {ExecutionContext, findMarker, foundSearchResult, MarkersKind, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {ChangeImport, JavaScriptVisitor, JS} from "@openrewrite/rewrite/javascript";
+import {isIdentifier, J} from "@openrewrite/rewrite/java";
+
+/** An exported symbol of an `angular/components` entry point that a major version renamed. */
+export interface RenamedSymbol {
+    module: string;
+    name: string;
+    newName: string;
+    newModule?: string;
+}
+
+/** An exported symbol of an `angular/components` entry point that a major version removed. */
+export interface RemovedSymbol {
+    module: string;
+    name: string;
+    message: string;
+}
+
+/** One `ChangeImport` per renamed symbol, which also carries every reference bound to the import. */
+export function renameSymbols(symbols: RenamedSymbol[]): Recipe[] {
+    return symbols.map(s => new ChangeImport({
+        oldModule: s.module,
+        oldMember: s.name,
+        newModule: s.newModule ?? s.module,
+        newMember: s.newName,
+    }));
+}
+
+/** Local names that the imports of a compilation unit bind to the given symbols of the given module. */
+export function importedNames(cu: JS.CompilationUnit, module: string, symbols: string[]): Map<string, string> {
+    const names = new Map<string, string>();
+    for (const statement of cu.statements) {
+        const imp = statement.element;
+        if (imp.kind !== JS.Kind.Import) continue;
+        const named = (imp as JS.Import).importClause?.namedBindings;
+        if (moduleOf(imp as JS.Import) !== module || named?.kind !== JS.Kind.NamedImports) continue;
+        for (const element of (named as JS.NamedImports).elements.elements) {
+            const spec = element.element as JS.ImportSpecifier;
+            const imported = importedName(spec);
+            if (imported && symbols.includes(imported)) {
+                names.set(localName(spec) ?? imported, imported);
+            }
+        }
+    }
+    return names;
+}
+
+/**
+ * Marks named imports of removed symbols, so a removed API shows up at the import that pulls it in.
+ */
+export abstract class FindRemovedSymbols extends Recipe {
+    protected abstract readonly symbols: RemovedSymbol[];
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        const symbols = this.symbols;
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            protected async visitImportDeclaration(jsImport: JS.Import, p: ExecutionContext): Promise<J | undefined> {
+                const imp = await super.visitImportDeclaration(jsImport, p) as JS.Import;
+                const module = moduleOf(imp);
+                const named = imp.importClause?.namedBindings;
+                if (!module || named?.kind !== JS.Kind.NamedImports) return imp;
+
+                const removed = symbols.filter(s => s.module === module);
+                if (removed.length === 0) return imp;
+
+                const namedImports = named as JS.NamedImports;
+                let changed = false;
+                const elements = await Promise.all(namedImports.elements.elements.map(async element => {
+                    const spec = element.element as JS.ImportSpecifier;
+                    const symbol = removed.find(s => s.name === importedName(spec));
+                    if (!symbol || findMarker(spec, MarkersKind.SearchResult)) return element;
+                    changed = true;
+                    return {...element, element: foundSearchResult(spec, symbol.message)};
+                }));
+                if (!changed) return imp;
+
+                return {
+                    ...imp,
+                    importClause: {
+                        ...imp.importClause!,
+                        namedBindings: {...namedImports, elements: {...namedImports.elements, elements}},
+                    },
+                } as JS.Import;
+            }
+        }();
+    }
+}
+
+function moduleOf(imp: JS.Import): string | undefined {
+    const specifier = imp.moduleSpecifier?.element;
+    return specifier?.kind === J.Kind.Literal ? (specifier as J.Literal).value as string : undefined;
+}
+
+function importedName(spec: JS.ImportSpecifier): string | undefined {
+    const specifier = spec.specifier;
+    if (isIdentifier(specifier)) return specifier.simpleName;
+    if (specifier.kind === JS.Kind.Alias) {
+        const propertyName = (specifier as JS.Alias).propertyName.element;
+        return isIdentifier(propertyName) ? propertyName.simpleName : undefined;
+    }
+    return undefined;
+}
+
+function localName(spec: JS.ImportSpecifier): string | undefined {
+    const specifier = spec.specifier;
+    if (specifier.kind !== JS.Kind.Alias) return undefined;
+    const alias = (specifier as JS.Alias).alias;
+    return isIdentifier(alias) ? alias.simpleName : undefined;
+}