From 38861baf634cb5a4a29c88a77361f724e2860332 Mon Sep 17 00:00:00 2001
From: Nick Petalas <nick.petalas@genesis.global>
Date: Fri, 24 May 2024 09:04:48 +0100
Subject: [PATCH] update all code snippets and imports to use genesis tokens
 from web-core

---
 .../05_create-a-user-interface.mdx            |  2 +-
 .../02_training-content-day2.mdx              |  8 +--
 .../03_training-content-day3.mdx              |  4 +-
 .../04_training-content-day4.mdx              |  2 +-
 .../10_web-training/01_web-training-day1.mdx  | 58 +++++++++----------
 .../10_web-training/02_web-training-day2.mdx  | 24 ++++----
 .../10_web-training/03_web-training-day3.mdx  | 12 ++--
 .../10_web-training/04_web-training-day4.mdx  | 38 ++++++------
 .../01_basics/02_creating-a-new-page.mdx      |  8 +--
 docs/04_web/01_basics/03_inserting-a-grid.mdx |  2 +-
 .../01_basics/05_package-json-basics.mdx      | 10 ++--
 .../02_web-components/01_form/01_button.mdx   |  2 +-
 .../02_web-components/01_form/02_checkbox.mdx |  4 +-
 .../02_web-components/01_form/03_combobox.mdx | 10 ++--
 .../01_form/06_number-field.mdx               |  4 +-
 .../01_form/09_radio-group.mdx                |  4 +-
 .../02_web-components/01_form/10_radio.mdx    |  4 +-
 .../02_web-components/01_form/11_select.mdx   | 10 ++--
 .../02_web-components/01_form/12_slider.mdx   |  4 +-
 .../01_form/15_text-area.mdx                  |  4 +-
 .../01_form/17_text-field.mdx                 |  4 +-
 .../01_grid-pro/3-grid-pro-genesis-column.mdx |  2 +-
 .../02_grids/02_data-grid.mdx                 |  4 +-
 .../03_interaction/04_dialog.mdx              |  8 +--
 .../03_interaction/05_dropdown-menu.mdx       |  2 +-
 .../03_interaction/08_menu.mdx                |  2 +-
 .../03_interaction/09_modal.mdx               |  8 +--
 .../03_interaction/12_tree-view.mdx           |  2 +-
 .../04_presentation/03_banner.mdx             |  4 +-
 .../02_foundation-header.mdx                  |  8 +--
 .../docs/api/foundation-header.mainstyles.md  |  2 +-
 ...dation-header.navigation.selecttemplate.md |  4 +-
 ...gement.entitymanagement.headertempalate.md |  2 +-
 ...tion-entity-management.entitymanagement.md |  2 +-
 ...ation-entity-management.mainapplication.md |  4 +-
 ...nagement.mainapplication.selecttemplate.md |  4 +-
 .../docs/api/foundation-login.definition.md   |  2 +-
 .../docs/api/foundation-login.login.md        |  4 +-
 .../docs/api/foundation-login.styles.md       |  2 +-
 .../docs/api/foundation-login.template.md     |  2 +-
 ...foundation-testing.createcomponentsuite.md |  4 +-
 .../09_filters/01_foundation-filters.mdx      |  2 +-
 .../10_foundation-layout.mdx                  | 16 ++---
 ...ation-layout.foundationlayoutcomponents.md | 28 ++++-----
 ...ndation-layout.layoutcomponentwithstate.md |  4 +-
 .../api/foundation-layout.layoutstyles.md     |  2 +-
 .../api/foundation-layout.layouttemplate.md   |  2 +-
 docs/04_web/12_forms/02_forms-filters.mdx     |  4 +-
 .../14_release-notes/05_previous.mdx          |  2 +-
 49 files changed, 173 insertions(+), 177 deletions(-)

diff --git a/docs/01_getting-started/02_quick-start/05_create-a-user-interface.mdx b/docs/01_getting-started/02_quick-start/05_create-a-user-interface.mdx
index 76942ea3d8..f37c58006a 100644
--- a/docs/01_getting-started/02_quick-start/05_create-a-user-interface.mdx
+++ b/docs/01_getting-started/02_quick-start/05_create-a-user-interface.mdx
@@ -25,7 +25,7 @@ We will make use of the Entity Management component, which includes CRUD functio
 Add the code below to the **home.template.ts** in the path **client/web/src/routes/home/home.template.ts**.
 
 ```html title="home.template.ts"
-import {html} from '@microsoft/fast-element';
+import {html} from '@genesislcap/web-core';
 import type {Home} from './home';
 
 export const HomeTemplate = html<Home>`
diff --git a/docs/01_getting-started/06_developer-training/02_training-content-day2.mdx b/docs/01_getting-started/06_developer-training/02_training-content-day2.mdx
index 2e9fd4eaae..82fb4b538a 100644
--- a/docs/01_getting-started/06_developer-training/02_training-content-day2.mdx
+++ b/docs/01_getting-started/06_developer-training/02_training-content-day2.mdx
@@ -92,7 +92,7 @@ We want to be able to insert a Trade grid with data into our project. For this,
 First, open the file **home.ts** to import the micro front-ends needed, as well as declaring EntityManagement after the imports.
 
 ```ts {1,3,5}
-import {customElement, FASTElement, observable} from '@microsoft/fast-element';
+import {customElement, GenesisElement, observable} from '@genesislcap/web-core';
 ...
 import {EntityManagement} from '@genesislcap/foundation-entity-management';
 
@@ -155,7 +155,7 @@ const COLUMNS = [
   template,
   styles,
 })
-export class Home extends FASTElement {
+export class Home extends GenesisElement {
   @observable columns: any = COLUMNS;
 
   constructor() {
@@ -167,7 +167,7 @@ export class Home extends FASTElement {
 We can now insert the grid into our page. Open the file **home.template.ts** and insert the *entity-management* tag using the class attributes we just created.
 
 ```jsx {5-11}
-import {html, } from '@microsoft/fast-element';
+import {html, } from '@genesislcap/web-core';
 import type {Home} from './home';
 
 export const HomeTemplate = html<Home>`
@@ -372,7 +372,7 @@ Note that the `tradeFormSchema` variable, declared above, pretty much describes
 
 Go back to the **home.template.ts** file to import the variables schema and add the properties  `createFormUiSchema` `updateFormUiSchema`.
 ```jsx {3,14,15}
-import {html, repeat, when, ref} from '@microsoft/fast-element';
+import {html, repeat, when, ref} from '@genesislcap/web-core';
 import type {Home} from './home';
 import { tradeFormCreateSchema, tradeFormUpdateSchema } from './schemas';
 ...
diff --git a/docs/01_getting-started/06_developer-training/03_training-content-day3.mdx b/docs/01_getting-started/06_developer-training/03_training-content-day3.mdx
index 8a02f96bbe..66f7863924 100644
--- a/docs/01_getting-started/06_developer-training/03_training-content-day3.mdx
+++ b/docs/01_getting-started/06_developer-training/03_training-content-day3.mdx
@@ -780,7 +780,7 @@ Open the file **home.ts** and import *Grid Pro* and *Connect*. Then, add them as
 import {ZeroGridPro} from '@genesislcap/foundation-zero-grid-pro';
 import {Connect} from '@genesislcap/foundation-comms';
 ...
-export class Home extends FASTElement {
+export class Home extends GenesisElement {
     @observable columns: any = COLUMNS;
 
     public positionsGrid!: ZeroGridPro;
@@ -796,7 +796,7 @@ export class Home extends FASTElement {
 Finally, go to the file **home.template.ts** and import the required components. Then, add a constant holding the Position columns, and some `<div>`s to format the final HTML.
 
 ```html {1,5-12,15,16,28-42}
-import {html, repeat, when, ref} from '@microsoft/fast-element';
+import {html, repeat, when, ref} from '@genesislcap/web-core';
 import type {Home} from './home';
 import { tradeFormCreateSchema, tradeFormUpdateSchema } from './schemas';
 
diff --git a/docs/01_getting-started/06_developer-training/04_training-content-day4.mdx b/docs/01_getting-started/06_developer-training/04_training-content-day4.mdx
index a0856d4402..cfd5ba474e 100644
--- a/docs/01_getting-started/06_developer-training/04_training-content-day4.mdx
+++ b/docs/01_getting-started/06_developer-training/04_training-content-day4.mdx
@@ -274,7 +274,7 @@ const COLUMNS = [
   template,
   styles,
 })
-export class Home extends FASTElement {
+export class Home extends GenesisElement {
     ...
     constructor() {
       super();
diff --git a/docs/01_getting-started/10_web-training/01_web-training-day1.mdx b/docs/01_getting-started/10_web-training/01_web-training-day1.mdx
index 92e6416094..989b89bac3 100644
--- a/docs/01_getting-started/10_web-training/01_web-training-day1.mdx
+++ b/docs/01_getting-started/10_web-training/01_web-training-day1.mdx
@@ -199,11 +199,7 @@ This includes **@genesislcap** dependencies. This is where you can change versio
     "@genesislcap/foundation-zero-grid-pro": "14.15.2",
     "@genesislcap/foundation-reporting": "14.15.2",
     "@genesislcap/g2plot-chart": "14.15.2",
-    "@microsoft/fast-components": "^2.21.6",
-    "@microsoft/fast-element": "^1.7.0",
-    "@microsoft/fast-foundation": "^2.33.4",
-    "@microsoft/fast-router": "^0.4.2",
-    "@microsoft/fast-web-utilities": "^5.1.0",
+    "@genesislcap/web-core": "14.178.0",
     "rxjs": "^7.5.4",
     "tslib": "^2.3.1"
   }
@@ -266,13 +262,13 @@ The second approach involves design systems and we will cover this topic later i
 Create folder **./client/web/src/routes/playground/** and create a new empty file called **playground.ts** in there. Then, add this code to **playground.ts**:
 
 ```typescript title="../playground/playground.ts"
-import { FASTElement, customElement } from "@microsoft/fast-element";
+import { GenesisElement, customElement } from "@genesislcap/web-core";
 
 @customElement({ name: "marketdata-component" }) // custom element being created
-export class MarketdataComponent extends FASTElement {}
+export class MarketdataComponent extends GenesisElement {}
 ```
 
-We've just created a new Web Component extending FASTElement (so, again, we don't have to start from scratch and implement a myriad of attributes and methods).
+We've just created a new Web Component extending GenesisElement (so, again, we don't have to start from scratch and implement a myriad of attributes and methods).
 
 This component could be anything, like a custom button or even a business component. But, for now, it's just empty and doesn't do much. However, we could already use it anywhere in HTML with the following markup if we wanted:
 
@@ -314,7 +310,7 @@ You should see the **Playground** menu item now.
 To create an HTML template for our element, we have to import and use the html-tagged template helper and pass the template to the @customElement decorator.
 
 ```ts {1,3-7,9} title='playground.ts'
-import { FASTElement, customElement, html } from "@microsoft/fast-element";
+import { GenesisElement, customElement, html } from "@genesislcap/web-core";
 
 const myTemplate = html<MarketdataComponent>`
   <div class="header">
@@ -323,7 +319,7 @@ const myTemplate = html<MarketdataComponent>`
 `;
 
 @customElement({ name: "marketdata-component", template: myTemplate }) // custom element being created
-export class MarketdataComponent extends FASTElement {}
+export class MarketdataComponent extends GenesisElement {}
 ```
 
 As you see, we're defining a const called `myTemplate`, which contains the HTML code. This constant is then passed to the definition of our `customElement` through the `template` parameter. This way, when we use this component, it will display the HTML associated with it.
@@ -352,14 +348,14 @@ Let's add an attribute to our MarketdataComponent. Use @attr for primitive prope
 
 ```typescript {1,5} title='playground.ts'
 import {
-  FASTElement,
+  GenesisElement,
   customElement,
   html,
   attr,
-} from "@microsoft/fast-element";
+} from "@genesislcap/web-core";
 
 @customElement({ name: "marketdata-component", template: myTemplate })
-export class MarketdataComponent extends FASTElement {
+export class MarketdataComponent extends GenesisElement {
   @attr lastPrice: number = 0;
 }
 ```
@@ -368,11 +364,11 @@ Having the lastPrice always as zero doesn't make our MarketdataComponent very us
 
 ```typescript {8-13,19-25} title='playground.ts'
 import {
-  FASTElement,
+  GenesisElement,
   customElement,
   html,
   attr,
-} from "@microsoft/fast-element";
+} from "@genesislcap/web-core";
 
 const myTemplate = html<MarketdataComponent>`
   <div class="header">
@@ -382,7 +378,7 @@ const myTemplate = html<MarketdataComponent>`
 `;
 
 @customElement({ name: "marketdata-component", template: myTemplate }) // custom element being created
-export class MarketdataComponent extends FASTElement {
+export class MarketdataComponent extends GenesisElement {
   @attr lastPrice: number = 0;
 
   public getLastPriceRealTime() {
@@ -411,7 +407,7 @@ FAST also provides directives, such as `when` and `repeat` that are very useful
 Examples:
 
 ```typescript {5}
-import { FASTElement, customElement, observable, html, when } from "@microsoft/fast-element";
+import { GenesisElement, customElement, observable, html, when } from "@genesislcap/web-core";
 
 const template = html<MyApp>`
  ...
@@ -424,14 +420,14 @@ const template = html<MyApp>`
   name: "my-app",
   template
 })
-export class MyApp extends FASTElement {
+export class MyApp extends GenesisElement {
   @observable ready: boolean = false;
   ...
 }
 ```
 
 ```typescript {5}
-import { FASTElement, customElement, observable, html, repeat } from "@microsoft/fast-element";
+import { GenesisElement, customElement, observable, html, repeat } from "@genesislcap/web-core";
 
 const template = html<FriendList>`
   ...
@@ -444,7 +440,7 @@ const template = html<FriendList>`
   name: "friend-list",
   template
 })
-export class FriendList extends FASTElement {
+export class FriendList extends GenesisElement {
   @observable friends: Person[] = [];
   ...
 }
@@ -456,18 +452,18 @@ Please review the [directives](https://www.fast.design/docs/fast-element/using-d
 
 ### Styling our component
 
-FASTElement provides a **css** tagged template helper that allows for the creation of ElementStyles.
+GenesisElement provides a **css** tagged template helper that allows for the creation of ElementStyles.
 
 Add this code:
 
 ```typescript {6,9-13} title='playground.ts'
 import {
-  FASTElement,
+  GenesisElement,
   customElement,
   html,
   attr,
   css,
-} from "@microsoft/fast-element";
+} from "@genesislcap/web-core";
 ...
 const marketdataComponentCSS = css`
   h4 {
@@ -488,12 +484,12 @@ This is the final code:
 
 ```typescript title='playground.ts'
 import {
-  FASTElement,
+  GenesisElement,
   customElement,
   html,
   attr,
   css,
-} from "@microsoft/fast-element";
+} from "@genesislcap/web-core";
 
 const marketdataComponentCSS = css`
   h4 {
@@ -513,7 +509,7 @@ const myTemplate = html<MarketdataComponent>`
   template: myTemplate,
   styles: marketdataComponentCSS,
 }) // custom element being created
-export class MarketdataComponent extends FASTElement {
+export class MarketdataComponent extends GenesisElement {
   @attr lastPrice: number = 0;
 
   public getLastPriceRealTime() {
@@ -545,7 +541,7 @@ Instrument AAPL 227.12
 
 Steps:
 
-- import _observable_ and _repeat_ from from `@microsoft/fast-element`
+- import _observable_ and _repeat_ from from `@genesislcap/web-core`
 - add a list called **_instruments_** to the MarketdataComponent. Feel free to initialize it with a few instruments, such as `@observable instruments: String[] = ["MSFT", "AAPL"];`
 - change the `lastPrice` attribute to a list of prices. Feel free to initialize it with corresponding prices, such as `@observable lastPrices: number[] = [101.23, 227.12];`
 - change `getLastPriceRealTime` to receive the instrument name and return the corresponding price;
@@ -638,7 +634,7 @@ npm run bootstrap
 import { Navigation } from '@genesislcap/foundation-header';
 
 @customElement({ name, template, styles })
-export class MainApplication extends FASTElement {
+export class MainApplication extends GenesisElement {
   @inject(MainRouterConfig) config!: MainRouterConfig;
   @inject(Navigation) navigation!: Navigation;
 
@@ -662,7 +658,7 @@ export const MainTemplate: ViewTemplate<MainApplication> = html`
 4. Make sure the `foundation-header` tag is part of the html that you set as the markup for the `defaultLayout` in your router configuration.
 
 ```js {3} title='client/web/src/layouts/default.ts'
-export const defaultLayout = new FASTElementLayout(html`
+export const defaultLayout = new GenesisElementLayout(html`
 <div class="container">
   <foundation-header
   ...
@@ -781,7 +777,7 @@ There are three control buttons that can be shown or hidden on the right-hand si
 For instance, adding the Misc logo would look like this:
 
 ```html {5} title='default.ts'
-... export const defaultLayout = new FASTElementLayout( html`
+... export const defaultLayout = new GenesisElementLayout( html`
 <div class="container">
   <foundation-header
     logo-src="https://icotar.com/avatar/webtraining"
@@ -798,7 +794,7 @@ To implement the functionality of the button in the client, follow the steps bel
 1. Define the functionality of the event `callback` in the class of a class which is a parent to the router.
 
 ```javascript title='main.ts'
-export class MainApplication extends FASTElement {
+export class MainApplication extends GenesisElement {
 
 	onMiscButtonPressed() {
 		// ... do something
diff --git a/docs/01_getting-started/10_web-training/02_web-training-day2.mdx b/docs/01_getting-started/10_web-training/02_web-training-day2.mdx
index 0a9c976019..b416d22962 100644
--- a/docs/01_getting-started/10_web-training/02_web-training-day2.mdx
+++ b/docs/01_getting-started/10_web-training/02_web-training-day2.mdx
@@ -51,7 +51,7 @@ Insert, edit and cancel.
 Let's start with the simplest way to create a form, using the `foundation-form` component:
 
 ```ts {5-12} title='order.template.ts'
-import {html} from '@microsoft/fast-element';
+import {html} from '@genesislcap/web-core';
 import type {Order} from './order';
 
 export const OrderTemplate = html<Order>`
@@ -86,7 +86,7 @@ We define `insertOrder` function in order.ts
   import {logger} from '../../utils';
   
   ...
-  export class Order extends FASTElement {
+  export class Order extends GenesisElement {
     @Connect connect: Connect;
 
     constructor() {
@@ -160,7 +160,7 @@ export const OrderTemplate = html<Order>`
 Add to your `order.styles.ts` the following, so you get a nice look on your forms
 
 ```ts title="order.styles.ts"
-import {css} from "@microsoft/fast-element";
+import {css} from "@genesislcap/web-core";
 import { mixinScreen } from '../../styles';
 
 export const OrderStyles = css`
@@ -201,7 +201,7 @@ Then, define the variables that will hold the values that are entered.
 In the file **order.ts**, add the following properties to the class: `Order`:
 
 ```ts {1,4-9} title='order.ts'
-import {customElement, FASTElement, observable} from '@microsoft/fast-element';
+import {customElement, GenesisElement, observable} from '@genesislcap/web-core';
 ...
 
 @observable public instrument: string;
@@ -221,7 +221,7 @@ We can do it in the traditional way by adding `@change` [event handler](https://
 Let's add it to each form element:
 
 ```jsx {3,6-17} title='order.template.ts'
-import {html} from '@microsoft/fast-element';
+import {html} from '@genesislcap/web-core';
 import type {Order} from './order';
 import { sync } from '@genesislcap/foundation-utils';
 
@@ -250,7 +250,7 @@ Order is a Web Component and, as such, it supports a series of [lifecycle events
 
 ```typescript {5,11-18} title='order.ts'
 ...
-export class Order extends FASTElement {
+export class Order extends GenesisElement {
   @Connect connect: Connect;
   ...
   @observable public allInstruments: Array<{value: string, label: string}>; //add this property
@@ -260,7 +260,7 @@ export class Order extends FASTElement {
   }
 
 public async connectedCallback() { //add this method to Order class
-    super.connectedCallback(); //FASTElement implementation
+    super.connectedCallback(); //GenesisElement implementation
 
     const msg = await this.connect.snapshot('ALL_INSTRUMENTS'); //get a snapshot of data from ALL_INSTRUMENTS data server
     console.log(msg); //add this to look into the data returned and understand its structure
@@ -283,7 +283,7 @@ Once we have the list of instruments from the server we can make use of it in th
 To dynamically include list of options we use [repeat](https://www.fast.design/docs/fast-element/using-directives#the-repeat-directive) directive and iterate through the items.
 
 ```jsx {1,5-9} title='order.template.ts'
-import {html, repeat} from '@microsoft/fast-element';
+import {html, repeat} from '@genesislcap/web-core';
 ...
 export const OrderTemplate = html<Order>`
 <span>Instrument</span>
@@ -322,7 +322,7 @@ However, any changes on the backend would require a change in the options. Would
   @observable public directionOptions: Array<{value: string, label: string}>; //add this property
 ...
 public async connectedCallback() {
-    super.connectedCallback(); //FASTElement implementation
+    super.connectedCallback(); //GenesisElement implementation
 
     const msg = await this.connect.snapshot('ALL_INSTRUMENTS');
     console.log(msg);
@@ -375,7 +375,7 @@ Add this method to the Order class:
 
 ```ts {4-12} title='order.ts'
 ...
-export class Order extends FASTElement {
+export class Order extends GenesisElement {
   ...
   public async getMarketData() {
       const msg = await this.connect.request('INSTRUMENT_MARKET_DATA', {
@@ -440,7 +440,7 @@ export const OrderTemplate = html<Order>`
 Then let's amend our insertOrder function to work with the custom form now:
 ```typescript {4-15} title='order.ts'
 ...
-export class Order extends FASTElement {
+export class Order extends GenesisElement {
   ...
 public async insertOrder() {
       const insertOrderEvent = await this.connect.commitEvent('EVENT_ORDER_INSERT', {
@@ -464,7 +464,7 @@ Let's improve our screen a little bit and add a simple success or error message
 
 ```ts {16-21} title='order.ts'
 ...
-export class Order extends FASTElement {
+export class Order extends GenesisElement {
   ...
   public async insertOrder() {
         const insertOrderEvent = await this.connect.commitEvent('EVENT_ORDER_INSERT', {
diff --git a/docs/01_getting-started/10_web-training/03_web-training-day3.mdx b/docs/01_getting-started/10_web-training/03_web-training-day3.mdx
index b11ec0d07f..0d5d7cec64 100644
--- a/docs/01_getting-started/10_web-training/03_web-training-day3.mdx
+++ b/docs/01_getting-started/10_web-training/03_web-training-day3.mdx
@@ -44,7 +44,7 @@ Here you can easily swap logging the row data with some custom logic (such as ca
 
 ```typescript {4-17} title="order.ts"
 ...
-export class Order extends FASTElement {
+export class Order extends GenesisElement {
   ...
   public singleOrderActionColDef = {
     headerName: 'Action',
@@ -154,7 +154,7 @@ In the example below, the component is called `positions-grid-pro`. Go to the fo
 
 ```javascript {10} title="component/order-grid/positions-grid-pro.ts"
 import {ZeroGridPro, zeroGridProTemplate} from '@genesislcap/foundation-zero-grid-pro';
-import {customElement} from '@microsoft/fast-element';
+import {customElement} from '@genesislcap/web-core';
 import {positionsGridStyles} from './grid-pro.styles';
 
 @customElement({
@@ -166,13 +166,13 @@ export class PositionsAgGrid extends ZeroGridPro {
 }
 ```
 
-Note we are extending `ZeroGridPro`, not `FASTElement`.
+Note we are extending `ZeroGridPro`, not `GenesisElement`.
 
 Now you need to provide custom styles for the custom component:
 
 ```javascript title="component/order-grid/order-grid.styles.ts"
 import {zeroAgGridStyles} from '@genesislcap/foundation-zero';
-import {css, ElementStyles} from '@microsoft/fast-element';
+import {css, ElementStyles} from '@genesislcap/web-core';
 import {BUY_SIDE, SELL_SIDE, NEW_TRADE_STATUS, CANCELLED_TRADE_STATUS} from './colors';
 
 export const positionsAgGridStyles: ElementStyles = css`
@@ -308,7 +308,7 @@ Having a static filter like that is not always very useful though. Let's make it
 ```
 
 ```ts {1} title='order.ts'
-import {customElement, FASTElement, observable, attr } from '@microsoft/fast-element';
+import {customElement, GenesisElement, observable, attr } from '@genesislcap/web-core';
 ...
 @attr public sideFilter = 'BUY';
 
@@ -322,7 +322,7 @@ Make sure to try it now and click on the 'Toggle SIDE filter' button to see the
 Ultimately, we can use something like the [ref directive](https://www.fast.design/docs/fast-element/using-directives/#the-ref-directive) to make our code completely override the criteria. So, let's add another button to reset the criteria to something else and use the `ref` in grid-pro-genesis-datasource.
 
 ```ts {1,5,9} title='order.template.ts'
-import {html, repeat, when, ref} from '@microsoft/fast-element';
+import {html, repeat, when, ref} from '@genesislcap/web-core';
 
 ...
 
diff --git a/docs/01_getting-started/10_web-training/04_web-training-day4.mdx b/docs/01_getting-started/10_web-training/04_web-training-day4.mdx
index a2138b5280..d594f3492c 100644
--- a/docs/01_getting-started/10_web-training/04_web-training-day4.mdx
+++ b/docs/01_getting-started/10_web-training/04_web-training-day4.mdx
@@ -32,7 +32,7 @@ We've seen how to create custom grids, now let's see a way to style it further.
 Styling a grid-pro can be started by creating a stylesheet document that will have some style definitions for the grid. Create a stylesheet file called **orders-grid.styles.ts** and provide the following code:
 
 ```ts {4-6} title='orders-grid.styles.ts'
-import {css, ElementStyles} from '@microsoft/fast-element';
+import {css, ElementStyles} from '@genesislcap/web-core';
 
 export const ordersGridStyles: ElementStyles = css`
     .notes-column {
@@ -71,7 +71,7 @@ If you need to provide different class names for specific conditions, you can pr
 Remember to add the new styles to your stylesheet file.
 
 ```ts title="orders-grid.styles.ts"
-import {css, ElementStyles} from '@microsoft/fast-element';
+import {css, ElementStyles} from '@genesislcap/web-core';
 
 export const ordersGridStyles: ElementStyles = css`
 .notes-column {
@@ -138,7 +138,7 @@ recommended to change them to interact via the `foundation-store` utility.
 We'll start with the most straightforward component. Create a directory called **orders-grid** in the  **orders** folder and add these two files to it:
 
 ```typescript title='orders-grid.ts'
-import { customElement, FASTElement, observable, attr } from '@microsoft/fast-element';
+import { customElement, GenesisElement, observable, attr } from '@genesislcap/web-core';
 import { ordersGridTemplate } from './orders-grid.template';
 import { Connect } from '@genesislcap/foundation-comms';
 
@@ -147,7 +147,7 @@ import { Connect } from '@genesislcap/foundation-comms';
   template: ordersGridTemplate
 })
 
-export class OrdersGrid extends FASTElement {
+export class OrdersGrid extends GenesisElement {
 
     @Connect connect: Connect;
     @observable public instrument: string;
@@ -221,7 +221,7 @@ And now we refactor out the form. This is slightly different because we need an
 
 ```typescript title='insert-orders-form.ts'
 import { Connect } from '@genesislcap/foundation-comms';
-import {customElement, FASTElement, observable, attr } from '@microsoft/fast-element';
+import {customElement, GenesisElement, observable, attr } from '@genesislcap/web-core';
 import { insertOrdersFormStyles } from './insert-orders-form.styles';
 import { insertOrdersFormTemplate } from './insert-orders-form.template';
 
@@ -233,7 +233,7 @@ import { insertOrdersFormTemplate } from './insert-orders-form.template';
 
 
 
-export class InsertOrdersForm extends FASTElement {
+export class InsertOrdersForm extends GenesisElement {
     @Connect connect: Connect;
     @observable public instrument: string;
     @observable public lastPrice: number;
@@ -265,7 +265,7 @@ export class InsertOrdersForm extends FASTElement {
     @observable tradeInstruments: Array<{ value: string; label: string }>;
 
     public async connectedCallback() { //add this method to Order class
-        super.connectedCallback(); //FASTElement implementation
+        super.connectedCallback(); //GenesisElement implementation
 
         const msg = await this.connect.snapshot('ALL_INSTRUMENTS'); //get a snapshot of data from ALL_INSTRUMENTS data server
         console.log(msg); //add this to look into the data returned and understand its structure
@@ -322,7 +322,7 @@ export class InsertOrdersForm extends FASTElement {
 
 ```typescript title='insert-orders-form.template.ts'
 import { sync } from '@genesislcap/foundation-utils';
-import { html, repeat, when } from '@microsoft/fast-element';
+import { html, repeat, when } from '@genesislcap/web-core';
 import { InsertOrdersForm } from './insert-orders-form';
 
 export const insertOrdersFormTemplate = html<InsertOrdersForm>`
@@ -361,7 +361,7 @@ export const insertOrdersFormTemplate = html<InsertOrdersForm>`
 and finally:
 
 ```typescript title='insert-orders-form.styles.ts'
-import {css, ElementStyles} from "@microsoft/fast-element";
+import {css, ElementStyles} from "@genesislcap/web-core";
 import { mixinScreen } from '../../../styles';
 
 export const insertOrdersFormStyles = css`
@@ -398,7 +398,7 @@ export const insertOrdersFormStyles = css`
 Now we have refactored our two components, it is easy to add the dynamic layout. Change the **order.template.ts** to:
 
 ```typescript title='order.template.ts'
-import {html, repeat, when, ref } from '@microsoft/fast-element';
+import {html, repeat, when, ref } from '@genesislcap/web-core';
 import type {Order } from './order';
 import { sync } from '@genesislcap/foundation-utils';
 import { OrderStyles } from './order.styles';
@@ -484,7 +484,7 @@ The user's layout is now saved, now we need to create a reset button.Now we are
 The first thing we want to do is to update the `Order` component with a reference to the layout.
 
 ```ts title='order.template.ts'
-import { ... , ref } from '@microsoft/fast-element';
+import { ... , ref } from '@genesislcap/web-core';
 ```
 
 ```html {1} title='order.template.ts'
@@ -496,7 +496,7 @@ import { ... , ref } from '@microsoft/fast-element';
 ```
 
 ```typescript {6,17} title='order.ts'
-import {customElement, FASTElement, observable, attr } from '@microsoft/fast-element';
+import {customElement, GenesisElement, observable, attr } from '@genesislcap/web-core';
 import {OrderTemplate as template} from './order.template';
 import {OrderStyles as styles} from './order.styles';
 import {Connect} from '@genesislcap/foundation-comms';
@@ -511,7 +511,7 @@ const name = 'order-route';
   styles,
 })
 
-export class Order extends FASTElement {
+export class Order extends GenesisElement {
   layout: FoundationLayout;
 ```
 
@@ -590,7 +590,7 @@ export const ORDERS_DEFAULT_LAYOUT = ... /* Set this equal to the string from th
 The final step is to wire all of this functionality together so that the button loads the layout that we have just saved.
 
 ```typescript {6,22,27-29} title='home.ts'
-import { customElement, FASTElement, observable } from '@microsoft/fast-element';
+import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
 import { HomeTemplate as template } from './home.template';
 import { HomeStyles as styles } from './home.styles';
 import { Connect } from '@genesislcap/foundation-comms';
@@ -604,7 +604,7 @@ const name = 'order-route';
   template,
   styles,
 })
-export class Home extends FASTElement {
+export class Home extends GenesisElement {
   layout: FoundationLayout;
 
   connectedCallback(): void {
@@ -639,7 +639,7 @@ The `g2plot-chart` component is a wrapper for `@antv/g2plot`, which allows the f
 You can quickly add charts to your application. First we need to create a new component as we did in the previous exercise. Create a folder named **orders-chart** and add these two files:
 
 ```typescript title='orders-chart.template.ts'
-import { html } from '@microsoft/fast-element';
+import { html } from '@genesislcap/web-core';
 import { OrdersChart } from './orders-chart';
 
 export const ordersChartTemplate = html<OrdersChart>`
@@ -656,14 +656,14 @@ export const ordersChartTemplate = html<OrdersChart>`
 ```
 
 ```typescript title='orders-chart.ts'
-import { customElement, FASTElement, observable } from '@microsoft/fast-element';
+import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
 import { ordersChartTemplate } from './orders-chart.template';
 
 @customElement({
   name: 'orders-chart',
   template: ordersChartTemplate,
 })
-export class OrdersChart extends FASTElement {
+export class OrdersChart extends GenesisElement {
   @observable chartConfiguration = {
     width: 800,
     angleField: 'value',
@@ -686,7 +686,7 @@ For further configuration examples, please see: [here](https://g2plot.antv.antgr
 
 Your **orders.template.ts** should be like this:
 
-```typescript {3-6,8-11,29-31} title='orders.template.ts'import {html, repeat, when, ref} from '@microsoft/fast-element';
+```typescript {3-6,8-11,29-31} title='orders.template.ts'import {html, repeat, when, ref} from '@genesislcap/web-core';
 import type {Order} from './order';
 import { OrderStyles} from './order.styles';
 import { InsertOrdersForm } from './insert-orders-form/insert-orders-form';
diff --git a/docs/04_web/01_basics/02_creating-a-new-page.mdx b/docs/04_web/01_basics/02_creating-a-new-page.mdx
index 432cbc5a8b..2d2bf8e0ef 100644
--- a/docs/04_web/01_basics/02_creating-a-new-page.mdx
+++ b/docs/04_web/01_basics/02_creating-a-new-page.mdx
@@ -34,7 +34,7 @@ New components will typically extend [FastElement](https://www.fast.design/docs/
 Here is the file **src/routes/test-page/test-page.styles.ts** with some example styling content:
 
 ```javascript
-import {css} from '@microsoft/fast-element';
+import {css} from '@genesislcap/web-core';
 import {mixinScreen} from '../../styles';
 
 export const TestPageStyles = css`
@@ -50,7 +50,7 @@ export const TestPageStyles = css`
 Here is an example of the file **src/routes/test-page/test-page.template.ts** with some standard content:
 
 ```javascript
-import {html} from '@microsoft/fast-element';
+import {html} from '@genesislcap/web-core';
 import type {TestPage} from './test-page';
 
 export const TestPageTemplate = html<TestPage>`
@@ -62,7 +62,7 @@ Here is an example of the file **src/routes/test-page/test-page.ts** with some s
 
 
 ```javascript
-import {customElement, FASTElement} from '@microsoft/fast-element';
+import {customElement, GenesisElement} from '@genesislcap/web-core';
 import {TestPageTemplate as template} from './test-page.template';
 import {TestPageStyles as styles} from './test-page.styles';
 import {logger} from '../../utils';
@@ -74,7 +74,7 @@ const name = 'test-page';
   template,
   styles,
 })
-export class TestPage extends FASTElement {
+export class TestPage extends GenesisElement {
   public connectedCallback() {
     super.connectedCallback();
     logger.debug(`${name} is now connected to the DOM`);
diff --git a/docs/04_web/01_basics/03_inserting-a-grid.mdx b/docs/04_web/01_basics/03_inserting-a-grid.mdx
index 67fce34410..9b7b9f1e45 100644
--- a/docs/04_web/01_basics/03_inserting-a-grid.mdx
+++ b/docs/04_web/01_basics/03_inserting-a-grid.mdx
@@ -99,7 +99,7 @@ Then use the [repeat](https://www.fast.design/docs/fast-element/using-directives
 
 ```typescript {1,2,6,12-14} title="home.template.ts"
 import {positionColumnDefs} from './positionColumnDefs';
-import {repeat} from '@microsoft/fast-element';
+import {repeat} from '@genesislcap/web-core';
 
 <zero-grid-pro only-template-col-defs>
     <grid-pro-genesis-datasource
diff --git a/docs/04_web/01_basics/05_package-json-basics.mdx b/docs/04_web/01_basics/05_package-json-basics.mdx
index 85f8f51eda..134bcbc729 100644
--- a/docs/04_web/01_basics/05_package-json-basics.mdx
+++ b/docs/04_web/01_basics/05_package-json-basics.mdx
@@ -80,11 +80,11 @@ This includes **@genesislcap** dependencies. This is where you can change the de
     "@genesislcap/foundation-utils": <FoundationUi/>,
     "@genesislcap/foundation-zero": <FoundationUi/>,
     "@genesislcap/foundation-ui": <FoundationUi/>,
-    "@microsoft/fast-components": "^2.16.6",
-    "@microsoft/fast-element": "^1.6.2",
-    "@microsoft/fast-foundation": "^2.27.1",
-    "@microsoft/fast-router": "^0.2.11",
-    "@microsoft/fast-web-utilities": "^5.0.1",
+    "@genesislcap/web-core": "^2.16.6",
+    "@genesislcap/web-core": "^1.6.2",
+    "@genesislcap/web-core": "^2.27.1",
+    "@genesislcap/web-core": "^0.2.11",
+    "@genesislcap/web-core": "^5.0.1",
     "rxjs": "^7.4.0",
     "tslib": "^2.3.1"
     }
diff --git a/docs/04_web/02_web-components/01_form/01_button.mdx b/docs/04_web/02_web-components/01_form/01_button.mdx
index 7589cc3ddf..52951e67d2 100644
--- a/docs/04_web/02_web-components/01_form/01_button.mdx
+++ b/docs/04_web/02_web-components/01_form/01_button.mdx
@@ -80,7 +80,7 @@ When you place a button into your application, the user expects some action to b
 1. Create a function `functionName()` into the class of the component:
 
 ```js {1,5}
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
     ...
     functionName(){
         // Write an action here
diff --git a/docs/04_web/02_web-components/01_form/02_checkbox.mdx b/docs/04_web/02_web-components/01_form/02_checkbox.mdx
index a24ec42177..b6e43d9f5f 100644
--- a/docs/04_web/02_web-components/01_form/02_checkbox.mdx
+++ b/docs/04_web/02_web-components/01_form/02_checkbox.mdx
@@ -51,9 +51,9 @@ Once the user has input a value to this component, you need to make it accessibl
 1. Create an `@observable` variable where you want to use this value:
 
 ```html {1,5}
-import {... , observable} from '@microsoft/fast-element';
+import {... , observable} from '@genesislcap/web-core';
 ...
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
 ...
 @observable checkbox: boolean
 ...
diff --git a/docs/04_web/02_web-components/01_form/03_combobox.mdx b/docs/04_web/02_web-components/01_form/03_combobox.mdx
index 6e1cb3793c..73ae3ebcad 100644
--- a/docs/04_web/02_web-components/01_form/03_combobox.mdx
+++ b/docs/04_web/02_web-components/01_form/03_combobox.mdx
@@ -101,9 +101,9 @@ Once the user has input a value to this component, you need to make it accessibl
 1. Create an `@observable` variable where you want to use this value:
 
 ```html {1,5}
-import {... , observable} from '@microsoft/fast-element';
+import {... , observable} from '@genesislcap/web-core';
 ...
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
 ...
 @observable combobox: string
 ...
@@ -135,9 +135,9 @@ To do this, follow the steps below:
 1. Create an `@observable Array<string>` with the options to be available in your combo-box:
 
 ```html {1,5}
-import {... , observable} from '@microsoft/fast-element';
+import {... , observable} from '@genesislcap/web-core';
 ...
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
     ...
     @observable options: Array<string> = []
     ...
@@ -155,7 +155,7 @@ With this variable created, you can generate any array you wish using a loop. He
 2. Use the `repeat` directive to create an `<alpha-option>` for each element you have in `options`
 
 ```html {1,5}
-import {... , repeat} from '@microsoft/fast-element';
+import {... , repeat} from '@genesislcap/web-core';
 ...
     ...
         <alpha-combobox>
diff --git a/docs/04_web/02_web-components/01_form/06_number-field.mdx b/docs/04_web/02_web-components/01_form/06_number-field.mdx
index b0c96c7589..60908ccf2b 100644
--- a/docs/04_web/02_web-components/01_form/06_number-field.mdx
+++ b/docs/04_web/02_web-components/01_form/06_number-field.mdx
@@ -76,9 +76,9 @@ In order to use a value that has been input to this component, follow these two
 1. Create an `@observable` variable where you want to use this value:
 
 ```html {1,5}
-import {... , observable} from '@microsoft/fast-element';
+import {... , observable} from '@genesislcap/web-core';
 ...
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
 ...
 @observable number_field: number
 ...
diff --git a/docs/04_web/02_web-components/01_form/09_radio-group.mdx b/docs/04_web/02_web-components/01_form/09_radio-group.mdx
index f3e930c785..a196176037 100644
--- a/docs/04_web/02_web-components/01_form/09_radio-group.mdx
+++ b/docs/04_web/02_web-components/01_form/09_radio-group.mdx
@@ -74,9 +74,9 @@ Once the user has input a value to this component, you need to make it accessibl
 1. Create an `@observable` variable where you want to use this value:
 
 ```html {1,5}
-import {... , observable} from '@microsoft/fast-element';
+import {... , observable} from '@genesislcap/web-core';
 ...
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
 ...
 @observable radioGroup: string;
 ...
diff --git a/docs/04_web/02_web-components/01_form/10_radio.mdx b/docs/04_web/02_web-components/01_form/10_radio.mdx
index fdc259780e..335ac4cfc9 100644
--- a/docs/04_web/02_web-components/01_form/10_radio.mdx
+++ b/docs/04_web/02_web-components/01_form/10_radio.mdx
@@ -62,9 +62,9 @@ Once the user has input a value to this component, you need to make it accessibl
 1. Create an `@observable` variable where you want to use this value:
 
 ```html {1,5}
-import {... , observable} from '@microsoft/fast-element';
+import {... , observable} from '@genesislcap/web-core';
 ...
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
 ...
 @observable radioComponent: string;
 ...
diff --git a/docs/04_web/02_web-components/01_form/11_select.mdx b/docs/04_web/02_web-components/01_form/11_select.mdx
index 2f22e4c013..64b8b058fa 100644
--- a/docs/04_web/02_web-components/01_form/11_select.mdx
+++ b/docs/04_web/02_web-components/01_form/11_select.mdx
@@ -95,9 +95,9 @@ Once the user has input a value to this component, you need to make it accessibl
 1. Create an `@observable` variable where you want to use this value:
 
 ```html {1,5}
-import {... , observable} from '@microsoft/fast-element';
+import {... , observable} from '@genesislcap/web-core';
 ...
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
 ...
 @observable select_value: string
 ...
@@ -130,9 +130,9 @@ To do this, follow the steps below:
 1. Create an `@observable Array<{value: string, label: string}>` with the options to be available in your select:
 
 ```html {1,5}
-import {... , observable} from '@microsoft/fast-element';
+import {... , observable} from '@genesislcap/web-core';
 ...
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
     ...
     @observable options: Array<{value: string, label: string}> = []
     ...
@@ -152,7 +152,7 @@ With this variable created, you can generate any array you wish using a loop. He
 2. Use the `repeat` directive to create an `<alpha-option>` for each element you have in `options`
 
 ```html {1,5}
-import {... , repeat} from '@microsoft/fast-element';
+import {... , repeat} from '@genesislcap/web-core';
 ...
     ...
         <alpha-select>
diff --git a/docs/04_web/02_web-components/01_form/12_slider.mdx b/docs/04_web/02_web-components/01_form/12_slider.mdx
index 7e8e499fe1..dc8c8cc0cd 100644
--- a/docs/04_web/02_web-components/01_form/12_slider.mdx
+++ b/docs/04_web/02_web-components/01_form/12_slider.mdx
@@ -80,9 +80,9 @@ Both options work the same way:
 1. Create an `@observable` variable where you want to use this value. Remember to choose the right type.
 
 ```html {1,5,6}
-import {... , observable} from '@microsoft/fast-element';
+import {... , observable} from '@genesislcap/web-core';
 ...
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
 ...
 @observable slider_value_number: number
 @observable slider_value_string: string
diff --git a/docs/04_web/02_web-components/01_form/15_text-area.mdx b/docs/04_web/02_web-components/01_form/15_text-area.mdx
index 1c4d6553e4..83016fa2ac 100644
--- a/docs/04_web/02_web-components/01_form/15_text-area.mdx
+++ b/docs/04_web/02_web-components/01_form/15_text-area.mdx
@@ -65,9 +65,9 @@ Once the value has been input, you need to make it accessible to your applicatio
 1. Create an `@observable` variable where you want to use this value:
 
 ```html {1,5}
-import {... , observable} from '@microsoft/fast-element';
+import {... , observable} from '@genesislcap/web-core';
 ...
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
 ...
 @observable text_area: string
 ...
diff --git a/docs/04_web/02_web-components/01_form/17_text-field.mdx b/docs/04_web/02_web-components/01_form/17_text-field.mdx
index 042c1afdf1..0eaa21f91a 100644
--- a/docs/04_web/02_web-components/01_form/17_text-field.mdx
+++ b/docs/04_web/02_web-components/01_form/17_text-field.mdx
@@ -65,9 +65,9 @@ Once the user has input a value to this component, you need to make it accessibl
 1. Create an `@observable` variable where you want to use this value:
 
 ```html {1,5}
-import {... , observable} from '@microsoft/fast-element';
+import {... , observable} from '@genesislcap/web-core';
 ...
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
 ...
 @observable text_field: string
 ...
diff --git a/docs/04_web/02_web-components/02_grids/01_grid-pro/3-grid-pro-genesis-column.mdx b/docs/04_web/02_web-components/02_grids/01_grid-pro/3-grid-pro-genesis-column.mdx
index 0ae895007c..20363f496f 100644
--- a/docs/04_web/02_web-components/02_grids/01_grid-pro/3-grid-pro-genesis-column.mdx
+++ b/docs/04_web/02_web-components/02_grids/01_grid-pro/3-grid-pro-genesis-column.mdx
@@ -105,7 +105,7 @@ If you want to create multiple columns at once, you can use the `repeat` directi
 This is how you can implement multiple custom columns defined in the variable `myMultipleCustomColumnConfigArray`:
 
 ```html {1,7-9} title="Using repeat to create multiple columns"
-import {html, ref, repeat} from '@microsoft/fast-element';
+import {html, ref, repeat} from '@genesislcap/web-core';
 
 ...
 
diff --git a/docs/04_web/02_web-components/02_grids/02_data-grid.mdx b/docs/04_web/02_web-components/02_grids/02_data-grid.mdx
index 4d80d4a762..c1fcb80c03 100644
--- a/docs/04_web/02_web-components/02_grids/02_data-grid.mdx
+++ b/docs/04_web/02_web-components/02_grids/02_data-grid.mdx
@@ -29,10 +29,10 @@ There are two ways of using this component. We shall look at each in turn.
 
 ### Ref method
 
-1. Import `ref` from `@microsoft/fast-element`. This must be done in the same place where you are defining the structure of your template.
+1. Import `ref` from `@genesislcap/web-core`. This must be done in the same place where you are defining the structure of your template.
 
 ```typescript
-import {html, ref} from '@microsoft/fast-element';
+import {html, ref} from '@genesislcap/web-core';
 ```
 
 2. In the same file, add the following code inside the html structure to create a reference:
diff --git a/docs/04_web/02_web-components/03_interaction/04_dialog.mdx b/docs/04_web/02_web-components/03_interaction/04_dialog.mdx
index 23ac2c113b..91fa88e873 100644
--- a/docs/04_web/02_web-components/03_interaction/04_dialog.mdx
+++ b/docs/04_web/02_web-components/03_interaction/04_dialog.mdx
@@ -68,7 +68,7 @@ If you are using `foundation-zero`, then you need to import using `@genesislcap/
 After that, you need to define the local variable to be referred to, in this case `localDialog`:
 
 ```js {3}
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
     ...
     localDialog: alphaDialog;
     ...
@@ -78,7 +78,7 @@ export class TEMPLATE extends FASTElement {
 Now that you have your local variable, you can use the directive `ref` to link your component to this variable:
 
 ```html {1,5-7}
-import {... , ref} from '@microsoft/fast-element';
+import {... , ref} from '@genesislcap/web-core';
 ...
 export const yourTemplate = html<Template>`
     ...
@@ -126,7 +126,7 @@ Below we have three practical examples where we create a dialog, plus buttons to
 - Create a button to open a dialog:
 
 ```html {6}
-import {... , ref} from '@microsoft/fast-element';
+import {... , ref} from '@genesislcap/web-core';
 import {sync} from '@genesislcap/foundation-utils';
 ...
 export const yourTemplate = html<Template>`
@@ -141,7 +141,7 @@ export const yourTemplate = html<Template>`
 - Create a button inside the dialog to close it:
 
 ```html {9}
-import {... , ref} from '@microsoft/fast-element';
+import {... , ref} from '@genesislcap/web-core';
 import {sync} from '@genesislcap/foundation-utils';
 ...
 export const yourTemplate = html<Template>`
diff --git a/docs/04_web/02_web-components/03_interaction/05_dropdown-menu.mdx b/docs/04_web/02_web-components/03_interaction/05_dropdown-menu.mdx
index 01e633c94c..892d0fc3f9 100644
--- a/docs/04_web/02_web-components/03_interaction/05_dropdown-menu.mdx
+++ b/docs/04_web/02_web-components/03_interaction/05_dropdown-menu.mdx
@@ -81,7 +81,7 @@ Here is an example of how to set up a `zero-dropdown-menu` with some subitems at
 1. Create the structure of the dropdown menu
 
 ```html
-import {... , ref} import '@microsoft/fast-element';
+import {... , ref} import '@genesislcap/web-core';
 ...
     <zero-dropdown-menu ${ref('localDropdown')}></zero-dropdown-menu>
 ...
diff --git a/docs/04_web/02_web-components/03_interaction/08_menu.mdx b/docs/04_web/02_web-components/03_interaction/08_menu.mdx
index 0f780e8578..b617e2f2df 100644
--- a/docs/04_web/02_web-components/03_interaction/08_menu.mdx
+++ b/docs/04_web/02_web-components/03_interaction/08_menu.mdx
@@ -99,7 +99,7 @@ The `<alpha-menu>` and `<alpha-menu-item>`components have 3 custom events that c
 1. Create a function `functionName1()`, `functionName2()` and `functionName3()` in the class of the component:
 
 ```js {3,6,9}
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
     ...
     functionName1(){
         // Write an action here
diff --git a/docs/04_web/02_web-components/03_interaction/09_modal.mdx b/docs/04_web/02_web-components/03_interaction/09_modal.mdx
index 883378bde5..4dfdb4905c 100644
--- a/docs/04_web/02_web-components/03_interaction/09_modal.mdx
+++ b/docs/04_web/02_web-components/03_interaction/09_modal.mdx
@@ -78,7 +78,7 @@ If you are using `foundation-zero`, then you need to import using `@genesislcap/
 After that, you need to define the local variable to be referred to, in this case `localModal`:
 
 ```js {3}
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
     ...
     localModal: alphaModal;
     ...
@@ -88,7 +88,7 @@ export class TEMPLATE extends FASTElement {
 Now that you have your local variable, you can use the directive `ref` to link your component to this variable:
 
 ```html {1,5-7}
-import {... , ref} from '@microsoft/fast-element';
+import {... , ref} from '@genesislcap/web-core';
 ...
 export const yourTemplate = html<Template>`
     ...
@@ -137,7 +137,7 @@ Below we have three examples of how to use both methods:
 - Create a button to open a modal:
 
 ```html {6}
-import {... , ref} from '@microsoft/fast-element';
+import {... , ref} from '@genesislcap/web-core';
 import {sync} from '@genesislcap/foundation-utils';
 ...
 export const yourTemplate = html<Template>`
@@ -152,7 +152,7 @@ export const yourTemplate = html<Template>`
 - Create a button inside the modal to close it:
 
 ```html {9}
-import {... , ref} from '@microsoft/fast-element';
+import {... , ref} from '@genesislcap/web-core';
 import {sync} from '@genesislcap/foundation-utils';
 ...
 export const yourTemplate = html<Template>`
diff --git a/docs/04_web/02_web-components/03_interaction/12_tree-view.mdx b/docs/04_web/02_web-components/03_interaction/12_tree-view.mdx
index 55da9922cb..5cca745b05 100644
--- a/docs/04_web/02_web-components/03_interaction/12_tree-view.mdx
+++ b/docs/04_web/02_web-components/03_interaction/12_tree-view.mdx
@@ -91,7 +91,7 @@ The `<alpha-tree-view>` and `<alpha-tree-item>` components have 2 custom events
 1. Create a function `functionName1()`, `functionName2()` in the class of the component:
 
 ```js {3,6}
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
     ...
     functionName1(){
         // Write an action here
diff --git a/docs/04_web/02_web-components/04_presentation/03_banner.mdx b/docs/04_web/02_web-components/04_presentation/03_banner.mdx
index 04cfd5fa19..b90936f18e 100644
--- a/docs/04_web/02_web-components/04_presentation/03_banner.mdx
+++ b/docs/04_web/02_web-components/04_presentation/03_banner.mdx
@@ -88,7 +88,7 @@ If you are using `foundation-zero`, then you need to import using `@genesislcap/
 After that, you need to define the local variable to be referred to, in this case `localBanner`:
 
 ```js {3}
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
     ...
     localBanner: alphaBanner;
     ...
@@ -98,7 +98,7 @@ export class TEMPLATE extends FASTElement {
 2. Create a function `dismissBanner()` in the class of the component:
 
 ```js {1,5}
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
     ...
     dismissBanner(){
         this.localBanner.dismiss();
diff --git a/docs/04_web/05_micro-front-ends/02_foundation-header/02_foundation-header.mdx b/docs/04_web/05_micro-front-ends/02_foundation-header/02_foundation-header.mdx
index d7f888982b..b7c4f6df8e 100644
--- a/docs/04_web/05_micro-front-ends/02_foundation-header/02_foundation-header.mdx
+++ b/docs/04_web/05_micro-front-ends/02_foundation-header/02_foundation-header.mdx
@@ -77,7 +77,7 @@ It is possible for you to set up routing manually, but that won't be covered in
 import { Navigation } from '@genesislcap/foundation-header';
 
 @customElement({ name, template, styles })
-export class MainApplication extends FASTElement {
+export class MainApplication extends GenesisElement {
   @inject(MainRouterConfig) config!: MainRouterConfig;
   @inject(Navigation) navigation!: Navigation;
 
@@ -87,7 +87,7 @@ export class MainApplication extends FASTElement {
 ```
 
 :::tip
-If you haven't used the `inject` annotation in your application yet, you'll need to get it from the `@microsoft/fast-foundation` package.
+If you haven't used the `inject` annotation in your application yet, you'll need to get it from the `@genesislcap/web-core` package.
 :::
 
 3. Set a reference to the `navigation` object on the FAST router when you instantiate it; this enables you to set up navigation functionality from the navigation bar in the [navigation items step](#navigation-items).
@@ -101,7 +101,7 @@ const MainTemplate: ViewTemplate<MainApplication> = html`
 4. Add the `foundation-header` tag as part of the html that you set as the markup for the `defaultLayout` in your router configuration.
 
 ```javascript {3}
-export const defaultLayout = new FASTElementLayout(html`
+export const defaultLayout = new GenesisElementLayout(html`
 <div class="container">
 	<!-- show-luminance-toggle-button boolean attribute added to show that button on the navigation bar -->
 	<foundation-header show-luminance-toggle-button></foundation-header>
@@ -205,7 +205,7 @@ Implementing the functionality of the buttons is up to the client. For example:
 - Define the functionality of the event callback in the class of a class which is a parent to the router.
 
 ```javascript
-export class MainApplication extends FASTElement {
+export class MainApplication extends GenesisElement {
 
 	onMiscButtonPressed() {
 		// ... do something
diff --git a/docs/04_web/05_micro-front-ends/02_foundation-header/docs/api/foundation-header.mainstyles.md b/docs/04_web/05_micro-front-ends/02_foundation-header/docs/api/foundation-header.mainstyles.md
index 257cc437c2..a0554011b3 100644
--- a/docs/04_web/05_micro-front-ends/02_foundation-header/docs/api/foundation-header.mainstyles.md
+++ b/docs/04_web/05_micro-front-ends/02_foundation-header/docs/api/foundation-header.mainstyles.md
@@ -12,5 +12,5 @@ Base styles for the foundation-header
 **Signature:**
 
 ```typescript
-MainStyles: import("@microsoft/fast-element").ElementStyles
+MainStyles: import("@genesislcap/web-core").ElementStyles
 ```
diff --git a/docs/04_web/05_micro-front-ends/02_foundation-header/docs/api/foundation-header.navigation.selecttemplate.md b/docs/04_web/05_micro-front-ends/02_foundation-header/docs/api/foundation-header.navigation.selecttemplate.md
index b7227749e0..af6a1cf1aa 100644
--- a/docs/04_web/05_micro-front-ends/02_foundation-header/docs/api/foundation-header.navigation.selecttemplate.md
+++ b/docs/04_web/05_micro-front-ends/02_foundation-header/docs/api/foundation-header.navigation.selecttemplate.md
@@ -10,9 +10,9 @@ format: md
 **Signature:**
 
 ```typescript
-selectTemplate(): import("@microsoft/fast-element").ViewTemplate<Navigation, any>;
+selectTemplate(): import("@genesislcap/web-core").ViewTemplate<Navigation, any>;
 ```
 **Returns:**
 
-import("@microsoft/fast-element").ViewTemplate&lt;[Navigation](./foundation-header.navigation.md), any&gt;
+import("@genesislcap/web-core").ViewTemplate&lt;[Navigation](./foundation-header.navigation.md), any&gt;
 
diff --git a/docs/04_web/05_micro-front-ends/03_foundation-entity-management/docs/api/foundation-entity-management.entitymanagement.headertempalate.md b/docs/04_web/05_micro-front-ends/03_foundation-entity-management/docs/api/foundation-entity-management.entitymanagement.headertempalate.md
index 70a2ba9ce8..387608a67e 100644
--- a/docs/04_web/05_micro-front-ends/03_foundation-entity-management/docs/api/foundation-entity-management.entitymanagement.headertempalate.md
+++ b/docs/04_web/05_micro-front-ends/03_foundation-entity-management/docs/api/foundation-entity-management.entitymanagement.headertempalate.md
@@ -10,5 +10,5 @@ format: md
 **Signature:**
 
 ```typescript
-get headerTempalate(): import("@microsoft/fast-element").ViewTemplate<EntityManagement, any>;
+get headerTempalate(): import("@genesislcap/web-core").ViewTemplate<EntityManagement, any>;
 ```
diff --git a/docs/04_web/05_micro-front-ends/03_foundation-entity-management/docs/api/foundation-entity-management.entitymanagement.md b/docs/04_web/05_micro-front-ends/03_foundation-entity-management/docs/api/foundation-entity-management.entitymanagement.md
index a9a8211715..aca65e702d 100644
--- a/docs/04_web/05_micro-front-ends/03_foundation-entity-management/docs/api/foundation-entity-management.entitymanagement.md
+++ b/docs/04_web/05_micro-front-ends/03_foundation-entity-management/docs/api/foundation-entity-management.entitymanagement.md
@@ -62,7 +62,7 @@ Where:<br /> - the title of the grid is `Counterparty Management`<br /> - the na
 |  [formUiSchema](./foundation-entity-management.entitymanagement.formuischema.md) |  | any |  |
 |  [gridOptions](./foundation-entity-management.entitymanagement.gridoptions.md) |  | GridOptions | GridOptions to be passed down from application |
 |  [headerCaseType](./foundation-entity-management.entitymanagement.headercasetype.md) |  | GridProCaseType | The case type to use for the header names. If not set, the default CONSTANT\_CASE will be used. |
-|  [headerTempalate](./foundation-entity-management.entitymanagement.headertempalate.md) | <code>readonly</code> | import("@microsoft/fast-element").ViewTemplate&lt;[EntityManagement](./foundation-entity-management.entitymanagement.md), any&gt; |  |
+|  [headerTempalate](./foundation-entity-management.entitymanagement.headertempalate.md) | <code>readonly</code> | import("@genesislcap/web-core").ViewTemplate&lt;[EntityManagement](./foundation-entity-management.entitymanagement.md), any&gt; |  |
 |  [hideDelete](./foundation-entity-management.entitymanagement.hidedelete.md) |  | boolean |  |
 |  [hideEdit](./foundation-entity-management.entitymanagement.hideedit.md) |  | boolean |  |
 |  [modalPosition](./foundation-entity-management.entitymanagement.modalposition.md) |  | 'centre' \| 'left' \| 'right' | Determines where the modal dialog will appear on screen |
diff --git a/docs/04_web/05_micro-front-ends/03_foundation-entity-management/docs/api/foundation-entity-management.mainapplication.md b/docs/04_web/05_micro-front-ends/03_foundation-entity-management/docs/api/foundation-entity-management.mainapplication.md
index fe73f37154..3a0ca69f9f 100644
--- a/docs/04_web/05_micro-front-ends/03_foundation-entity-management/docs/api/foundation-entity-management.mainapplication.md
+++ b/docs/04_web/05_micro-front-ends/03_foundation-entity-management/docs/api/foundation-entity-management.mainapplication.md
@@ -11,9 +11,9 @@ format: md
 **Signature:**
 
 ```typescript
-export declare class MainApplication extends FASTElement 
+export declare class MainApplication extends GenesisElement 
 ```
-**Extends:** FASTElement
+**Extends:** GenesisElement
 
 ## Properties
 
diff --git a/docs/04_web/05_micro-front-ends/03_foundation-entity-management/docs/api/foundation-entity-management.mainapplication.selecttemplate.md b/docs/04_web/05_micro-front-ends/03_foundation-entity-management/docs/api/foundation-entity-management.mainapplication.selecttemplate.md
index c71c04ad8c..30343872dc 100644
--- a/docs/04_web/05_micro-front-ends/03_foundation-entity-management/docs/api/foundation-entity-management.mainapplication.selecttemplate.md
+++ b/docs/04_web/05_micro-front-ends/03_foundation-entity-management/docs/api/foundation-entity-management.mainapplication.selecttemplate.md
@@ -10,9 +10,9 @@ format: md
 **Signature:**
 
 ```typescript
-selectTemplate(): import("@microsoft/fast-element").ViewTemplate<MainApplication, any>;
+selectTemplate(): import("@genesislcap/web-core").ViewTemplate<MainApplication, any>;
 ```
 **Returns:**
 
-import("@microsoft/fast-element").ViewTemplate&lt;[MainApplication](./foundation-entity-management.mainapplication.md), any&gt;
+import("@genesislcap/web-core").ViewTemplate&lt;[MainApplication](./foundation-entity-management.mainapplication.md), any&gt;
 
diff --git a/docs/04_web/05_micro-front-ends/04_foundation-login/docs/api/foundation-login.definition.md b/docs/04_web/05_micro-front-ends/04_foundation-login/docs/api/foundation-login.definition.md
index d9eb91241f..f52babbe4d 100644
--- a/docs/04_web/05_micro-front-ends/04_foundation-login/docs/api/foundation-login.definition.md
+++ b/docs/04_web/05_micro-front-ends/04_foundation-login/docs/api/foundation-login.definition.md
@@ -13,7 +13,7 @@ format: md
 **Signature:**
 
 ```typescript
-definition: PartialFASTElementDefinition
+definition: PartialGenesisElementDefinition
 ```
 
 ## Remarks
diff --git a/docs/04_web/05_micro-front-ends/04_foundation-login/docs/api/foundation-login.login.md b/docs/04_web/05_micro-front-ends/04_foundation-login/docs/api/foundation-login.login.md
index ba5620273e..27d9d81925 100644
--- a/docs/04_web/05_micro-front-ends/04_foundation-login/docs/api/foundation-login.login.md
+++ b/docs/04_web/05_micro-front-ends/04_foundation-login/docs/api/foundation-login.login.md
@@ -17,9 +17,9 @@ Defines the login class which handles account authentication from the front-end
 **Signature:**
 
 ```typescript
-export declare class Login extends FASTElement 
+export declare class Login extends GenesisElement 
 ```
-**Extends:** FASTElement
+**Extends:** GenesisElement
 
 ## Remarks
 
diff --git a/docs/04_web/05_micro-front-ends/04_foundation-login/docs/api/foundation-login.styles.md b/docs/04_web/05_micro-front-ends/04_foundation-login/docs/api/foundation-login.styles.md
index 86591f8b03..7962f53918 100644
--- a/docs/04_web/05_micro-front-ends/04_foundation-login/docs/api/foundation-login.styles.md
+++ b/docs/04_web/05_micro-front-ends/04_foundation-login/docs/api/foundation-login.styles.md
@@ -10,7 +10,7 @@ format: md
 **Signature:**
 
 ```typescript
-styles: (options: TemplateOptions) => import("@microsoft/fast-element").ElementStyles
+styles: (options: TemplateOptions) => import("@genesislcap/web-core").ElementStyles
 ```
 
 ## Example
diff --git a/docs/04_web/05_micro-front-ends/04_foundation-login/docs/api/foundation-login.template.md b/docs/04_web/05_micro-front-ends/04_foundation-login/docs/api/foundation-login.template.md
index 3977804987..a47ac22f44 100644
--- a/docs/04_web/05_micro-front-ends/04_foundation-login/docs/api/foundation-login.template.md
+++ b/docs/04_web/05_micro-front-ends/04_foundation-login/docs/api/foundation-login.template.md
@@ -11,5 +11,5 @@ format: md
 **Signature:**
 
 ```typescript
-template: (options: TemplateOptions) => import("@microsoft/fast-element").ViewTemplate<Login, any>
+template: (options: TemplateOptions) => import("@genesislcap/web-core").ViewTemplate<Login, any>
 ```
diff --git a/docs/04_web/06_testing/docs/api/foundation-testing.createcomponentsuite.md b/docs/04_web/06_testing/docs/api/foundation-testing.createcomponentsuite.md
index 5d88a80e57..09ecfbfc3e 100644
--- a/docs/04_web/06_testing/docs/api/foundation-testing.createcomponentsuite.md
+++ b/docs/04_web/06_testing/docs/api/foundation-testing.createcomponentsuite.md
@@ -69,7 +69,7 @@ import { Service } from './service';
   name: 'test-element',
   template: html`<slot></slot>`,
 })
-class TestElement extends FASTElement {}
+class TestElement extends GenesisElement {}
 const mocks = [...];
 const Suite = createComponentSuite<TestElement>('Service', 'test-element', null, mocks);
 // test cases...
@@ -86,7 +86,7 @@ Suite('Service.x does something expected', async ({ container }) => {
 You can optionally add the service to the test element for lookup convenience, but this is not required.
 
 ```ts
-class TestElement extends FASTElement {
+class TestElement extends GenesisElement {
   @Service service: Service;
 }
 Suite('Element has service injected', async ({ element }) => {
diff --git a/docs/04_web/09_filters/01_foundation-filters.mdx b/docs/04_web/09_filters/01_foundation-filters.mdx
index be9768e4a4..3a9fb3c6f0 100644
--- a/docs/04_web/09_filters/01_foundation-filters.mdx
+++ b/docs/04_web/09_filters/01_foundation-filters.mdx
@@ -120,7 +120,7 @@ import { ClientFilterRunner } from '@genesislcap/foundation-filters';
     </template>
   `,
 })
-class RunnerExample extends FASTElement {
+class RunnerExample extends GenesisElement {
   @ClientFilterRunner runner: ClientFilterRunner;
   /**
    * This getter will remain reactive to any observable state each filter may use. Filters can be defined with strong
diff --git a/docs/04_web/10_dynamic-layout/10_foundation-layout.mdx b/docs/04_web/10_dynamic-layout/10_foundation-layout.mdx
index 0190d55ed3..5b0827d4ef 100644
--- a/docs/04_web/10_dynamic-layout/10_foundation-layout.mdx
+++ b/docs/04_web/10_dynamic-layout/10_foundation-layout.mdx
@@ -524,7 +524,7 @@ interface Position {
 	symbol: string;
 }
 
-class Commodities extends FASTElement {
+class Commodities extends GenesisElement {
 	positions: Position[] // Not @observable - see following section
 
 	...
@@ -566,7 +566,7 @@ Using the `when` directive:
 	name: 'my-element',
 	template,
 })
-class Analytics extends FASTElement {
+class Analytics extends GenesisElement {
 	showIndexFunds = true; // not @observable
 }
 
@@ -717,7 +717,7 @@ export const template = html<ContainedExample>`
   name: 'contained-example',
   template,
 })
-export class ContainedExample extends FASTElement {
+export class ContainedExample extends GenesisElement {
   containedExampleLayout: FoundationLayout;
   private _addedPaneCount = 0;
 
@@ -1009,7 +1009,7 @@ The following is invalid:
 	name: 'my-element',
 	template,
 })
-class Analytics extends FASTElement {
+class Analytics extends GenesisElement {
 	@observable showIndexFunds = true;
 
 	toggleShowIndexFunds() {
@@ -1083,7 +1083,7 @@ export const exampleComponentTemplate = html<ExampleComponent>`
   name: 'example-component',
   template: exampleComponentTemplate,
 })
-export class ExampleComponent extends FASTElement {
+export class ExampleComponent extends GenesisElement {
   checkbox: Checkbox;
 	doSomething() { } // do something important
 }
@@ -1143,7 +1143,7 @@ Say you have a component which has to initialise a resource-heavy or long-awaite
 @customElement({
   name: 'mock-connected',
 })
-export class MockConnected extends FASTElement {
+export class MockConnected extends GenesisElement {
   @observable resource = '';
 
   async connectedCallback(): Promise<void> {
@@ -1166,7 +1166,7 @@ Use `LifecycleMixin` to access properties on the class, which can be used to run
 @customElement({
   name: 'mock-connected',
 })
-export class MockConnected extends LifecycleMixin(FASTElement) {
+export class MockConnected extends LifecycleMixin(GenesisElement) {
   @observable resource = '';
 
   async connectedCallback(): Promise<void> {
@@ -1208,7 +1208,7 @@ Consider the following example, where multiple bits of functionality are being g
 @customElement({
   name: 'mock-connected',
 })
-export class MockConnected extends LifecycleMixin(FASTElement) {
+export class MockConnected extends LifecycleMixin(GenesisElement) {
   @observable resource = '';
 
   async connectedCallback(): Promise<void> {
diff --git a/docs/04_web/10_dynamic-layout/docs/api/foundation-layout.foundationlayoutcomponents.md b/docs/04_web/10_dynamic-layout/docs/api/foundation-layout.foundationlayoutcomponents.md
index 12f07187be..5752e6269e 100644
--- a/docs/04_web/10_dynamic-layout/docs/api/foundation-layout.foundationlayoutcomponents.md
+++ b/docs/04_web/10_dynamic-layout/docs/api/foundation-layout.foundationlayoutcomponents.md
@@ -13,28 +13,28 @@ Registration object to register the layout with your design system.
 
 ```typescript
 foundationLayoutComponents: {
-    foundationLayout: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
+    foundationLayout: (overrideDefinition?: import("@genesislcap/web-core").OverrideFoundationElementDefinition<{
         baseName: string;
-        styles: import("@microsoft/fast-element").ElementStyles;
-        template: import("@microsoft/fast-element").ViewTemplate<import("./layout-main").FoundationLayout, any>;
-    }>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
+        styles: import("@genesislcap/web-core").ElementStyles;
+        template: import("@genesislcap/web-core").ViewTemplate<import("./layout-main").FoundationLayout, any>;
+    }>) => import("@genesislcap/web-core").FoundationElementRegistry<{
         baseName: string;
-        styles: import("@microsoft/fast-element").ElementStyles;
-        template: import("@microsoft/fast-element").ViewTemplate<import("./layout-main").FoundationLayout, any>;
+        styles: import("@genesislcap/web-core").ElementStyles;
+        template: import("@genesislcap/web-core").ViewTemplate<import("./layout-main").FoundationLayout, any>;
     }, typeof import("./layout-main").FoundationLayout>;
-    foundationLayoutRegion: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
+    foundationLayoutRegion: (overrideDefinition?: import("@genesislcap/web-core").OverrideFoundationElementDefinition<{
         baseName: string;
-        template: import("@microsoft/fast-element").ViewTemplate<any, any>;
-    }>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
+        template: import("@genesislcap/web-core").ViewTemplate<any, any>;
+    }>) => import("@genesislcap/web-core").FoundationElementRegistry<{
         baseName: string;
-        template: import("@microsoft/fast-element").ViewTemplate<any, any>;
+        template: import("@genesislcap/web-core").ViewTemplate<any, any>;
     }, typeof import("./layout-region").FoundationLayoutRegion>;
-    foundationLayoutItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
+    foundationLayoutItem: (overrideDefinition?: import("@genesislcap/web-core").OverrideFoundationElementDefinition<{
         baseName: string;
-        template: import("@microsoft/fast-element").ViewTemplate<any, any>;
-    }>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
+        template: import("@genesislcap/web-core").ViewTemplate<any, any>;
+    }>) => import("@genesislcap/web-core").FoundationElementRegistry<{
         baseName: string;
-        template: import("@microsoft/fast-element").ViewTemplate<any, any>;
+        template: import("@genesislcap/web-core").ViewTemplate<any, any>;
     }, typeof import("./layout-item").FoundationLayoutItem>;
     register(container?: Container, ...rest: any[]): void;
 }
diff --git a/docs/04_web/10_dynamic-layout/docs/api/foundation-layout.layoutcomponentwithstate.md b/docs/04_web/10_dynamic-layout/docs/api/foundation-layout.layoutcomponentwithstate.md
index 2e8289f9f5..c5fb40b500 100644
--- a/docs/04_web/10_dynamic-layout/docs/api/foundation-layout.layoutcomponentwithstate.md
+++ b/docs/04_web/10_dynamic-layout/docs/api/foundation-layout.layoutcomponentwithstate.md
@@ -31,7 +31,7 @@ type ComponentState = {
   foo: string;
 }
 \@customElement({ name: 'my-component' })
-export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {
+export class MyComponent extends GenesisElement implements LayoutComponentWithState<ComponentState> {
   \@observable foo: string;
   private fooCache: ComponentState | null;
 
@@ -61,7 +61,7 @@ If you are using the autosave functionality you should inform the layout system
 
 ```
 // Same component as above
-export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {
+export class MyComponent extends GenesisElement implements LayoutComponentWithState<ComponentState> {
  // can use xChanged pattern as `foo` was declared observable
  fooChanged() {
    this.$emit(LayoutReceiveEvents.autosave);
diff --git a/docs/04_web/10_dynamic-layout/docs/api/foundation-layout.layoutstyles.md b/docs/04_web/10_dynamic-layout/docs/api/foundation-layout.layoutstyles.md
index f82d379626..703fda3e33 100644
--- a/docs/04_web/10_dynamic-layout/docs/api/foundation-layout.layoutstyles.md
+++ b/docs/04_web/10_dynamic-layout/docs/api/foundation-layout.layoutstyles.md
@@ -12,7 +12,7 @@ format: md
 **Signature:**
 
 ```typescript
-layoutStyles: import("@microsoft/fast-element").ElementStyles
+layoutStyles: import("@genesislcap/web-core").ElementStyles
 ```
 
 ## Remarks
diff --git a/docs/04_web/10_dynamic-layout/docs/api/foundation-layout.layouttemplate.md b/docs/04_web/10_dynamic-layout/docs/api/foundation-layout.layouttemplate.md
index 0af5d695a8..3a6d53ac1a 100644
--- a/docs/04_web/10_dynamic-layout/docs/api/foundation-layout.layouttemplate.md
+++ b/docs/04_web/10_dynamic-layout/docs/api/foundation-layout.layouttemplate.md
@@ -12,7 +12,7 @@ format: md
 **Signature:**
 
 ```typescript
-layoutTemplate: import("@microsoft/fast-element").ViewTemplate<FoundationLayout, any>
+layoutTemplate: import("@genesislcap/web-core").ViewTemplate<FoundationLayout, any>
 ```
 
 ## Remarks
diff --git a/docs/04_web/12_forms/02_forms-filters.mdx b/docs/04_web/12_forms/02_forms-filters.mdx
index 1ff285a507..383b096513 100644
--- a/docs/04_web/12_forms/02_forms-filters.mdx
+++ b/docs/04_web/12_forms/02_forms-filters.mdx
@@ -158,9 +158,9 @@ Form;
 2. In the same file, create an `@observable` variable to store the criteria used in the `foundation-filter`:
 
 ```ts {1,5}
-import {... , observable} from '@microsoft/fast-element';
+import {... , observable} from '@genesislcap/web-core';
 ...
-export class TEMPLATE extends FASTElement {
+export class TEMPLATE extends GenesisElement {
 ...
   @observable allTradesFilters: string
 ...
diff --git a/docs/06_operations/14_release-notes/05_previous.mdx b/docs/06_operations/14_release-notes/05_previous.mdx
index e979e365d7..c10850ad17 100644
--- a/docs/06_operations/14_release-notes/05_previous.mdx
+++ b/docs/06_operations/14_release-notes/05_previous.mdx
@@ -224,7 +224,7 @@ This release maps to 10.5.0 of `foundation ui` packages.
 ```
 import { FontStyle, FontWeight } from '@genesislcap/foundation-utils';
 import { mixinRobotoFont, bodyFont, robotoFontFamily, loadRobotoFontFaces } from '@genesislcap/foundation-zero';
-import { cssPartial } from '@microsoft/fast-element';
+import { cssPartial } from '@genesislcap/web-core';
 
 /**
  * Ensure Roboto fonts are loaded in the document head.