diff --git a/.idea/runConfigurations/ng_mat_core___build.xml b/.idea/runConfigurations/ng_mat_core___build.xml
new file mode 100644
index 00000000..d6623052
--- /dev/null
+++ b/.idea/runConfigurations/ng_mat_core___build.xml
@@ -0,0 +1,13 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="ng-mat-core - build" type="js.build_tools.npm">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="build" />
+    </scripts>
+    <arguments value="ng-mat-core" />
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>
\ No newline at end of file
diff --git a/.idea/runConfigurations/ng_mat_core___test_server.xml b/.idea/runConfigurations/ng_mat_core___test_server.xml
new file mode 100644
index 00000000..c1b0a1d3
--- /dev/null
+++ b/.idea/runConfigurations/ng_mat_core___test_server.xml
@@ -0,0 +1,13 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="ng-mat-core - test server" type="js.build_tools.npm">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="test" />
+    </scripts>
+    <arguments value="ng-mat-core" />
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>
\ No newline at end of file
diff --git a/.idea/s-libs.iml b/.idea/s-libs.iml
index b6deb051..02b8ddd1 100644
--- a/.idea/s-libs.iml
+++ b/.idea/s-libs.iml
@@ -16,16 +16,10 @@
       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
       <excludeFolder url="file://$MODULE_DIR$/coverage" />
       <excludeFolder url="file://$MODULE_DIR$/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/docs/app-state" />
-      <excludeFolder url="file://$MODULE_DIR$/docs/js-core" />
-      <excludeFolder url="file://$MODULE_DIR$/docs/micro-dash" />
-      <excludeFolder url="file://$MODULE_DIR$/docs/ng-app-state" />
-      <excludeFolder url="file://$MODULE_DIR$/docs/ng-core" />
-      <excludeFolder url="file://$MODULE_DIR$/docs/ng-dev" />
-      <excludeFolder url="file://$MODULE_DIR$/docs/rxjs-core" />
       <excludeFolder url="file://$MODULE_DIR$/temp" />
       <excludeFolder url="file://$MODULE_DIR$/tmp" />
       <excludeFolder url="file://$MODULE_DIR$/.angular/cache" />
+      <excludeFolder url="file://$MODULE_DIR$/docs" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
diff --git a/angular.json b/angular.json
index 7a47660b..5326181d 100644
--- a/angular.json
+++ b/angular.json
@@ -432,6 +432,47 @@
         }
       }
     },
+    "ng-mat-core": {
+      "projectType": "library",
+      "root": "projects/ng-mat-core",
+      "sourceRoot": "projects/ng-mat-core/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/ng-mat-core/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/ng-mat-core/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/ng-mat-core/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ng-mat-core/src/test.ts",
+            "tsConfig": "projects/ng-mat-core/tsconfig.spec.json",
+            "karmaConfig": "projects/ng-mat-core/karma.conf.js",
+            "polyfills": "projects/ng-mat-core/src/test-polyfills.ts"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/ng-mat-core/**/*.ts",
+              "projects/ng-mat-core/**/*.html"
+            ]
+          }
+        }
+      }
+    },
     "rxjs-core": {
       "projectType": "library",
       "root": "projects/rxjs-core",
diff --git a/package.json b/package.json
index 7224f5f4..286f0234 100644
--- a/package.json
+++ b/package.json
@@ -19,10 +19,12 @@
   },
   "dependencies": {
     "@angular/animations": "~13.0.0",
+    "@angular/cdk": "~13.0.0",
     "@angular/common": "~13.0.0",
     "@angular/compiler": "~13.0.0",
     "@angular/core": "~13.0.0",
     "@angular/forms": "~13.0.0",
+    "@angular/material": "~13.0.0",
     "@angular/platform-browser": "~13.0.0",
     "@angular/platform-browser-dynamic": "~13.0.0",
     "@angular/router": "~13.0.0",
@@ -38,10 +40,8 @@
     "@angular-eslint/eslint-plugin-template": "13.0.1",
     "@angular-eslint/schematics": "13.0.1",
     "@angular-eslint/template-parser": "13.0.1",
-    "@angular/cdk": "~13.0.0-next.0",
     "@angular/cli": "~13.0.2",
     "@angular/compiler-cli": "~13.0.0",
-    "@angular/material": "~13.0.1",
     "@types/glob": "^7.2.0",
     "@types/jasmine": "~3.10.0",
     "@types/lodash-es": "^4.17.3",
diff --git a/projects/app-state/.browserslistrc b/projects/app-state/.browserslistrc
new file mode 100644
index 00000000..4f9ac269
--- /dev/null
+++ b/projects/app-state/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
diff --git a/projects/app-state/package.json b/projects/app-state/package.json
index abc543dd..761de2b3 100644
--- a/projects/app-state/package.json
+++ b/projects/app-state/package.json
@@ -14,5 +14,7 @@
     "@s-libs/micro-dash": "^13.0.0",
     "@s-libs/rxjs-core": "^13.0.0"
   },
-  "dependencies": { "tslib": "^2.3.0" }
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
 }
diff --git a/projects/integration/src/app/app-state-performance/app-state-performance.component.ts b/projects/integration/src/app/app-state-performance/app-state-performance.component.ts
index fe9986c3..0e0f9760 100644
--- a/projects/integration/src/app/app-state-performance/app-state-performance.component.ts
+++ b/projects/integration/src/app/app-state-performance/app-state-performance.component.ts
@@ -4,6 +4,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   selector: 'sl-app-state-performance',
   templateUrl: './app-state-performance.component.html',
   styleUrls: ['./app-state-performance.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppStatePerformanceComponent {}
diff --git a/projects/js-core/.browserslistrc b/projects/js-core/.browserslistrc
new file mode 100644
index 00000000..4f9ac269
--- /dev/null
+++ b/projects/js-core/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
diff --git a/projects/js-core/package.json b/projects/js-core/package.json
index d23c5eb0..f52e87fd 100644
--- a/projects/js-core/package.json
+++ b/projects/js-core/package.json
@@ -9,6 +9,10 @@
     "url": "https://github.com/simontonsoftware/s-libs.git",
     "directory": "projects/js-core"
   },
-  "peerDependencies": { "@s-libs/micro-dash": "^13.0.0" },
-  "dependencies": { "tslib": "^2.3.0" }
+  "peerDependencies": {
+    "@s-libs/micro-dash": "^13.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
 }
diff --git a/projects/micro-dash/.browserslistrc b/projects/micro-dash/.browserslistrc
new file mode 100644
index 00000000..4f9ac269
--- /dev/null
+++ b/projects/micro-dash/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
diff --git a/projects/micro-dash/package.json b/projects/micro-dash/package.json
index 7e6c346d..0d7ddc83 100644
--- a/projects/micro-dash/package.json
+++ b/projects/micro-dash/package.json
@@ -10,5 +10,8 @@
     "url": "https://github.com/simontonsoftware/s-libs.git",
     "directory": "projects/micro-dash"
   },
-  "dependencies": { "tslib": "^2.3.0", "utility-types": "^3.10.0" }
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "utility-types": "^3.10.0"
+  }
 }
diff --git a/projects/ng-app-state/.browserslistrc b/projects/ng-app-state/.browserslistrc
new file mode 100644
index 00000000..4f9ac269
--- /dev/null
+++ b/projects/ng-app-state/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
diff --git a/projects/ng-app-state/package.json b/projects/ng-app-state/package.json
index fed7260e..fa1d3965 100644
--- a/projects/ng-app-state/package.json
+++ b/projects/ng-app-state/package.json
@@ -17,5 +17,7 @@
     "@s-libs/ng-core": "^13.0.0",
     "@s-libs/rxjs-core": "^13.0.0"
   },
-  "dependencies": { "tslib": "^2.3.0" }
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
 }
diff --git a/projects/ng-core/.browserslistrc b/projects/ng-core/.browserslistrc
new file mode 100644
index 00000000..4f9ac269
--- /dev/null
+++ b/projects/ng-core/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
diff --git a/projects/ng-core/README.md b/projects/ng-core/README.md
index c940e8a6..8b5d8457 100644
--- a/projects/ng-core/README.md
+++ b/projects/ng-core/README.md
@@ -7,9 +7,9 @@ To quickly see what is available, see the [api documentation](https://simontonso
 Install along with its peer dependencies using:
 
 ```shell script
-npm install --save @s-libs/js-core @s-libs/micro-dash
+npm install --save @s-libs/rxjs-core @s-libs/js-core @s-libs/micro-dash
 
 # OR
 
-yarn add @s-libs/js-core @s-libs/micro-dash
+yarn add @s-libs/rxjs-core @s-libs/js-core @s-libs/micro-dash
 ```
diff --git a/projects/ng-core/package.json b/projects/ng-core/package.json
index 97dc89d5..63b424a5 100644
--- a/projects/ng-core/package.json
+++ b/projects/ng-core/package.json
@@ -16,5 +16,7 @@
     "@s-libs/micro-dash": "^13.0.0",
     "@s-libs/rxjs-core": "^13.0.0"
   },
-  "dependencies": { "tslib": "^2.3.0" }
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
 }
diff --git a/projects/ng-dev/.browserslistrc b/projects/ng-dev/.browserslistrc
new file mode 100644
index 00000000..4f9ac269
--- /dev/null
+++ b/projects/ng-dev/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
diff --git a/projects/ng-dev/README.md b/projects/ng-dev/README.md
index 893eda85..7dfa4370 100644
--- a/projects/ng-dev/README.md
+++ b/projects/ng-dev/README.md
@@ -8,3 +8,52 @@ To quickly see what is available, see the [api documentation](https://simontonso
 yarn add @s-libs/ng-core @s-libs/rxjs-core @s-libs/js-core @s-libs/micro-dash @angular/cdk
 yarn add -D @s-libs/ng-dev
 ```
+
+## Fixing Jasmine Clock
+
+If you are creating a library project and use [`Angular Context`](https://simontonsoftware.github.io/s-libs/ng-dev/classes/AngularContext.html) or [`Component Context`](https://simontonsoftware.github.io/s-libs/ng-dev/classes/ComponentContext.html) for its tests, you may run into this error:
+
+```
+Error: Jasmine Clock was unable to install over custom global timer functions. Is the clock already installed?
+```
+
+You can see details on Angular's issue filed [here](https://github.com/angular/angular-cli/issues/14432). To work around it, create a new file `projects/your-lib-name/src/test-polyfills.ts` with this code:
+
+```ts
+// This file can be deleted after https://github.com/angular/angular-cli/issues/14432. Be sure to delete it from `angular.json`, `tsconfig.lib.json`, and `tsconfig.spec.json`, too.
+import "zone.js";
+```
+
+Add this innermost "polyfills" line to your `angular.json`:
+
+```json
+{
+  "projects": {
+    "your-lib-name": {
+      "architect": {
+        "test": {
+          "options": {
+            "polyfills": "projects/ng-mat-core/src/test-polyfills.ts"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+Add it to the "exclude" property in your `tsconfig.lib.json`:
+
+```json
+{
+  "exclude": ["src/test-polyfills.ts"]
+}
+```
+
+Add it to the "include" property in `tsconfig.spec.json`:
+
+```json
+{
+  "include": ["src/test-polyfills.ts"]
+}
+```
diff --git a/projects/ng-dev/package.json b/projects/ng-dev/package.json
index 931e7f45..7a93211b 100644
--- a/projects/ng-dev/package.json
+++ b/projects/ng-dev/package.json
@@ -19,5 +19,7 @@
     "@s-libs/rxjs-core": "^13.0.0",
     "jasmine-core": "^3.10.0"
   },
-  "dependencies": { "tslib": "^2.3.0" }
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
 }
diff --git a/projects/ng-mat-core/.browserslistrc b/projects/ng-mat-core/.browserslistrc
new file mode 100644
index 00000000..4f9ac269
--- /dev/null
+++ b/projects/ng-mat-core/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
diff --git a/projects/ng-mat-core/.eslintrc.json b/projects/ng-mat-core/.eslintrc.json
new file mode 100644
index 00000000..f6742981
--- /dev/null
+++ b/projects/ng-mat-core/.eslintrc.json
@@ -0,0 +1,21 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": [
+          "projects/ng-mat-core/tsconfig.lib.json",
+          "projects/ng-mat-core/tsconfig.spec.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "rules": {}
+    },
+    {
+      "files": ["*.html"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/projects/ng-mat-core/README.md b/projects/ng-mat-core/README.md
new file mode 100644
index 00000000..42a4c2c3
--- /dev/null
+++ b/projects/ng-mat-core/README.md
@@ -0,0 +1,15 @@
+## API Documentation
+
+To quickly see what is available, see the [api documentation](https://simontonsoftware.github.io/s-libs/ng-mat-core).
+
+## Installation
+
+Install along with its peer dependencies using:
+
+```shell script
+npm install --save @s-libs/ng-core @s-libs/rxjs-core @s-libs/js-core @s-libs/micro-dash
+
+# OR
+
+yarn add @s-libs/ng-core @s-libs/rxjs-core @s-libs/js-core @s-libs/micro-dash
+```
diff --git a/projects/ng-mat-core/karma.conf.js b/projects/ng-mat-core/karma.conf.js
new file mode 100644
index 00000000..e2c1bee3
--- /dev/null
+++ b/projects/ng-mat-core/karma.conf.js
@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: "",
+    frameworks: ["jasmine", "@angular-devkit/build-angular"],
+    plugins: [
+      require("karma-jasmine"),
+      require("karma-chrome-launcher"),
+      require("karma-jasmine-html-reporter"),
+      require("karma-coverage"),
+      require("@angular-devkit/build-angular/plugins/karma"),
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true, // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require("path").join(__dirname, "../../coverage/ng-mat-core"),
+      subdir: ".",
+      reporters: [{ type: "html" }, { type: "text-summary" }],
+    },
+    reporters: ["progress", "kjhtml"],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: [],
+    customLaunchers: {
+      ChromeHeadlessCI: { base: "ChromeHeadless", flags: ["--no-sandbox"] },
+    },
+    singleRun: false,
+    restartOnFileChange: true,
+  });
+};
diff --git a/projects/ng-mat-core/ng-package.json b/projects/ng-mat-core/ng-package.json
new file mode 100644
index 00000000..c2d2dedb
--- /dev/null
+++ b/projects/ng-mat-core/ng-package.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ng-mat-core",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "flatModuleFile": "ng-mat-core"
+  }
+}
diff --git a/projects/ng-mat-core/package.json b/projects/ng-mat-core/package.json
new file mode 100644
index 00000000..fcc1939e
--- /dev/null
+++ b/projects/ng-mat-core/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@s-libs/ng-mat-core",
+  "version": "0.0.1",
+  "author": "Simonton Software",
+  "license": "MIT",
+  "homepage": "https://github.com/simontonsoftware/s-libs/tree/master/projects/ng-mat-core",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/simontonsoftware/s-libs.git",
+    "directory": "projects/ng-mat-core"
+  },
+  "peerDependencies": {
+    "@angular/common": "^13.0.0",
+    "@angular/core": "^13.0.0",
+    "@s-libs/js-core": "^13.0.0",
+    "@s-libs/micro-dash": "^13.0.0",
+    "@s-libs/ng-core": "^13.0.0",
+    "@s-libs/rxjs-core": "^13.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}
diff --git a/projects/ng-mat-core/src/lib/dialog/dialog.component.html b/projects/ng-mat-core/src/lib/dialog/dialog.component.html
new file mode 100644
index 00000000..51a4f48c
--- /dev/null
+++ b/projects/ng-mat-core/src/lib/dialog/dialog.component.html
@@ -0,0 +1,21 @@
+<h2 mat-dialog-title>{{ data.title ?? data.component?.title }}</h2>
+
+<mat-dialog-content class="mat-typography">
+  <p *ngIf="data.text">{{ data.text }}</p>
+  <ng-container *ngIf="data.component">
+    <ng-container
+      *ngComponentOutlet="data.component; injector: componentInjector"
+    ></ng-container>
+  </ng-container>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button
+    *ngFor="let button of data.buttons"
+    mat-button
+    [mat-dialog-close]="button.value ?? button.text"
+    [color]="button.color ?? 'primary'"
+  >
+    {{ button.text }}
+  </button>
+</mat-dialog-actions>
diff --git a/projects/ng-mat-core/src/lib/dialog/dialog.component.scss b/projects/ng-mat-core/src/lib/dialog/dialog.component.scss
new file mode 100644
index 00000000..a85e4153
--- /dev/null
+++ b/projects/ng-mat-core/src/lib/dialog/dialog.component.scss
@@ -0,0 +1,3 @@
+mat-dialog-actions button {
+  text-transform: uppercase;
+}
diff --git a/projects/ng-mat-core/src/lib/dialog/dialog.component.spec.ts b/projects/ng-mat-core/src/lib/dialog/dialog.component.spec.ts
new file mode 100644
index 00000000..852b7a34
--- /dev/null
+++ b/projects/ng-mat-core/src/lib/dialog/dialog.component.spec.ts
@@ -0,0 +1,169 @@
+import { Component, Inject } from '@angular/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { AngularContext } from '@s-libs/ng-dev';
+import {
+  DialogData,
+  DEFAULT_OK_VALUE,
+  SL_DIALOG_DATA,
+} from './dialog.component';
+import { SlDialogHarness } from './sl-dialog.harness';
+import { SlDialogModule } from './sl-dialog.module';
+import { SlDialogService } from './sl-dialog.service';
+
+describe('DialogComponent', () => {
+  let ctx: AngularContext;
+  beforeEach(() => {
+    ctx = new AngularContext({
+      imports: [SlDialogModule, NoopAnimationsModule],
+    });
+  });
+
+  async function open<T>(data: DialogData<unknown>): Promise<T | unknown> {
+    const dialog = ctx.inject(SlDialogService).open(data);
+    ctx.tick();
+    return dialog;
+  }
+
+  it('displays a title', () => {
+    ctx.run(async () => {
+      open({ title: 'Show Me This!' });
+
+      const dialog = await ctx.getHarness(SlDialogHarness);
+      expect(await dialog.getTitle()).toBe('Show Me This!');
+    });
+  });
+
+  it('displays text', () => {
+    ctx.run(async () => {
+      open({ text: 'Show me this.' });
+
+      const dialog = await ctx.getHarness(SlDialogHarness);
+      expect(await dialog.getContentText()).toBe('Show me this.');
+    });
+  });
+
+  it('displays a component', () => {
+    @Component({ template: 'Show me this.' })
+    class ContentComponent {}
+
+    ctx.run(async () => {
+      open({ component: ContentComponent });
+
+      const dialog = await ctx.getHarness(SlDialogHarness);
+      expect(await dialog.getContentText()).toBe('Show me this.');
+    });
+  });
+
+  it('displays the title from a component', () => {
+    @Component({ template: '' })
+    class TitledComponent {
+      static title = 'Component Title';
+    }
+
+    ctx.run(async () => {
+      open({ component: TitledComponent });
+
+      const dialog = await ctx.getHarness(SlDialogHarness);
+      expect(await dialog.getTitle()).toBe('Component Title');
+    });
+  });
+
+  it('overrides the component title with the direct title', () => {
+    @Component({ template: '' })
+    class TitledComponent {
+      static title = 'Component Title';
+    }
+
+    ctx.run(async () => {
+      open({ title: 'Direct Title', component: TitledComponent });
+
+      const dialog = await ctx.getHarness(SlDialogHarness);
+      expect(await dialog.getTitle()).toBe('Direct Title');
+    });
+  });
+
+  it('can inject input to a component', () => {
+    @Component({ template: '{{ myInput }}' })
+    class MyDialogComponent {
+      constructor(@Inject(SL_DIALOG_DATA) public myInput: string) {}
+    }
+
+    ctx.run(async () => {
+      open({ component: MyDialogComponent, slDialogData: 'My input.' });
+
+      const dialog = await ctx.getHarness(SlDialogHarness);
+      expect(await dialog.getContentText()).toBe('My input.');
+    });
+  });
+
+  it('defaults to an "OK" button with primary color and DEFAULT_OK_VALUE', () => {
+    ctx.run(async () => {
+      const closedPromise = open({});
+
+      const dialog = await ctx.getHarness(SlDialogHarness);
+      expect(await dialog.getButtonText()).toEqual(['OK']);
+      expect(await dialog.getButtonColors()).toEqual(['primary']);
+
+      await dialog.clickButton('OK');
+      expect(await closedPromise).toBe(DEFAULT_OK_VALUE);
+    });
+  });
+
+  it('accepts custom buttons', () => {
+    ctx.run(async () => {
+      const closedPromise = open({
+        buttons: [
+          { text: 'Prime', value: 'value 1', color: 'primary' },
+          { text: 'Warn', value: 'value 2', color: 'warn' },
+        ],
+      });
+
+      const dialog = await ctx.getHarness(SlDialogHarness);
+      expect(await dialog.getButtonText()).toEqual(['Prime', 'Warn']);
+      expect(await dialog.getButtonColors()).toEqual(['primary', 'warn']);
+
+      await dialog.clickButton('Warn');
+      expect(await closedPromise).toBe('value 2');
+    });
+  });
+
+  it('defaults custom buttons to primary color', () => {
+    ctx.run(async () => {
+      open({ buttons: [{ text: 'Color me', value: 'blah' }] });
+
+      const dialog = await ctx.getHarness(SlDialogHarness);
+      expect(await dialog.getButtonColors()).toEqual(['primary']);
+    });
+  });
+
+  it('defaults custom button values to their text', () => {
+    ctx.run(async () => {
+      const closedPromise = open({ buttons: [{ text: 'Click me' }] });
+      const dialog = await ctx.getHarness(SlDialogHarness);
+
+      await dialog.clickButton('Click me');
+
+      expect(await closedPromise).toBe('Click me');
+    });
+  });
+
+  it('allows creating buttons with the default color', () => {
+    ctx.run(async () => {
+      open({
+        buttons: [{ text: 'No color', value: 'blah', color: 'default' }],
+      });
+
+      const dialog = await ctx.getHarness(SlDialogHarness);
+      expect(await dialog.getButtonColors()).toEqual(['default']);
+    });
+  });
+
+  it('display button text in all caps (per design spec examples)', () => {
+    ctx.run(async () => {
+      open({ buttons: [{ text: 'Not All Caps', value: 'blah' }] });
+
+      const button = document.querySelector('button')!;
+      expect(getComputedStyle(button).textTransform).toBe('uppercase');
+    });
+  });
+});
diff --git a/projects/ng-mat-core/src/lib/dialog/dialog.component.ts b/projects/ng-mat-core/src/lib/dialog/dialog.component.ts
new file mode 100644
index 00000000..a7918a31
--- /dev/null
+++ b/projects/ng-mat-core/src/lib/dialog/dialog.component.ts
@@ -0,0 +1,88 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  InjectionToken,
+  Injector,
+  Type,
+} from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+export type DialogButtonColor = NonNullable<ThemePalette> | 'default';
+
+export interface DialogButton<T> {
+  text: string;
+  /**
+   * {@link SlDialogService.open} will resolve to this value when the button is clicked. Defaults to {@link text}.
+   */
+  value?: T;
+  /**
+   * Defaults to `'primary'`, in accordance with the Material Design spec examples.
+   */
+  color?: DialogButtonColor;
+}
+
+export interface DialogData<T> {
+  title?: string;
+
+  /**
+   * Shown as the main content of the dialog.
+   */
+  text?: string;
+
+  /**
+   * A custom component to project into the dialog's content. It will appear below `text`, if both are defined. Note that you may put a static `title` attribute on the dialog class itself instead of using the {@link DialogData.title} option above. If both are defined, the option above will be used.
+   */
+  component?: Type<any> & { title?: string };
+
+  /**
+   * Use this to supply input to a custom component. Inject it into the component using the {@link SL_DIALOG_DATA} injection token.
+   *
+   * ```ts
+   * @Component({ template: '{{ myInput }}' })
+   * class MyDialogComponent {
+   *   constructor(@Inject(SL_DIALOG_DATA) public myInput: string) {}
+   * }
+   *
+   * slDialogService.open({
+   *   component: MyDialogComponent,
+   *   slDialogData: 'My input.',
+   * });
+   * ```
+   */
+  slDialogData?: any;
+
+  buttons?: Array<DialogButton<T>>;
+}
+
+/**
+ * Injection token for a custom dialog component to receive input. See {@link DialogData.slDialogData}.
+ */
+export const SL_DIALOG_DATA = new InjectionToken('SL_DIALOG_DATA');
+
+/**
+ * The {@link DialogButton.value} for the default "OK" button that is used if you do not specify any custom buttons for your dialog.
+ */
+export const DEFAULT_OK_VALUE = Symbol('OK');
+
+@Component({
+  selector: 'sl-dialog',
+  templateUrl: './dialog.component.html',
+  styleUrls: ['./dialog.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DialogComponent {
+  public componentInjector: Injector;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: DialogData<unknown>,
+    injector: Injector,
+  ) {
+    data.buttons ??= [{ text: 'OK', value: DEFAULT_OK_VALUE }];
+    this.componentInjector = Injector.create({
+      providers: [{ provide: SL_DIALOG_DATA, useValue: data.slDialogData }],
+      parent: injector,
+    });
+  }
+}
diff --git a/projects/ng-mat-core/src/lib/dialog/index.ts b/projects/ng-mat-core/src/lib/dialog/index.ts
new file mode 100644
index 00000000..a6d78942
--- /dev/null
+++ b/projects/ng-mat-core/src/lib/dialog/index.ts
@@ -0,0 +1,8 @@
+export {
+  DEFAULT_OK_VALUE,
+  DialogButton,
+  DialogButtonColor,
+  DialogData,
+  SL_DIALOG_DATA,
+} from './dialog.component';
+export { SlDialogModule } from './sl-dialog.module';
diff --git a/projects/ng-mat-core/src/lib/dialog/sl-dialog.harness.spec.ts b/projects/ng-mat-core/src/lib/dialog/sl-dialog.harness.spec.ts
new file mode 100644
index 00000000..5e430f33
--- /dev/null
+++ b/projects/ng-mat-core/src/lib/dialog/sl-dialog.harness.spec.ts
@@ -0,0 +1,147 @@
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { AngularContext } from '@s-libs/ng-dev';
+import { DialogData } from './dialog.component';
+import { SlDialogHarness } from './sl-dialog.harness';
+import { SlDialogModule } from './sl-dialog.module';
+import { SlDialogService } from './sl-dialog.service';
+
+describe('SlDialogHarness', () => {
+  let ctx: AngularContext;
+  beforeEach(() => {
+    ctx = new AngularContext({
+      imports: [NoopAnimationsModule, SlDialogModule],
+    });
+  });
+
+  async function open<T>(data: DialogData<T>): Promise<T | undefined> {
+    const promise = ctx.inject(SlDialogService).open(data);
+    ctx.tick();
+    return promise;
+  }
+
+  describe('.with()', () => {
+    it('can search by title', () => {
+      ctx.run(async () => {
+        open({ title: 'Correct Title' });
+
+        expect(
+          await ctx.hasHarness(
+            SlDialogHarness.with({ title: 'Correct Title' }),
+          ),
+        ).toBe(true);
+        expect(
+          await ctx.hasHarness(
+            SlDialogHarness.with({ title: 'Incorrect Title' }),
+          ),
+        ).toBe(false);
+      });
+    });
+
+    it('can search by default things', () => {
+      ctx.run(async () => {
+        open({ title: 'Correct Title' });
+
+        expect(
+          await ctx.hasHarness(SlDialogHarness.with({ ancestor: 'body' })),
+        ).toBe(true);
+        expect(
+          await ctx.hasHarness(SlDialogHarness.with({ ancestor: 'p' })),
+        ).toBe(false);
+      });
+    });
+  });
+
+  describe('.getTitle()', () => {
+    it('gets the dialog title', () => {
+      ctx.run(async () => {
+        open({ title: 'The Title' });
+        const dialog = await ctx.getHarness(SlDialogHarness);
+        expect(await dialog.getTitle()).toBe('The Title');
+      });
+    });
+
+    it('can handle when there is no title', () => {
+      ctx.run(async () => {
+        open({});
+        const dialog = await ctx.getHarness(SlDialogHarness);
+        expect(await dialog.getTitle()).toBe('');
+      });
+    });
+  });
+
+  describe('.getContentText()', () => {
+    it('gets the content text', () => {
+      ctx.run(async () => {
+        open({ text: 'Some text.' });
+        const dialog = await ctx.getHarness(SlDialogHarness);
+        expect(await dialog.getContentText()).toBe('Some text.');
+      });
+    });
+
+    it('can handle when there is no text', () => {
+      ctx.run(async () => {
+        open({});
+        const dialog = await ctx.getHarness(SlDialogHarness);
+        expect(await dialog.getContentText()).toBe('');
+      });
+    });
+  });
+
+  describe('.getButtonText()', () => {
+    it('gets the text of all buttons', () => {
+      ctx.run(async () => {
+        open({ buttons: [{ text: 'Button 1' }, { text: 'Button 2' }] });
+        const dialog = await ctx.getHarness(SlDialogHarness);
+        expect(await dialog.getButtonText()).toEqual(['Button 1', 'Button 2']);
+      });
+    });
+
+    it('can handle when there are no buttons', () => {
+      ctx.run(async () => {
+        open({ buttons: [] });
+        const dialog = await ctx.getHarness(SlDialogHarness);
+        expect(await dialog.getButtonText()).toEqual([]);
+      });
+    });
+  });
+
+  describe('.getButtonColors()', () => {
+    it('gets the color of all buttons', () => {
+      ctx.run(async () => {
+        open({ buttons: [{ text: '1', color: 'warn' }, { text: '2' }] });
+        const dialog = await ctx.getHarness(SlDialogHarness);
+        expect(await dialog.getButtonColors()).toEqual(['warn', 'primary']);
+      });
+    });
+
+    it('can handle when there are no buttons', () => {
+      ctx.run(async () => {
+        open({ buttons: [] });
+        const dialog = await ctx.getHarness(SlDialogHarness);
+        expect(await dialog.getButtonColors()).toEqual([]);
+      });
+    });
+  });
+
+  describe('.clickButton()', () => {
+    it('clicks the button with the given text', () => {
+      ctx.run(async () => {
+        const promise = open({ buttons: [{ text: '1' }, { text: '2' }] });
+        const dialog = await ctx.getHarness(SlDialogHarness);
+        await dialog.clickButton('2');
+        expect(await promise).toBe('2');
+      });
+    });
+  });
+
+  describe('.close()', () => {
+    it('closes the dialog', () => {
+      ctx.run(async () => {
+        open({});
+        const dialog = await ctx.getHarness(SlDialogHarness);
+        await dialog.close();
+        expect(await ctx.hasHarness(SlDialogHarness)).toBe(false);
+      });
+    });
+  });
+});
diff --git a/projects/ng-mat-core/src/lib/dialog/sl-dialog.harness.ts b/projects/ng-mat-core/src/lib/dialog/sl-dialog.harness.ts
new file mode 100644
index 00000000..fa717030
--- /dev/null
+++ b/projects/ng-mat-core/src/lib/dialog/sl-dialog.harness.ts
@@ -0,0 +1,107 @@
+import {
+  BaseHarnessFilters,
+  ContentContainerComponentHarness,
+  HarnessLoader,
+  HarnessPredicate,
+} from '@angular/cdk/testing';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { MatDialogHarness } from '@angular/material/dialog/testing';
+import { DialogButtonColor } from './dialog.component';
+
+interface SlDialogHarnessFilters extends BaseHarnessFilters {
+  title?: string | RegExp;
+}
+
+/**
+ * Harness for interacting with a dialog opened via {@link SlDialogService.open}.
+ */
+export class SlDialogHarness extends ContentContainerComponentHarness {
+  static hostSelector = 'sl-dialog';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a SlDialogHarness that meets certain criteria.
+   */
+  static with(
+    options: SlDialogHarnessFilters,
+  ): HarnessPredicate<SlDialogHarness> {
+    return new HarnessPredicate(SlDialogHarness, options).addOption(
+      'title',
+      options.title,
+      async (harness, title) =>
+        HarnessPredicate.stringMatches(harness.getTitle(), title),
+    );
+  }
+
+  #getContent = this.locatorFor('mat-dialog-content');
+
+  async getTitle(): Promise<string> {
+    const title = await this.locatorFor('[mat-dialog-title]')();
+    return title.text();
+  }
+
+  /**
+   * Get the text displayed in the content of the dialog. Note this includes text from both the `text` and `component` options of {@link SlDialogService.open}.
+   */
+  async getContentText(): Promise<string> {
+    const content = await this.#getContent();
+    return content.text();
+  }
+
+  /**
+   * Return the text of all the buttons.
+   */
+  async getButtonText(): Promise<string[]> {
+    const buttons = await this.#getButtons();
+    return Promise.all(buttons.map(async (button) => button.getText()));
+  }
+
+  /**
+   * Return the text of all the buttons. Note that "default" corresponds to when you explicitly specify that color for the button, and is **not** the color of a button when you don't specify a color (see {@link DialogButton.color}).
+   */
+  async getButtonColors(): Promise<DialogButtonColor[]> {
+    const buttons = await this.#getButtons();
+    return Promise.all(
+      buttons.map(async (button) => {
+        const host = await button.host();
+        if (await host.hasClass('mat-primary')) {
+          return 'primary';
+        } else if (await host.hasClass('mat-accent')) {
+          return 'accent';
+        } else if (await host.hasClass('mat-warn')) {
+          return 'warn';
+        } else {
+          return 'default';
+        }
+      }),
+    );
+  }
+
+  async clickButton(text: string): Promise<void> {
+    const button = await this.#getButton(text);
+    await button.click();
+  }
+
+  /**
+   * Closes the dialog by pressing escape.
+   */
+  async close(): Promise<void> {
+    const rootLoader =
+      await this.documentRootLocatorFactory().rootHarnessLoader();
+    const dialog = await rootLoader.getHarness(MatDialogHarness);
+    await dialog.close();
+  }
+
+  async #getButton(text: string): Promise<MatButtonHarness> {
+    const footer = await this.#getFooter();
+    return footer.getHarness(MatButtonHarness.with({ text }));
+  }
+
+  async #getButtons(): Promise<MatButtonHarness[]> {
+    const footer = await this.#getFooter();
+    return footer.getAllHarnesses(MatButtonHarness);
+  }
+
+  async #getFooter(): Promise<HarnessLoader> {
+    return this.getChildLoader('mat-dialog-actions');
+  }
+}
diff --git a/projects/ng-mat-core/src/lib/dialog/sl-dialog.module.ts b/projects/ng-mat-core/src/lib/dialog/sl-dialog.module.ts
new file mode 100644
index 00000000..92159a43
--- /dev/null
+++ b/projects/ng-mat-core/src/lib/dialog/sl-dialog.module.ts
@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { DialogComponent } from './dialog.component';
+
+/**
+ * Import this module to enable use of {@linkcode SlDialogService}
+ */
+@NgModule({
+  imports: [CommonModule, MatButtonModule, MatDialogModule],
+  declarations: [DialogComponent],
+})
+export class SlDialogModule {}
diff --git a/projects/ng-mat-core/src/lib/dialog/sl-dialog.service.spec.ts b/projects/ng-mat-core/src/lib/dialog/sl-dialog.service.spec.ts
new file mode 100644
index 00000000..ed2e00c4
--- /dev/null
+++ b/projects/ng-mat-core/src/lib/dialog/sl-dialog.service.spec.ts
@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { MatDialogHarness } from '@angular/material/dialog/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { assert } from '@s-libs/js-core';
+import { AngularContext } from '@s-libs/ng-dev';
+import { DialogData } from './dialog.component';
+import { SlDialogModule } from './sl-dialog.module';
+import { SlDialogService } from './sl-dialog.service';
+
+describe('SlDialogService', () => {
+  let ctx: AngularContext;
+  beforeEach(() => {
+    ctx = new AngularContext({
+      imports: [SlDialogModule, NoopAnimationsModule],
+    });
+  });
+
+  async function show<T>(data: DialogData<T>): Promise<T | undefined> {
+    const promise = ctx.inject(SlDialogService).open(data);
+    ctx.tick();
+    return promise;
+  }
+
+  it('does not autoscroll down to a focusable element', () => {
+    @Component({
+      template: `
+        <div style="height: 150vh"></div>
+        <a href>Link</a>
+      `,
+    })
+    class DefinitelyScrollableDialogComponent {}
+
+    ctx.run(async () => {
+      show({ component: DefinitelyScrollableDialogComponent });
+
+      // I couldn't find a way to test the scroll position through a harness
+      const content = document.querySelector('mat-dialog-content');
+      assert(content);
+      expect(content.scrollTop).toBe(0);
+    });
+  });
+
+  it('resolves to undefined when the dialog is dismissed', () => {
+    ctx.run(async () => {
+      const promise = show({ buttons: [{ text: 'hi', value: 'defined' }] });
+      const dialog = await ctx.getHarness(MatDialogHarness);
+
+      await dialog.close();
+
+      expect(await promise).toBe(undefined);
+    });
+  });
+});
diff --git a/projects/ng-mat-core/src/lib/dialog/sl-dialog.service.ts b/projects/ng-mat-core/src/lib/dialog/sl-dialog.service.ts
new file mode 100644
index 00000000..b19681bf
--- /dev/null
+++ b/projects/ng-mat-core/src/lib/dialog/sl-dialog.service.ts
@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { firstValueFrom } from 'rxjs';
+import { DialogComponent, DialogData } from './dialog.component';
+
+/**
+ * Shows simple text dialogs with just a method call, and reduces boilerplate for more complex dialogs.
+ *
+ * A simple text dialog:
+ * ```ts
+ * const choice = await slDialogService.open({
+ *   text: 'Discard draft?',
+ *   buttons: [{ text: 'Cancel' }, { text: 'Discard' }]
+ * });
+ * if (choice === 'Discard') {
+ *   // discard the draft
+ * }
+ * ```
+ *
+ * Using a custom component:
+ * ```ts
+ * @Component({
+ *   template: `
+ *     <h3>Heading 1</h3>
+ *     <p>Paragraph 1</p>
+ *     <h3>Heading 2</h3>
+ *     <p>Paragraph 2</p>
+ *   `
+ * })
+ * class FancyDialogComponent {}
+ *
+ * slDialogService.open({
+ *   title: 'My title',
+ *   component: FancyDialogComponent,
+ * });
+ * ```
+ */
+@Injectable({ providedIn: 'root' })
+export class SlDialogService {
+  constructor(private matDialog: MatDialog) {}
+
+  /**
+   * Resolves when the dialog is closed. Resolves to the {@link DialogButton.value} of the clicked button, or to `undefined` if the dialog was closed another way (such as clicking off it).
+   */
+  async open<T>(data: DialogData<T>): Promise<T | undefined> {
+    const ref = this.matDialog.open(DialogComponent, {
+      data,
+      autoFocus: false,
+    });
+    return firstValueFrom(ref.beforeClosed());
+  }
+}
diff --git a/projects/ng-mat-core/src/public-api.ts b/projects/ng-mat-core/src/public-api.ts
new file mode 100644
index 00000000..b534f5d4
--- /dev/null
+++ b/projects/ng-mat-core/src/public-api.ts
@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of ng-mat-core
+ */
+
+export * from './lib/dialog';
diff --git a/projects/ng-mat-core/src/test-polyfills.ts b/projects/ng-mat-core/src/test-polyfills.ts
new file mode 100644
index 00000000..fcc5e232
--- /dev/null
+++ b/projects/ng-mat-core/src/test-polyfills.ts
@@ -0,0 +1,2 @@
+// This file can be deleted after https://github.com/angular/angular-cli/issues/14432. Be sure to delete it from `angular.json`, `tsconfig.lib.json`, and `tsconfig.spec.json`, too.
+import 'zone.js';
diff --git a/projects/ng-mat-core/src/test.ts b/projects/ng-mat-core/src/test.ts
new file mode 100644
index 00000000..f10ea369
--- /dev/null
+++ b/projects/ng-mat-core/src/test.ts
@@ -0,0 +1,31 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context: (
+    path: string,
+    deep?: boolean,
+    filter?: RegExp,
+  ) => {
+    keys: () => string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/u);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ng-mat-core/tsconfig.lib.json b/projects/ng-mat-core/tsconfig.lib.json
new file mode 100644
index 00000000..b7d31d18
--- /dev/null
+++ b/projects/ng-mat-core/tsconfig.lib.json
@@ -0,0 +1,12 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": ["src/test.ts", "src/test-polyfills.ts", "**/*.spec.ts"]
+}
diff --git a/projects/ng-mat-core/tsconfig.lib.prod.json b/projects/ng-mat-core/tsconfig.lib.prod.json
new file mode 100644
index 00000000..06de549e
--- /dev/null
+++ b/projects/ng-mat-core/tsconfig.lib.prod.json
@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}
diff --git a/projects/ng-mat-core/tsconfig.spec.json b/projects/ng-mat-core/tsconfig.spec.json
new file mode 100644
index 00000000..d48a1707
--- /dev/null
+++ b/projects/ng-mat-core/tsconfig.spec.json
@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": ["jasmine"]
+  },
+  "files": ["src/test.ts"],
+  "include": ["src/test-polyfills.ts", "**/*.spec.ts", "**/*.d.ts"]
+}
diff --git a/projects/rxjs-core/.browserslistrc b/projects/rxjs-core/.browserslistrc
new file mode 100644
index 00000000..4f9ac269
--- /dev/null
+++ b/projects/rxjs-core/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
diff --git a/projects/rxjs-core/package.json b/projects/rxjs-core/package.json
index cdf79003..3cdfb9c7 100644
--- a/projects/rxjs-core/package.json
+++ b/projects/rxjs-core/package.json
@@ -14,5 +14,7 @@
     "@s-libs/micro-dash": "^13.0.0",
     "rxjs": "^7.4.0"
   },
-  "dependencies": { "tslib": "^2.3.0" }
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
 }
diff --git a/scripts/shared.ts b/scripts/shared.ts
index 81fbfc66..70b6a3da 100644
--- a/scripts/shared.ts
+++ b/scripts/shared.ts
@@ -9,6 +9,7 @@ export const buildableLibraries = [
   'app-state',
   'ng-core',
   'ng-app-state',
+  'ng-mat-core',
   'ng-dev',
 ];
 
@@ -18,7 +19,7 @@ export function runCommand(command: string): void {
   execSync(command, { stdio: 'inherit' });
 }
 
-export function getInput(text: string): Promise<string> {
+export async function getInput(text: string): Promise<string> {
   return new Promise<string>((resolve) => {
     const reader = createInterface(process.stdin, process.stdout);
     reader.question(text, (answer) => {
diff --git a/tsconfig.json b/tsconfig.json
index b31d75ab..92ce07db 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,7 +21,10 @@
     "target": "es2017",
     "module": "es2020",
     "lib": ["es2020", "dom"],
-    "paths": { "@s-libs/*": ["dist/*"] },
+    "paths": {
+      "@s-libs/*": ["dist/*"],
+      "ng-mat-core": ["dist/ng-mat-core/ng-mat-core", "dist/ng-mat-core"]
+    },
 
     //
     // Simonton Software additions
diff --git a/yarn.lock b/yarn.lock
index bad0bed9..cfc084ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -185,10 +185,10 @@
   dependencies:
     tslib "^2.3.0"
 
-"@angular/cdk@~13.0.0-next.0":
-  version "13.0.2"
-  resolved "https://registry.npmjs.org/@angular/cdk/-/cdk-13.0.2.tgz#48b9c00d24c9e764c0a718873acf8c6779241a35"
-  integrity sha512-m7RHIAXpFpgsrydhWXX1hAXRmQpQ+m9eRCYAoz8QiDCchYyVvTaxkZ8J7XGS8RtJ2EiocXSp4TlwQQrpXe+4lg==
+"@angular/cdk@~13.0.0":
+  version "13.0.4"
+  resolved "https://registry.npmjs.org/@angular/cdk/-/cdk-13.0.4.tgz#1f52944b1d7e2d2b6a38487a26e206f0b7e33bbf"
+  integrity sha512-cdCOvNbj2IQ60eQ4Dvt+aPqCp6ZSp+e7QpXicMdbxEk7J8kIcFFy2ZaxURx6wNt6Z+LRLgeasAfWB5zdP/Otfg==
   dependencies:
     tslib "^2.3.0"
   optionalDependencies:
@@ -264,10 +264,10 @@
   dependencies:
     tslib "^2.3.0"
 
-"@angular/material@~13.0.1":
-  version "13.0.2"
-  resolved "https://registry.npmjs.org/@angular/material/-/material-13.0.2.tgz#bbab63f69c9227110b7e22d694fe984528b3d5c2"
-  integrity sha512-DbbkQFpZ73oxOuR9LkkpeUPWP31DNIG3Z94sOrtdBhX3HfbLLOCaAJAIwMl8+bEuzDgtWBmx3taUR8l4WKCO8g==
+"@angular/material@~13.0.0":
+  version "13.0.4"
+  resolved "https://registry.npmjs.org/@angular/material/-/material-13.0.4.tgz#5cda5695d94053e432e98680d6107ff941a13819"
+  integrity sha512-tgTT+bUlab2PRL0cBiF4Y3Y8c8thzfFsBG3Z4+TN8U5D9o+rGOPxqqDpkke+QSJ3ZthhlQVCHp0KXQVvgVIcfQ==
   dependencies:
     tslib "^2.3.0"