@openrewrite/recipes-angular 1.17.0 → 1.18.0

package/src/libraries/cdk/find-cdk-signature-changes.ts

@@ -0,0 +1,209 @@
+/*
+ * 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, JS} from "@openrewrite/rewrite/javascript";
+import {isIdentifier, J} from "@openrewrite/rewrite/java";
+import {importedNames} from "../components/symbols";
+import {extendedClassName} from "../components/lst";
+
+/** Whether a type is the named class of an `@angular/cdk` entry point. */
+export function isCdkClass(type: any, className: string): boolean {
+    const fqn: string | undefined = type?.fullyQualifiedName;
+    return fqn !== undefined && fqn.startsWith('@angular/cdk') && fqn.endsWith(`.${className}`);
+}
+
+export function argumentCount(container: J.Container<J> | undefined): number {
+    const elements = container?.elements ?? [];
+    return elements.length === 1 && elements[0].element.kind === J.Kind.Empty ? 0 : elements.length;
+}
+
+export class FindOverlayConnectedTo extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.FindOverlayConnectedTo";
+    readonly displayName = "Find `OverlayPositionBuilder.connectedTo` calls";
+    readonly description = "Finds calls of `connectedTo` on the `OverlayPositionBuilder` that `overlay.position()` returns. " +
+        "CDK 13 removed it with `ConnectedPositionStrategy`, so call `flexibleConnectedTo(origin)` and pass the positions " +
+        "to `withPositions` instead.";
+
+    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 !== 'connectedTo') return m;
+                const select = m.select?.element;
+                const onPositionBuilder = isCdkClass(m.methodType?.declaringType, 'OverlayPositionBuilder') ||
+                    (select?.kind === J.Kind.MethodInvocation && (select as J.MethodInvocation).name.simpleName === 'position');
+                if (!onPositionBuilder) return m;
+                return foundSearchResult(m, "`connectedTo` was removed in @angular/cdk 13. " +
+                    "Use `flexibleConnectedTo(origin).withPositions([...])` instead.");
+            }
+        }();
+    }
+}
+
+export class FindDialogComponentFactoryResolver extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.FindDialogComponentFactoryResolver";
+    readonly displayName = "Find `componentFactoryResolver` in CDK dialog configurations";
+    readonly description = "Finds `componentFactoryResolver` properties in files that import `@angular/cdk/dialog`. " +
+        "CDK 20 removed `DialogConfig.componentFactoryResolver`, since Ivy resolves components without one.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            protected async visitJsCompilationUnit(cu: JS.CompilationUnit, p: ExecutionContext): Promise<J | undefined> {
+                const importsDialog = cu.statements.some(s => s.element.kind === JS.Kind.Import &&
+                    ((s.element as JS.Import).moduleSpecifier?.element as J.Literal | undefined)?.value === '@angular/cdk/dialog');
+                return importsDialog ? super.visitJsCompilationUnit(cu, p) : cu;
+            }
+
+            protected async visitPropertyAssignment(property: JS.PropertyAssignment, p: ExecutionContext): Promise<J | undefined> {
+                const prop = await super.visitPropertyAssignment(property, p) as JS.PropertyAssignment;
+                const name = prop.name.element;
+                if (!isIdentifier(name) || name.simpleName !== 'componentFactoryResolver') return prop;
+                return foundSearchResult(prop, "`componentFactoryResolver` was removed from `DialogConfig` in " +
+                    "@angular/cdk 20. Remove it, since components resolve without a factory resolver.");
+            }
+        }();
+    }
+}
+
+export class FindTestElementImplementations extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.FindTestElementImplementations";
+    readonly displayName = "Find `TestElement` implementations without `setContenteditableValue`";
+    readonly description = "Finds classes that implement `TestElement` from `@angular/cdk/testing` without a " +
+        "`setContenteditableValue` method, which CDK 21 made required.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            private testElement = new Map<string, string>();
+
+            protected async visitJsCompilationUnit(cu: JS.CompilationUnit, p: ExecutionContext): Promise<J | undefined> {
+                this.testElement = importedNames(cu, '@angular/cdk/testing', ['TestElement']);
+                return this.testElement.size === 0 ? cu : super.visitJsCompilationUnit(cu, p);
+            }
+
+            protected async visitClassDeclaration(classDecl: J.ClassDeclaration, p: ExecutionContext): Promise<J | undefined> {
+                const c = await super.visitClassDeclaration(classDecl, p) as J.ClassDeclaration;
+                const implementsTestElement = (c.implements?.elements ?? [])
+                    .some(i => isIdentifier(i.element) && this.testElement.has(i.element.simpleName));
+                if (!implementsTestElement) return c;
+                const hasMethod = c.body.statements.some(s => s.element.kind === J.Kind.MethodDeclaration &&
+                    (s.element as J.MethodDeclaration).name.simpleName === 'setContenteditableValue');
+                if (hasMethod) return c;
+                return foundSearchResult(c, "`TestElement.setContenteditableValue` is required as of @angular/cdk 21. " +
+                    "Implement it to set the text of a `contenteditable` element.");
+            }
+        }();
+    }
+}
+
+/** Constructor arity at which the `injector` parameter of the CDK 22 focus traps becomes required. */
+const FOCUS_TRAP_ARITY: Record<string, number> = {
+    FocusTrap: 6,
+    ConfigurableFocusTrap: 8,
+};
+
+export class FindFocusTrapWithoutInjector extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.FindFocusTrapWithoutInjector";
+    readonly displayName = "Find focus traps constructed without an `Injector`";
+    readonly description = "Finds `new FocusTrap(...)` and `new ConfigurableFocusTrap(...)` calls without the trailing " +
+        "`Injector` argument, which CDK 22 made required. Prefer creating focus traps with `FocusTrapFactory` or " +
+        "`ConfigurableFocusTrapFactory`, which pass the injector themselves.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            private focusTraps = new Map<string, string>();
+
+            protected async visitJsCompilationUnit(cu: JS.CompilationUnit, p: ExecutionContext): Promise<J | undefined> {
+                this.focusTraps = importedNames(cu, '@angular/cdk/a11y', Object.keys(FOCUS_TRAP_ARITY));
+                return this.focusTraps.size === 0 ? cu : 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 focusTrap = n.class && isIdentifier(n.class) ? this.focusTraps.get(n.class.simpleName) : undefined;
+                if (!focusTrap || argumentCount(n.arguments) >= FOCUS_TRAP_ARITY[focusTrap]) return n;
+                return foundSearchResult(n, `The \`Injector\` argument of \`${focusTrap}\` is required as of ` +
+                    "@angular/cdk 22. Pass one, or create the focus trap with its factory.");
+            }
+        }();
+    }
+}
+
+export class FindDropListRefDropWithoutEvent extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.FindDropListRefDropWithoutEvent";
+    readonly displayName = "Find `DropListRef.drop` calls without an event";
+    readonly description = "Finds `DropListRef.drop(...)` calls without the trailing `event` argument, which CDK 22 made required.";
+
+    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 !== 'drop' || !isCdkClass(m.methodType?.declaringType, 'DropListRef')) return m;
+                if (argumentCount(m.arguments) >= 8) return m;
+                return foundSearchResult(m, "The `event` argument of `DropListRef.drop` is required as of @angular/cdk 22. " +
+                    "Pass the `MouseEvent` or `TouchEvent` that ended the drag.");
+            }
+        }();
+    }
+}
+
+export class FindComponentPortalFactoryResolver extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.FindComponentPortalFactoryResolver";
+    readonly displayName = "Find `ComponentPortal.componentFactoryResolver` uses";
+    readonly description = "Finds reads and writes of `ComponentPortal.componentFactoryResolver`, which CDK 20 removed " +
+        "since Ivy resolves components without one.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            protected async visitFieldAccess(fieldAccess: J.FieldAccess, p: ExecutionContext): Promise<J | undefined> {
+                const f = await super.visitFieldAccess(fieldAccess, p) as J.FieldAccess;
+                const name = f.name.element;
+                if (name.simpleName !== 'componentFactoryResolver' || !isCdkClass(name.fieldType?.owner, 'ComponentPortal')) return f;
+                return foundSearchResult(f, "`ComponentPortal.componentFactoryResolver` was removed in @angular/cdk 20. " +
+                    "Remove it, since components resolve without a factory resolver.");
+            }
+        }();
+    }
+}
+
+const SELECTION_METHODS = ['clear', 'deselect', 'select', 'setSelection', 'toggle'];
+
+export class FindSelectionModelVoidOverrides extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.FindSelectionModelVoidOverrides";
+    readonly displayName = "Find `SelectionModel` overrides that return `void`";
+    readonly description = "Finds `select`, `deselect`, `setSelection`, `toggle` and `clear` overrides in subclasses of " +
+        "`SelectionModel` that declare a `void` return type. CDK 20 changed these methods to return whether the " +
+        "selection changed, so the overrides no longer compile.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            private selectionModel = new Map<string, string>();
+
+            protected async visitJsCompilationUnit(cu: JS.CompilationUnit, p: ExecutionContext): Promise<J | undefined> {
+                this.selectionModel = importedNames(cu, '@angular/cdk/collections', ['SelectionModel']);
+                return this.selectionModel.size === 0 ? cu : super.visitJsCompilationUnit(cu, p);
+            }
+
+            protected async visitMethodDeclaration(method: J.MethodDeclaration, p: ExecutionContext): Promise<J | undefined> {
+                const m = await super.visitMethodDeclaration(method, p) as J.MethodDeclaration;
+                if (!SELECTION_METHODS.includes(m.name.simpleName)) return m;
+                const returnType = m.returnTypeExpression;
+                const returnsVoid = returnType !== undefined && printsAs(returnType, 'void');
+                const classDecl = this.cursor.firstEnclosing((t: any): t is J.ClassDeclaration => t?.kind === J.Kind.ClassDeclaration);
+                const extended = classDecl && extendedClassName(classDecl);
+                if (!returnsVoid || !extended || !this.selectionModel.has(extended)) return m;
+                return foundSearchResult(m, `\`SelectionModel.${m.name.simpleName}\` returns a \`boolean\` as of @angular/cdk 20. ` +
+                    "Return whether the selection changed, usually the result of the `super` call.");
+            }
+        }();
+    }
+}
+
+function printsAs(typeTree: J, keyword: string): boolean {
+    const type = typeTree.kind === JS.Kind.TypeInfo ? (typeTree as JS.TypeInfo).typeIdentifier : typeTree;
+    return (type.kind === J.Kind.Primitive && (type as J.Primitive).type?.keyword === keyword) ||
+        (isIdentifier(type) && type.simpleName === keyword);
+}

package/src/libraries/cdk/find-removed-cdk-apis.ts

@@ -0,0 +1,76 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {FindRemovedSymbols, RemovedSymbol} from "../components/symbols";
+
+function removed(module: string, version: number, names: string[], hint: string): RemovedSymbol[] {
+    return names.map(name => ({module, name, message: `\`${name}\` was removed in @angular/cdk ${version}. ${hint}`}));
+}
+
+export class FindRemovedCdk13Apis extends FindRemovedSymbols {
+    readonly name = "org.openrewrite.angular.cdk.FindRemovedCdk13Apis";
+    readonly displayName = "Find APIs removed in Angular CDK 13";
+    readonly description = "Finds imports of `ConnectedPositionStrategy`, which `@angular/cdk/overlay` 13 removed.";
+
+    protected readonly symbols = removed('@angular/cdk/overlay', 13, ['ConnectedPositionStrategy'],
+        "Use `FlexibleConnectedPositionStrategy`, created with `overlay.position().flexibleConnectedTo(origin)`.");
+}
+
+export class FindRemovedCdk14Apis extends FindRemovedSymbols {
+    readonly name = "org.openrewrite.angular.cdk.FindRemovedCdk14Apis";
+    readonly displayName = "Find APIs removed in Angular CDK 14";
+    readonly description = "Finds imports from `@angular/cdk/testing/protractor`, the entry point CDK 14 removed " +
+        "together with Protractor support.";
+
+    protected readonly symbols = removed('@angular/cdk/testing/protractor', 14,
+        ['ProtractorElement', 'ProtractorHarnessEnvironment', 'ProtractorHarnessEnvironmentOptions'],
+        "Move the end-to-end tests to another runner, or use `SeleniumWebDriverHarnessEnvironment` from " +
+        "`@angular/cdk/testing/selenium-webdriver`.");
+}
+
+export class FindRemovedCdk20Apis extends FindRemovedSymbols {
+    readonly name = "org.openrewrite.angular.cdk.FindRemovedCdk20Apis";
+    readonly displayName = "Find APIs removed in Angular CDK 20";
+    readonly description = "Finds imports of the `@angular/cdk/dialog`, `@angular/cdk/portal` and " +
+        "`@angular/cdk/table` APIs that CDK 20 removed without a drop-in replacement.";
+
+    protected readonly symbols = [
+        ...removed('@angular/cdk/dialog', 20, ['DIALOG_SCROLL_STRATEGY_PROVIDER', 'DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY'],
+            "Provide `DIALOG_SCROLL_STRATEGY` with a factory that returns the scroll strategy instead."),
+        ...removed('@angular/cdk/portal', 20, ['PortalInjector'],
+            "Use `Injector.create({parent, providers})` from `@angular/core` instead."),
+        ...removed('@angular/cdk/table', 20, ['CanStick', 'CanStickCtor', 'Constructor', 'mixinHasStickyInput'],
+            "The sticky mixin is gone, so declare a boolean `sticky` input on the directive instead."),
+        ...removed('@angular/cdk/table', 20, ['CDK_TABLE_TEMPLATE'],
+            "Copy the table template into the component instead of reusing the CDK constant."),
+        ...removed('@angular/cdk/table', 20,
+            ['StickyDirection', 'STICKY_DIRECTIONS', 'StickyStyler', '_COALESCED_STYLE_SCHEDULER', '_CoalescedStyleScheduler', '_Schedule'],
+            "This was an internal API of `CdkTable` and has no public replacement."),
+    ];
+}
+
+export class FindRemovedCdk21Apis extends FindRemovedSymbols {
+    readonly name = "org.openrewrite.angular.cdk.FindRemovedCdk21Apis";
+    readonly displayName = "Find APIs removed in Angular CDK 21";
+    readonly description = "Finds imports of the `@angular/cdk/a11y` factory functions that CDK 21 removed.";
+
+    protected readonly symbols = [
+        ...removed('@angular/cdk/a11y', 21, ['LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY'],
+            "Provide `LIVE_ANNOUNCER_ELEMENT_TOKEN` with `useValue: null` or your own element instead."),
+        ...removed('@angular/cdk/a11y', 21, ['TREE_KEY_MANAGER_FACTORY', 'TREE_KEY_MANAGER_FACTORY_PROVIDER', 'NOOP_TREE_KEY_MANAGER_FACTORY'],
+            "Provide `TREE_KEY_MANAGER` with your own factory, for example `useValue: (items, options) => new TreeKeyManager(items, options)`."),
+    ];
+}
+
+export class FindRemovedCdk22Apis extends FindRemovedSymbols {
+    readonly name = "org.openrewrite.angular.cdk.FindRemovedCdk22Apis";
+    readonly displayName = "Find APIs removed in Angular CDK 22";
+    readonly description = "Finds imports of the `@angular/cdk/a11y` `AriaDescriber` constants that CDK 22 removed.";
+
+    protected readonly symbols = removed('@angular/cdk/a11y', 22,
+        ['CDK_DESCRIBEDBY_HOST_ATTRIBUTE', 'CDK_DESCRIBEDBY_ID_PREFIX', 'MESSAGES_CONTAINER_ID'],
+        "These were internals of `AriaDescriber`, so select described elements by their `aria-describedby` attribute instead.");
+}

package/src/libraries/cdk/migrate-cdk-sass-imports.ts

@@ -0,0 +1,174 @@
+/*
+ * 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, ScanningRecipe, TreeVisitor} from "@openrewrite/rewrite";
+import {PlainText, PlainTextVisitor} from "@openrewrite/rewrite/text";
+import {escapeRegExp, maskComments, withoutComments} from "../components/stylesheets";
+
+/** `@import` of an entry point whose `_index.import.scss` CDK 17 deleted. */
+const LEGACY_IMPORT = /^[ \t]*@import\s+(['"])~?@angular\/cdk\/(?:overlay|a11y|text-field)(?:\/_?index(?:\.import)?)?(?:\.scss)?\1[ \t]*;?[ \t]*(?:\r?\n|$)/gm;
+
+const CDK_USE = /@use\s+(['"])~?@angular\/cdk\1(?:\s+as\s+([\w-]+|\*))?/;
+
+/** Mixins the legacy entry points exposed with a `cdk-` prefix, mapped to their `@angular/cdk` module names. */
+const MIXINS: Record<string, string> = {
+    'cdk-overlay': 'overlay',
+    'cdk-a11y-visually-hidden': 'a11y-visually-hidden',
+    'cdk-a11y': 'a11y-visually-hidden',
+    'cdk-high-contrast': 'high-contrast',
+    'cdk-text-field-autosize': 'text-field-autosize',
+    'cdk-text-field-autofill-color': 'text-field-autofill-color',
+    'cdk-text-field-autofill': 'text-field-autofill',
+    'cdk-text-field': 'text-field',
+};
+
+/** Variables the legacy entry points exposed with a `cdk-` prefix, including the deprecated aliases. */
+const VARIABLES: Record<string, string> = {
+    'cdk-overlay-container-z-index': 'overlay-container-z-index',
+    'cdk-overlay-z-index': 'overlay-z-index',
+    'cdk-overlay-backdrop-z-index': 'overlay-backdrop-z-index',
+    'cdk-overlay-backdrop-color': 'overlay-backdrop-color',
+    'cdk-z-index-overlay-container': 'overlay-container-z-index',
+    'cdk-z-index-overlay': 'overlay-z-index',
+    'cdk-z-index-overlay-backdrop': 'overlay-backdrop-z-index',
+    'cdk-dark-backdrop-background': 'overlay-backdrop-color',
+    'cdk-overlay-z-index-overlay-container': 'overlay-container-z-index',
+    'cdk-overlay-z-index-overlay': 'overlay-z-index',
+    'cdk-overlay-z-index-overlay-backdrop': 'overlay-backdrop-z-index',
+    'cdk-overlay-dark-backdrop-background': 'overlay-backdrop-color',
+};
+
+interface Accumulator {
+    /** `cdk-` members that stylesheets of the project declare themselves. */
+    declared: Set<string>;
+    /** Partial names that stylesheets of the project `@import`. */
+    imported: Set<string>;
+}
+
+export class MigrateCdkSassImports extends ScanningRecipe<Accumulator> {
+    readonly name = "org.openrewrite.angular.cdk.MigrateCdkSassImports";
+    readonly displayName = "Migrate Angular CDK Sass `@import` to `@use`";
+    readonly description = "CDK 17 deleted the `@import` entry points of `@angular/cdk/overlay`, `@angular/cdk/a11y` and " +
+        "`@angular/cdk/text-field`. Replaces those imports with `@use '@angular/cdk' as cdk` and renames the `cdk-` " +
+        "prefixed mixins and variables they exposed, such as `@include cdk-overlay()` and `$cdk-z-index-overlay`, to the " +
+        "members of the `cdk` module. Names that a stylesheet of the project declares itself, as a vendored copy of the CDK " +
+        "styles does, keep referring to that declaration. A partial that other stylesheets `@import` and that defines " +
+        "members next to its own `@import` rules is marked instead, since adding `@use` to it can change which of those " +
+        "members its importers see. This ports the CDK part of the theming API migration of `@angular/material` 12.";
+
+    initialValue(_ctx: ExecutionContext): Accumulator {
+        return {declared: new Set(), imported: new Set()};
+    }
+
+    async scanner(acc: Accumulator): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends PlainTextVisitor<ExecutionContext> {
+            override async visitText(text: PlainText, p: ExecutionContext): Promise<PlainText | undefined> {
+                if (text.sourcePath.endsWith('.scss')) {
+                    const masked = maskComments(text.text);
+                    declaredNames(masked).forEach(name => acc.declared.add(name));
+                    importedPartials(masked).forEach(name => acc.imported.add(name));
+                }
+                return text;
+            }
+        }();
+    }
+
+    async editorWithData(acc: Accumulator): 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('.scss') || !t.text.includes('cdk')) return t;
+                const masked = maskComments(t.text);
+                if (configuresLegacyImport(masked)) {
+                    return mark(t, "This stylesheet configures the defaults of a CDK Sass entry point that @angular/cdk 17 " +
+                        "deleted. Pass them with `@use '@angular/cdk' with ($overlay-z-index: ...)` instead, using the unprefixed names.");
+                }
+                const updated = withoutComments(t.text, content => migrateSass(content, acc.declared));
+                if (updated === t.text) return t;
+                if (!CDK_USE.test(masked) && acc.imported.has(partialName(t.sourcePath)) && definesMembersNextToImports(masked)) {
+                    return mark(t, "This partial uses CDK Sass members that @angular/cdk 17 only provides through " +
+                        "`@use '@angular/cdk'`. Other stylesheets `@import` it and it defines its own members next to its " +
+                        "`@import` rules, so adding `@use` here can change which of those members they see. Migrate it by hand.");
+                }
+                return {...t, text: updated, snippets: []};
+            }
+        }();
+    }
+}
+
+function mark(text: PlainText, message: string): PlainText {
+    return findMarker(text, MarkersKind.SearchResult) ? text : foundSearchResult(text, message);
+}
+
+function migrateSass(content: string, declared: Set<string>): string {
+    const existingUse = content.match(CDK_USE);
+    const namespace = existingUse?.[2] ?? 'cdk';
+    const prefix = namespace === '*' ? '' : `${namespace}.`;
+
+    let migrated = content.replace(LEGACY_IMPORT, '');
+    const hadLegacyImport = migrated !== content;
+    const beforeSymbols = migrated;
+
+    for (const name of longestFirst(MIXINS).filter(n => !declared.has(n))) {
+        migrated = migrated.replace(new RegExp(`@include(\\s+)${escapeRegExp(name)}(?![\\w-])`, 'g'),
+            `@include$1${prefix}${MIXINS[name]}`);
+    }
+    for (const name of longestFirst(VARIABLES).filter(n => !declared.has(n))) {
+        migrated = migrated.replace(new RegExp(`(?<![\\w.-])\\$${escapeRegExp(name)}(?![\\w-])`, 'g'),
+            `${prefix}$${VARIABLES[name]}`);
+    }
+
+    if (migrated === beforeSymbols) {
+        return hadLegacyImport ? migrated : content;
+    }
+    return existingUse ? migrated : insertUse(migrated);
+}
+
+/** Inserts `@use` after any leading comments and `@charset`, since Sass requires `@use` before other rules. */
+function insertUse(content: string): string {
+    const newline = content.includes('\r\n') ? '\r\n' : '\n';
+    const header = content.match(/^(?:\s*(?:__ngComment\d+__|@charset[^;]*;))+[ \t]*(?:\r?\n|$)/)?.[0] ?? '';
+    const separator = header.length > 0 && !header.endsWith('\n') ? newline : '';
+    return header + separator + `@use '@angular/cdk' as cdk;` + newline + content.slice(header.length);
+}
+
+/** `cdk-` members a stylesheet declares itself, such as in a vendored copy of the CDK styles. */
+function declaredNames(content: string): Set<string> {
+    return new Set([...content.matchAll(/\$(cdk-[\w-]+)\s*:|@mixin\s+(cdk-[\w-]+)/g)].map(m => m[1] ?? m[2]));
+}
+
+/** Whether a stylesheet sets a `!default` of a legacy entry point before importing it, which `@use ... with` replaces. */
+function configuresLegacyImport(content: string): boolean {
+    LEGACY_IMPORT.lastIndex = 0;
+    const hasLegacyImport = LEGACY_IMPORT.test(content);
+    LEGACY_IMPORT.lastIndex = 0;
+    return hasLegacyImport && [...declaredNames(content)].some(name => name in VARIABLES);
+}
+
+/** Names of the project partials an `@import` rule loads, without directory, leading underscore and extension. */
+function importedPartials(content: string): string[] {
+    const names: string[] = [];
+    for (const rule of content.matchAll(/@import\s+([^;]+);/g)) {
+        for (const path of rule[1].matchAll(/['"]([^'"]+)['"]/g)) {
+            if (/^(~|@|https?:|\/\/)/.test(path[1]) || path[1].endsWith('.css')) continue;
+            names.push(partialName(path[1]));
+        }
+    }
+    return names;
+}
+
+function partialName(path: string): string {
+    return path.replace(/^.*\//, '').replace(/^_/, '').replace(/\.scss$/, '');
+}
+
+function definesMembersNextToImports(content: string): boolean {
+    const otherImports = content.replace(LEGACY_IMPORT, '');
+    return /@import\s/.test(otherImports) && /@mixin\s|@function\s|^\s*\$[\w-]+\s*:/m.test(otherImports);
+}
+
+function longestFirst(mapping: Record<string, string>): string[] {
+    return Object.keys(mapping).sort((a, b) => b.length - a.length);
+}

package/src/libraries/cdk/migrate-cdk-stepper.ts

@@ -0,0 +1,58 @@
+/*
+ * 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 {isIdentifier, J} from "@openrewrite/rewrite/java";
+import {create} from "mutative";
+import {importedNames} from "../components/symbols";
+import {extendedClassName, isSuperCall} from "../components/lst";
+import {argumentCount, isCdkClass} from "./find-cdk-signature-changes";
+
+export class MigrateCdkStepper extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.MigrateCdkStepper";
+    readonly displayName = "Migrate `CdkStepper` subclasses to CDK 14";
+    readonly description = "CDK 14 made `CdkStepper._orientation` private and removed the deprecated `_document` " +
+        "constructor parameter. Replaces `_orientation` with the public `orientation` property and removes the fourth " +
+        "argument of `super(...)` in classes that extend `CdkStepper`.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            private stepper = new Map<string, string>();
+
+            protected async visitJsCompilationUnit(cu: JS.CompilationUnit, p: ExecutionContext): Promise<J | undefined> {
+                this.stepper = importedNames(cu, '@angular/cdk/stepper', ['CdkStepper']);
+                return super.visitJsCompilationUnit(cu, p);
+            }
+
+            protected async visitFieldAccess(fieldAccess: J.FieldAccess, p: ExecutionContext): Promise<J | undefined> {
+                const f = await super.visitFieldAccess(fieldAccess, p) as J.FieldAccess;
+                const name = f.name.element;
+                if (name.simpleName !== '_orientation') return f;
+                const declaredByStepper = isCdkClass(name.fieldType?.owner, 'CdkStepper') ||
+                    (isIdentifier(f.target) && f.target.simpleName === 'this' && this.insideStepperSubclass());
+                if (!declaredByStepper) return f;
+                return create(f, draft => {
+                    draft.name.element.simpleName = 'orientation';
+                });
+            }
+
+            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) !== 4 || !this.insideStepperSubclass()) return call;
+                const elements = call.arguments.elements;
+                const retained = [...elements.slice(0, 2), {...elements[2], after: elements[3].after}];
+                return {...call, arguments: {...call.arguments, elements: retained}} as JS.FunctionCall;
+            }
+
+            private insideStepperSubclass(): boolean {
+                const classDecl = this.cursor.firstEnclosing((t: any): t is J.ClassDeclaration => t?.kind === J.Kind.ClassDeclaration);
+                const extended = classDecl && extendedClassName(classDecl);
+                return extended !== undefined && this.stepper.has(extended);
+            }
+        }();
+    }
+}

package/src/libraries/cdk/migrate-deprecated-overlay-sass.ts

@@ -0,0 +1,56 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {escapeRegExp, StylesheetRecipe, withoutComments} from "../components/stylesheets";
+
+const DEPRECATED_USE = /@use\s+(['"])~?@angular\/cdk\/overlay\/_?index-deprecated(?:\.scss)?\1(?:\s+as\s+([\w-]+|\*))?\s*;[ \t]*(\r?\n)?/g;
+
+const OVERLAY_USE = /@use\s+(['"])~?@angular\/cdk\/overlay\1(?:\s+as\s+overlay)?\s*;/;
+
+/** The variables of `overlay/_index-deprecated.scss`, mapped to the `@angular/cdk/overlay` names they aliased. */
+const VARIABLES: Record<string, string> = {
+    'z-index-overlay-container': 'overlay-container-z-index',
+    'z-index-overlay-backdrop': 'overlay-backdrop-z-index',
+    'z-index-overlay': 'overlay-z-index',
+    'dark-backdrop-background': 'overlay-backdrop-color',
+};
+
+export class MigrateDeprecatedOverlaySass extends StylesheetRecipe {
+    readonly name = "org.openrewrite.angular.cdk.MigrateDeprecatedOverlaySass";
+    readonly displayName = "Migrate the removed CDK overlay Sass variables";
+    readonly description = "CDK 21 deleted `@angular/cdk/overlay/index-deprecated` and its `$z-index-overlay-container`, " +
+        "`$z-index-overlay`, `$z-index-overlay-backdrop` and `$dark-backdrop-background` variables. Replaces the `@use` " +
+        "with `@angular/cdk/overlay` and renames the variables to `$overlay-container-z-index`, `$overlay-z-index`, " +
+        "`$overlay-backdrop-z-index` and `$overlay-backdrop-color`.";
+
+    protected acceptsPath(sourcePath: string): boolean {
+        return sourcePath.endsWith('.scss');
+    }
+
+    protected migrate(content: string): string {
+        if (!content.includes('index-deprecated')) return content;
+        return withoutComments(content, migrateDeprecatedOverlay);
+    }
+}
+
+function migrateDeprecatedOverlay(content: string): string {
+    const hasOverlayUse = OVERLAY_USE.test(content);
+    let migrated = content;
+    for (const match of [...content.matchAll(DEPRECATED_USE)]) {
+        const [rule, quote, alias, newline = ''] = match;
+        const namespace = alias ?? 'index-deprecated';
+        const newNamespace = alias ?? 'overlay';
+        const replacement = alias !== undefined ? `@use ${quote}@angular/cdk/overlay${quote} as ${alias};${newline}`
+            : hasOverlayUse ? '' : `@use ${quote}@angular/cdk/overlay${quote};${newline}`;
+        migrated = migrated.replace(rule, replacement);
+        for (const [name, newName] of Object.entries(VARIABLES)) {
+            const reference = namespace === '*' ? `(?<![\\w.-])\\$${name}` : `(?<![\\w-])${escapeRegExp(namespace)}\\.\\$${name}`;
+            const renamed = newNamespace === '*' ? `$${newName}` : `${newNamespace}.$${newName}`;
+            migrated = migrated.replace(new RegExp(`${reference}(?![\\w-])`, 'g'), renamed);
+        }
+    }
+    return migrated;
+}

package/src/libraries/cdk/migrate-drag-drop-registry.ts

@@ -0,0 +1,79 @@
+/*
+ * Copyright 2026 the original author or authors.
+ *
+ * Moderne Proprietary. Only for use by Moderne customers under the terms of a commercial contract.
+ */
+
+import {emptyMarkers, ExecutionContext, foundSearchResult, randomId, Recipe, TreeVisitor} from "@openrewrite/rewrite";
+import {JavaScriptVisitor, JS} from "@openrewrite/rewrite/javascript";
+import {emptySpace, Expression, isIdentifier, J} from "@openrewrite/rewrite/java";
+import {importedNames} from "../components/symbols";
+import {emptyArguments} from "../components/lst";
+import {isCdkClass} from "./find-cdk-signature-changes";
+
+/** Observable operators that `scrolled()` supports as well as the `scroll` subject did. */
+const OBSERVABLE_METHODS = ['pipe', 'subscribe'];
+
+export class MigrateDragDropRegistry extends Recipe {
+    readonly name = "org.openrewrite.angular.cdk.MigrateDragDropRegistry";
+    readonly displayName = "Migrate `DragDropRegistry` to CDK 20";
+    readonly description = "CDK 20 made `DragDropRegistry` non-generic and removed its `scroll` subject. Removes the type " +
+        "arguments of `DragDropRegistry<...>`, rewrites `registry.scroll.pipe(...)` and `registry.scroll.subscribe(...)` " +
+        "to the `scrolled()` method, and marks other uses of `scroll`, which relied on it being a `Subject`.";
+
+    async editor(): Promise<TreeVisitor<any, ExecutionContext>> {
+        return new class extends JavaScriptVisitor<ExecutionContext> {
+            private registry = new Map<string, string>();
+
+            protected async visitJsCompilationUnit(cu: JS.CompilationUnit, p: ExecutionContext): Promise<J | undefined> {
+                this.registry = importedNames(cu, '@angular/cdk/drag-drop', ['DragDropRegistry']);
+                return super.visitJsCompilationUnit(cu, p);
+            }
+
+            protected async visitParameterizedType(type: J.ParameterizedType, p: ExecutionContext): Promise<J | undefined> {
+                const t = await super.visitParameterizedType(type, p) as J.ParameterizedType;
+                if (!isIdentifier(t.class) || !this.registry.has(t.class.simpleName)) return t;
+                return {...t.class, prefix: t.prefix};
+            }
+
+            protected async visitMethodInvocation(method: J.MethodInvocation, p: ExecutionContext): Promise<J | undefined> {
+                const m = await super.visitMethodInvocation(method, p) as J.MethodInvocation;
+                const select = m.select?.element;
+                if (!OBSERVABLE_METHODS.includes(m.name.simpleName) || !isRegistryScroll(select)) return m;
+                return {...m, select: {...m.select!, element: scrolledCall(select as J.FieldAccess)}} as J.MethodInvocation;
+            }
+
+            protected async visitFieldAccess(fieldAccess: J.FieldAccess, p: ExecutionContext): Promise<J | undefined> {
+                const f = await super.visitFieldAccess(fieldAccess, p) as J.FieldAccess;
+                if (!isRegistryScroll(f)) return f;
+                const parent = this.cursor.parentTree()?.value;
+                if (parent?.kind === J.Kind.MethodInvocation && OBSERVABLE_METHODS.includes((parent as J.MethodInvocation).name.simpleName)) {
+                    return f;
+                }
+                return foundSearchResult(f, "`DragDropRegistry.scroll` was removed in @angular/cdk 20. " +
+                    "Use the `scrolled()` method, which returns an `Observable` instead of a `Subject`.");
+            }
+        }();
+    }
+}
+
+function isRegistryScroll(expression: J | undefined): boolean {
+    if (expression?.kind !== J.Kind.FieldAccess) return false;
+    const name = (expression as J.FieldAccess).name.element;
+    return name.simpleName === 'scroll' && isCdkClass(name.fieldType?.owner, 'DragDropRegistry');
+}
+
+/** `registry.scroll` rebuilt as `registry.scrolled()`, keeping the receiver and its formatting. */
+function scrolledCall(scroll: J.FieldAccess): J.MethodInvocation {
+    const name = scroll.name.element;
+    return {
+        kind: J.Kind.MethodInvocation,
+        id: randomId(),
+        prefix: scroll.prefix,
+        markers: emptyMarkers,
+        select: {kind: J.Kind.RightPadded, element: scroll.target, after: scroll.name.before, markers: emptyMarkers} as J.RightPadded<Expression>,
+        name: {...name, simpleName: 'scrolled', fieldType: undefined, type: undefined},
+        arguments: emptyArguments({kind: J.Kind.Container, before: emptySpace, elements: [], markers: emptyMarkers} as J.Container<Expression>),
+        methodType: undefined,
+    } as J.MethodInvocation;
+}